'use client';
import { useState } from 'react';
import { jobPostings, JobPosting } from './recruitmentData';

const statusColors: Record<string, string> = {
  Active: 'bg-green-100 text-green-700',
  Closed: 'bg-gray-100 text-gray-600',
  Draft: 'bg-yellow-100 text-yellow-700',
  Paused: 'bg-orange-100 text-orange-700',
};

const channelIcons: Record<string, string> = {
  Internal: 'ri-building-line',
  LinkedIn: 'ri-linkedin-box-fill',
  Indeed: 'ri-search-2-line',
  'Career Site': 'ri-global-line',
};

export default function JobPostingsTab() {
  const [data] = useState<JobPosting[]>(jobPostings);
  const [filterStatus, setFilterStatus] = useState('All');

  const filtered = data.filter(p => filterStatus === 'All' || p.status === filterStatus);

  const statCounts = {
    Active: data.filter(p => p.status === 'Active').length,
    Draft: data.filter(p => p.status === 'Draft').length,
    Closed: data.filter(p => p.status === 'Closed').length,
    Total: data.reduce((s, p) => s + p.applicationCount, 0),
  };

  return (
    <div>
      <div className="grid grid-cols-4 gap-4 mb-5">
        {[
          { label: 'Active Postings', value: statCounts.Active, icon: 'ri-radio-button-line', color: 'text-green-600 bg-green-50' },
          { label: 'Draft Postings', value: statCounts.Draft, icon: 'ri-draft-line', color: 'text-yellow-600 bg-yellow-50' },
          { label: 'Closed Postings', value: statCounts.Closed, icon: 'ri-close-circle-line', color: 'text-gray-600 bg-gray-50' },
          { label: 'Total Applications', value: statCounts.Total, icon: 'ri-user-received-2-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="flex items-center gap-3 mb-5">
        <div className="flex gap-2">
          {['All', 'Active', 'Draft', 'Paused', 'Closed'].map(s => (
            <button key={s} onClick={() => setFilterStatus(s)} className={`px-3 py-1.5 rounded-lg text-sm font-medium cursor-pointer transition-all whitespace-nowrap ${filterStatus === s ? 'text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'}`} style={filterStatus === s ? { background: '#b828a0' } : {}}>
              {s}
            </button>
          ))}
        </div>
        <div className="ml-auto">
          <button 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 Job Posting
          </button>
        </div>
      </div>

      <div className="space-y-3">
        {filtered.map(posting => (
          <div key={posting.id} className="bg-white border border-gray-100 rounded-xl p-5 shadow-sm hover:shadow-md transition-shadow">
            <div className="flex items-start justify-between mb-3">
              <div>
                <h3 className="font-semibold text-gray-800 text-base">{posting.title}</h3>
                <div className="flex items-center gap-3 text-sm text-gray-500 mt-1">
                  <span className="flex items-center gap-1">
                    <div className="w-4 h-4 flex items-center justify-center"><i className="ri-building-line text-xs"></i></div>
                    {posting.department}
                  </span>
                  <span className="flex items-center gap-1">
                    <div className="w-4 h-4 flex items-center justify-center"><i className="ri-map-pin-line text-xs"></i></div>
                    {posting.location}
                  </span>
                  <span className="flex items-center gap-1">
                    <div className="w-4 h-4 flex items-center justify-center"><i className="ri-time-line text-xs"></i></div>
                    {posting.employmentType}
                  </span>
                </div>
              </div>
              <div className="flex items-center gap-2">
                <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${statusColors[posting.status]}`}>{posting.status}</span>
              </div>
            </div>

            <p className="text-sm text-gray-600 mb-3 line-clamp-2">{posting.description}</p>

            <div className="flex items-center justify-between">
              <div className="flex items-center gap-4">
                <div className="flex items-center gap-1.5">
                  {posting.publishChannels.map(ch => (
                    <div key={ch} className="flex items-center gap-1 bg-gray-50 border border-gray-100 px-2 py-1 rounded-lg">
                      <div className="w-3 h-3 flex items-center justify-center"><i className={`${channelIcons[ch] || 'ri-share-line'} text-gray-500 text-xs`}></i></div>
                      <span className="text-xs text-gray-500">{ch}</span>
                    </div>
                  ))}
                </div>
                {posting.salaryMin && posting.salaryMax && (
                  <span className="text-xs text-gray-500">KES {posting.salaryMin.toLocaleString()} – {posting.salaryMax.toLocaleString()}</span>
                )}
              </div>
              <div className="flex items-center gap-4">
                <div className="text-center">
                  <div className="text-lg font-bold text-purple-600">{posting.applicationCount}</div>
                  <div className="text-xs text-gray-400">Applications</div>
                </div>
                <div className="text-center">
                  <div className="text-xs text-gray-500">{posting.postedDate}</div>
                  <div className="text-xs text-gray-400">Posted</div>
                </div>
                <div className="text-center">
                  <div className={`text-xs font-medium ${new Date(posting.expiryDate) < new Date() ? 'text-red-500' : 'text-gray-500'}`}>{posting.expiryDate}</div>
                  <div className="text-xs text-gray-400">Expires</div>
                </div>
                <div className="flex 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 Applicants">
                    <i className="ri-group-line text-sm"></i>
                  </button>
                  <button className="w-7 h-7 flex items-center justify-center rounded-lg hover:bg-gray-100 text-gray-500 cursor-pointer" title="Edit">
                    <i className="ri-edit-line text-sm"></i>
                  </button>
                  <button className="w-7 h-7 flex items-center justify-center rounded-lg hover:bg-gray-100 text-gray-500 cursor-pointer" title="Duplicate">
                    <i className="ri-file-copy-line text-sm"></i>
                  </button>
                </div>
              </div>
            </div>
          </div>
        ))}
        {filtered.length === 0 && <div className="text-center py-10 text-gray-400 text-sm">No job postings found</div>}
      </div>
    </div>
  );
}