import React from 'react';
import { ShieldCheck } from 'lucide-react';

const ITEMS = [
  'Identity',
  'Food Handler',
  'RBS',
  'Allergens',
  'Knife Skills',
  'References',
  'AI Interview',
  'Background Check',
];

export default function CareerPassport({ profile }) {
  const certs = (profile.certifications || []).map((c) => c.toLowerCase());
  const skills = (profile.skills || []).map((s) => s.toLowerCase());
  const badges = (profile.earned_badges || []).map((b) => (b.name || '').toLowerCase());

  const has = (label) => {
    switch (label) {
      case 'Identity':
        return !!profile.selfie_url || !!profile.full_name;
      case 'Food Handler':
        return certs.some((c) => c.includes('food'));
      case 'RBS':
        return certs.some((c) => c.includes('rbs'));
      case 'Allergens':
        return certs.some((c) => c.includes('allergen'));
      case 'Knife Skills':
        return skills.some((s) => s.includes('knife')) || badges.some((b) => b.includes('knife'));
      case 'References':
        return (profile.experience || []).length >= 2;
      case 'AI Interview':
        return (profile.ai_interview_score || 0) > 0;
      case 'Background Check':
        return (profile.shifts_completed || 0) >= 10;
      default:
        return false;
    }
  };

  const done = ITEMS.filter(has);
  const pct = Math.round((done.length / ITEMS.length) * 100);

  return (
    <section className="rounded-2xl bg-white border border-[#E5E7EB] p-6">
      <div className="flex items-center justify-between">
        <h2 className="text-[15px] font-semibold text-[#0F172A]">Career Passport</h2>
        <span className="text-[12px] font-semibold text-[#0838E0]">{pct}% Complete</span>
      </div>
      <div className="mt-4 grid grid-cols-1 sm:grid-cols-3 gap-2">
        {ITEMS.map((label) => {
          const ok = has(label);
          return (
            <div
              key={label}
              className={`flex items-center gap-2 px-3 py-2 rounded-xl border ${
                ok ? 'border-[#BBF7D0] bg-[#F0FDF4]' : 'border-[#E5E7EB] bg-[#F8FAFC]'
              }`}
            >
              <ShieldCheck className={`w-4 h-4 shrink-0 ${ok ? 'text-[#16A34A]' : 'text-[#CBD5E1]'}`} />
              <span className={`text-[13px] ${ok ? 'text-[#0F172A] font-medium' : 'text-[#94A3B8]'}`}>{label}</span>
            </div>
          );
        })}
      </div>
    </section>
  );
}