'use client';
import { useState } from 'react';
import { requisitions, departments, urgencyColors, JobRequisition, RequisitionStatus } from './recruitmentData';

const statusColors: Record<RequisitionStatus, string> = {
  Draft: 'bg-gray-100 text-gray-600',
  'Pending Dept Head': 'bg-yellow-100 text-yellow-700',
  'Pending HR': 'bg-orange-100 text-orange-700',
  'Pending Finance': 'bg-purple-100 text-purple-700',
  Approved: 'bg-green-100 text-green-700',
  Rejected: 'bg-red-100 text-red-700',
  'On Hold': 'bg-blue-100 text-blue-700',
};

interface Props {
  onNewRequisition: () => void;
}

export default function RequisitionsTab({ onNewRequisition }: Props) {
  const [data] = useState<JobRequisition[]>(requisitions);
  const [filterStatus, setFilterStatus] = useState('All');
  const [filterDept, setFilterDept] = useState('All');
  const [search, setSearch] = useState('');

  const filtered = data.filter(r => {
    const matchStatus = filterStatus === 'All' || r.status === filterStatus;
    const matchDept = filterDept === 'All' || r.department === filterDept;
    const matchSearch = r.positionTitle.toLowerCase().includes(search.toLowerCase()) || r.id.toLowerCase().includes(search.toLowerCase());
    return matchStatus && matchDept && matchSearch;
  });

  const statuses: RequisitionStatus[] = ['Draft', 'Pending Dept Head', 'Pending HR', 'Pending Finance', 'Approved', 'Rejected', 'On Hold'];

  return (
    <div>
      <div className="flex flex-wrap items-center gap-3 mb-5">
        <div className="flex-1 min-w-64 relative">
          <div className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 flex items-center justify-center">
            <i className="ri-search-line text-gray-400 text-sm"></i>
          </div>
          <input value={search} onChange={e => setSearch(e.target.value)} placeholder="Search requisitions..." className="w-full pl-9 pr-4 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-pink-300" />
        </div>
        <select value={filterStatus} onChange={e => setFilterStatus(e.target.value)} className="border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-pink-300 pr-8">
          <option value="All">All Statuses</option>
          {statuses.map(s => <option key={s} value={s}>{s}</option>)}
        </select>
        <select value={filterDept} onChange={e => setFilterDept(e.target.value)} className="border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-pink-300 pr-8">
          <option value="All">All Departments</option>
          {departments.map(d => <option key={d} value={d}>{d}</option>)}
        </select>
        <button onClick={onNewRequisition} className="flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium text-white whitespace-nowrap cursor-pointer" style={{ background: '#b828a0' }}>
          <div className="w-4 h-4 flex items-center justify-center"><i className="ri-add-line"></i></div>
          New Requisition
        </button>
      </div>

      <div className="grid grid-cols-4 gap-4 mb-5">
        {[
          { label: 'Total Requisitions', value: data.length, icon: 'ri-file-list-3-line', color: 'text-purple-600 bg-purple-50' },
          { label: 'Approved', value: data.filter(r => r.status === 'Approved').length, icon: 'ri-checkbox-circle-line', color: 'text-green-600 bg-green-50' },
          { label: 'Pending Approval', value: data.filter(r => r.status.startsWith('Pending')).length, icon: 'ri-time-line', color: 'text-yellow-600 bg-yellow-50' },
          { label: 'Total Openings', value: data.filter(r => r.status === 'Approved').reduce((s, r) => s + r.openings, 0), icon: 'ri-user-add-line', color: 'text-blue-600 bg-blue-50' },
        ].map(stat => (
          <div key={stat.label} className="bg-white border border-gray-100 rounded-xl p-4 flex items-center gap-3 shadow-sm">
            <div className={`w-10 h-10 rounded-lg flex items-center justify-center ${stat.color}`}>
              <i className={`${stat.icon} text-lg`}></i>
            </div>
            <div>
              <div className="text-xl font-bold text-gray-800">{stat.value}</div>
              <div className="text-xs text-gray-500">{stat.label}</div>
            </div>
          </div>
        ))}
      </div>

      <div className="bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden">
        <table className="w-full text-sm">
          <thead>
            <tr className="bg-gray-50 border-b border-gray-100">
              <th className="text-left px-4 py-3 text-gray-600 font-semibold">Req ID</th>
              <th className="text-left px-4 py-3 text-gray-600 font-semibold">Position</th>
              <th className="text-left px-4 py-3 text-gray-600 font-semibold">Department</th>
              <th className="text-left px-4 py-3 text-gray-600 font-semibold">Openings</th>
              <th className="text-left px-4 py-3 text-gray-600 font-semibold">Type</th>
              <th className="text-left px-4 py-3 text-gray-600 font-semibold">Urgency</th>
              <th className="text-left px-4 py-3 text-gray-600 font-semibold">Status</th>
              <th className="text-left px-4 py-3 text-gray-600 font-semibold">Requester</th>
              <th className="text-left px-4 py-3 text-gray-600 font-semibold">Date</th>
              <th className="text-left px-4 py-3 text-gray-600 font-semibold">Action</th>
            </tr>
          </thead>
          <tbody>
            {filtered.map((req, i) => (
              <tr key={req.id} className={`border-b border-gray-50 hover:bg-gray-50 transition-colors ${i % 2 === 0 ? '' : 'bg-gray-50/30'}`}>
                <td className="px-4 py-3 font-mono text-xs text-purple-600 font-semibold">{req.id}</td>
                <td className="px-4 py-3">
                  <div className="font-medium text-gray-800">{req.positionTitle}</div>
                  <div className="text-xs text-gray-400">{req.justification}</div>
                </td>
                <td className="px-4 py-3 text-gray-600">{req.department}</td>
                <td className="px-4 py-3 text-center">
                  <span className="bg-blue-50 text-blue-700 px-2 py-0.5 rounded-full text-xs font-semibold">{req.openings}</span>
                </td>
                <td className="px-4 py-3 text-gray-600 text-xs">{req.employmentType}</td>
                <td className="px-4 py-3">
                  <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${urgencyColors[req.urgency]}`}>{req.urgency}</span>
                </td>
                <td className="px-4 py-3">
                  <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${statusColors[req.status]}`}>{req.status}</span>
                </td>
                <td className="px-4 py-3 text-gray-600 text-xs">{req.requester}</td>
                <td className="px-4 py-3 text-gray-400 text-xs">{req.createdDate}</td>
                <td className="px-4 py-3">
                  <div className="flex items-center gap-1">
                    <button className="w-7 h-7 flex items-center justify-center rounded-lg hover:bg-blue-50 text-blue-600 cursor-pointer" title="View">
                      <i className="ri-eye-line text-sm"></i>
                    </button>
                    {req.status === 'Pending HR' && (
                      <button className="w-7 h-7 flex items-center justify-center rounded-lg hover:bg-green-50 text-green-600 cursor-pointer" title="Approve">
                        <i className="ri-check-line text-sm"></i>
                      </button>
                    )}
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
        {filtered.length === 0 && (
          <div className="text-center py-10 text-gray-400 text-sm">No requisitions found</div>
        )}
      </div>
    </div>
  );
}