import { Calendar, Paperclip2, Profile2User, Tag, TickSquare, type Icon } from "iconsax-react";
import { type FC, type ReactNode, useRef } from "react";
import { useTranslation } from "react-i18next";
import TaskDetailPopoverPanel from "./TaskDetailPopoverPanel";
import type { TaskDetailTab } from "./types";

type TabItem = {
  id: TaskDetailTab;
  icon: Icon;
  labelKey: string;
};

const TABS: TabItem[] = [
  { id: "labels", icon: Tag, labelKey: "taskmanager.task_detail.labels" },
  { id: "users", icon: Profile2User, labelKey: "taskmanager.task_detail.user_management" },
  { id: "checklist", icon: TickSquare, labelKey: "taskmanager.task_detail.checklist" },
  { id: "attachment", icon: Paperclip2, labelKey: "taskmanager.task_detail.attachment" },
  { id: "date", icon: Calendar, labelKey: "taskmanager.task_detail.date_settings" },
];

type Props = {
  activeTab: TaskDetailTab | null;
  onTabChange: (tab: TaskDetailTab) => void;
  labelsPopover?: ReactNode;
  usersPopover?: ReactNode;
  checklistPopover?: ReactNode;
  attachmentPopover?: ReactNode;
  datePopover?: ReactNode;
};

const POPOVER_TABS = new Set<TaskDetailTab>(["labels", "users", "checklist", "attachment", "date"]);

type PopoverTab = "labels" | "users" | "checklist" | "attachment" | "date";

const TaskDetailActionBar: FC<Props> = ({ activeTab, onTabChange, labelsPopover, usersPopover, checklistPopover, attachmentPopover, datePopover }) => {
  const { t } = useTranslation("global");
  const anchorRefs = useRef<Record<PopoverTab, { current: HTMLElement | null }>>({
    labels: { current: null },
    users: { current: null },
    checklist: { current: null },
    attachment: { current: null },
    date: { current: null },
  });

  const popoverByTab: Record<PopoverTab, ReactNode> = {
    labels: labelsPopover,
    users: usersPopover,
    checklist: checklistPopover,
    attachment: attachmentPopover,
    date: datePopover,
  };

  return (
    <>
      <div className="flex flex-wrap items-center gap-2">
        {TABS.map(({ id, icon: Icon, labelKey }) => {
          const isActive = activeTab === id;
          const hasPopover = POPOVER_TABS.has(id);

          return (
            <div
              key={id}
              ref={(element) => {
                if (!hasPopover) return;
                anchorRefs.current[id as PopoverTab].current = element;
              }}
            >
              <button
                type="button"
                onClick={() => onTabChange(id)}
                className={`flex items-center gap-1.5 border rounded-lg px-3 py-2 text-[11px] cursor-pointer transition-colors ${isActive ? "bg-[#4A4A4A] text-white border-transparent" : "bg-white/50 text-[#292D32] border-white"}`}
              >
                <Icon size={16} color={isActive ? "#FFFFFF" : "#292D32"} />
                <span className="hidden sm:inline">{t(labelKey)}</span>
              </button>
            </div>
          );
        })}
      </div>

      {(Object.keys(popoverByTab) as PopoverTab[]).map((tab) =>
        popoverByTab[tab] ? (
          <TaskDetailPopoverPanel key={tab} anchorRef={anchorRefs.current[tab]}>
            {popoverByTab[tab]}
          </TaskDetailPopoverPanel>
        ) : null,
      )}
    </>
  );
};

export default TaskDetailActionBar;