import React from 'react';
import { User, Briefcase, TrendingUp } from 'lucide-react';
import type { Application, Candidate } from '../../types/index.js';

interface ATSPipelineProps {
  applications?: Application[];
  candidates?: Candidate[];
}

const stages = [
  'Applied',
  'Phone Screen',
  'Technical Interview',
  'Team Interview',
  'Final Round',
  'Offer',
];

export const ATSPipeline: React.FC<ATSPipelineProps> = ({
  applications = [],
  candidates = [],
}) => {
  const activeApplications = applications.filter(a => a.status === 'ACTIVE');
  
  const applicationsByStage: Record<string, Application[]> = {};
  stages.forEach(stage => {
    applicationsByStage[stage] = activeApplications.filter(a => a.stage === stage);
  });

  const totalCandidates = candidates.length;
  const hired = applications.filter(a => a.status === 'HIRED').length;
  const conversionRate = totalCandidates > 0 ? ((hired / totalCandidates) * 100).toFixed(1) : 0;

  return (
    <div className="p-6 bg-white rounded-lg shadow">
      <h2 className="text-2xl font-bold mb-6">ATS Pipeline</h2>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
        <div className="bg-blue-50 p-4 rounded-lg">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm text-gray-600">Total Candidates</p>
              <p className="text-3xl font-bold text-blue-600">{totalCandidates}</p>
            </div>
            <User className="w-10 h-10 text-blue-400" />
          </div>
        </div>

        <div className="bg-green-50 p-4 rounded-lg">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm text-gray-600">Hired</p>
              <p className="text-3xl font-bold text-green-600">{hired}</p>
            </div>
            <Briefcase className="w-10 h-10 text-green-400" />
          </div>
        </div>

        <div className="bg-purple-50 p-4 rounded-lg">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm text-gray-600">Conversion Rate</p>
              <p className="text-3xl font-bold text-purple-600">{conversionRate}%</p>
            </div>
            <TrendingUp className="w-10 h-10 text-purple-400" />
          </div>
        </div>
      </div>

      <div className="overflow-x-auto">
        <div className="flex gap-4 min-w-max pb-4">
          {stages.map((stage) => {
            const apps = applicationsByStage[stage] || [];
            const count = apps.length;

            return (
              <div key={stage} className="flex-shrink-0 w-64">
                <div className="bg-gray-100 rounded-lg p-3 mb-3">
                  <div className="flex items-center justify-between">
                    <h3 className="font-semibold">{stage}</h3>
                    <span className="bg-blue-600 text-white text-xs px-2 py-1 rounded-full">
                      {count}
                    </span>
                  </div>
                </div>

                <div className="space-y-2 max-h-[600px] overflow-y-auto">
                  {apps.map((app) => {
                    const candidate = candidates.find(c => c.id === app.candidateId);
                    
                    return (
                      <div
                        key={app.id}
                        className="bg-white border rounded-lg p-3 hover:shadow-md transition cursor-pointer"
                      >
                        {candidate && (
                          <>
                            <h4 className="font-semibold text-sm mb-1">
                              {candidate.firstName} {candidate.lastName}
                            </h4>
                            {candidate.email && (
                              <p className="text-xs text-gray-600 mb-2">{candidate.email}</p>
                            )}
                          </>
                        )}
                        <div className="text-xs text-gray-500">
                          Applied: {new Date(app.appliedAt).toLocaleDateString()}
                        </div>
                        {app.interviews && app.interviews.length > 0 && (
                          <div className="mt-2 text-xs">
                            <span className="bg-purple-100 text-purple-800 px-2 py-1 rounded">
                              {app.interviews.length} interview{app.interviews.length !== 1 ? 's' : ''}
                            </span>
                          </div>
                        )}
                      </div>
                    );
                  })}
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
};
