import React, { useRef, useState } from 'react';
import html2canvas from 'html2canvas';
import { Wallet, Smartphone, Image as ImageIcon, ShieldCheck, Briefcase, Sparkles, QrCode, Download, Check, Info, RefreshCw } from 'lucide-react';
import { toast } from 'react-hot-toast';
import { Image } from '@/components/ui/image';
import { getTalentScore, getScoreBand, getGrowth } from '@/lib/talentHome';

const clamp = (n, min = 0, max = 100) => Math.max(min, Math.min(max, Math.round(Number(n) || 0)));

// Employee Satisfaction — composite of attendance, performance, client & supervisor ratings
export function getESAT(profile = {}) {
  const att = clamp(profile.attendance_score ?? 100);
  const perf = clamp(profile.performance_score);
  const client = ((Number(profile.client_rating) || 0) / 5) * 100;
  const sup = ((Number(profile.supervisor_rating) || 0) / 5) * 100;
  const hasRatings = client > 0 || sup > 0;
  if (!hasRatings) return clamp(att * 0.6 + perf * 0.4);
  return clamp(att * 0.3 + perf * 0.25 + client * 0.225 + sup * 0.225);
}

// Display the career score on a FICO-style 300–850 scale ("like checking your credit score")
const toFICO = (s) => 300 + Math.round((clamp(s) / 100) * 550);

function buildVCard(profile) {
  const name = profile.full_name || 'KROW Talent';
  const [first, ...rest] = name.split(' ');
  const last = rest.join(' ');
  const lines = [
    'BEGIN:VCARD', 'VERSION:3.0',
    `N:${last};${first};;;`, `FN:${name}`,
    profile.current_position ? `TITLE:${profile.current_position}` : '',
    profile.phone ? `TEL;TYPE=CELL:${profile.phone}` : '',
    profile.email ? `EMAIL:${profile.email}` : '',
    profile.address ? `ADR:;;${profile.address};;;;` : '',
    `URL:https://krow.app/me`,
    `NOTE:KROW ID ${(profile.id || '').slice(-6).toUpperCase()} · Talent Score ${profile.krow_score || 0}`,
    'END:VCARD',
  ].filter(Boolean);
  return lines.join('\n');
}

function download(filename, content, type) {
  const blob = new Blob([content], { type });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url; a.download = filename; a.click();
  URL.revokeObjectURL(url);
}

const BLUE = '#0055FF';
const TRACK = '#E1E5E9';
const ARC_R = 64;
const CX = 80;
const CY = 80;
function arcPoint(p) {
  const ang = Math.PI - p * Math.PI;
  return { x: CX + ARC_R * Math.cos(ang), y: CY - ARC_R * Math.sin(ang) };
}
function arcPath(startP, endP) {
  const a = arcPoint(startP);
  const b = arcPoint(endP);
  const large = endP - startP > 0.5 ? 1 : 0;
  return `M ${a.x} ${a.y} A ${ARC_R} ${ARC_R} 0 ${large} 1 ${b.x} ${b.y}`;
}
function Gauge({ fico }) {
  const pct = Math.max(0, Math.min(1, (fico - 300) / 550));
  const gap = 0.02;
  const filledEnd = Math.max(gap, Math.min(1 - gap, pct));
  const marker = arcPoint(filledEnd);
  return (
    <div className="relative mx-auto" style={{ width: CX * 2, height: CY + 18 }}>
      <svg width={CX * 2} height={CY + 18} viewBox={`0 0 ${CX * 2} ${CY + 18}`}>
        <path d={arcPath(gap, 1 - gap)} fill="none" stroke={TRACK} strokeWidth="12" strokeLinecap="round" />
        {pct > gap && (
          <path d={arcPath(gap, filledEnd)} fill="none" stroke={BLUE} strokeWidth="12" strokeLinecap="round" />
        )}
        <circle cx={marker.x} cy={marker.y} r="8" fill={BLUE} stroke="#fff" strokeWidth="3" />
      </svg>
      <div className="absolute inset-x-0 bottom-1 flex flex-col items-center">
        <span className="text-[9px] uppercase tracking-wide text-[#A0AAB9] font-semibold">Career Score</span>
        <span className="text-[28px] font-bold leading-none mt-0.5" style={{ color: BLUE }}>{fico}</span>
        <span className="text-[10px] text-[#8690A1] font-medium mt-0.5">300-850</span>
      </div>
    </div>
  );
}

function FactorPill({ label, value }) {
  return (
    <span className="inline-flex items-center gap-1.5 rounded-full bg-white/70 border border-[#E6ECF5] px-3 py-1.5 text-[11px] font-medium text-[#374151] backdrop-blur-sm">
      <span className="text-[#9CA3AF]">{label}</span>
      <span className="font-semibold text-[#0A39DF]">{value}</span>
    </span>
  );
}

