'use client';
import { useState } from 'react';
import RequisitionsTab from './RequisitionsTab';
import JobPostingsTab from './JobPostingsTab';
import CandidatesTab from './CandidatesTab';
import InterviewsTab from './InterviewsTab';
import OffersTab from './OffersTab';
import TalentPoolTab from './TalentPoolTab';
import RecruitmentReportsTab from './RecruitmentReportsTab';
import NewRequisitionModal from './NewRequisitionModal';
import CandidateDetailModal from './CandidateDetailModal';
import { Candidate } from './recruitmentData';

type Tab = 'requisitions' | 'postings' | 'candidates' | 'interviews' | 'offers' | 'talent' | 'reports';

const tabs: { id: Tab; label: string; icon: string }[] = [
  { id: 'requisitions', label: 'Job Requisitions', icon: 'ri-file-list-3-line' },
  { id: 'postings', label: 'Job Postings', icon: 'ri-megaphone-line' },
  { id: 'candidates', label: 'Candidates', icon: 'ri-group-line' },
  { id: 'interviews', label: 'Interviews', icon: 'ri-calendar-check-line' },
  { id: 'offers', label: 'Offers', icon: 'ri-file-paper-2-line' },
  { id: 'talent', label: 'Talent Pool', icon: 'ri-bookmark-line' },
  { id: 'reports', label: 'Reports', icon: 'ri-bar-chart-2-line' },
];

export default function RecruitmentContent() {
  const [activeTab, setActiveTab] = useState<Tab>('candidates');
  const [showNewReq, setShowNewReq] = useState(false);
  const [selectedCandidate, setSelectedCandidate] = useState<Candidate | null>(null);

  return (
    <div>
      <div className="mb-5">
        <div className="flex items-center justify-between mb-1">
          <h1 className="text-xl font-bold text-gray-800">Recruitment Management</h1>
          <div className="flex items-center gap-2">
            <button className="flex items-center gap-1.5 px-3 py-2 rounded-lg border border-gray-200 text-sm text-gray-600 hover:bg-gray-50 cursor-pointer whitespace-nowrap">
              <div className="w-4 h-4 flex items-center justify-center"><i className="ri-download-line text-sm"></i></div>
              Export Candidates
            </button>
            <button onClick={() => setShowNewReq(true)} className="flex items-center gap-1.5 px-4 py-2 rounded-lg text-sm font-medium text-white cursor-pointer whitespace-nowrap" style={{ background: '#b828a0' }}>
              <div className="w-4 h-4 flex items-center justify-center"><i className="ri-add-line text-sm"></i></div>
              New Requisition
            </button>
          </div>
        </div>
        <p className="text-sm text-gray-500">Manage job requisitions, candidates, interviews, and offers</p>
      </div>

      <div className="bg-white rounded-2xl border border-gray-100 shadow-sm mb-5">
        <div className="flex overflow-x-auto scrollbar-hide">
          {tabs.map(tab => (
            <button key={tab.id} onClick={() => setActiveTab(tab.id)} className={`flex items-center gap-2 px-5 py-3.5 text-sm font-medium whitespace-nowrap border-b-2 transition-all cursor-pointer ${activeTab === tab.id ? 'text-pink-700 border-pink-600 bg-pink-50/30' : 'text-gray-500 border-transparent hover:text-gray-700 hover:bg-gray-50'}`}>
              <div className="w-4 h-4 flex items-center justify-center">
                <i className={`${tab.icon} text-sm`}></i>
              </div>
              {tab.label}
            </button>
          ))}
        </div>
      </div>

      {activeTab === 'requisitions' && <RequisitionsTab onNewRequisition={() => setShowNewReq(true)} />}
      {activeTab === 'postings' && <JobPostingsTab />}
      {activeTab === 'candidates' && <CandidatesTab onViewCandidate={setSelectedCandidate} />}
      {activeTab === 'interviews' && <InterviewsTab />}
      {activeTab === 'offers' && <OffersTab />}
      {activeTab === 'talent' && <TalentPoolTab />}
      {activeTab === 'reports' && <RecruitmentReportsTab />}

      {showNewReq && <NewRequisitionModal onClose={() => setShowNewReq(false)} />}
      {selectedCandidate && <CandidateDetailModal candidate={selectedCandidate} onClose={() => setSelectedCandidate(null)} />}
    </div>
  );
}