import Link from "next/link";
import { ChevronRight, LifeBuoy, MessagesSquare } from "lucide-react";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { Card } from "@/components/ui/card";
import { EmptyState } from "@/components/shared/empty-state";
import { StatusBadge } from "@/components/shared/status-badge";
import { cn } from "@/lib/utils";
import { ticketsTexts as tx } from "@/lib/i18n/tickets";
import type { TicketListItemDTO } from "./types";

export function TicketList({ tickets }: { tickets: TicketListItemDTO[] }) {
  if (tickets.length === 0) {
    return (
      <EmptyState
        icon={LifeBuoy}
        title={tx.emptyTitle}
        hint={tx.emptyHint}
        className="bg-card"
      />
    );
  }

  return (
    <Card className="overflow-hidden rounded-2xl border py-0 shadow-sm ring-0">
      <Table>
        <TableHeader>
          <TableRow className="bg-muted/40 hover:bg-muted/40">
            <TableHead className="w-[110px] px-4">{tx.colId}</TableHead>
            <TableHead className="px-4">{tx.colSubject}</TableHead>
            <TableHead className="w-[130px] px-4">{tx.colStatus}</TableHead>
            <TableHead className="w-[190px] px-4">{tx.colLastUpdate}</TableHead>
            <TableHead className="w-10 px-4" />
          </TableRow>
        </TableHeader>
        <TableBody>
          {tickets.map((ticket) => (
            <TableRow key={ticket.id} className="group">
              <TableCell className="px-4 py-3 align-top">
                <Link
                  href={`/tickets/${ticket.id}`}
                  className="font-mono text-xs text-muted-foreground transition-colors hover:text-foreground"
                  title={ticket.id}
                >
                  {ticket.ref}
                </Link>
              </TableCell>

              <TableCell className="max-w-0 px-4 py-3 align-top whitespace-normal">
                <Link
                  href={`/tickets/${ticket.id}`}
                  className="flex items-start gap-2 transition-colors hover:text-primary"
                >
                  {ticket.hasNewReply ? (
                    <span
                      aria-label={tx.answeredIndicator}
                      title={tx.answeredIndicator}
                      className="mt-1.5 size-2 shrink-0 rounded-full bg-blue-600 dark:bg-blue-400"
                    />
                  ) : (
                    <span className="mt-1.5 size-2 shrink-0" />
                  )}
                  <span className="min-w-0">
                    <span
                      className={cn(
                        "block truncate text-sm",
                        ticket.hasNewReply ? "font-semibold" : "font-medium",
                      )}
                    >
                      {ticket.subject}
                    </span>
                    <span className="mt-0.5 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-xs text-muted-foreground">
                      <span>{ticket.category}</span>
                      {ticket.subcategory ? (
                        <>
                          <span aria-hidden>·</span>
                          <span>{ticket.subcategory}</span>
                        </>
                      ) : null}
                      {ticket.orderId ? (
                        <>
                          <span aria-hidden>·</span>
                          <span className="font-mono">#{ticket.orderId}</span>
                        </>
                      ) : null}
                      <span aria-hidden>·</span>
                      <span className="inline-flex items-center gap-1">
                        <MessagesSquare className="size-3" />
                        {ticket.messageCount}
                      </span>
                    </span>
                  </span>
                </Link>
              </TableCell>

              <TableCell className="px-4 py-3 align-top">
                <StatusBadge status={ticket.status} />
              </TableCell>

              <TableCell className="px-4 py-3 align-top">
                <div className="text-sm">{ticket.updatedAtLabel}</div>
                <div className="text-xs text-muted-foreground">{ticket.updatedAgo}</div>
              </TableCell>

              <TableCell className="px-4 py-3 align-top">
                <Link
                  href={`/tickets/${ticket.id}`}
                  aria-label={tx.openTicket}
                  className="inline-flex text-muted-foreground transition-colors group-hover:text-primary"
                >
                  <ChevronRight className="size-4" />
                </Link>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </Card>
  );
}

export default TicketList;