"use client";

import { TableIconButton } from "@/components/dashboard/home/table-icon-button";
import { Button } from "@/components/ui/button";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { cn } from "@/lib/utils";
import { Eye, Mail, MessageCircle, Trash2 } from "lucide-react";
import { useLocale, useTranslations } from "next-intl";
import { TicketStatusBadge } from "./ticket-status-badge";
import type {
  DashboardTicketItem,
  TicketReplyChannel,
} from "./tickets-types";

interface TicketsTableProps {
  data: DashboardTicketItem[];
  page: number;
  perPage: number;
  className?: string;
  onPreviewTicket: (id: number) => void;
  onDeleteTicket: (id: number) => void;
  onReplyByChannel: (id: number, channel: TicketReplyChannel) => void;
}

function getDisplayPhone(ticket: DashboardTicketItem) {
  return `${ticket.country_dial_code ?? ""}${ticket.phone ?? ""}`;
}

function getTypeLabel(ticket: DashboardTicketItem) {
  return ticket.enquiry_type?.name ?? ticket.type;
}

export function TicketsTable({
  data,
  page,
  perPage,
  className,
  onPreviewTicket,
  onDeleteTicket,
  onReplyByChannel,
}: TicketsTableProps) {
  const t = useTranslations("dashboard.tickets.table");
  const locale = useLocale();
  const formatDate = (value: string) =>
    new Intl.DateTimeFormat(locale === "ar" ? "ar-SA" : "en-US", {
      day: "numeric",
      month: "numeric",
      year: "numeric",
      hour: "numeric",
      minute: "2-digit",
    }).format(new Date(value));
  const tCommon = useTranslations("common");

  if (!data.length) {
    return (
      <div className="flex h-52 items-center justify-center text-sm text-muted-foreground">
        {tCommon("noResults")}
      </div>
    );
  }

  return (
    <div className={cn("w-full overflow-x-auto", className)}>
      <Table className="min-w-[1040px] border-collapse bg-card">
        <TableHeader>
          <TableRow className="border-b border-border bg-highlights-bg hover:bg-highlights-bg">
            <TableHead className="h-12 w-14 px-4 text-center text-sm font-bold text-foreground">
              #
            </TableHead>
            <TableHead className="h-12 w-[150px] px-4 text-center text-sm font-bold text-foreground">
              {t("headers.date")}
            </TableHead>
            <TableHead className="h-12 w-[150px] px-4 text-center text-sm font-bold text-foreground">
              {t("headers.type")}
            </TableHead>
            <TableHead className="h-12 w-[200px] px-4 text-center text-sm font-bold text-foreground">
              {t("headers.name")}
            </TableHead>
            <TableHead className="h-12 w-[220px] px-4 text-center text-sm font-bold text-foreground">
              {t("headers.email")}
            </TableHead>
            <TableHead className="h-12 w-[180px] px-4 text-center text-sm font-bold text-foreground">
              {t("headers.phone")}
            </TableHead>
            <TableHead className="h-12 w-[120px] px-4 text-center text-sm font-bold text-foreground">
              {t("headers.status")}
            </TableHead>
            <TableHead className="h-12 w-[150px] px-4 text-center text-sm font-bold text-foreground">
              {t("headers.replyBy")}
            </TableHead>
            <TableHead className="h-12 w-[150px] px-4 text-center text-sm font-bold text-foreground">
              {t("headers.settings")}
            </TableHead>
          </TableRow>
        </TableHeader>

        <TableBody>
          {data.map((ticket, index) => {
            const rowIndex = (page - 1) * perPage + index + 1;

            return (
              <TableRow
                key={ticket.id}
                className="h-[72px] border-b border-divider bg-card hover:bg-card"
              >
                <TableCell className="px-4 text-center text-sm">{rowIndex}</TableCell>
                <TableCell className="px-4 text-center text-sm text-foreground">
                  {formatDate(ticket.created_at)}
                </TableCell>
                <TableCell className="px-4 text-center text-sm text-foreground">
                  {getTypeLabel(ticket)}
                </TableCell>
                <TableCell className="px-4 text-center text-sm text-foreground">
                  {ticket.name}
                </TableCell>
                <TableCell className="px-4 text-center text-sm text-foreground">
                  {ticket.email}
                </TableCell>
                <TableCell className="px-4 text-center text-sm text-foreground">
                  {getDisplayPhone(ticket)}
                </TableCell>
                <TableCell className="px-4 text-center">
                  <TicketStatusBadge status={ticket.status} />
                </TableCell>
                <TableCell className="px-4 text-center">
                  <div className="flex items-center justify-center gap-3">
                    <Button
                      type="button"
                      variant="outline"
                      size="icon"
                      aria-label={t("actions.replyByEmail")}
                      className="h-8 w-8 rounded-[10px] border-border text-destructive"
                      onClick={() => onReplyByChannel(ticket.id, "gmail")}
                    >
                      <Mail className="h-4 w-4" />
                    </Button>
                    <Button
                      type="button"
                      variant="outline"
                      size="icon"
                      aria-label={t("actions.replyByWhatsapp")}
                      className="h-8 w-8 rounded-[10px] border-border text-status-green"
                      onClick={() => onReplyByChannel(ticket.id, "whatsapp")}
                    >
                      <MessageCircle className="h-4 w-4" />
                    </Button>
                  </div>
                </TableCell>
                <TableCell className="px-4 text-center">
                  <div className="flex items-center justify-center gap-3">
                    <div className="relative">
                      {!ticket.is_read ? (
                        <span className="absolute -right-0.5 -top-0.5 z-10 h-2 w-2 rounded-full bg-destructive" />
                      ) : null}
                      <TableIconButton
                        label={t("actions.preview")}
                        icon={<Eye className="h-4 w-4" />}
                        className="h-8 w-8 rounded-[10px]"
                        onClick={() => onPreviewTicket(ticket.id)}
                      />
                    </div>
                    <TableIconButton
                      label={tCommon("delete")}
                      icon={<Trash2 className="h-4 w-4" />}
                      className="h-8 w-8 rounded-[10px]"
                      onClick={() => onDeleteTicket(ticket.id)}
                    />
                  </div>
                </TableCell>
              </TableRow>
            );
          })}
        </TableBody>
      </Table>
    </div>
  );
}