import { type FC } from "react";
import { InfoCircle } from "iconsax-react";
import { clx } from "@/helpers/utils";
import { t } from "@/locale";
import type { TicketDetailType } from "./types/TicketTypes";
import { formatDate, getStatusClass, getStatusLabel } from "./detailUtils";

export type TicketInfoSidebarProps = {
    ticket: TicketDetailType;
};

type ExtendedTicketFields = {
    numericId?: string;
    assignedTo?: { firstName?: string; lastName?: string };
    category?: { title?: string };
    priority?: string;
};

const TicketInfoSidebar: FC<TicketInfoSidebarProps> = ({ ticket }) => {
    const status = ticket.status?.toUpperCase() ?? "";
    const statusLabel = getStatusLabel(ticket.status);
    const extendedTicket = ticket as TicketDetailType & ExtendedTicketFields;

    const infoRows: { label: string; value: string }[] = [
        { label: t("ticket.ticket_number"), value: extendedTicket.numericId ?? ticket.id },
        { label: t("ticket.date"), value: formatDate(ticket.createdAt) },
    ];
    if (extendedTicket.assignedTo) {
        const name = [extendedTicket.assignedTo.firstName, extendedTicket.assignedTo.lastName]
            .filter(Boolean)
            .join(" ");
        if (name) infoRows.push({ label: t("ticket.asignto"), value: name });
    }
    if (extendedTicket.category?.title) {
        infoRows.push({ label: t("ticket.category"), value: extendedTicket.category.title });
    }
    if (extendedTicket.priority) {
        const priorityLabel =
            extendedTicket.priority === "low"
                ? t("ticket.low")
                : extendedTicket.priority === "medium"
                    ? t("ticket.medium")
                    : t("ticket.high");
        infoRows.push({ label: t("ticket.priority"), value: priorityLabel });
    }

    return (
        <div
            className={clx(
                "bg-white p-5 rounded-3xl",
                status === "CLOSED" ? "mt-0" : "mt-6"
            )}
        >
            <div className="flex justify-between items-center gap-3">
                <span className="text-sm font-medium">{t("ticket.info_ticket")}</span>
                <span
                    className={clx(
                        "shrink-0 h-7 px-3 rounded-xl flex items-center text-xs font-medium",
                        getStatusClass(ticket.status)
                    )}
                >
                    {statusLabel}
                </span>
            </div>
            <dl className="mt-5 space-y-4 text-xs">
                {infoRows.map(({ label, value }) => (
                    <div key={label} className="flex justify-between gap-3 items-baseline">
                        <dt className="text-description shrink-0">{label}</dt>
                        <dd className="dltr text-left font-medium min-w-0 truncate" title={value}>
                            {value}
                        </dd>
                    </div>
                ))}
            </dl>
            <div className="mt-6 pt-4 border-t border-border flex items-center gap-2 text-xs text-description">
                <InfoCircle size={18} className="shrink-0" />
                <span>{t("ticket.update_sms")}</span>
            </div>
        </div>
    );
};

export default TicketInfoSidebar;