/* global React */
/* Shared building blocks for all screens */

function Butterfly({ size = 32, opacity = 1 }) {
  return (
    <img src="assets/logo-mark.png" alt="" aria-hidden="true"
      style={{ width: size, height: size, objectFit: 'contain', opacity, display: 'block' }} />
  );
}

function Wordmark({ height = 22, dark = false }) {
  return (
    <img src={dark ? 'assets/logo-wordmark-yellow.png' : 'assets/logo-wordmark-black.png'}
      alt="Cocoon" style={{ height, display: 'block' }} />
  );
}

function MatchRing({ value = 94, size = 92, stroke = 8, label = 'MATCH', dark = false }) {
  const r = (size - stroke) / 2;
  const c = 2 * Math.PI * r;
  const offset = c * (1 - value / 100);
  const textCol = dark ? 'var(--cocoon-cream)' : 'var(--cocoon-ink)';
  const subCol  = dark ? 'rgba(250,250,247,0.55)' : 'var(--cocoon-mid)';
  const trackCol = dark ? 'rgba(255,255,255,0.18)' : 'rgba(31,36,33,0.12)';
  return (
    <div style={{ position: 'relative', width: size, height: size, flexShrink: 0 }}>
      <svg width={size} height={size} style={{ transform: 'rotate(-90deg)' }}>
        <circle cx={size/2} cy={size/2} r={r} fill="none" stroke={trackCol} strokeWidth={stroke} />
        <circle cx={size/2} cy={size/2} r={r} fill="none" stroke="var(--cocoon-yellow)" strokeWidth={stroke}
          strokeDasharray={c} strokeDashoffset={offset} strokeLinecap="round" />
      </svg>
      <div style={{
        position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column',
        alignItems: 'center', justifyContent: 'center',
      }}>
        <span style={{ fontFamily: 'var(--font-serif)', fontWeight: 700, fontSize: size * 0.34, lineHeight: 1, color: textCol }}>
          {value}<span style={{ fontFamily: 'var(--font-sans)', fontSize: size * 0.14, color: subCol, verticalAlign: 'super' }}>%</span>
        </span>
        {label && (
          <span style={{ fontSize: size * 0.085, color: subCol, letterSpacing: '0.12em', textTransform: 'uppercase', marginTop: 2, fontWeight: 600 }}>
            {label}
          </span>
        )}
      </div>
    </div>
  );
}

/* Butterfly progress — colour reveals from bottom up as % grows.
   Echoes the cocoon metaphor: emerging into colour. */
function ButterflyProgress({ value = 76, size = 140 }) {
  const reveal = 100 - value; // clip-path inset top
  return (
    <div style={{ position: 'relative', width: size, height: size, flexShrink: 0 }}>
      {/* ghost / faded base layer */}
      <img src="assets/logo-mark.png" alt="" aria-hidden="true"
        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'contain', filter: 'grayscale(1)', opacity: 0.18 }} />
      {/* full-colour layer clipped to reveal */}
      <div style={{
        position: 'absolute', inset: 0,
        clipPath: `inset(${reveal}% 0 0 0)`,
        WebkitClipPath: `inset(${reveal}% 0 0 0)`,
        transition: 'clip-path 600ms var(--ease-out)',
      }}>
        <img src="assets/logo-mark.png" alt=""
          style={{ width: '100%', height: '100%', objectFit: 'contain' }} />
      </div>
      {/* percentage chip */}
      <div style={{
        position: 'absolute', left: '50%', bottom: -10,
        transform: 'translateX(-50%)',
        background: 'var(--cocoon-ink)', color: '#fff',
        padding: '4px 12px', borderRadius: 999,
        fontFamily: 'var(--font-serif)', fontWeight: 700, fontSize: size * 0.12, lineHeight: 1,
        boxShadow: '0 4px 12px rgba(31,36,33,0.18)',
      }}>
        {value}<span style={{ fontFamily: 'var(--font-sans)', fontSize: size * 0.075, color: 'var(--cocoon-yellow)', marginLeft: 1 }}>%</span>
      </div>
    </div>
  );
}

function Avatar({ src, size = 40, ring = false }) {
  // sophie portrait has different framing — face is centred lower in the photo
  const op = src === 'sophie' ? '50% 35%' : '50% 22%';
  return (
    <div style={{
      width: size, height: size, borderRadius: '50%', overflow: 'hidden',
      flexShrink: 0,
      boxShadow: ring ? '0 0 0 2px var(--cocoon-yellow)' : 'none',
    }}>
      <img src={`assets/photos/${src}.jpg`} alt=""
        style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: op }} />
    </div>
  );
}

