"use client";

import {
  Check,
  ChevronLeft,
  RefreshCcw,
  Trash2,
  UserPlus,
  Users,
} from "lucide-react";
import type { Lang } from "@/lib/config";
import type { MyWaitlist, WaitlistSignup, WaitlistTranslations } from "./types";

interface WaitlistSignupListProps {
  lang: Lang;
  t: WaitlistTranslations;
  waitlist: MyWaitlist;
  signups: WaitlistSignup[];
  loadingSignups: boolean;
  submitting: boolean;
  error: string | null;
  success: string | null;
  onBack: () => void;
  onAddUser: () => void;
  onRemoveSignup: (signupId: string) => void;
}

export function WaitlistSignupList({
  lang,
  t,
  waitlist,
  signups,
  loadingSignups,
  submitting,
  error,
  success,
  onBack,
  onAddUser,
  onRemoveSignup,
}: WaitlistSignupListProps) {
  const isAr = lang === "ar";

  return (
    <div className="space-y-6 animate-fadeIn">
      {/* Header */}
      <div className="flex items-center gap-4">
        <button
          onClick={onBack}
          className="p-2 hover:bg-slate-100 rounded-lg transition-colors"
        >
          <ChevronLeft className="w-5 h-5" />
        </button>
        <div className="flex-1">
          <h2 className="text-xl font-bold text-slate-900">
            {isAr && waitlist.titleAr ? waitlist.titleAr : waitlist.title}
          </h2>
          <p className="text-sm text-slate-500">
            {t.signupsTitle} ({signups.length})
          </p>
        </div>
        <button
          onClick={onAddUser}
          className="flex items-center gap-2 px-4 py-2 bg-brand-green text-white rounded-xl hover:bg-brand-greenHover transition-colors font-semibold"
        >
          <UserPlus className="w-5 h-5" />
          {t.addUser}
        </button>
      </div>

      {/* Success/Error messages */}
      {success && (
        <div className="bg-emerald-50 border border-emerald-200 text-emerald-700 px-4 py-3 rounded-lg text-sm flex items-center gap-2">
          <Check className="w-5 h-5" />
          {success}
        </div>
      )}
      {error && (
        <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg text-sm">
          {error}
        </div>
      )}

      {/* Signups list */}
      {loadingSignups ? (
        <div className="flex items-center justify-center py-12">
          <RefreshCcw className="w-6 h-6 animate-spin text-slate-400" />
        </div>
      ) : signups.length === 0 ? (
        <div className="text-center py-12 bg-slate-50 rounded-2xl">
          <Users className="w-12 h-12 text-slate-300 mx-auto mb-3" />
          <p className="text-slate-500">{t.noSignups}</p>
        </div>
      ) : (
        <div className="bg-white rounded-2xl border border-slate-200 overflow-hidden">
          <table className="w-full">
            <thead className="bg-slate-50">
              <tr>
                <th className="text-start px-4 py-3 text-sm font-semibold text-slate-600">
                  {t.name}
                </th>
                <th className="text-start px-4 py-3 text-sm font-semibold text-slate-600">
                  {t.email}
                </th>
                <th className="text-start px-4 py-3 text-sm font-semibold text-slate-600">
                  {t.mobile}
                </th>
                <th className="text-start px-4 py-3 text-sm font-semibold text-slate-600">
                  {t.addedOn}
                </th>
                <th className="w-12"></th>
              </tr>
            </thead>
            <tbody className="divide-y divide-slate-100">
              {signups.map((signup) => (
                <tr key={signup.id} className="hover:bg-slate-50">
                  <td className="px-4 py-3 text-sm text-slate-900">
                    {signup.name}
                  </td>
                  <td className="px-4 py-3 text-sm text-slate-600">
                    {signup.email}
                  </td>
                  <td className="px-4 py-3 text-sm text-slate-600 font-mono">
                    {signup.mobile}
                  </td>
                  <td className="px-4 py-3 text-sm text-slate-500">
                    {new Date(signup.createdAt).toLocaleDateString(
                      isAr ? "ar-SA" : "en-US",
                    )}
                  </td>
                  <td className="px-4 py-3">
                    <button
                      onClick={() => onRemoveSignup(signup.id)}
                      disabled={submitting}
                      className="p-1.5 text-red-500 hover:bg-red-50 rounded-lg transition-colors disabled:opacity-50"
                      title={t.delete}
                    >
                      <Trash2 className="w-4 h-4" />
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}