import { Camera, Fingerprint, Sparkles } from 'lucide-react';

// A living identity card that reflects — rather than describes — the resume-less
// KROW Identity. It fills in as the worker adds a face, skills, languages, etc.
export default function KrowIdentityCard({ form }) {
  const parts = [
    { key: 'face', filled: !!form.selfie_url },
    { key: 'name', filled: !!form.full_name.trim() },
    { key: 'about', filled: !!form.career_goals.trim() },
    { key: 'skills', filled: (form.skills || []).length > 0 },
    { key: 'languages', filled: (form.languages || []).length > 0 },
    { key: 'availability', filled: (form.availability || []).length > 0 },
    { key: 'certifications', filled: (form.certifications || []).length > 0 },
  ];
  const done = parts.filter(p => p.filled).length;
  const pct = Math.round((done / parts.length) * 100);

  return (
    <div className="rounded-2xl bg-[#0838E0] p-5 sm:p-6 text-white overflow-hidden relative">
      <div className="absolute -top-10 -right-10 w-40 h-40 rounded-full bg-[#F9E547]/10" />
      <div className="relative flex items-center gap-4">
        <div className="shrink-0">
          {form.selfie_url ? (
            <img src={form.selfie_url} alt="You" className="w-20 h-20 rounded-2xl object-cover ring-4 ring-white/25" />
          ) : (
            <div className="w-20 h-20 rounded-2xl border-2 border-dashed border-white/40 flex flex-col items-center justify-center text-white/70">
              <Camera className="w-6 h-6" />
              <span className="text-[9px] mt-0.5">your face</span>
            </div>
          )}
        </div>
        <div className="min-w-0 flex-1">
          <div className="inline-flex items-center gap-1.5 text-[10px] font-medium tracking-wide bg-white/15 px-2 py-0.5 rounded-full">
            <Fingerprint className="w-3 h-3" /> KROW Identity
          </div>
          <h1 className="text-[22px] sm:text-[26px] font-bold leading-tight mt-1.5 truncate">
            {form.full_name.trim() || 'Your name'}
          </h1>
          <p className="text-[12px] opacity-80 mt-0.5 line-clamp-2">
            {form.career_goals.trim() || 'What you do and what you\u2019re good at will appear here.'}
          </p>
        </div>
      </div>

      <div className="relative mt-4 space-y-2.5">
        <SlotRow label="Skills" items={form.skills} />
        <SlotRow label="Languages" items={form.languages} />
        <SlotRow label="Availability" items={form.availability} />
        <SlotRow label="Certifications" items={form.certifications} />
      </div>

      <div className="relative mt-4">
        <div className="flex items-center justify-between text-[11px] mb-1.5">
          <span className="inline-flex items-center gap-1 opacity-90"><Sparkles className="w-3 h-3 text-[#F9E547]" /> Your identity is {pct}% alive</span>
          <span className="opacity-70">{done}/{parts.length}</span>
        </div>
        <div className="h-1.5 w-full rounded-full bg-white/15 overflow-hidden">
          <div className="h-full bg-[#F9E547] transition-all duration-500" style={{ width: `${pct}%` }} />
        </div>
      </div>
    </div>
  );
}

function SlotRow({ label, items }) {
  const filled = (items || []).length > 0;
  return (
    <div className="flex items-center gap-2 text-[11px]">
      <span className="w-20 shrink-0 opacity-60">{label}</span>
      {filled ? (
        <div className="flex flex-wrap gap-1.5">
          {items.slice(0, 4).map((it, i) => (
            <span key={i} className="px-2 py-0.5 rounded-full bg-white/15 text-white/90">{it}</span>
          ))}
          {items.length > 4 && <span className="px-1.5 opacity-70">+{items.length - 4}</span>}
        </div>
      ) : (
        <span className="px-2 py-0.5 rounded-full border border-dashed border-white/30 text-white/50">add {label.toLowerCase()}</span>
      )}
    </div>
  );
}