'use client';
import { useState } from 'react';
import { departments, EmploymentType, Urgency } from './recruitmentData';

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

export default function NewRequisitionModal({ onClose }: Props) {
  const [step, setStep] = useState(1);
  const [form, setForm] = useState({
    positionTitle: '',
    department: departments[0],
    openings: 1,
    employmentType: 'Full-time' as EmploymentType,
    urgency: 'Medium' as Urgency,
    justification: 'Backfill' as 'Backfill' | 'New Role',
    budgetRequired: false,
    targetSalaryMin: '',
    targetSalaryMax: '',
    description: '',
    requirements: '',
  });

  const employmentTypes: EmploymentType[] = ['Full-time', 'Part-time', 'Contract', 'Internship'];
  const urgencies: Urgency[] = ['High', 'Medium', 'Low'];

  return (
    <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
      <div className="bg-white rounded-2xl shadow-2xl w-full max-w-2xl max-h-[90vh] overflow-hidden flex flex-col">
        <div className="flex items-center justify-between px-6 py-4 border-b border-gray-100">
          <div>
            <h2 className="text-lg font-bold text-gray-800">New Job Requisition</h2>
            <p className="text-xs text-gray-500 mt-0.5">Step {step} of 2</p>
          </div>
          <button onClick={onClose} className="w-8 h-8 flex items-center justify-center rounded-lg hover:bg-gray-100 cursor-pointer">
            <i className="ri-close-line text-gray-600"></i>
          </button>
        </div>
        <div className="flex gap-0 border-b border-gray-100">
          {['Position Details', 'Job Description'].map((label, i) => (
            <button key={label} onClick={() => setStep(i + 1)} className={`flex-1 py-3 text-sm font-medium transition-colors ${step === i + 1 ? 'text-pink-700 border-b-2 border-pink-600' : 'text-gray-400 hover:text-gray-600'} cursor-pointer`}>
              {label}
            </button>
          ))}
        </div>
        <div className="flex-1 overflow-y-auto p-6">
          {step === 1 && (
            <div className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Position Title <span className="text-red-500">*</span></label>
                <input value={form.positionTitle} onChange={e => setForm({ ...form, positionTitle: e.target.value })} className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-pink-300" placeholder="e.g. Senior Software Engineer" />
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Department <span className="text-red-500">*</span></label>
                  <select value={form.department} onChange={e => setForm({ ...form, department: e.target.value })} className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-pink-300 pr-8">
                    {departments.map(d => <option key={d} value={d}>{d}</option>)}
                  </select>
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Number of Openings</label>
                  <input type="number" min={1} value={form.openings} onChange={e => setForm({ ...form, openings: parseInt(e.target.value) || 1 })} className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-pink-300" />
                </div>
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Employment Type</label>
                  <select value={form.employmentType} onChange={e => setForm({ ...form, employmentType: e.target.value as EmploymentType })} className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-pink-300 pr-8">
                    {employmentTypes.map(t => <option key={t} value={t}>{t}</option>)}
                  </select>
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Urgency</label>
                  <select value={form.urgency} onChange={e => setForm({ ...form, urgency: e.target.value as Urgency })} className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-pink-300 pr-8">
                    {urgencies.map(u => <option key={u} value={u}>{u}</option>)}
                  </select>
                </div>
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Justification</label>
                  <div className="flex gap-2">
                    {(['Backfill', 'New Role'] as const).map(j => (
                      <button key={j} onClick={() => setForm({ ...form, justification: j })} className={`flex-1 py-2 rounded-lg text-sm font-medium border transition-all cursor-pointer ${form.justification === j ? 'border-pink-400 text-pink-700 bg-pink-50' : 'border-gray-200 text-gray-500 hover:border-gray-300'}`}>{j}</button>
                    ))}
                  </div>
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Budget Approval Required</label>
                  <div className="flex gap-2">
                    {[true, false].map(v => (
                      <button key={String(v)} onClick={() => setForm({ ...form, budgetRequired: v })} className={`flex-1 py-2 rounded-lg text-sm font-medium border transition-all cursor-pointer ${form.budgetRequired === v ? 'border-pink-400 text-pink-700 bg-pink-50' : 'border-gray-200 text-gray-500 hover:border-gray-300'}`}>{v ? 'Yes' : 'No'}</button>
                    ))}
                  </div>
                </div>
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Min Salary (KES)</label>
                  <input type="number" value={form.targetSalaryMin} onChange={e => setForm({ ...form, targetSalaryMin: e.target.value })} className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-pink-300" placeholder="e.g. 150000" />
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Max Salary (KES)</label>
                  <input type="number" value={form.targetSalaryMax} onChange={e => setForm({ ...form, targetSalaryMax: e.target.value })} className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-pink-300" placeholder="e.g. 250000" />
                </div>
              </div>
            </div>
          )}
          {step === 2 && (
            <div className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Job Description</label>
                <textarea value={form.description} onChange={e => setForm({ ...form, description: e.target.value })} rows={5} maxLength={500} className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-pink-300 resize-none" placeholder="Describe the role, responsibilities, and team..." />
                <div className="text-xs text-gray-400 mt-1 text-right">{form.description.length}/500</div>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Requirements & Qualifications</label>
                <textarea value={form.requirements} onChange={e => setForm({ ...form, requirements: e.target.value })} rows={5} maxLength={500} className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-pink-300 resize-none" placeholder="Required qualifications, experience, skills..." />
                <div className="text-xs text-gray-400 mt-1 text-right">{form.requirements.length}/500</div>
              </div>
              <div className="bg-blue-50 rounded-xl p-4 border border-blue-100">
                <div className="flex items-start gap-2">
                  <div className="w-5 h-5 flex items-center justify-center mt-0.5">
                    <i className="ri-information-line text-blue-500 text-sm"></i>
                  </div>
                  <div className="text-xs text-blue-700">
                    <p className="font-medium mb-1">Approval Workflow</p>
                    <p>This requisition will be routed: <strong>Requester → Department Head → HR{form.budgetRequired ? ' → Finance' : ''} → Final Approval</strong></p>
                  </div>
                </div>
              </div>
            </div>
          )}
        </div>
        <div className="flex items-center justify-between px-6 py-4 border-t border-gray-100 bg-gray-50">
          <button onClick={() => step > 1 ? setStep(step - 1) : onClose()} className="px-4 py-2 rounded-lg border border-gray-200 text-sm text-gray-600 hover:bg-gray-100 cursor-pointer whitespace-nowrap">
            {step > 1 ? 'Back' : 'Cancel'}
          </button>
          <div className="flex gap-2">
            <button className="px-4 py-2 rounded-lg border border-gray-200 text-sm text-gray-600 hover:bg-gray-100 cursor-pointer whitespace-nowrap">Save Draft</button>
            {step < 2 ? (
              <button onClick={() => setStep(2)} className="px-4 py-2 rounded-lg text-sm font-medium text-white cursor-pointer whitespace-nowrap" style={{ background: '#b828a0' }}>Next</button>
            ) : (
              <button onClick={onClose} className="px-4 py-2 rounded-lg text-sm font-medium text-white cursor-pointer whitespace-nowrap" style={{ background: '#b828a0' }}>Submit for Approval</button>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}