function ReportRow({ icon: Icon, label, value, tone }) {
  const valColor = tone === 'verified' ? 'text-[#10B981]' : tone === 'amber' ? 'text-[#D97706]' : 'text-[#0F172A]';
  return (
    <div className="flex items-center justify-between gap-3 py-2 border-b border-white/60 last:border-0">
      <div className="flex items-center gap-2 text-[#6B7280]">
        <Icon className="w-4 h-4" />
        <span className="text-[12px] font-medium">{label}</span>
      </div>
      <span className={`inline-flex items-center gap-1 rounded-full bg-white/80 border border-[#E6ECF5] px-2.5 py-1 text-[11px] font-semibold ${valColor}`}>
        {tone === 'verified' && <Check className="w-3 h-3" />}{value}
      </span>
    </div>
  );
}

export default function IdentityCareerCard({ profile }) {
  const stackRef = useRef(null);
  const [busy, setBusy] = useState(false);

  const score = getTalentScore(profile);
  const band = getScoreBand(score);
  const growth = getGrowth(profile);
  const esat = getESAT(profile);
  const fico = toFICO(score);
  const shortId = (profile.id || '').slice(-6).toUpperCase();
  const name = profile.full_name || 'KROW Talent';
  const title = profile.current_position || profile.desired_position || 'Open to work';
  const initials = name.split(' ').map(p => p[0]).slice(0, 2).join('').toUpperCase();
  const experience = profile.experience || [];
  const identityOk = !!profile.selfie_url;

  const vcard = buildVCard(profile);
  const qrSrc = `https://api.qrserver.com/v1/create-qr-code/?margin=0&size=160x160&data=${encodeURIComponent(vcard)}`;
  const updated = new Date().toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });

  const addToContacts = () => {
    download(`${name.replace(/\s+/g, '_')}.vcf`, vcard, 'text/vcard');
    toast.success('Contact file downloaded — open it to add to your phone.');
  };
  const saveReport = async () => {
    if (!stackRef.current) return;
    setBusy(true);
    try {
      const canvas = await html2canvas(stackRef.current, { backgroundColor: null, scale: 2 });
      canvas.toBlob((blob) => {
        if (!blob) return;
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url; a.download = `${name.replace(/\s+/g, '_')}_KROW_ID.png`; a.click();
        URL.revokeObjectURL(url);
        toast.success('Holographic ID saved to your downloads.');
      });
    } catch { toast.error('Could not generate ID image.'); }
    finally { setBusy(false); }
  };
  const walletNotice = () => toast('Wallet passes need Apple/Google pass certificates. Use Add to Contacts for now.', { icon: 'ℹ️' });

  return (
    <div className="flex justify-center">
      <div className="relative w-full max-w-md" style={{ perspective: '1400px' }}>
        {/* Stacked depth layers (behind) */}
        <div aria-hidden className="absolute inset-0 rounded-[28px] bg-white/50 border border-white/60 backdrop-blur-xl shadow-[0_20px_60px_-20px_rgba(10,57,223,0.35)]"
          style={{ transform: 'translateY(18px) translateX(14px) rotateY(-10deg) rotateX(6deg)' }} />
        <div aria-hidden className="absolute inset-0 rounded-[28px] bg-white/40 border border-white/70 backdrop-blur-xl shadow-[0_16px_50px_-18px_rgba(10,57,223,0.3)]"
          style={{ transform: 'translateY(9px) translateX(7px) rotateY(-5deg) rotateX(3deg)' }} />

        {/* Front holographic pass */}
        <div ref={stackRef} className="relative rounded-[28px] border border-white/80 backdrop-blur-2xl shadow-[0_24px_70px_-24px_rgba(10,57,223,0.45)] overflow-hidden"
          style={{ background: 'linear-gradient(160deg, rgba(255,255,255,0.92) 0%, rgba(244,247,255,0.88) 100%)' }}>
          {/* holographic sheen */}
          <div aria-hidden className="pointer-events-none absolute inset-0" style={{ background: 'linear-gradient(115deg, transparent 30%, rgba(10,57,223,0.05) 45%, rgba(249,229,71,0.06) 55%, transparent 70%)' }} />

          <div className="relative p-5 text-center">
            {/* Identity header */}
            <div className="mx-auto w-16 h-16 rounded-full overflow-hidden border-4 border-white shadow-md bg-[#EFF6FF] flex items-center justify-center mb-2">
              {profile.selfie_url ? (
                <Image src={profile.selfie_url} alt={name} className="w-full h-full object-cover" fittingType="fill" />
              ) : (
                <span className="text-[20px] font-bold text-[#0A39DF]">{initials}</span>
              )}
            </div>
            <p className="text-[10px] font-semibold uppercase tracking-[0.12em] text-[#0A39DF]">KROW ID · {shortId}</p>
            <h2 className="text-[20px] font-bold text-[#0F172A] tracking-tight mt-1">{name}</h2>
            <p className="text-[12px] text-[#6B7280]">{title}</p>
            <div className="mt-1.5 inline-flex items-center gap-1 text-[10px] text-[#9CA3AF]">
              <ShieldCheck className="w-3 h-3" /> Career Credit Report · {updated}
            </div>

            {/* Career Score gauge */}
            <div className="mt-4">
              <Gauge fico={fico} />
              <span className="inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-[12px] font-bold mt-2"
                style={{ color: BLUE, background: '#F0F4F9' }}>
                {band.label}
                <Info className="w-3 h-3" style={{ color: BLUE }} />
              </span>
              <div className="inline-flex items-center gap-1.5 mt-2 text-[11px] text-[#7D8590]">
                <RefreshCw className="w-3 h-3" />
                Next update in 31 days
              </div>
            </div>

            {/* Score factors */}
            <div className="mt-4 text-left">
              <p className="text-[10px] uppercase tracking-wide text-[#9CA3AF] mb-2">Score factors</p>
              <div className="flex flex-wrap gap-1.5 justify-center">
                <FactorPill label="Reliability" value={clamp(profile.reliability_score)} />
                <FactorPill label="Attendance" value={clamp(profile.attendance_score ?? 100)} />
                <FactorPill label="Performance" value={clamp(profile.performance_score)} />
                <FactorPill label="Leadership" value={clamp(profile.leadership_potential)} />
                <FactorPill label="AI Interview" value={clamp(profile.ai_interview_score)} />
                <FactorPill label="XP Earned" value={Number(profile.xp) || 0} />
              </div>
            </div>

            {/* Report rows */}
            <div className="mt-4 text-left rounded-2xl bg-white/60 border border-white/70 p-3 backdrop-blur-sm">
              <ReportRow icon={ShieldCheck} label="Identity" value={identityOk ? 'Verified' : 'Pending'} tone={identityOk ? 'verified' : 'amber'} />
              <ReportRow icon={Briefcase} label="Job History" value={`${experience.length} ${experience.length === 1 ? 'role' : 'roles'}`} />
              <ReportRow icon={Sparkles} label="ESAT" value={`${esat}/100`} tone={esat >= 75 ? 'verified' : esat >= 40 ? 'amber' : 'neutral'} />
            </div>

            {/* Job history detail */}
            {experience.length > 0 && (
              <div className="mt-3 text-left">
                {experience.map((job, i) => (
                  <div key={i} className="flex items-center justify-between gap-3 py-1.5">
                    <div className="min-w-0">
                      <p className="text-[12px] font-medium text-[#0F172A] truncate">{job.role || 'Role'}</p>
                      <p className="text-[10px] text-[#9CA3AF]">{job.company || 'Company'}</p>
                    </div>
                    <span className="text-[10px] font-semibold text-[#0A39DF] whitespace-nowrap">{job.years ? `${job.years} yr${job.years === 1 ? '' : 's'}` : '—'}</span>
                  </div>
                ))}
              </div>
            )}

            {/* Take your KROW ID */}
            <div className="mt-4 text-left">
              <p className="text-[10px] uppercase tracking-wide text-[#9CA3AF] mb-2 flex items-center gap-1.5"><Download className="w-3 h-3" /> Take your KROW ID</p>
              <div className="flex items-center gap-3">
                <div className="rounded-xl bg-white p-1.5 border border-[#E6ECF5] shadow-sm shrink-0">
                  <img src={qrSrc} alt="KROW Identity QR" width={64} height={64} className="block" />
                </div>
                <div className="flex-1 flex flex-col gap-1.5">
                  <div className="grid grid-cols-2 gap-1.5">
                    <button onClick={walletNotice} className="flex items-center justify-center gap-1 h-9 rounded-xl bg-[#0A39DF] text-white text-[10px] font-semibold hover:bg-[#082EB4] transition-colors"><Wallet className="w-3 h-3" /> Apple</button>
                    <button onClick={walletNotice} className="flex items-center justify-center gap-1 h-9 rounded-xl bg-white border border-[#E6ECF5] text-[#0F172A] text-[10px] font-semibold hover:border-[#0A39DF] transition-colors"><Wallet className="w-3 h-3 text-[#0A39DF]" /> Google</button>
                  </div>
                  <div className="grid grid-cols-2 gap-1.5">
                    <button onClick={addToContacts} className="flex items-center justify-center gap-1 h-9 rounded-xl bg-white border border-[#E6ECF5] text-[#0F172A] text-[10px] font-semibold hover:border-[#0A39DF] transition-colors"><Smartphone className="w-3 h-3 text-[#0A39DF]" /> Contacts</button>
                    <button onClick={saveReport} disabled={busy} className="flex items-center justify-center gap-1 h-9 rounded-xl bg-white border border-[#E6ECF5] text-[#0F172A] text-[10px] font-semibold hover:border-[#0A39DF] transition-colors disabled:opacity-60"><ImageIcon className="w-3 h-3 text-[#0A39DF]" /> {busy ? '…' : 'Save'}</button>
                  </div>
                </div>
              </div>
              <p className="text-[10px] text-[#9CA3AF] mt-2 flex items-center gap-1 justify-center"><QrCode className="w-3 h-3" /> Scan to share your verified KROW Identity</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}