// ui.jsx — shared primitives for LBC Platform
const { useState, useEffect, useRef } = React;

/* ---- Logo (wordmark) ---- */
function Logo({ color = '#F5EFE3', sub = 'PLATFORM', size = 22, showSub = true }) {
  return (
    <div style={{ display:'flex', flexDirection:'column', lineHeight:1, userSelect:'none' }}>
      <div style={{ display:'flex', alignItems:'flex-start', gap:1 }}>
        <span style={{ fontWeight:800, fontSize:size, letterSpacing:'-.03em', color }}>LBC</span>
        <span style={{ fontWeight:800, fontSize:size*.62, color:'var(--brand-bright)', marginTop:-size*.04 }}>*</span>
      </div>
      {showSub && <span style={{ fontSize:size*.4, fontWeight:600, letterSpacing:'.34em', color, opacity:.62, marginTop:5, marginLeft:1 }}>{sub}</span>}
    </div>
  );
}

/* ---- Mascot ---- */
function Mascot({ size = 96, style = {} }) {
  return <img src="assets/mascot.png" alt="LBC mascot" width={size} height={size}
    style={{ display:'block', borderRadius:'50%', ...style }} />;
}

/* ---- Avatar ---- */
function Avatar({ initials, size = 36, color = 'var(--brand)' }) {
  return (
    <div style={{ width:size, height:size, borderRadius:'50%', background:color, color:'#fff',
      display:'flex', alignItems:'center', justifyContent:'center', fontWeight:600,
      fontSize:size*.4, flexShrink:0, letterSpacing:'.01em' }}>{initials}</div>
  );
}

/* ---- Status badge ---- */
function StatusBadge({ status, pulse }) {
  const meta = window.LBC_DATA.STATUS[status];
  if (!meta) return null;
  const isPulse = pulse && meta.inProgress;
  return (
    <span className={`badge ${meta.cls} ${isPulse ? 'pulse' : ''}`}>
      {meta.euro
        ? <Icon name="euro" size={12} stroke={2.2} />
        : <span className="dot" />}
      {meta.label}
    </span>
  );
}

function FormuleBadge({ formule }) {
  const meta = window.LBC_DATA.FORMULES[formule];
  if (!meta) return null;
  return <span className={`badge ${meta.cls}`}>{meta.label}</span>;
}

/* ---- Route (from → to) ---- */
function Route({ from, to, strong }) {
  return (
    <span className="route" style={strong ? { color:'var(--ink)', fontWeight:600 } : {}}>
      {from} <Icon name="arrowR" size={15} stroke={2} /> {to}
    </span>
  );
}

/* ---- KPI card ---- */
function KPICard({ label, value, sub, trend, trendDir, icon, delay = 0 }) {
  return (
    <div className="card card-pad fade-up" style={{ animationDelay:`${delay}ms`, display:'flex', flexDirection:'column', gap:14 }}>
      <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between' }}>
        <span className="card-label">{label}</span>
        {icon && <span style={{ color:'var(--faint)', display:'flex' }}><Icon name={icon} size={17} /></span>}
      </div>
      <div style={{ display:'flex', alignItems:'baseline', gap:10, flexWrap:'wrap' }}>
        <span className="tnum" style={{ fontSize:28, fontWeight:700, color:'var(--ink)', letterSpacing:'-.02em', whiteSpace:'nowrap' }}>{value}</span>
        {trend && (
          <span style={{ display:'inline-flex', alignItems:'center', gap:3, fontSize:12.5, fontWeight:600,
            color: trendDir === 'down' ? 'var(--muted)' : 'var(--green)' }}>
            <Icon name={trendDir === 'down' ? 'trendDown' : 'trendUp'} size={14} stroke={2.2} />{trend}
          </span>
        )}
      </div>
      {sub && <div style={{ fontSize:12.5, color:'var(--muted)' }}>{sub}</div>}
    </div>
  );
}

/* ---- Progress bar ---- */
function ProgressBar({ value, max, color = 'var(--brand)', track = 'rgba(20,56,78,.1)', height = 8, animate = true }) {
  const [w, setW] = useState(0);
  useEffect(() => {
    const t = setTimeout(() => setW(Math.min(100, (value / max) * 100)), animate ? 180 : 0);
    return () => clearTimeout(t);
  }, [value, max]);
  return (
    <div className="prog" style={{ background:track, height }}>
      <div className="prog-fill" style={{ width:`${w}%`, background:color }} />
    </div>
  );
}

/* ---- Tier chip ---- */
function TierChip({ tier, size = 'md' }) {
  const t = window.LBC_DATA.TIERS.find(x => x.key === tier) || window.LBC_DATA.TIERS[0];
  const small = size === 'sm';
  return (
    <span style={{ display:'inline-flex', alignItems:'center', gap:6, fontSize: small ? 11.5 : 12.5,
      fontWeight:600, padding: small ? '3px 9px' : '4px 11px', borderRadius:999,
      background:'rgba(255,255,255,.08)', color:'var(--cream)', border:'1px solid rgba(255,255,255,.14)' }}>
      <span style={{ width:7, height:7, borderRadius:'50%', background:t.color }} />
      {t.key}
    </span>
  );
}

/* ---- Skeleton row ---- */
function SkelLine({ w = '100%', h = 12, r = 6, style = {} }) {
  return <div className="skel" style={{ width:w, height:h, borderRadius:r, ...style }} />;
}

/* ---- Empty state ---- */
function EmptyState({ title, body, cta, onCta }) {
  return (
    <div className="fade-up" style={{ display:'flex', flexDirection:'column', alignItems:'center',
      textAlign:'center', padding:'56px 24px', gap:6 }}>
      <div style={{ position:'relative', marginBottom:10 }}>
        <Mascot size={120} style={{ boxShadow:'0 16px 40px rgba(15,42,59,.18)' }} />
        <span style={{ position:'absolute', top:-4, right:-6, fontSize:26 }}>👋</span>
      </div>
      <div style={{ fontSize:17, fontWeight:600, color:'var(--ink)' }}>{title}</div>
      {body && <div style={{ fontSize:14, color:'var(--muted)', maxWidth:340, lineHeight:1.5 }}>{body}</div>}
      {cta && <button className="btn btn-primary" style={{ marginTop:14 }} onClick={onCta}>
        <Icon name="plus" size={17} />{cta}</button>}
    </div>
  );
}

/* ---- Toast ---- */
function Toast({ show, children, icon = 'check' }) {
  return (
    <div style={{ position:'fixed', bottom:28, left:'50%', transform:`translateX(-50%) translateY(${show?0:20}px)`,
      opacity: show?1:0, transition:'all .3s var(--ease)', pointerEvents:'none', zIndex:200,
      background:'var(--navy-deep)', color:'var(--cream)', padding:'12px 18px', borderRadius:12,
      display:'flex', alignItems:'center', gap:10, fontSize:14, fontWeight:500, boxShadow:'var(--shadow-pop)' }}>
      <span style={{ color:'var(--green)', display:'flex' }}><Icon name={icon} size={18} stroke={2.4} /></span>
      {children}
    </div>
  );
}

Object.assign(window, {
  Logo, Mascot, Avatar, StatusBadge, FormuleBadge, Route, KPICard, ProgressBar,
  TierChip, SkelLine, EmptyState, Toast,
});