// app/components.jsx — scriptural themes, icons, shared primitives. Shared via window.

// ── Themes (deep blues + gilt; the 2–3 visual directions) ────────────────────
const THEMES = {
  royal: { // light parchment, navy ink — the default
    label: 'Royal', dark: false,
    bg: '#EFE7D4', surface: '#FBF6EA', surface2: '#F5EEDC', sunken: '#E5DAC1',
    ink: '#16243F', ink2: '#5A6480', ink3: '#9AA0B0',
    line: 'rgba(22,36,63,0.12)', hairline: 'rgba(22,36,63,0.08)',
    hero: '#16243F', heroInk: '#F3ECD9', heroSub: 'rgba(243,236,217,0.66)',
    reader: '#F4EEDD', readerInk: '#23314E',
  },
  oxford: { // cool slate-blue light
    label: 'Oxford', dark: false,
    bg: '#E4E7EC', surface: '#F4F6F9', surface2: '#ECEFF4', sunken: '#D7DCE4',
    ink: '#17273F', ink2: '#566077', ink3: '#929BAC',
    line: 'rgba(23,39,63,0.12)', hairline: 'rgba(23,39,63,0.07)',
    hero: '#1B2D49', heroInk: '#EAEFF6', heroSub: 'rgba(234,239,246,0.66)',
    reader: '#F6F7FA', readerInk: '#1F2E47',
  },
  midnight: { // deep navy, parchment ink
    label: 'Midnight', dark: true,
    bg: '#0D1628', surface: '#152037', surface2: '#1C2942', sunken: '#0A1120',
    ink: '#F0E9D7', ink2: '#A6AEC4', ink3: '#6A7390',
    line: 'rgba(255,255,255,0.10)', hairline: 'rgba(255,255,255,0.06)',
    hero: '#1E2C4C', heroInk: '#F0E9D7', heroSub: 'rgba(240,233,215,0.62)',
    reader: '#10192C', readerInk: '#ECE4D0',
  },
};

// ── Accents (gilt default; all share a warm-metal feel, vary hue) ────────────
const ACCENTS = {
  gold:    { label: 'Gilt',    base: 'oklch(0.76 0.115 84)',  ink: '#2A2208', soft: 'oklch(0.76 0.115 84 / 0.16)' },
  bronze:  { label: 'Bronze',  base: 'oklch(0.66 0.105 55)',  ink: '#FFFFFF', soft: 'oklch(0.66 0.105 55 / 0.16)' },
  crimson: { label: 'Crimson', base: 'oklch(0.57 0.145 25)',  ink: '#FFFFFF', soft: 'oklch(0.57 0.145 25 / 0.15)' },
  azure:   { label: 'Azure',   base: 'oklch(0.60 0.125 245)', ink: '#FFFFFF', soft: 'oklch(0.60 0.125 245 / 0.15)' },
};
const ACCENT_ORDER = ['gold', 'bronze', 'crimson', 'azure'];

