'use client';

import React from 'react';
import { ChevronRight, ArrowUpRight, ShieldCheck, AlertTriangle, Target } from 'lucide-react';

export default function CandidateTable({ evaluations, onViewDetail }) {
  if (!evaluations || evaluations.length === 0) return null;

  return (
    <div className="overflow-x-auto">
      <table className="w-full text-left border-separate border-spacing-y-3">
        <thead>
          <tr className="text-slate-500 text-sm font-medium">
            <th className="px-4 pb-2">Rank</th>
            <th className="px-4 pb-2">Candidate</th>
            <th className="px-4 pb-2">Score</th>
            <th className="px-4 pb-2">Decision</th>
            <th className="px-4 pb-2">Confidence</th>
            <th className="px-4 pb-2 text-right">Action</th>
          </tr>
        </thead>
        <tbody>
          {evaluations.map((evalItem, index) => (
            <tr 
              key={evalItem.candidate_id} 
              className="glass-card hover:bg-slate-50/50 dark:hover:bg-slate-800/30 transition-all group cursor-pointer"
              onClick={() => onViewDetail(evalItem)}
            >
              <td className="px-4 py-4 rounded-l-xl">
                <span className={`flex items-center justify-center w-8 h-8 rounded-full text-xs font-bold ${
                  index === 0 ? 'bg-amber-100 text-amber-600' : 
                  index === 1 ? 'bg-slate-100 text-slate-600' : 
                  index === 2 ? 'bg-orange-100 text-orange-600' : 'bg-slate-50 text-slate-400'
                }`}>
                  {index + 1}
                </span>
              </td>
              <td className="px-4 py-4">
                <div>
                  <div className="font-semibold text-slate-900 dark:text-white">{evalItem.name}</div>
                  <div className="text-xs text-slate-500 truncate max-w-[150px]">{evalItem.candidate_id}</div>
                </div>
              </td>
              <td className="px-4 py-4">
                <div className="flex items-center gap-2">
                  <div className="w-16 h-2 bg-slate-100 dark:bg-slate-800 rounded-full overflow-hidden">
                    <div 
                      className="h-full bg-indigo-500 transition-all duration-1000" 
                      style={{ width: `${evalItem.final_score}%` }}
                    />
                  </div>
                  <span className="text-sm font-bold text-indigo-600">{Math.round(evalItem.final_score)}</span>
                </div>
              </td>
              <td className="px-4 py-4">
                <span className={`px-2 py-1 rounded-md text-[10px] uppercase font-bold tracking-wider ${
                  evalItem.decision === 'Strong Hire' ? 'bg-emerald-100 text-emerald-700' :
                  evalItem.decision === 'Hire' ? 'bg-blue-100 text-blue-700' :
                  evalItem.decision === 'Reject' ? 'bg-rose-100 text-rose-700' : 'bg-slate-100 text-slate-700'
                }`}>
                  {evalItem.decision}
                </span>
              </td>
              <td className="px-4 py-4">
                <div className="flex items-center gap-1.6 text-sm">
                  <Target className="w-4 h-4 text-slate-400" />
                  <span>{evalItem.confidence}%</span>
                </div>
              </td>
              <td className="px-4 py-4 text-right rounded-r-xl">
                <button className="p-2 hover:bg-white dark:hover:bg-slate-700 rounded-lg transition-colors">
                  <ChevronRight className="w-5 h-5 text-slate-400 group-hover:text-indigo-600" />
                </button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}