/**
 * Customer Table Component
 * Displays customer list in a table format with actions
 */

"use client";

import {
  Plus,
  Users,
  ChevronRight,
  Edit3,
  Trash2,
  Loader2,
} from "lucide-react";
import { dashboardEn } from "@/lib/config/translations/modules/dashboard.en";
import { dashboardAr } from "@/lib/config/translations/modules/dashboard.ar";
import type { CustomerTableProps, Customer } from "./types";

export default function CustomerTable({
  lang,
  customers,
  isLoading,
  onViewDetails,
  onEdit,
  onDelete,
  onAddCustomer,
}: CustomerTableProps) {
  const isAr = lang === "ar";
  const dt = isAr ? dashboardAr : dashboardEn;

  const formatDate = (date: Date | null) => {
    if (!date) return "-";
    return date.toLocaleDateString(isAr ? "ar-SA" : "en-US", {
      month: "short",
      day: "numeric",
      year: "numeric",
    });
  };

  if (isLoading) {
    return (
      <div className="rounded-2xl bg-white border border-slate-200/80 shadow-sm overflow-hidden">
        <div className="flex flex-col items-center justify-center p-16 text-center">
          <Loader2 className="w-8 h-8 text-brand-green animate-spin mb-4" />
          <p className="text-sm text-slate-500">
            {isAr ? "جاري التحميل..." : "Loading customers..."}
          </p>
        </div>
      </div>
    );
  }

  if (customers.length === 0) {
    return (
      <div className="rounded-2xl bg-white border border-slate-200/80 shadow-sm overflow-hidden">
        <div className="flex flex-col items-center justify-center p-16 text-center">
          <div className="w-16 h-16 rounded-full bg-slate-100 flex items-center justify-center mb-4">
            <Users className="w-8 h-8 text-slate-400" />
          </div>
          <p className="text-lg font-semibold text-slate-600">
            {dt.noCustomersYet}
          </p>
          <p className="mt-2 text-sm text-slate-400 max-w-sm">
            {dt.noCustomersYetDesc}
          </p>
          <button
            onClick={onAddCustomer}
            className="mt-6 inline-flex items-center gap-2 rounded-xl bg-brand-green px-5 py-2.5 text-sm font-semibold text-white hover:bg-brand-greenHover transition-colors"
          >
            <Plus className="w-4 h-4" />
            {dt.addCustomer}
          </button>
        </div>
      </div>
    );
  }

  return (
    <div className="rounded-2xl bg-white border border-slate-200/80 shadow-sm overflow-hidden">
      <div className="overflow-x-auto">
        <table className="w-full text-sm">
          <thead className="bg-slate-50 border-b border-slate-200">
            <tr>
              <th className="px-6 py-4 text-left font-semibold text-slate-700">
                {dt.customerName}
              </th>
              <th className="px-6 py-4 text-left font-semibold text-slate-700">
                {dt.phone}
              </th>
              <th className="px-6 py-4 text-left font-semibold text-slate-700 hidden md:table-cell">
                {dt.email}
              </th>
              <th className="px-6 py-4 text-center font-semibold text-slate-700">
                {dt.totalBookings}
              </th>
              <th className="px-6 py-4 text-left font-semibold text-slate-700 hidden lg:table-cell">
                {dt.lastVisit}
              </th>
              <th className="px-6 py-4 text-right font-semibold text-slate-700">
                {dt.lifetimeValue}
              </th>
              <th className="px-6 py-4 text-center font-semibold text-slate-700">
                {dt.actions}
              </th>
            </tr>
          </thead>
          <tbody className="divide-y divide-slate-100">
            {customers.map((customer: Customer) => (
              <tr
                key={customer.id}
                className="hover:bg-slate-50 transition-colors"
              >
                <td className="px-6 py-4">
                  <button
                    onClick={() => onViewDetails(customer)}
                    className="flex items-center gap-3 group"
                  >
                    <div className="flex h-10 w-10 items-center justify-center rounded-full bg-gradient-to-br from-brand-green/20 to-emerald-500/20 text-sm font-bold text-brand-green">
                      {customer.name?.charAt(0).toUpperCase() || "?"}
                    </div>
                    <span className="font-medium text-slate-900 group-hover:text-brand-green transition-colors">
                      {customer.name || "-"}
                    </span>
                  </button>
                </td>
                <td className="px-6 py-4">
                  <span className="text-slate-700 font-mono text-xs">
                    {customer.phone}
                  </span>
                </td>
                <td className="px-6 py-4 hidden md:table-cell">
                  <span className="text-slate-600">
                    {customer.email || "-"}
                  </span>
                </td>
                <td className="px-6 py-4 text-center">
                  <span className="inline-flex h-7 min-w-[28px] items-center justify-center rounded-full bg-emerald-100 px-2 text-xs font-bold text-emerald-700">
                    {customer.bookings.length}
                  </span>
                </td>
                <td className="px-6 py-4 hidden lg:table-cell">
                  <span className="text-slate-600 text-xs">
                    {formatDate(customer.lastVisit)}
                  </span>
                </td>
                <td className="px-6 py-4 text-right">
                  <span className="font-semibold text-slate-900">
                    QAR {customer.totalSpent.toFixed(2)}
                  </span>
                </td>
                <td className="px-6 py-4">
                  <div className="flex items-center justify-center gap-1">
                    <button
                      onClick={() => onViewDetails(customer)}
                      className="p-2 rounded-lg text-slate-400 hover:text-brand-green hover:bg-brand-green/10 transition-colors"
                      title={dt.viewCustomerDetails}
                    >
                      <ChevronRight className="w-4 h-4" />
                    </button>
                    <button
                      onClick={() => onEdit(customer)}
                      className="p-2 rounded-lg text-slate-400 hover:text-blue-600 hover:bg-blue-50 transition-colors"
                      title={dt.edit}
                    >
                      <Edit3 className="w-4 h-4" />
                    </button>
                    {customer.isFromDB && (
                      <button
                        onClick={() => onDelete(customer)}
                        className="p-2 rounded-lg text-slate-400 hover:text-red-600 hover:bg-red-50 transition-colors"
                        title={dt.delete}
                      >
                        <Trash2 className="w-4 h-4" />
                      </button>
                    )}
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}