import React from 'react';

// Skill levels: Claimed → Practiced → Verified → Expert → Elite
const LEVELS = [
  { name: 'Claimed', fill: 35, bar: 'bg-[#CBD5E1]', text: 'text-[#94A3B8]' },
  { name: 'Practiced', fill: 62, bar: 'bg-[#93C5FD]', text: 'text-[#3B82F6]' },
  { name: 'Verified', fill: 84, bar: 'bg-[#0A39DF]', text: 'text-[#0A39DF]' },
  { name: 'Expert', fill: 94, bar: 'bg-[#6366F1]', text: 'text-[#6366F1]' },
  { name: 'Elite', fill: 100, bar: 'bg-[#F9E547]', text: 'text-[#92400E]' },
];

function levelFor(skill, badges, courses) {
  const s = skill.toLowerCase();
  const certHits = (badges || []).filter((b) => (b.name || '').toLowerCase().includes(s)).length;
  const courseHits = (courses || []).filter((c) => (c.title || '').toLowerCase().includes(s)).length;
  const score = certHits * 2 + courseHits;
  if (score >= 6) return 4;
  if (score >= 3) return 3;
  if (certHits >= 1) return 2;
  if (courseHits >= 1) return 1;
  return 0;
}

export default function SkillDNA({ profile }) {
  const skills = profile?.skills || [];
  const badges = profile?.earned_badges || [];
  const courses = profile?.completed_courses || [];

  return (
    <section className="py-12 sm:py-16 border-t border-[#F1F5F9]">
      <h2 className="text-[22px] sm:text-[26px] font-semibold text-[#0F172A] tracking-tight">Skill DNA</h2>
      <p className="text-[14px] text-[#64748B] mt-2 max-w-md">
        Every shift updates these bars. Employers trust them.
      </p>

      {!skills.length ? (
        <p className="text-[14px] text-[#94A3B8] mt-8">
          Add skills to your profile to start tracking your Skill DNA.
        </p>
      ) : (
        <div className="mt-8 space-y-5 max-w-2xl">
          {skills.map((sk, i) => {
            const lvl = LEVELS[levelFor(sk, badges, courses)];
            return (
              <div key={i}>
                <div className="flex items-center justify-between mb-1.5">
                  <span className="text-[14px] font-medium text-[#0F172A]">{sk}</span>
                  <span className={`text-[12px] font-medium ${lvl.text}`}>{lvl.name}</span>
                </div>
                <div className="h-2 rounded-full bg-[#F1F5F9] overflow-hidden">
                  <div
                    className={`h-full ${lvl.bar} rounded-full transition-all duration-500`}
                    style={{ width: `${lvl.fill}%` }}
                  />
                </div>
              </div>
            );
          })}
        </div>
      )}
    </section>
  );
}