function CompanyMark({ size = 36, ink = true, mark = 'butterfly', letter = '' }) {
  return (
    <div style={{
      width: size, height: size, borderRadius: 9, flexShrink: 0,
      background: ink ? 'var(--cocoon-ink)' : 'var(--cocoon-yellow)',
      display: 'grid', placeItems: 'center',
      padding: ink ? 6 : 4,
    }}>
      {mark === 'butterfly'
        ? <Butterfly size={size - 12} />
        : <span style={{ fontFamily: 'var(--font-serif)', fontWeight: 700, fontSize: size * 0.5, color: ink ? 'var(--cocoon-yellow)' : 'var(--cocoon-ink)' }}>{letter}</span>}
    </div>
  );
}

function TabBar({ active = 'home' }) {
  const tabs = [
    { id: 'home',     l: 'Today',   icon: <path d="M3 11l9-8 9 8v10a2 2 0 01-2 2h-4v-7H9v7H5a2 2 0 01-2-2V11z" strokeWidth="1.8" fill="none"/> },
    { id: 'discover', l: 'Discover',icon: <circle cx="12" cy="12" r="9" strokeWidth="1.8" fill="none"/> },
    { id: 'coach',    l: 'Coach',   icon: <path d="M12 2a10 10 0 100 20 10 10 0 000-20zm0 5v6m0 3v.5" strokeWidth="1.8" fill="none"/> },
    { id: 'inbox',    l: 'Inbox',   icon: <path d="M4 8l8 5 8-5v10a2 2 0 01-2 2H6a2 2 0 01-2-2V8z" strokeWidth="1.8" fill="none"/> },
    { id: 'you',      l: 'You',     icon: <path d="M12 12a4 4 0 100-8 4 4 0 000 8zm-7 9a7 7 0 0114 0" strokeWidth="1.8" fill="none"/> },
  ];
  return (
    <div className="tabbar">
      {tabs.map(t => (
        <div key={t.id} className={`tab ${active === t.id ? 'active' : ''}`}>
          <svg viewBox="0 0 24 24" stroke="currentColor">{t.icon}</svg>
          <span className="tab-l">{t.l}</span>
        </div>
      ))}
    </div>
  );
}

function StatusBar({ dark = false }) {
  const c = dark ? '#fff' : '#000';
  return (
    <div style={{
      position: 'absolute', top: 0, left: 0, right: 0, zIndex: 20,
      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      padding: '20px 32px 0',
      fontFamily: '-apple-system, system-ui', fontWeight: 600, fontSize: 17, color: c,
      pointerEvents: 'none',
    }}>
      <span>9:41</span>
      <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
        <svg width="18" height="12" viewBox="0 0 19 12"><rect x="0" y="7.5" width="3" height="4.5" rx="0.7" fill={c}/><rect x="4.5" y="5" width="3" height="7" rx="0.7" fill={c}/><rect x="9" y="2.5" width="3" height="9.5" rx="0.7" fill={c}/><rect x="13.5" y="0" width="3" height="12" rx="0.7" fill={c}/></svg>
        <svg width="25" height="12" viewBox="0 0 27 13"><rect x="0.5" y="0.5" width="23" height="12" rx="3.5" stroke={c} strokeOpacity="0.35" fill="none"/><rect x="2" y="2" width="18" height="9" rx="2" fill={c}/></svg>
      </div>
    </div>
  );
}

function HomeBar({ dark = false }) {
  return (
    <div style={{
      position: 'absolute', bottom: 0, left: 0, right: 0, zIndex: 60,
      height: 34, display: 'flex', justifyContent: 'center', alignItems: 'flex-end',
      paddingBottom: 8, pointerEvents: 'none',
    }}>
      <div style={{
        width: 139, height: 5, borderRadius: 100,
        background: dark ? 'rgba(255,255,255,0.7)' : 'rgba(0,0,0,0.25)',
      }} />
    </div>
  );
}

function DynamicIsland() {
  return (
    <div style={{
      position: 'absolute', top: 11, left: '50%', transform: 'translateX(-50%)',
      width: 126, height: 37, borderRadius: 24, background: '#000', zIndex: 50,
    }} />
  );
}

/** Phone wraps a screen — sized 390×844 to slot into the canvas */
function Phone({ children, dark = false, bg = '#fff', noStatusBar = false, noHomeBar = false }) {
  return (
    <div style={{
      width: 390, height: 844, borderRadius: 52,
      position: 'relative', background: '#0a0a0a',
      padding: 8,
      boxShadow: '0 40px 80px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.18)',
      fontFamily: '-apple-system, system-ui, sans-serif',
    }}>
      <div style={{
        position: 'relative',
        width: '100%', height: '100%',
        borderRadius: 44, overflow: 'hidden',
        background: bg,
      }}>
        <DynamicIsland />
        {!noStatusBar && <StatusBar dark={dark} />}
        {children}
        {!noHomeBar && <HomeBar dark={dark} />}
      </div>
    </div>
  );
}

Object.assign(window, {
  Butterfly, Wordmark, MatchRing, ButterflyProgress, Avatar, CompanyMark, TabBar,
  StatusBar, HomeBar, DynamicIsland, Phone,
});