'use client';
import { useState } from 'react';
import HRLayout from '../../../components/HRLayout';
import TerminationRegisterTab from './TerminationRegisterTab';
import NewTerminationModal from './NewTerminationModal';
import TerminationDetailModal from './TerminationDetailModal';
import EmployeeRequestsTab from './EmployeeRequestsTab';
import { terminationRecords, employeeTerminationRequests, TerminationRecord } from './terminationData';

const TABS = [
  { key: 'register', label: 'Termination Register', icon: 'ri-file-list-3-line' },
  { key: 'employee-requests', label: 'Employee Requests', icon: 'ri-user-received-line' },
];

export default function TerminationContent() {
  const [tab, setTab] = useState('register');
  const [showNewModal, setShowNewModal] = useState(false);
  const [selectedRecord, setSelectedRecord] = useState<TerminationRecord | null>(null);
  const [records, setRecords] = useState(terminationRecords);

  const total = records.length;
  const voluntary = records.filter(r => r.category === 'Voluntary').length;
  const involuntary = records.filter(r => r.category === 'Involuntary').length;
  const other = records.filter(r => r.category === 'Other').length;

  const pendingHR = employeeTerminationRequests.filter(r => r.status === 'Pending HR Review' || r.status === 'Pending HOD Review' || r.status === 'Pending Manager Review').length;

  const handleNewRecord = (record: TerminationRecord) => {
    setRecords(prev => [record, ...prev]);
  };

  return (
    <HRLayout title="Termination & Turnover" breadcrumb="HR Management / Termination & Turnover">
      <div className="mb-6 grid grid-cols-4 gap-4">
        {[
          { label: 'Total Terminations', value: total, icon: 'ri-user-unfollow-line', color: '#b828a0' },
          { label: 'Voluntary Exits', value: voluntary, icon: 'ri-walk-line', color: '#8b5cf6', sub: 'Resignation, Retirement, End of Contract' },
          { label: 'Involuntary Exits', value: involuntary, icon: 'ri-close-circle-line', color: '#ef4444', sub: 'Dismissal, Redundancy, Medical' },
          { label: 'Other', value: other, icon: 'ri-more-line', color: '#6b7280', sub: 'Death, Absconded, Other' },
        ].map((c, i) => (
          <div key={i} className="bg-white rounded-2xl p-5 shadow-sm border border-gray-100">
            <div className="flex items-center justify-between mb-3">
              <div className="w-10 h-10 rounded-xl flex items-center justify-center" style={{ background: c.color + '18' }}>
                <i className={`${c.icon} text-xl`} style={{ color: c.color }}></i>
              </div>
            </div>
            <p className="text-3xl font-bold text-gray-800">{c.value}</p>
            <p className="text-sm font-medium text-gray-600 mt-1">{c.label}</p>
            {c.sub && <p className="text-xs text-gray-400 mt-0.5">{c.sub}</p>}
          </div>
        ))}
      </div>

      <div className="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
        <div className="flex border-b border-gray-100 bg-gray-50 px-2 pt-2 gap-1">
          {TABS.map(t => (
            <button key={t.key} onClick={() => setTab(t.key)}
              className={`flex items-center gap-2 px-5 py-3 text-sm font-medium cursor-pointer whitespace-nowrap rounded-t-xl border-b-2 transition-all ${tab === t.key ? 'bg-white border-pink-600 text-pink-700 shadow-sm' : 'border-transparent text-gray-500 hover:text-gray-700 hover:bg-white/60'}`}
              style={tab === t.key ? { borderColor: '#b828a0', color: '#b828a0' } : {}}>
              <div className="w-4 h-4 flex items-center justify-center"><i className={t.icon}></i></div>
              {t.label}
              {t.key === 'employee-requests' && pendingHR > 0 && (
                <span className="w-5 h-5 rounded-full text-white text-xs flex items-center justify-center font-bold" style={{ background: '#ef4444' }}>{pendingHR}</span>
              )}
            </button>
          ))}
        </div>
        <div className="p-6">
          {tab === 'register' && (
            <TerminationRegisterTab
              records={records}
              onSelectRecord={r => setSelectedRecord(r)}
              onNewTermination={() => setShowNewModal(true)}
            />
          )}
          {tab === 'employee-requests' && <EmployeeRequestsTab />}
        </div>
      </div>

      {showNewModal && (
        <NewTerminationModal onClose={() => setShowNewModal(false)} onSave={handleNewRecord} />
      )}
      {selectedRecord && (
        <TerminationDetailModal record={selectedRecord} onClose={() => setSelectedRecord(null)} />
      )}
    </HRLayout>
  );
}