import { useQuery, useQueryClient } from "@tanstack/react-query";
import { apiRequest, getQueryFn } from "@/lib/queryClient";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { toast } from "@/hooks/use-toast";

type Ticket = {
  ticket_id: string;
  name: string;
  email: string;
  subject: string;
  message: string;
  status: string;
  created_at?: string | null;
  updated_at?: string | null;
};

type TicketsResponse = {
  page: number;
  page_size: number;
  total: number;
  tickets: Ticket[];
};

export default function AdminSupportTickets() {
  const queryClient = useQueryClient();
  const { data, isLoading } = useQuery<TicketsResponse>({
    queryKey: ["admin/support-tickets"],
    queryFn: getQueryFn<TicketsResponse>({ on401: "throw" }),
  });

  const handleDelete = async (ticketId: string) => {
    const confirmed = window.confirm("Delete this ticket? This cannot be undone.");
    if (!confirmed) return;
    try {
      await apiRequest("DELETE", `admin/support-tickets/${ticketId}`);
      toast({ title: "Ticket deleted" });
      queryClient.invalidateQueries({ queryKey: ["admin/support-tickets"] });
    } catch (err: any) {
      toast({ title: "Delete failed", description: err?.message || "Try again." });
    }
  };

  if (isLoading) {
    return <div className="text-muted-foreground">Loading tickets...</div>;
  }

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-semibold">Support Tickets</h1>
          <p className="text-sm text-muted-foreground">
            All customer support requests.
          </p>
        </div>
        <Badge variant="outline">{data?.total ?? 0} total</Badge>
      </div>

      <div className="rounded-2xl border border-border/60 bg-card/70 p-4">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Ticket ID</TableHead>
              <TableHead>Name</TableHead>
              <TableHead>Email</TableHead>
              <TableHead>Details</TableHead>
              <TableHead>Status</TableHead>
              <TableHead>Created</TableHead>
              <TableHead className="text-right">Action</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {data?.tickets?.length ? (
              data.tickets.map((ticket) => (
                <TableRow key={ticket.ticket_id} className="align-top">
                  <TableCell className="font-mono text-xs break-all max-w-[140px]">
                    {ticket.ticket_id}
                  </TableCell>
                  <TableCell className="font-medium">{ticket.name}</TableCell>
                  <TableCell className="text-sm text-muted-foreground break-all">
                    {ticket.email}
                  </TableCell>
                  <TableCell className="max-w-[360px]">
                    <div className="text-sm font-semibold break-words">
                      {ticket.subject}
                    </div>
                    <details className="mt-2 text-xs text-muted-foreground">
                      <summary className="cursor-pointer select-none">View message</summary>
                      <div className="mt-2 whitespace-pre-wrap break-words">
                        {ticket.message}
                      </div>
                    </details>
                  </TableCell>
                  <TableCell>
                    <Badge variant="secondary">{ticket.status}</Badge>
                  </TableCell>
                  <TableCell className="text-xs text-muted-foreground">
                    {ticket.created_at ? new Date(ticket.created_at).toLocaleString() : "-"}
                  </TableCell>
                  <TableCell className="text-right">
                    <Button
                      variant="destructive"
                      size="sm"
                      onClick={() => handleDelete(ticket.ticket_id)}
                    >
                      Delete
                    </Button>
                  </TableCell>
                </TableRow>
              ))
            ) : (
              <TableRow>
                <TableCell colSpan={7} className="text-center text-muted-foreground">
                  No tickets yet.
                </TableCell>
              </TableRow>
            )}
          </TableBody>
        </Table>
      </div>
    </div>
  );
}