'use client';

import { useState } from 'react';
import { toast } from 'react-toastify';

interface SmsContentModalProps {
  open: boolean;
  onClose: () => void;
  /** Available messaging credits shown in the header. */
  credits?: { sms: number; whatsapp: number };
}

const TABLE_HEADERS = [
  'S.No.',
  'Candidate Name',
  'Company Name',
  'Job Title',
  'Email-Id',
  'Contact No.',
  'Uploaded By',
  'Uploaded Date',
];

const ACTION_BUTTONS: Array<{ label: string; cls: string }> = [
  { label: 'Rejected',                  cls: 'bg-rose-600 hover:bg-rose-500' },
  { label: 'Send WhatsApp, SMS & Mail', cls: 'bg-indigo-600 hover:bg-indigo-500' },
  { label: 'Send WhatsApp',             cls: 'bg-emerald-600 hover:bg-emerald-500' },
  { label: 'Send Mail',                 cls: 'bg-blue-600 hover:bg-blue-500' },
  { label: 'Send SMS',                  cls: 'bg-[#405189] hover:bg-[#364574]' },
];

export default function SmsContentModal({
  open,
  onClose,
  credits = { sms: 17765, whatsapp: 175 },
}: SmsContentModalProps) {
  const [excelFile, setExcelFile] = useState<File | null>(null);

  // Mock candidates from upload as shown in user's screenshot
  const [candidates, setCandidates] = useState([
    {
      id: 1,
      sNo: '01',
      checked: true,
      name: 'B',
      company: 'Nokia',
      jobTitle: 'Testing Engineer for Telecom',
      email: 'anugrah.shukla@indovisionservices.in',
      phone: '9971290613',
      uploadedBy: 'Nandan',
      uploadedDate: '27-03-2026 06:06:25 PM',
    },
    {
      id: 2,
      sNo: '02',
      checked: true,
      name: 'B',
      company: 'Nokia',
      jobTitle: 'Testing Engineer for Telecom',
      email: 'anurag.vashisth@indovisionservices.in',
      phone: '9971290613',
      uploadedBy: 'Nandan',
      uploadedDate: '27-03-2026 06:06:21 PM',
    },
    {
      id: 3,
      sNo: '03',
      checked: true,
      name: 'Alok Nandan',
      company: 'Nokia',
      jobTitle: 'Testing Engineer for Telecom',
      email: 'aknandan8@gmail.com',
      phone: '9999999999',
      uploadedBy: 'Nandan',
      uploadedDate: '27-03-2026 06:06:21 PM',
    },
    {
      id: 4,
      sNo: '04',
      checked: true,
      name: 'Alok indovision',
      company: 'Nokia',
      jobTitle: 'Testing Engineer for Telecom',
      email: 'alok.nandan@indovisionservices.in,dinesh@indovisionservices.in',
      phone: '9971290613',
      uploadedBy: 'Nandan',
      uploadedDate: '27-03-2026 05:47:09 PM',
    },
  ]);

  if (!open) return null;

  const checkedCount = candidates.filter((c) => c.checked).length;
  const allChecked = candidates.length > 0 && candidates.every((c) => c.checked);

  const toggleAll = () => {
    const target = !allChecked;
    setCandidates((prev) => prev.map((c) => ({ ...c, checked: target })));
  };

  const checkAll = () => {
    setCandidates((prev) => prev.map((c) => ({ ...c, checked: true })));
  };

  const deselectAll = () => {
    setCandidates((prev) => prev.map((c) => ({ ...c, checked: false })));
  };

  const toggleCandidate = (id: number) => {
    setCandidates((prev) =>
      prev.map((c) => (c.id === id ? { ...c, checked: !c.checked } : c))
    );
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
      <div className="fixed inset-0 bg-slate-950/40 dark:bg-slate-950/80 backdrop-blur-sm" onClick={onClose}></div>
      <div className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 w-full max-w-6xl rounded-none relative z-10 shadow-2xl animate-in fade-in zoom-in duration-200 text-slate-800 dark:text-slate-100 flex flex-col max-h-[90vh]">

        {/* Header — title + credits */}
        <div className="flex flex-wrap items-center justify-between gap-3 px-6 pt-5 pb-4 border-b border-slate-100 dark:border-slate-800 shrink-0">
          <div className="flex items-center gap-3 min-w-0">
            <div className="w-10 h-10 rounded-none bg-indigo-50 dark:bg-indigo-950/40 text-indigo-600 dark:text-indigo-400 flex items-center justify-center shrink-0">
              <i className="fa-solid fa-comment-sms"></i>
            </div>
            <div className="min-w-0">
              <h3 className="text-base font-bold text-slate-900 dark:text-white leading-tight">
                Upload Candidates&apos; Excel for sending mail/sms
              </h3>
              <p className="text-xs text-slate-400">SMS Content — import an Excel/CSV and review candidates before sending.</p>
            </div>
          </div>
          <div className="flex flex-wrap items-center gap-2">
            <span className="text-xs font-bold text-slate-600 dark:text-slate-300">Available Credits :-</span>
            <span className="text-xs font-bold bg-emerald-50 dark:bg-emerald-950/40 text-emerald-700 dark:text-emerald-300 border border-emerald-250 dark:border-emerald-900/40 rounded-full px-3 py-1">
              SMS : {credits.sms.toLocaleString()}
            </span>
            <span className="text-xs font-bold bg-teal-50 dark:bg-teal-950/40 text-teal-700 dark:text-teal-300 border border-teal-250 dark:border-teal-900/40 rounded-full px-3 py-1">
              whatsapp : {credits.whatsapp.toLocaleString()}
            </span>
            <button onClick={onClose} className="ml-2 w-8 h-8 rounded-none flex items-center justify-center text-slate-400 hover:text-slate-700 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-slate-800 transition cursor-pointer">
              <i className="fa-solid fa-xmark"></i>
            </button>
          </div>
        </div>

        <div className="px-6 py-4 overflow-y-auto custom-scrollbar flex-1 min-h-0 space-y-4">
          {/* Excel import row */}
          <div className="bg-slate-50 dark:bg-slate-950/50 border border-slate-200 dark:border-slate-800 rounded-none px-4 py-3 flex flex-wrap items-center gap-3">
            <span className="text-xs font-bold text-slate-705 dark:text-slate-200">Import candidates&apos; CSV file:</span>
            <span className="text-xs text-slate-550 dark:text-slate-400">Select Excel File:</span>
            <label className="text-xs font-semibold bg-white dark:bg-slate-900 border border-slate-205 dark:border-slate-700 rounded-none px-3 py-1.5 cursor-pointer hover:border-indigo-400 transition">
              <i className="fa-solid fa-folder-open mr-1.5 text-slate-400"></i>
              {excelFile ? excelFile.name : 'Choose file'}
              <input type="file" accept=".csv,.xlsx,.xls" className="hidden"
                onChange={(e) => setExcelFile(e.target.files?.[0] ?? null)} />
            </label>
            <button
              onClick={() => {
                if (!excelFile) { toast.warning('Choose an Excel/CSV file first.'); return; }
                toast.info('Upload endpoint not connected yet.');
                setExcelFile(null);
              }}
              className="text-xs font-bold bg-indigo-600 hover:bg-indigo-500 text-white rounded-none px-4 py-1.5 transition cursor-pointer"
            >
              Submit
            </button>
            <a href="/templates/candidate-bulk-template.csv" download
              className="text-xs font-bold bg-[#299cdb] hover:bg-[#2385ba] text-white rounded-none px-3 py-1.5 transition">
              Download Sample File
            </a>
            <a href="/templates/candidate-bulk-template.csv" download
              className="text-xs font-bold bg-[#299cdb] hover:bg-[#2385ba] text-white rounded-none px-3 py-1.5 transition">
              Download Naukri Sample File
            </a>
          </div>

          {/* Pending list */}
          <div>
            <div className="flex flex-wrap items-center justify-between gap-2 mb-2">
              <p className="text-xs font-bold text-slate-700 dark:text-slate-300">Pending for sending mail/sms:-</p>
              <div className="flex items-center gap-2">
                <button
                  onClick={checkAll}
                  className="text-[11px] font-bold border border-slate-200 dark:border-slate-700 rounded-none px-2.5 py-1 hover:bg-slate-50 dark:hover:bg-slate-800 transition cursor-pointer text-slate-600 dark:text-slate-300">
                  Check All
                </button>
                <button
                  onClick={deselectAll}
                  className="text-[11px] font-bold border border-slate-200 dark:border-slate-700 rounded-none px-2.5 py-1 hover:bg-slate-50 dark:hover:bg-slate-800 transition cursor-pointer text-slate-600 dark:text-slate-300">
                  Deselect All
                </button>
              </div>
            </div>

            <div className="border border-slate-200 dark:border-slate-800 rounded-none overflow-hidden">
              <div className="overflow-x-auto">
                <table className="w-full text-xs min-w-[850px]">
                  <thead>
                    <tr className="bg-slate-50 dark:bg-slate-950/40 border-b border-slate-200 dark:border-slate-800">
                      <th className="py-2.5 px-3 text-left w-8">
                        <input
                          type="checkbox"
                          checked={allChecked}
                          onChange={toggleAll}
                          className="w-4 h-4 rounded-none accent-indigo-600 cursor-pointer"
                        />
                      </th>
                      {TABLE_HEADERS.map((h) => (
                        <th key={h} className="py-2.5 px-3 text-left text-[10px] font-extrabold uppercase tracking-wider text-slate-400 whitespace-nowrap">{h}</th>
                      ))}
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-slate-100 dark:divide-slate-800 text-xs">
                    {candidates.map((c) => (
                      <tr key={c.id} className="hover:bg-slate-50 dark:hover:bg-slate-855/40">
                        <td className="py-2.5 px-3">
                          <input
                            type="checkbox"
                            checked={c.checked}
                            onChange={() => toggleCandidate(c.id)}
                            className="w-4 h-4 rounded-none accent-indigo-600 cursor-pointer"
                          />
                        </td>
                        <td className="py-2.5 px-3 font-semibold text-slate-500 dark:text-slate-400">{c.sNo}</td>
                        <td className="py-2.5 px-3 font-bold text-slate-900 dark:text-white">{c.name}</td>
                        <td className="py-2.5 px-3 font-semibold text-slate-700 dark:text-slate-300">{c.company}</td>
                        <td className="py-2.5 px-3 text-slate-700 dark:text-slate-350">{c.jobTitle}</td>
                        <td className="py-2.5 px-3 text-indigo-600 dark:text-indigo-400 font-medium break-all">{c.email}</td>
                        <td className="py-2.5 px-3 text-slate-600 dark:text-slate-400 font-semibold">{c.phone}</td>
                        <td className="py-2.5 px-3 text-slate-650 dark:text-slate-400 font-semibold">{c.uploadedBy}</td>
                        <td className="py-2.5 px-3 text-slate-500 dark:text-slate-550">{c.uploadedDate}</td>
                      </tr>
                    ))}
                    {candidates.length === 0 && (
                      <tr>
                        <td colSpan={TABLE_HEADERS.length + 1} className="py-10 text-center text-slate-400 text-xs">
                          No candidates uploaded yet. Import an Excel/CSV file above to get started.
                        </td>
                      </tr>
                    )}
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>

        {/* Action buttons */}
        <div className="flex flex-wrap items-center gap-2 px-6 py-4 border-t border-slate-100 dark:border-slate-800 shrink-0">
          {ACTION_BUTTONS.map((b) => (
            <button
              key={b.label}
              disabled={checkedCount === 0}
              onClick={() => {
                toast.success(`Action "${b.label}" triggered for ${checkedCount} candidate(s) ✓`);
              }}
              className={`text-xs font-bold text-white rounded-none px-3.5 py-2 transition cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed ${b.cls}`}
            >
              {b.label}
            </button>
          ))}
          <span className="ml-auto text-[11px] text-slate-400">
            {checkedCount > 0 ? `${checkedCount} candidate(s) selected.` : 'Select candidates to enable send actions.'}
          </span>
        </div>
      </div>
    </div>
  );
}