"use client";

import { Button } from "@/components/ui/button";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { cn } from "@/lib/utils";
import { Eye, PencilLine, Trash2 } from "lucide-react";
import { useLocale } from "next-intl";
import type { DashboardRequestRow, DashboardTabOption } from "./dashboard-home-types";

type DashboardRequestsTableProps = {
  title: string;
  tabs: DashboardTabOption[];
  activeTabId: string;
  onTabChange: (tabId: string) => void;
  rows: DashboardRequestRow[];
  emptyMessage?: string;
};

const statusConfig: Record<
  DashboardRequestRow["status"],
  { label: string; className: string }
> = {
  pending: {
    label: "قيد المراجعة",
    className: "bg-primary-50 text-[var(--yellow-500)]",
  },
  completed: {
    label: "مكتمل",
    className: "bg-primary-50 text-status-green",
  },
  rejected: {
    label: "مرفوض",
    className: "bg-destructive/10 text-destructive",
  },
};

export function DashboardRequestsTable({
  title,
  tabs,
  activeTabId,
  onTabChange,
  rows,
  emptyMessage = "No results found",
}: DashboardRequestsTableProps) {
  const locale = useLocale();
  const isArabic = locale.startsWith("ar");

  return (
    <section className="rounded-[24px] border border-border bg-white shadow-[0_8px_24px_rgba(32,32,32,0.04)]">
      <div className="flex min-h-[72px] flex-col gap-4 border-b border-divider px-6 py-4 md:flex-row md:items-center md:justify-between">
        <h2 className="text-2xl font-bold leading-tight text-foreground">{title}</h2>

        <div className="rounded-full bg-highlights-bg p-1">
          <div className="flex flex-wrap items-center gap-1">
            {tabs.map((tab) => {
              const isActive = activeTabId === tab.id;

              return (
                <button
                  key={tab.id}
                  type="button"
                  onClick={() => onTabChange(tab.id)}
                  className={cn(
                    "h-10 rounded-full px-5 text-sm font-semibold transition-colors",
                    isActive
                      ? "bg-primary text-white shadow-[0_6px_16px_rgba(30,124,115,0.24)]"
                      : "text-muted-foreground hover:bg-white"
                  )}
                >
                  {tab.label}
                </button>
              );
            })}
          </div>
        </div>
      </div>

      <div className="overflow-x-auto px-6 pb-6">
        {!rows.length ? (
          <div className="rounded-2xl border border-dashed border-border px-6 py-10 text-center text-muted-foreground">
            {emptyMessage}
          </div>
        ) : (
          <Table className="min-w-[980px] border-separate border-spacing-0">
            <TableHeader>
              <TableRow className="bg-table-title-bg hover:bg-table-title-bg">
                <TableHead className="h-16 border-b border-divider px-4 text-end text-sm font-bold text-foreground first:rounded-s-2xl last:rounded-e-2xl">
                  #
                </TableHead>
                <TableHead className="h-16 border-b border-divider px-4 text-end text-sm font-bold text-foreground">
                  اسم المستخدم
                </TableHead>
                <TableHead className="h-16 border-b border-divider px-4 text-end text-sm font-bold text-foreground">
                  رقم الجوال
                </TableHead>
                <TableHead className="h-16 border-b border-divider px-4 text-end text-sm font-bold text-foreground">
                  نوع الطلب
                </TableHead>
                <TableHead className="h-16 border-b border-divider px-4 text-end text-sm font-bold text-foreground">
                  التاريخ
                </TableHead>
                <TableHead className="h-16 border-b border-divider px-4 text-end text-sm font-bold text-foreground">
                  الحالة
                </TableHead>
                <TableHead className="h-16 border-b border-divider px-4 text-end text-sm font-bold text-foreground">
                  الإجراءات
                </TableHead>
              </TableRow>
            </TableHeader>

            <TableBody>
              {rows.map((row) => {
                const status = statusConfig[row.status];
                const statusLabel = isArabic
                  ? status.label
                  : row.status === "pending"
                    ? "Pending"
                    : row.status === "completed"
                      ? "Completed"
                      : "Rejected";

                return (
                  <TableRow key={row.id} className="border-b border-divider last:border-b-0 hover:bg-transparent">
                    <TableCell className="h-16 px-4 text-end text-sm font-medium text-foreground">
                      {row.requestNumber}
                    </TableCell>
                    <TableCell className="h-16 px-4 text-end text-sm text-muted-foreground">
                      {row.requesterName}
                    </TableCell>
                    <TableCell className="h-16 px-4 text-end text-sm text-muted-foreground">
                      {row.requesterPhone}
                    </TableCell>
                    <TableCell className="h-16 px-4 text-end text-sm text-muted-foreground">
                      {row.requestType}
                    </TableCell>
                    <TableCell className="h-16 px-4 text-end text-sm text-muted-foreground">
                      {row.date}
                    </TableCell>
                    <TableCell className="h-16 px-4 text-end">
                      <span
                        className={cn(
                          "inline-flex min-w-24 items-center justify-center rounded-full px-4 py-2 text-xs font-bold",
                          status.className
                        )}
                      >
                        {statusLabel}
                      </span>
                    </TableCell>
                    <TableCell className="h-16 px-4">
                      <div className="flex items-center justify-end gap-2">
                        <Button
                          type="button"
                          variant="outline"
                          className="size-9 rounded-full border-border bg-white p-0 text-muted-foreground hover:bg-muted"
                        >
                          <Eye className="size-4" />
                          <span className="sr-only">View</span>
                        </Button>
                        <Button
                          type="button"
                          variant="outline"
                          className="size-9 rounded-full border-border bg-white p-0 text-muted-foreground hover:bg-muted"
                        >
                          <PencilLine className="size-4" />
                          <span className="sr-only">Edit</span>
                        </Button>
                        <Button
                          type="button"
                          variant="outline"
                          className="size-9 rounded-full border-destructive/30 bg-white p-0 text-destructive hover:bg-destructive/5"
                        >
                          <Trash2 className="size-4" />
                          <span className="sr-only">Delete</span>
                        </Button>
                      </div>
                    </TableCell>
                  </TableRow>
                );
              })}
            </TableBody>
          </Table>
        )}
      </div>
    </section>
  );
}