// ── Icons ────────────────────────────────────────────────────────────────────
function Icon({ name, size = 24, stroke = 1.9, style = {} }) {
  const c = { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor',
    strokeWidth: stroke, strokeLinecap: 'round', strokeLinejoin: 'round', style };
  switch (name) {
    case 'today':   return (<svg {...c}><path d="M12 4v3M12 17v3M4 12h3M17 12h3M6.3 6.3l2 2M15.7 15.7l2 2M17.7 6.3l-2 2M8.3 15.7l-2 2"/><circle cx="12" cy="12" r="3.4"/></svg>);
    case 'book':    return (<svg {...c}><path d="M4 5.5C4 4.7 4.7 4 5.5 4H11v15H5.5C4.7 19 4 18.3 4 17.5V5.5z"/><path d="M20 5.5C20 4.7 19.3 4 18.5 4H13v15h5.5c.8 0 1.5-.7 1.5-1.5V5.5z"/><path d="M11 4v15M13 4v15"/></svg>);
    case 'plan':    return (<svg {...c}><rect x="4" y="5" width="16" height="15" rx="2"/><path d="M4 9h16M8 3v4M16 3v4"/><circle cx="9" cy="13" r="1" fill="currentColor" stroke="none"/><circle cx="13" cy="13" r="1" fill="currentColor" stroke="none"/><circle cx="9" cy="16.5" r="1" fill="currentColor" stroke="none"/></svg>);
    case 'progress':return (<svg {...c}><path d="M5 19V10M12 19V5M19 19v-6"/><path d="M3 21h18"/></svg>);
    case 'gear':    return (<svg {...c}><circle cx="12" cy="12" r="3.2"/><path d="M12 2.5l1.3 2.2 2.5-.5.4 2.5 2.3 1-.9 2.4 1.7 1.9-1.7 1.9.9 2.4-2.3 1-.4 2.5-2.5-.5L12 21.5l-1.3-2.2-2.5.5-.4-2.5-2.3-1 .9-2.4L4.6 12l1.7-1.9-.9-2.4 2.3-1 .4-2.5 2.5.5z"/></svg>);
    case 'play':    return (<svg {...c}><path d="M8 5l11 7-11 7V5z" fill="currentColor"/></svg>);
    case 'pause':   return (<svg {...c}><rect x="7" y="5" width="3.6" height="14" rx="1" fill="currentColor" stroke="none"/><rect x="13.4" y="5" width="3.6" height="14" rx="1" fill="currentColor" stroke="none"/></svg>);
    case 'next':    return (<svg {...c}><path d="M6 5l9 7-9 7V5z" fill="currentColor"/><rect x="16.5" y="5" width="2.4" height="14" rx="1" fill="currentColor" stroke="none"/></svg>);
    case 'prev':    return (<svg {...c}><path d="M18 5L9 12l9 7V5z" fill="currentColor"/><rect x="5.1" y="5" width="2.4" height="14" rx="1" fill="currentColor" stroke="none"/></svg>);
    case 'fwd15':   return (<svg {...c}><path d="M4 12a8 8 0 1 1 2.3 5.6"/><path d="M4 12l-1.4-2.6M4 12l2.6-1.4"/></svg>);
    case 'back15':  return (<svg {...c}><path d="M20 12A8 8 0 1 0 17.7 17.6"/><path d="M20 12l1.4-2.6M20 12l-2.6-1.4"/></svg>);
    case 'sound':   return (<svg {...c}><path d="M4 9.5v5h3.5L13 19V5L7.5 9.5H4z" fill="currentColor"/><path d="M16.5 9.5c1.1 1 1.1 4 0 5M19 7.5c2.2 2 2.2 7 0 9"/></svg>);
    case 'moon':    return (<svg {...c}><path d="M20 13.5A7.5 7.5 0 0 1 10.5 4 7.5 7.5 0 1 0 20 13.5z"/></svg>);
    case 'check':   return (<svg {...c}><path d="M5 13l4 4 10-11"/></svg>);
    case 'check-circle': return (<svg {...c}><circle cx="12" cy="12" r="9"/><path d="M8 12.2l2.6 2.6L16 9"/></svg>);
    case 'flame':   return (<svg {...c}><path d="M12 3c1.2 3 4 4.6 4 8a4 4 0 0 1-8 0c0-1.4.5-2.5 1.3-3.3C9.5 9 10 7 12 3z"/></svg>);
    case 'chevron': return (<svg {...c}><path d="M9 6l6 6-6 6"/></svg>);
    case 'back':    return (<svg {...c}><path d="M15 5l-7 7 7 7"/></svg>);
    case 'close':   return (<svg {...c}><path d="M6 6l12 12M18 6L6 18"/></svg>);
    case 'plus':    return (<svg {...c}><path d="M12 5v14M5 12h14"/></svg>);
    case 'bell':    return (<svg {...c}><path d="M6 9a6 6 0 0 1 12 0c0 5 2 6 2 6H4s2-1 2-6z"/><path d="M10 19a2 2 0 0 0 4 0"/></svg>);
    case 'phone':   return (<svg {...c}><rect x="7" y="3" width="10" height="18" rx="2.5"/><path d="M11 18h2"/></svg>);
    case 'sync':    return (<svg {...c}><path d="M4 12a8 8 0 0 1 13.7-5.6L20 8M20 4v4h-4"/><path d="M20 12a8 8 0 0 1-13.7 5.6L4 16M4 20v-4h4"/></svg>);
    case 'cloud':   return (<svg {...c}><path d="M7 18a4 4 0 0 1-.5-7.97A5.5 5.5 0 0 1 17 9.5a3.5 3.5 0 0 1 .5 6.97"/><path d="M7 18h10"/></svg>);
    case 'bookmark':return (<svg {...c}><path d="M7 4h10a1 1 0 0 1 1 1v15l-6-4-6 4V5a1 1 0 0 1 1-1z"/></svg>);
    case 'quote':   return (<svg {...c}><path d="M9 7c-2.5 1-4 3-4 6 0 1.7 1.1 3 2.6 3S10 20.7 10 19s-1.1-3-2.4-3M19 7c-2.5 1-4 3-4 6 0 1.7 1.1 3 2.6 3S20 20.7 20 19s-1.1-3-2.4-3"/></svg>);
    case 'headphones': return (<svg {...c}><path d="M4 13v-1a8 8 0 0 1 16 0v1"/><rect x="3" y="13" width="4" height="7" rx="1.6"/><rect x="17" y="13" width="4" height="7" rx="1.6"/></svg>);
    case 'sun':     return (<svg {...c}><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M2 12h2M20 12h2M5 5l1.4 1.4M17.6 17.6L19 19M19 5l-1.4 1.4M6.4 17.6L5 19"/></svg>);
    case 'list':    return (<svg {...c}><path d="M8 6h12M8 12h12M8 18h12"/><circle cx="4" cy="6" r="1.2" fill="currentColor" stroke="none"/><circle cx="4" cy="12" r="1.2" fill="currentColor" stroke="none"/><circle cx="4" cy="18" r="1.2" fill="currentColor" stroke="none"/></svg>);
    case 'text':    return (<svg {...c}><path d="M5 6h14M5 6V5M5 6v1M12 5v14M8 19h8"/></svg>);
    default:        return null;
  }
}

// ── Primitives ───────────────────────────────────────────────────────────────
function Label({ children, t, style }) {
  return <div className="bom-label" style={{ fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: t.ink3, fontWeight: 600, ...style }}>{children}</div>;
}
function Card({ children, t, style, onClick, className }) {
  return <div onClick={onClick} className={(className || '') + (onClick ? ' bom-press' : '')}
    style={{ background: t.surface, borderRadius: 20, padding: 18, border: `1px solid ${t.line}`, ...style }}>{children}</div>;
}
function Pill({ children, t, accent, solid, style }) {
  return <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, fontSize: 11.5, fontWeight: 600,
    letterSpacing: '0.04em', padding: '4px 10px', borderRadius: 999, whiteSpace: 'nowrap',
    color: solid ? accent.ink : t.ink2, background: solid ? accent.base : t.sunken, ...style }}>{children}</span>;
}
const ScrollArea = ({ children, style }) => (
  <div className="bom-scroll" style={{ flex: 1, overflowY: 'auto', overflowX: 'hidden', WebkitOverflowScrolling: 'touch', ...style }}>{children}</div>
);

