import { Add } from "iconsax-react";
import { type FC } from "react";
import { Link } from "react-router-dom";
import type DateObject from "react-date-object";
import { useTranslation } from "react-i18next";
import { Pages } from "../../../../config/Pages";
import UserAvatar from "../UserAvatar";
import { formatDateRange } from "./date/utils";
import type { TaskLabel } from "./labels/types";
import type { TaskUser } from "./users/types";

type Props = {
  selectedLabels: TaskLabel[];
  selectedUsers: TaskUser[];
  startDate: DateObject | null;
  endDate: DateObject | null;
  ticketId?: string | null;
  onAddLabel?: () => void;
  onAddUser?: () => void;
};

const TaskDetailMetadataPreview: FC<Props> = ({ selectedLabels, selectedUsers, startDate, endDate, ticketId, onAddLabel, onAddUser }) => {
  const { t } = useTranslation("global");
  const dateLabel = formatDateRange(startDate, endDate);

  return (
    <div className="mt-5 sm:mt-7 grid grid-cols-[auto_auto] gap-x-6 gap-y-4 sm:flex sm:flex-wrap sm:gap-x-10 sm:gap-y-4">
      <div className="min-w-0">
        <div className="text-xs font-medium mb-2">{t("taskmanager.task_detail.labels")}</div>
        <div className="flex items-center gap-2 flex-wrap">
          {selectedLabels.map((label) => (
            <span
              key={label.id}
              className="inline-flex items-center h-7 px-3 rounded-lg text-xs font-medium"
              style={{ backgroundColor: label.color }}
            >
              {label.title}
            </span>
          ))}
          <button
            type="button"
            onClick={onAddLabel}
            className="size-7 rounded-lg border border-[#D0D0D0] bg-white/60 flex items-center justify-center cursor-pointer shrink-0"
            aria-label={t("taskmanager.task_detail.new_label")}
          >
            <Add
              size={14}
              color="#292D32"
            />
          </button>
        </div>
      </div>

      <div className="min-w-0">
        <div className="text-xs font-medium mb-2">{t("taskmanager.users")}</div>
        <div className="flex items-center gap-2 flex-wrap">
          {selectedUsers.map((user) => (
            <UserAvatar key={user.id} src={user.avatar} alt={user.name} className="size-8" />
          ))}
          <button
            type="button"
            onClick={onAddUser}
            className="size-7 rounded-full border border-[#D0D0D0] bg-white/60 flex items-center justify-center cursor-pointer shrink-0"
            aria-label={t("taskmanager.users")}
          >
            <Add
              size={14}
              color="#292D32"
            />
          </button>
        </div>
      </div>

      <div className="col-span-2 sm:col-span-1 min-w-0">
        <div className="text-xs font-medium mb-2">{t("taskmanager.task_detail.date")}</div>
        {dateLabel ? (
          <span className="inline-flex items-center min-h-7 px-3 py-1 rounded-lg text-xs font-medium bg-[#E8E8E8] text-[#292D32] whitespace-nowrap">
            {dateLabel}
          </span>
        ) : null}
      </div>

      {ticketId ? (
        <div className="col-span-2 sm:col-span-1 min-w-0">
          <div className="text-xs font-medium mb-2">{t("taskmanager.task_detail.related_ticket")}</div>
          <Link
            to={Pages.ticket.detail + ticketId}
            className="inline-flex items-center min-h-7 px-3 py-1 rounded-lg text-xs font-medium bg-[#E8E8E8] text-primary hover:underline whitespace-nowrap"
          >
            {t("taskmanager.task_detail.view_ticket")}
          </Link>
        </div>
      ) : null}
    </div>
  );
};

export default TaskDetailMetadataPreview;
