'use client';

import { useEffect, useState } from 'react';
import { api } from '@/lib/api';
import { toast } from 'react-toastify';
import { formatDate } from '@/lib/dates';

interface JDInfo {
  jd_id: number;
  job_title: string;
  client: string;
  priority: string;
  status: string;
  assigned_date: string | null;
  total_candidates: number;
}

interface RecruiterDetails {
  id: number;
  full_name: string;
  employee_id: string;
  email: string;
  phone: string;
  department: string;
}

interface RecruiterDetailsModalProps {
  isOpen: boolean;
  recruiterId: number;
  onClose: () => void;
}

export default function RecruiterDetailsModal({ isOpen, recruiterId, onClose }: RecruiterDetailsModalProps) {
  const [loading, setLoading] = useState(false);
  const [details, setDetails] = useState<RecruiterDetails | null>(null);
  const [jds, setJds] = useState<JDInfo[]>([]);

  useEffect(() => {
    if (!isOpen || !recruiterId) return;

    setLoading(true);
    api.get(`/recruiters/${recruiterId}/`)
      .then((res: any) => {
        const data = res.data || {};
        setDetails(data.recruiter || null);
        setJds(data.assigned_jds || []);
      })
      .catch((err: any) => {
        console.error("Failed to fetch recruiter details:", err);
        toast.error("Failed to load recruiter details");
        onClose();
      })
      .finally(() => {
        setLoading(false);
      });
  }, [isOpen, recruiterId, onClose]);

  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
      {/* Backdrop */}
      <div 
        className="fixed inset-0 bg-slate-950/40 dark:bg-slate-950/80 backdrop-blur-sm" 
        onClick={onClose}
      ></div>

      {/* Modal Container */}
      <div className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 w-full max-w-4xl rounded-none p-6 relative z-10 shadow-2xl text-slate-800 dark:text-slate-100 flex flex-col max-h-[85vh]">
        
        {/* Header */}
        <div className="flex justify-between items-center pb-4 border-b border-slate-100 dark:border-slate-850">
          <div>
            <h3 className="text-xl font-bold text-slate-900 dark:text-white">Recruiter Profile & Assignments</h3>
            <p className="text-xs text-slate-500 dark:text-slate-400 mt-1">Detailed overview of recruiter statistics and active job roles.</p>
          </div>
          <button 
            type="button" 
            onClick={onClose}
            className="text-slate-400 hover:text-slate-650 dark:hover:text-slate-250 cursor-pointer"
          >
            <i className="fa-solid fa-xmark text-lg"></i>
          </button>
        </div>

        {loading ? (
          <div className="flex-1 flex flex-col items-center justify-center py-20 gap-3">
            <div className="w-10 h-10 border-4 border-indigo-500 border-t-transparent rounded-full animate-spin"></div>
            <p className="text-sm font-medium text-slate-500 dark:text-slate-400">Loading recruiter information...</p>
          </div>
        ) : (
          <div className="flex-1 overflow-y-auto space-y-6 py-4 custom-scrollbar">
            
            {/* Recruiter Information Panel */}
            {details && (
              <div className="bg-slate-50 dark:bg-slate-950/40 border border-slate-200 dark:border-slate-850 rounded-none p-5 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-y-4 gap-x-6">
                <div>
                  <span className="block text-[10px] font-bold uppercase tracking-wider text-slate-400 dark:text-slate-500">Employee ID</span>
                  <span className="font-semibold text-slate-800 dark:text-white text-sm mt-0.5 block">{details.employee_id || '—'}</span>
                </div>
                <div>
                  <span className="block text-[10px] font-bold uppercase tracking-wider text-slate-400 dark:text-slate-500">Recruiter Name</span>
                  <span className="font-semibold text-slate-800 dark:text-white text-sm mt-0.5 block">{details.full_name || '—'}</span>
                </div>
                <div>
                  <span className="block text-[10px] font-bold uppercase tracking-wider text-slate-400 dark:text-slate-500">Email Address</span>
                  <span className="font-semibold text-slate-800 dark:text-white text-sm mt-0.5 block">{details.email}</span>
                </div>
                <div>
                  <span className="block text-[10px] font-bold uppercase tracking-wider text-slate-400 dark:text-slate-500">Mobile Number</span>
                  <span className="font-semibold text-slate-800 dark:text-white text-sm mt-0.5 block">{details.phone || '—'}</span>
                </div>
                <div>
                  <span className="block text-[10px] font-bold uppercase tracking-wider text-slate-400 dark:text-slate-500">Department</span>
                  <span className="font-semibold text-slate-800 dark:text-white text-sm mt-0.5 block">{details.department || '—'}</span>
                </div>
              </div>
            )}

            {/* Assigned JDs List */}
            <div>
              <h4 className="text-sm font-bold text-slate-800 dark:text-white mb-3">Assigned Job Descriptions</h4>
              
              {jds.length === 0 ? (
                <div className="border border-dashed border-slate-200 dark:border-slate-800 rounded-none p-8 text-center">
                  <div className="w-10 h-10 rounded-full bg-slate-105 dark:bg-slate-850 flex items-center justify-center mx-auto mb-3">
                    <i className="fa-solid fa-briefcase text-slate-400"></i>
                  </div>
                  <p className="text-sm font-semibold text-slate-800 dark:text-white">No Assigned JDs</p>
                  <p className="text-xs text-slate-500 dark:text-slate-400 mt-1">This recruiter is not currently assigned to any job descriptions.</p>
                </div>
              ) : (
                <div className="overflow-x-auto border border-slate-200 dark:border-slate-800 rounded-none">
                  <table className="min-w-full divide-y divide-slate-200 dark:divide-slate-800 text-left text-xs">
                    <thead className="bg-slate-50 dark:bg-slate-950/30 text-slate-500 dark:text-slate-400 font-bold uppercase tracking-wider">
                      <tr>
                        <th className="px-4 py-3">JD ID</th>
                        <th className="px-4 py-3">Job Title</th>
                        <th className="px-4 py-3">Client</th>
                        <th className="px-4 py-3">Priority</th>
                        <th className="px-4 py-3">Status</th>
                        <th className="px-4 py-3">Assigned Date</th>
                        <th className="px-4 py-3 text-right">Total Candidates</th>
                      </tr>
                    </thead>
                    <tbody className="divide-y divide-slate-200 dark:divide-slate-800 text-slate-700 dark:text-slate-300">
                      {jds.map((jd) => (
                        <tr key={jd.jd_id} className="hover:bg-slate-50/50 dark:hover:bg-slate-800/20">
                          <td className="px-4 py-3 font-semibold text-slate-900 dark:text-white">#{jd.jd_id}</td>
                          <td className="px-4 py-3 font-semibold text-slate-850 dark:text-slate-100">{jd.job_title}</td>
                          <td className="px-4 py-3">{jd.client}</td>
                          <td className="px-4 py-3">
                            <span className={`px-2 py-0.5 rounded-full text-[10px] font-bold ${
                              jd.priority === 'High' ? 'bg-rose-50 text-rose-700 dark:bg-rose-950/30 dark:text-rose-300' :
                              jd.priority === 'Medium' ? 'bg-amber-50 text-amber-700 dark:bg-amber-950/30 dark:text-amber-300' :
                              'bg-slate-100 text-slate-705 dark:bg-slate-800 dark:text-slate-300'
                            }`}>
                              {jd.priority}
                            </span>
                          </td>
                          <td className="px-4 py-3">
                            <span className={`px-2 py-0.5 rounded-full text-[10px] font-bold ${
                              jd.status === 'Published' ? 'bg-emerald-50 text-emerald-700 dark:bg-emerald-950/30 dark:text-emerald-300' :
                              jd.status === 'Draft' ? 'bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-350' :
                              'bg-rose-50 text-rose-700 dark:bg-rose-950/30 dark:text-rose-300'
                            }`}>
                              {jd.status}
                            </span>
                          </td>
                          <td className="px-4 py-3">{jd.assigned_date ? formatDate(jd.assigned_date) : '—'}</td>
                          <td className="px-4 py-3 text-right font-bold text-slate-850 dark:text-white">{jd.total_candidates}</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              )}
            </div>

          </div>
        )}

        {/* Footer */}
        <div className="flex justify-end pt-4 mt-2 border-t border-slate-100 dark:border-slate-850">
          <button 
            type="button" 
            onClick={onClose} 
            className="px-5 py-2.5 text-sm font-semibold bg-slate-100 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700 rounded-none transition cursor-pointer"
          >
            Close
          </button>
        </div>
      </div>
    </div>
  );
}