// Day completion dot — filled (read), open (missed/pending), dashed (future), ringed (today).
function DayDot({ size = 30, state, accent, t, label }) {
  // state: 'read' | 'miss' | 'future' | 'today-pending'
  const filled = state === 'read';
  const future = state === 'future';
  const isToday = state === 'today-pending' || state === 'today-read';
  const r = (size - 4) / 2;
  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} style={{ display: 'block' }}>
      {future
        ? <circle cx={size/2} cy={size/2} r={r} fill="none" stroke={t.line} strokeWidth="1.6" strokeDasharray="1.5 2.6" />
        : filled
          ? <circle cx={size/2} cy={size/2} r={r} fill={accent.base} />
          : <circle cx={size/2} cy={size/2} r={r} fill="none" stroke={t.ink3} strokeWidth="1.8" strokeOpacity="0.5" />}
      {filled && <path d={`M${size*0.32} ${size*0.5} l${size*0.12} ${size*0.13} l${size*0.24} -${size*0.27}`} fill="none" stroke={accent.ink} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />}
      {isToday && <circle cx={size/2} cy={size/2} r={r + 2.5} fill="none" stroke={accent.base} strokeWidth="1.6" />}
    </svg>
  );
}

function Bar({ pct, color, track, height = 6, radius = 999 }) {
  return (
    <div style={{ height, background: track, borderRadius: radius, overflow: 'hidden', width: '100%' }}>
      <div style={{ height: '100%', width: `${Math.max(0, Math.min(100, pct))}%`, background: color, borderRadius: radius, transition: 'width 0.4s cubic-bezier(.3,.7,.4,1)' }} />
    </div>
  );
}

function mmss(s) {
  s = Math.max(0, Math.round(s));
  const m = Math.floor(s / 60), ss = s % 60;
  return `${m}:${String(ss).padStart(2, '0')}`;
}

Object.assign(window, { THEMES, ACCENTS, ACCENT_ORDER, Icon, Label, Card, Pill, ScrollArea, DayDot, Bar, mmss });