'use client';

import { useState, useEffect, useRef } from 'react';
import { useRouter } from 'next/navigation';
import Cookies from 'js-cookie';
import { api } from '@/lib/api';
import { useAuth } from '@/components/auth-context';
import { toast } from 'react-toastify';
import { DataTable } from '@/components/data-table/DataTable';
import { DataTableActions } from '@/components/data-table/DataTableActions';
import SearchableSelect from '@/components/SearchableSelect';
import { showConfirmDelete } from '@/lib/confirm';
import BackToDashboard from '@/components/BackToDashboard';
import { PageLoader } from '@/components/DotLoader';

interface MasterAnnualCTC {
  id: number;
  name: string;
  status: 'ACTIVE' | 'DRAFT';
  created_by_email: string;
  updated_by_email: string;
  created_at: string;
  updated_at: string;
}

export default function MasterAnnualCTCPage() {
  const router = useRouter();
  const { user } = useAuth();
  const [ctcList, setCtcList] = useState<MasterAnnualCTC[]>([]);
  const [loading, setLoading] = useState(true);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [editingCtcId, setEditingCtcId] = useState<number | null>(null);
  const [ctcName, setCtcName] = useState('');
  const [status, setStatus] = useState<'ACTIVE' | 'DRAFT'>('ACTIVE');
  const [submitting, setSubmitting] = useState(false);
  const [userMap, setUserMap] = useState<Record<string, string>>({});

  // Bulk import & selection states
  const [activeTab, setActiveTab] = useState<'single' | 'bulk'>('single');
  const [csvFile, setCsvFile] = useState<File | null>(null);
  const [uploading, setUploading] = useState(false);
  const [importResults, setImportResults] = useState<{
    imported: number;
    skipped: number;
    errors: string[];
  } | null>(null);
  const [selectedCtcIds, setSelectedCtcIds] = useState<number[]>([]);
  const [approving, setApproving] = useState(false);
  const [deleting, setDeleting] = useState(false);
  const [bulkAction, setBulkAction] = useState<string>('');
  const fileInputRef = useRef<HTMLInputElement>(null);

  const columns = [
    {
      id: 'selection',
      header: () => {
        if (!hasChangePermission || !ctcList.some(item => item.status === 'DRAFT')) {
          return null;
        }
        return (
          <input
            type="checkbox"
            checked={selectAllChecked}
            onChange={handleSelectAllChange}
            className="w-4 h-4 text-indigo-600 border-slate-350 dark:border-slate-700 bg-white dark:bg-slate-950 rounded-none focus:ring-indigo-500 cursor-pointer"
          />
        );
      },
      cell: ({ row }: any) => {
        const item = row.original;
        if (item.status !== 'DRAFT' || !hasChangePermission) {
          return null;
        }
        return (
          <input
            type="checkbox"
            checked={selectedCtcIds.includes(item.id)}
            onChange={() => handleToggleSelect(item.id)}
            className="w-4 h-4 text-indigo-605 border-slate-300 rounded-none focus:ring-indigo-500 cursor-pointer"
          />
        );
      },
    },
    {
      id: 'srNo',
      header: 'S.No.',
      cell: ({ row, table }: any) => {
        const pageIndex = table.getState().pagination.pageIndex;
        const pageSize = table.getState().pagination.pageSize;
        return (
          <span className="font-semibold text-slate-500 dark:text-slate-400">
            {pageIndex * pageSize + row.index + 1}
          </span>
        );
      },
    },
    {
      accessorKey: 'name',
      header: 'CTC Range',
      cell: ({ row }: any) => {
        const item = row.original;
        return (
          <div>
            <p className="font-extrabold text-slate-800 dark:text-white text-sm">
              {item.name}
            </p>
          </div>
        );
      },
    },
    {
      accessorKey: 'created_by_email',
      header: 'Created By',
      cell: ({ row }: any) => {
        const email = row.original.created_by_email;
        const name = email ? (userMap[email.toLowerCase()] || email) : '—';
        const hasName = email && !!userMap[email.toLowerCase()];

        return (
          <div className="relative group inline-block">
            <span className={`text-slate-600 dark:text-slate-400 font-semibold ${hasName ? 'cursor-help border-b border-dashed border-slate-300 dark:border-slate-700 pb-0.5' : ''}`}>
              {name}
            </span>
            {hasName && (
              <div className="pointer-events-none absolute bottom-full left-1/2 z-50 mb-2 w-max max-w-[250px] -translate-x-1/2 scale-95 opacity-0 group-hover:scale-100 group-hover:opacity-100 transition-all duration-150 bg-slate-900 dark:bg-slate-805 text-white text-xs font-normal py-1.5 px-3 rounded-none shadow-lg border border-slate-700/50 text-center break-all">
                {email}
                <div className="absolute top-full left-1/2 -translate-x-1/2 -translate-y-1 w-2 h-2 bg-slate-900 dark:bg-slate-805 rotate-45 border-r border-b border-slate-700/50"></div>
              </div>
            )}
          </div>
        );
      },
    },
    {
      accessorKey: 'updated_by_email',
      header: 'Updated By',
      cell: ({ row }: any) => {
        const email = row.original.updated_by_email;
        const name = email ? (userMap[email.toLowerCase()] || email) : '—';
        const hasName = email && !!userMap[email.toLowerCase()];

        return (
          <div className="relative group inline-block">
            <span className={`text-slate-600 dark:text-slate-400 font-semibold ${hasName ? 'cursor-help border-b border-dashed border-slate-300 dark:border-slate-700 pb-0.5' : ''}`}>
              {name}
            </span>
            {hasName && (
              <div className="pointer-events-none absolute bottom-full left-1/2 z-50 mb-2 w-max max-w-[250px] -translate-x-1/2 scale-95 opacity-0 group-hover:scale-100 group-hover:opacity-100 transition-all duration-150 bg-slate-900 dark:bg-slate-805 text-white text-xs font-normal py-1.5 px-3 rounded-none shadow-lg border border-slate-700/50 text-center break-all">
                {email}
                <div className="absolute top-full left-1/2 -translate-x-1/2 -translate-y-1 w-2 h-2 bg-slate-900 dark:bg-slate-805 rotate-45 border-r border-b border-slate-700/50"></div>
              </div>
            )}
          </div>
        );
      },
    },
    {
      accessorKey: 'status',
      header: 'Status',
      cell: ({ row }: any) => {
        const item = row.original;
        return (
          <span
            className={`text-xs px-2.5 py-1 rounded-full font-bold border ${item.status === 'ACTIVE'
              ? 'bg-emerald-50 dark:bg-emerald-950/50 text-emerald-700 dark:text-emerald-400 border-emerald-200 dark:border-emerald-800'
              : 'bg-slate-100 dark:bg-slate-808 text-slate-600 dark:text-slate-400 border-slate-200 dark:border-slate-700'
              }`}
          >
            {item.status}
          </span>
        );
      },
    },
    {
      id: 'actions',
      header: () => <div className="text-right">Actions</div>,
      cell: ({ row }: any) => {
        const item = row.original;
        return (
          <DataTableActions
            onEdit={hasChangePermission ? () => openEditModal(item) : undefined}
            onDelete={hasDeletePermission ? () => handleDelete(item.id) : undefined}
          />
        );
      },
    },
  ];

  const isAdmin = user?.role === 'ADMIN';
  const hasViewPermission = isAdmin || user?.permissions?.includes('master_annual_ctc.view_masterannualctc') || user?.permissions?.includes('master_skills.view_masterskill') || false;
  const hasAddPermission = isAdmin || user?.permissions?.includes('master_annual_ctc.add_masterannualctc') || user?.permissions?.includes('master_skills.add_masterskill') || false;
  const hasChangePermission = isAdmin || user?.permissions?.includes('master_annual_ctc.change_masterannualctc') || user?.permissions?.includes('master_skills.change_masterskill') || false;
  const hasDeletePermission = isAdmin || user?.permissions?.includes('master_annual_ctc.delete_masterannualctc') || user?.permissions?.includes('master_skills.delete_masterskill') || false;

  const loadAll = async () => {
    if (!user) return;
    setLoading(true);
    setSelectedCtcIds([]); // Reset selection on reload
    const mapping: Record<string, string> = {};
    if (user.email && user.full_name) {
      mapping[user.email.toLowerCase()] = user.full_name;
    }

    // Load users for email-to-name mapping
    const hasUserViewPermission = user.role === 'ADMIN' || user.permissions?.includes('users.view_user');
    if (hasUserViewPermission) {
      try {
        const usersRes = await api.get('/users/admin/users/?page_size=100') as any;
        const userList = usersRes.data?.results || [];
        userList.forEach((u: any) => {
          if (u.email && u.full_name) {
            mapping[u.email.toLowerCase()] = u.full_name;
          }
        });
      } catch (err) {
        console.error('Failed to load users for email mapping:', err);
      }
    }
    setUserMap(mapping);

    try {
      const res = await api.get('/master-annual-ctc/') as any;
      const resData = res.data;
      let fetched: MasterAnnualCTC[] = [];
      if (Array.isArray(resData)) {
        fetched = resData;
      } else if (resData && Array.isArray(resData.results)) {
        fetched = resData.results;
      } else {
        fetched = [];
      }
      fetched.sort((a, b) => (a.name || '').localeCompare(b.name || ''));
      setCtcList(fetched);
    } catch (err) {
      console.error('Failed to load annual CTC ranges:', err);
      setCtcList([]);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    if (!user) return;
    loadAll();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [user]);

  const openCreateModal = () => {
    setEditingCtcId(null);
    setCtcName('');
    setStatus('ACTIVE');
    setActiveTab('single');
    setCsvFile(null);
    setImportResults(null);
    if (fileInputRef.current) {
      fileInputRef.current.value = '';
    }
    setIsModalOpen(true);
  };

  const openEditModal = (item: MasterAnnualCTC) => {
    setEditingCtcId(item.id);
    setCtcName(item.name);
    setStatus(item.status);
    setIsModalOpen(true);
  };

  const handleDelete = (ctcId: number) => {
    showConfirmDelete('Are you sure you want to delete this CTC range?', async () => {
      try {
        await api.delete(`/master-annual-ctc/${ctcId}/`);
        toast.success('CTC range deleted successfully ✓');
        loadAll();
      } catch (err) {
        toast.error(err instanceof Error ? err.message : 'Delete failed');
      }
    });
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    const trimmedName = ctcName.trim();
    if (!trimmedName) {
      toast.warning('CTC range is required');
      return;
    }

    // Special character validation (only numbers, letters, spaces, hyphens, plus and decimals allowed)
    const validPattern = /^[a-zA-Z0-9\s.\-–+]+$/;
    if (!validPattern.test(trimmedName)) {
      toast.warning('Special characters are not allowed in CTC range. Only numbers, letters, spaces, hyphens, plus and decimals are allowed.');
      return;
    }

    // Case-insensitive duplicate check with dash and space normalization
    const norm = (s: string) => s.replace(/[\s\-–—]+/g, '-').trim().toLowerCase();
    const targetNorm = norm(trimmedName);
    const isDuplicate = ctcList.some(
      (item) => item.id !== editingCtcId && norm(item.name) === targetNorm
    );
    if (isDuplicate) {
      toast.warning('A CTC range with this name already exists');
      return;
    }

    setSubmitting(true);

    try {
      const payload = {
        name: trimmedName,
        status: status,
      };

      if (editingCtcId) {
        await api.put(`/master-annual-ctc/${editingCtcId}/`, payload);
        toast.success('CTC range updated successfully ✓');
      } else {
        await api.post('/master-annual-ctc/', payload);
        toast.success('CTC range created successfully ✓');
      }
      setIsModalOpen(false);
      loadAll();
    } catch (err: any) {
      toast.error(err.message || 'Operation failed');
    } finally {
      setSubmitting(false);
    }
  };

  // Helper selectors and handlers for bulk operations
  const draftCtcs = ctcList.filter((item) => item.status === 'DRAFT');
  const selectAllChecked =
    draftCtcs.length > 0 &&
    draftCtcs.every((item) => selectedCtcIds.includes(item.id));

  const handleToggleSelect = (ctcId: number) => {
    setSelectedCtcIds((prev) =>
      prev.includes(ctcId)
        ? prev.filter((id) => id !== ctcId)
        : [...prev, ctcId]
    );
  };

  const handleSelectAllChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.checked) {
      setSelectedCtcIds(draftCtcs.map((item) => item.id));
    } else {
      setSelectedCtcIds([]);
    }
  };

  const API_BASE = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000/api/v1';

  const handleDownloadTemplate = async () => {
    try {
      const token = Cookies.get('access_token');
      const headers: Record<string, string> = {};
      if (token) headers['Authorization'] = `Bearer ${token}`;

      const response = await fetch(`${API_BASE}/master-annual-ctc/template/`, {
        headers,
      });

      if (!response.ok) {
        throw new Error('Failed to download template');
      }

      const blob = await response.blob();
      const url = window.URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = 'master-annual-ctc.csv';
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      window.URL.revokeObjectURL(url);
      toast.success('CSV Template downloaded ✓');
    } catch (err: any) {
      toast.error(err.message || 'Failed to download template');
    }
  };

  const handleUploadCSV = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!csvFile) {
      toast.warning('Please select a CSV file first');
      return;
    }
    setUploading(true);
    setImportResults(null);

    const formData = new FormData();
    formData.append('file', csvFile);

    try {
      const token = Cookies.get('access_token');
      const headers: Record<string, string> = {};
      if (token) headers['Authorization'] = `Bearer ${token}`;

      const response = await fetch(`${API_BASE}/master-annual-ctc/import/`, {
        method: 'POST',
        headers,
        body: formData,
      });

      const result = await response.json();
      if (!response.ok) {
        throw new Error(result.message || 'Failed to import CSV');
      }

      const { imported, skipped, errors } = result.data || {};

      if (imported > 0 || skipped === 0) {
        toast.success(`CTC ranges uploaded successfully. Imported: ${imported}, Skipped: ${skipped}`);
      } else {
        toast.warning(`No CTC ranges imported. Skipped: ${skipped}`);
      }

      setImportResults({ imported, skipped, errors: errors || [] });
      setCsvFile(null);
      if (fileInputRef.current) {
        fileInputRef.current.value = '';
      }

      // Refresh list
      await loadAll();
    } catch (err: any) {
      toast.error(err.message || 'CSV Import failed');
    } finally {
      setUploading(false);
    }
  };

  const handleBulkApprove = async () => {
    if (selectedCtcIds.length === 0) return;
    setApproving(true);
    try {
      const res = await api.patch('/master-annual-ctc/approve/', {
        ctcIds: selectedCtcIds,
      }) as any;
      const count = res.data?.updated_count ?? selectedCtcIds.length;
      toast.success(`Successfully approved ${count} CTC range(s) ✓`);
      setSelectedCtcIds([]);
      await loadAll();
    } catch (err: any) {
      toast.error(err.message || 'Failed to approve selected CTC ranges');
    } finally {
      setApproving(false);
    }
  };

  const handleBulkDelete = async () => {
    if (selectedCtcIds.length === 0) return;
    showConfirmDelete('Are you sure you want to delete the selected CTC ranges?', async () => {
      setDeleting(true);
      try {
        const token = Cookies.get('access_token');
        const headers: Record<string, string> = {
          'Content-Type': 'application/json',
        };
        if (token) headers['Authorization'] = `Bearer ${token}`;

        const response = await fetch(`${API_BASE}/master-annual-ctc/bulk-delete/`, {
          method: 'DELETE',
          headers,
          body: JSON.stringify({ ctcIds: selectedCtcIds }),
        });

        const result = await response.json();
        if (!response.ok) {
          throw new Error(result.message || 'Failed to delete selected CTC ranges');
        }

        const count = result.data?.deleted_count ?? selectedCtcIds.length;
        toast.success(`Successfully deleted ${count} CTC range(s) ✓`);
        setSelectedCtcIds([]);
        await loadAll();
      } catch (err: any) {
        toast.error(err.message || 'Failed to delete selected CTC ranges');
      } finally {
        setDeleting(false);
      }
    });
  };

  if (loading) return <PageLoader />;

  if (user && !hasViewPermission) {
    return (
      <main className="flex-1 flex items-center justify-center p-8">
        <div className="max-w-md w-full bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-none p-8 text-center shadow-xl space-y-6">
          <div className="mx-auto w-16 h-16 bg-rose-50 dark:bg-rose-950/30 border border-rose-100 dark:border-rose-900/50 rounded-none flex items-center justify-center text-rose-500 animate-bounce">
            <i className="fa-solid fa-lock text-3xl"></i>
          </div>
          <div className="space-y-2">
            <h3 className="text-xl font-bold text-slate-800 dark:text-white">Permission Required</h3>
            <p className="text-sm text-slate-500 dark:text-slate-400 leading-relaxed">
              You do not have access to view this page. This resource requires the <code className="px-1.5 py-0.5 rounded-none bg-slate-100 dark:bg-slate-955 border border-slate-200 dark:border-slate-800 text-rose-600 dark:text-rose-400 font-mono text-xs">master_annual_ctc.view_masterannualctc</code> permission.
            </p>
          </div>
          <button
            onClick={() => router.push('/dashboard')}
            className="w-full bg-indigo-600 hover:bg-indigo-500 text-white text-sm font-semibold py-3 rounded-none shadow-lg hover:shadow-indigo-500/20 transition cursor-pointer"
          >
            Go to Dashboard
          </button>
        </div>
      </main>
    );
  }

  return (
    <>
      <main className="flex-1 p-8 overflow-y-auto w-full space-y-6 max-w-7xl mx-auto">
          <BackToDashboard />
          <div className="flex flex-col sm:flex-row gap-4 justify-between sm:items-center">
            <div>
              <p className="text-sm text-slate-500 dark:text-slate-400">Manage the master list of annual CTC ranges available for candidate profiles and job postings.</p>
            </div>
            <div className="flex items-center gap-3">
              {hasAddPermission && (
                <button
                  onClick={openCreateModal}
                  className="bg-indigo-600 hover:bg-indigo-500 text-white text-sm font-semibold px-5 py-2.5 rounded-none shadow-lg hover:shadow-indigo-500/20 transition flex items-center gap-2 cursor-pointer"
                >
                  <i className="fa-solid fa-plus text-xs"></i> Add CTC
                </button>
              )}
            </div>
          </div>

          <DataTable
            columns={columns}
            data={ctcList}
            loading={loading}
            searchPlaceholder="Search CTC ranges by name..."
            emptyStateTitle="No Master Annual CTC Found"
            emptyStateDescription="Start by adding your first annual CTC range to the master list."
            filters={[
              {
                columnId: 'status',
                title: 'Status',
                options: [
                  { label: 'Active', value: 'ACTIVE' },
                  { label: 'Draft', value: 'DRAFT' },
                ],
              },
            ]}
          />

          {/* Bulk Action Dropdown at bottom-left */}
          {hasChangePermission && ctcList.some(item => item.status === 'DRAFT') && (
            <div className="flex justify-start pt-2">
              <div className="w-52">
                <SearchableSelect
                  value={bulkAction}
                  onChange={(val) => {
                    if (val === 'approve') {
                      handleBulkApprove();
                    } else if (val === 'delete') {
                      handleBulkDelete();
                    }
                    setBulkAction('');
                  }}
                  placeholder="Select Option"
                  isClearable={false}
                  disabled={selectedCtcIds.length === 0 || approving || deleting}
                  options={[
                    { value: 'approve', label: 'Approve Selected' },
                    { value: 'delete', label: 'Delete Selected' },
                  ]}
                />
              </div>
            </div>
          )}
      </main>
      {isModalOpen && (
        <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={() => setIsModalOpen(false)}></div>
          <div className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 w-full max-w-md rounded-none relative z-10 shadow-2xl animate-in fade-in zoom-in duration-200 text-slate-800 dark:text-slate-100">
            <h3 className="text-xl font-bold text-slate-900 dark:text-white px-6 pt-6 pb-4">
              {editingCtcId ? 'Edit CTC Range' : 'Add CTC'}
            </h3>

            {/* Tabs for Add CTC only */}
            {!editingCtcId && (
              <div className="flex border-b border-slate-200 dark:border-slate-800 px-6 mb-4">
                <button
                  type="button"
                  onClick={() => {
                    setActiveTab('single');
                    setImportResults(null);
                  }}
                  className={`flex-1 pb-3 text-sm font-semibold border-b-2 text-center transition-colors cursor-pointer ${activeTab === 'single'
                    ? 'border-indigo-600 text-indigo-650 dark:text-indigo-400'
                    : 'border-transparent text-slate-500 hover:text-slate-700 dark:hover:text-slate-350'
                    }`}
                >
                  Single CTC
                </button>
                <button
                  type="button"
                  onClick={() => {
                    setActiveTab('bulk');
                    setImportResults(null);
                  }}
                  className={`flex-1 pb-3 text-sm font-semibold border-b-2 text-center transition-colors cursor-pointer ${activeTab === 'bulk'
                    ? 'border-indigo-600 text-indigo-650 dark:text-indigo-400'
                    : 'border-transparent text-slate-500 hover:text-slate-700 dark:hover:text-slate-350'
                    }`}
                >
                  Bulk Import (CSV)
                </button>
              </div>
            )}

            {/* Content Tab: Single CTC Form */}
            {(editingCtcId || activeTab === 'single') ? (
              <form onSubmit={handleSubmit} className="space-y-4 px-6 pb-6">
                <div>
                  <label className="block text-xs font-bold uppercase tracking-wider text-slate-500 dark:text-slate-400 mb-1">CTC Range</label>
                  <input
                    value={ctcName}
                    placeholder="e.g. 1–2 LPA, 3–5 LPA, 10–15 LPA"
                    onChange={(e) => setCtcName(e.target.value.replace(/[^a-zA-Z0-9\s.\-–+]/g, ''))}
                    maxLength={150}
                    className="w-full bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-slate-800 focus:border-indigo-500 rounded-none px-4 py-2.5 text-sm focus:outline-none transition text-slate-900 dark:text-white"
                  />
                </div>
                <div>
                  <label className="block text-xs font-bold uppercase tracking-wider text-slate-500 dark:text-slate-400 mb-1">Status</label>
                  <SearchableSelect
                    value={status}
                    onChange={(val) => setStatus(val as 'ACTIVE' | 'DRAFT')}
                    isClearable={false}
                    options={[
                      { value: 'ACTIVE', label: 'Active' },
                      { value: 'DRAFT', label: 'Draft' },
                    ]}
                  />
                </div>
                <div className="flex justify-end gap-3 pt-2">
                  <button
                    type="button"
                    onClick={() => setIsModalOpen(false)}
                    className="px-4 py-2 text-sm text-slate-505 hover:text-slate-800 dark:text-slate-400 dark:hover:text-white transition cursor-pointer"
                  >
                    Cancel
                  </button>
                  <button
                    type="submit"
                    disabled={submitting}
                    className="bg-indigo-600 hover:bg-indigo-500 disabled:bg-indigo-400 dark:disabled:bg-indigo-800 text-white text-sm font-semibold px-5 py-2.5 rounded-none shadow-lg transition cursor-pointer"
                  >
                    {submitting ? 'Saving...' : editingCtcId ? 'Save Changes' : 'Add CTC'}
                  </button>
                </div>
              </form>
            ) : (
              /* Content Tab: Bulk Import CSV */
              <div className="space-y-4 px-6 pb-6">
                <div className="space-y-2">
                  <p className="text-xs text-slate-505 dark:text-slate-400 leading-relaxed">
                    Import multiple annual CTC ranges at once. Download the template, fill it in, and upload it.
                    Imported CTC ranges will be set to <span className="font-bold text-indigo-600 dark:text-indigo-450">DRAFT</span> status.
                  </p>
                  <button
                    type="button"
                    onClick={handleDownloadTemplate}
                    className="w-full bg-slate-100 dark:bg-slate-800 hover:bg-slate-200 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-350 text-xs font-semibold py-2 px-4 rounded-none border border-slate-250 dark:border-slate-700 transition flex items-center justify-center gap-2 cursor-pointer"
                  >
                    <i className="fa-solid fa-download text-xs"></i> Download CSV Template
                  </button>
                </div>

                <hr className="border-slate-205 dark:border-slate-800" />

                <form onSubmit={handleUploadCSV} className="space-y-4">
                  <div>
                    <label className="block text-xs font-bold uppercase tracking-wider text-slate-500 dark:text-slate-400 mb-2">
                      Upload CSV File
                    </label>
                    <div
                      onClick={() => fileInputRef.current?.click()}
                      className="border-2 border-dashed border-slate-300 dark:border-slate-700 rounded-none p-6 text-center cursor-pointer hover:border-indigo-500 dark:hover:border-indigo-400 hover:bg-slate-50/50 dark:hover:bg-slate-900/20 transition group"
                    >
                      <input
                        type="file"
                        ref={fileInputRef}
                        onChange={(e) => setCsvFile(e.target.files?.[0] || null)}
                        accept=".csv"
                        className="hidden"
                      />
                      <i className="fa-solid fa-file-csv text-3xl text-slate-400 group-hover:text-indigo-500 transition mb-2"></i>
                      <p className="text-xs font-semibold text-slate-650 dark:text-slate-400">
                        {csvFile ? csvFile.name : "Click or drag & drop to choose a .csv file"}
                      </p>
                      {csvFile && (
                        <p className="text-[10px] text-slate-400 mt-1">
                          {(csvFile.size / 1024).toFixed(2)} KB
                        </p>
                      )}
                    </div>
                  </div>

                  {importResults && (
                    <div className="bg-slate-50 dark:bg-slate-950 p-3 rounded-none border border-slate-200 dark:border-slate-800 text-xs space-y-2 max-h-48 overflow-y-auto">
                      <div className="font-semibold text-slate-800 dark:text-slate-300">
                        Summary:
                      </div>
                      <div className="flex gap-4 font-bold">
                        <span className="text-emerald-600 dark:text-emerald-400">Imported: {importResults.imported}</span>
                        <span className="text-amber-600 dark:text-amber-400">Skipped: {importResults.skipped}</span>
                      </div>
                      {importResults.errors.length > 0 && (
                        <div className="space-y-1 pt-1.5 border-t border-slate-200 dark:border-slate-800">
                          <p className="font-semibold text-rose-500">Skipped Rows Detail:</p>
                          <ul className="list-disc list-inside space-y-0.5 text-[11px] text-slate-500 dark:text-slate-400 font-mono">
                            {importResults.errors.map((err, i) => (
                              <li key={i}>{err}</li>
                            ))}
                          </ul>
                        </div>
                      )}
                    </div>
                  )}

                  <div className="flex justify-end gap-3 pt-2">
                    <button
                      type="button"
                      onClick={() => setIsModalOpen(false)}
                      className="px-4 py-2 text-sm text-slate-500 hover:text-slate-800 dark:text-slate-400 dark:hover:text-white transition cursor-pointer"
                    >
                      Close
                    </button>
                    <button
                      type="submit"
                      disabled={uploading || !csvFile}
                      className="bg-indigo-600 hover:bg-indigo-500 disabled:bg-indigo-400 dark:disabled:bg-indigo-800 text-white text-sm font-semibold px-5 py-2.5 rounded-none shadow-lg transition cursor-pointer flex items-center gap-2"
                    >
                      {uploading ? 'Importing...' : 'Import CTC Ranges'}
                    </button>
                  </div>
                </form>
              </div>
            )}
          </div>
        </div>
      )}
    </>
  );
}