import Link from "next/link";
import { Table, Td, Th, StatusBadge, EmptyState } from "@/components/ui";
import { formatDateTime } from "@/lib/utils";
import { isOverdue } from "@/lib/domain/ticket-workflow";
import type { TicketStatus } from "@/lib/domain/enums";

export interface TicketRow {
  id: string;
  number: number;
  subject: string;
  priority: string;
  status: string;
  slaDueAt: Date | null;
  site: { name: string };
}

export function TicketList({ tickets, emptyTitle = "No tickets", hrefBase }: { tickets: TicketRow[]; emptyTitle?: string; hrefBase?: string }) {
  if (tickets.length === 0) return <EmptyState title={emptyTitle} description="Nothing to show here right now." />;
  return (
    <Table>
      <thead>
        <tr>
          <Th>Ticket</Th>
          <Th>Site</Th>
          <Th>Priority</Th>
          <Th>Status</Th>
          <Th>SLA</Th>
        </tr>
      </thead>
      <tbody>
        {tickets.map((t) => (
          <tr key={t.id}>
            <Td>
              <span className="text-muted-foreground">TKT-{t.number}</span>{" "}
              {hrefBase ? <Link href={`${hrefBase}/${t.id}`} className="hover:underline">{t.subject}</Link> : t.subject}
            </Td>
            <Td>{t.site.name}</Td>
            <Td><StatusBadge value={t.priority} /></Td>
            <Td><StatusBadge value={t.status} /></Td>
            <Td className={isOverdue({ status: t.status as TicketStatus, slaDueAt: t.slaDueAt }) ? "text-danger" : undefined}>
              {formatDateTime(t.slaDueAt)}
            </Td>
          </tr>
        ))}
      </tbody>
    </Table>
  );
}