'use client';
import { useState } from 'react';
import { offers, Offer } from './recruitmentData';

const statusColors: Record<string, string> = {
  Draft: 'bg-gray-100 text-gray-600',
  'Pending Approval': 'bg-yellow-100 text-yellow-700',
  Approved: 'bg-blue-100 text-blue-700',
  Extended: 'bg-purple-100 text-purple-700',
  Accepted: 'bg-green-100 text-green-700',
  Declined: 'bg-red-100 text-red-700',
  Expired: 'bg-red-50 text-red-400',
};

export default function OffersTab() {
  const [data] = useState<Offer[]>(offers);
  const [showNewOffer, setShowNewOffer] = useState(false);
  const [newOffer, setNewOffer] = useState({ candidateName: '', position: '', department: '', basic: '', housing: '', transport: '', other: '', startDate: '', bonusPercent: '15', annualLeave: '21', insurance: true });

  const totalPackage = (o: Offer) => o.basicSalary + o.housingAllowance + o.transportAllowance + o.otherAllowances;

  return (
    <div>
      <div className="flex items-center justify-between mb-5">
        <div className="flex items-center gap-4">
          {[
            { label: 'Total Offers', value: data.length, color: 'text-purple-600' },
            { label: 'Accepted', value: data.filter(o => o.status === 'Accepted').length, color: 'text-green-600' },
            { label: 'Pending', value: data.filter(o => ['Extended', 'Pending Approval'].includes(o.status)).length, color: 'text-yellow-600' },
            { label: 'Declined/Expired', value: data.filter(o => ['Declined', 'Expired'].includes(o.status)).length, color: 'text-red-600' },
          ].map(s => (
            <div key={s.label} className="text-center">
              <div className={`text-2xl font-bold ${s.color}`}>{s.value}</div>
              <div className="text-xs text-gray-400">{s.label}</div>
            </div>
          ))}
        </div>
        <button onClick={() => setShowNewOffer(true)} 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>
          Generate Offer
        </button>
      </div>

      {showNewOffer && (
        <div className="bg-white border border-gray-100 rounded-2xl p-6 shadow-sm mb-5">
          <div className="flex items-center justify-between mb-4">
            <h3 className="font-semibold text-gray-800">Generate New Offer Letter</h3>
            <button onClick={() => setShowNewOffer(false)} className="w-7 h-7 flex items-center justify-center rounded-lg hover:bg-gray-100 cursor-pointer">
              <i className="ri-close-line text-gray-500"></i>
            </button>
          </div>
          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="block text-xs font-medium text-gray-600 mb-1">Candidate Name</label>
              <input value={newOffer.candidateName} onChange={e => setNewOffer(f => ({ ...f, candidateName: 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="Select from shortlisted candidates" />
            </div>
            <div>
              <label className="block text-xs font-medium text-gray-600 mb-1">Position</label>
              <input value={newOffer.position} onChange={e => setNewOffer(f => ({ ...f, position: 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" />
            </div>
            <div>
              <label className="block text-xs font-medium text-gray-600 mb-1">Basic Salary (KES)</label>
              <input type="number" value={newOffer.basic} onChange={e => setNewOffer(f => ({ ...f, basic: 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" />
            </div>
            <div>
              <label className="block text-xs font-medium text-gray-600 mb-1">Housing Allowance (KES)</label>
              <input type="number" value={newOffer.housing} onChange={e => setNewOffer(f => ({ ...f, housing: 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" />
            </div>
            <div>
              <label className="block text-xs font-medium text-gray-600 mb-1">Transport Allowance (KES)</label>
              <input type="number" value={newOffer.transport} onChange={e => setNewOffer(f => ({ ...f, transport: 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" />
            </div>
            <div>
              <label className="block text-xs font-medium text-gray-600 mb-1">Start Date</label>
              <input type="date" value={newOffer.startDate} onChange={e => setNewOffer(f => ({ ...f, startDate: 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" />
            </div>
            <div>
              <label className="block text-xs font-medium text-gray-600 mb-1">Bonus (%)</label>
              <input type="number" value={newOffer.bonusPercent} onChange={e => setNewOffer(f => ({ ...f, bonusPercent: 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" />
            </div>
            <div>
              <label className="block text-xs font-medium text-gray-600 mb-1">Annual Leave (days)</label>
              <input type="number" value={newOffer.annualLeave} onChange={e => setNewOffer(f => ({ ...f, annualLeave: 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" />
            </div>
          </div>
          <div className="flex items-center gap-3 mt-4">
            <label className="flex items-center gap-2 cursor-pointer">
              <input type="checkbox" checked={newOffer.insurance} onChange={e => setNewOffer(f => ({ ...f, insurance: e.target.checked }))} className="rounded" />
              <span className="text-sm text-gray-600">Include Medical Insurance</span>
            </label>
          </div>
          <div className="flex gap-2 mt-4">
            <button className="px-3 py-2 rounded-lg border border-gray-200 text-sm text-gray-600 hover:bg-gray-50 cursor-pointer whitespace-nowrap">Save Draft</button>
            <button className="px-3 py-2 rounded-lg text-sm font-medium cursor-pointer whitespace-nowrap" style={{ background: '#b828a0', color: 'white' }}>Submit for Approval</button>
          </div>
        </div>
      )}

      <div className="space-y-3">
        {data.map(offer => (
          <div key={offer.id} className="bg-white border border-gray-100 rounded-xl p-5 shadow-sm">
            <div className="flex items-start justify-between mb-4">
              <div>
                <div className="font-semibold text-gray-800">{offer.candidateName}</div>
                <div className="text-sm text-gray-500">{offer.jobTitle} · {offer.department}</div>
                <div className="text-xs text-gray-400 mt-0.5">Offer ID: {offer.id}</div>
              </div>
              <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${statusColors[offer.status]}`}>{offer.status}</span>
            </div>

            <div className="grid grid-cols-5 gap-3 mb-4">
              {[
                { label: 'Basic', value: `KES ${offer.basicSalary.toLocaleString()}` },
                { label: 'Housing', value: `KES ${offer.housingAllowance.toLocaleString()}` },
                { label: 'Transport', value: `KES ${offer.transportAllowance.toLocaleString()}` },
                { label: 'Other', value: `KES ${offer.otherAllowances.toLocaleString()}` },
                { label: 'Total Package', value: `KES ${totalPackage(offer).toLocaleString()}` },
              ].map(item => (
                <div key={item.label} className={`rounded-xl p-3 text-center ${item.label === 'Total Package' ? 'bg-purple-50 border border-purple-100' : 'bg-gray-50'}`}>
                  <div className="text-xs text-gray-400 mb-1">{item.label}</div>
                  <div className={`text-sm font-bold ${item.label === 'Total Package' ? 'text-purple-700' : 'text-gray-700'}`}>{item.value}</div>
                </div>
              ))}
            </div>

            <div className="flex items-center justify-between">
              <div className="flex items-center gap-4 text-xs text-gray-500">
                <span>Start: <strong>{offer.startDate}</strong></span>
                <span>Issued: <strong>{offer.offerDate}</strong></span>
                <span className={new Date(offer.expiryDate) < new Date() ? 'text-red-500' : ''}>Expires: <strong>{offer.expiryDate}</strong></span>
                {offer.signedDate && <span className="text-green-600">Signed: <strong>{offer.signedDate}</strong></span>}
                <span>Bonus: <strong>{offer.bonusPercent}%</strong></span>
                <span>Leave: <strong>{offer.annualLeave} days</strong></span>
              </div>
              <div className="flex gap-2">
                <button className="flex items-center gap-1.5 px-3 py-1.5 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-file-download-line text-sm"></i></div>
                  Download PDF
                </button>
                {offer.status === 'Extended' && (
                  <button className="flex items-center gap-1.5 px-3 py-1.5 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-mail-send-line text-sm"></i></div>
                    Resend to Candidate
                  </button>
                )}
              </div>
            </div>
          </div>
        ))}
        {data.length === 0 && <div className="text-center py-10 text-gray-400 text-sm">No offers generated yet</div>}
      </div>
    </div>
  );
}