import React from 'react';
import { Star, Briefcase, Quote } from 'lucide-react';
import { verifiedExperience } from './VerifiedExperienceList';
export { verifiedExperience };
import { clientEndorsements } from '@/lib/talentInsights';

const ENDORSEMENT_ROLES = ['Event Director', 'Operations Lead', 'GM', 'Owner', 'HR Partner'];

function Stars({ count }) {
  return (
    <div className="flex items-center gap-0.5">
      {Array.from({ length: 5 }).map((_, i) => (
        <Star
          key={i}
          className={`w-3.5 h-3.5 ${i < count ? 'text-[#F59E0B] fill-[#F59E0B]' : 'text-[#E5E7EB]'}`}
        />
      ))}
    </div>
  );
}

// Consolidated Experience & Endorsements — one row per company combining the
// verified experience entry (shifts, supervisor, duration) with its client
// endorsement (role/title + rating). Falls back to seeded experience so the
// block always shows 3 rows.
export default function ExperienceEndorsements({ profile, onReference }) {
  const jobs = verifiedExperience(profile);
  if (jobs.length === 0) return null;

  // Map endorsements by company for inline merge.
  const endorsements = clientEndorsements(profile);
  const byCompany = new Map(endorsements.map((e) => [e.company, e]));

  return (
    <div className="space-y-2">
      {jobs.map((x, i) => {
        const en = byCompany.get(x.company);
        return (
          <div
            key={i}
            className="rounded-xl border border-[#E5E7EB] bg-white px-3 py-2.5"
          >
            <div className="flex items-center justify-between gap-2">
              <p className="text-[13px] font-semibold text-[#0F172A] truncate flex items-center gap-1.5 min-w-0">
                <Briefcase className="w-3.5 h-3.5 text-[#9CA3AF] shrink-0" />
                {x.company}
                {x.role && <span className="text-[#6B7280] font-normal">· {x.role}</span>}
              </p>
              <div className="flex items-center gap-2 shrink-0">
                <Stars count={x.stars} />
                <button
                  onClick={() => onReference?.(x)}
                  className="hidden sm:inline-flex items-center gap-1 px-2.5 py-1 rounded-full border border-[#0A39DF] text-[#0A39DF] text-[11px] font-semibold hover:bg-[#EFF6FF] transition-colors"
                >
                  Request Reference
                </button>
              </div>
            </div>
            <p className="text-[11px] text-[#16A34A] font-medium mt-1 truncate">
              {x.shifts} shifts · {x.supervisor}
              {x.years != null && <span className="text-[#9CA3AF]"> · {x.years} yr</span>}
            </p>
            {en && (
              <p className="text-[11px] text-[#6B7280] mt-1 flex items-center gap-1.5 truncate">
                <Quote className="w-3 h-3 text-[#9CA3AF] shrink-0" />
                <span className="italic">“{en.role}”</span>
              </p>
            )}
          </div>
        );
      })}
    </div>
  );
}