// Vyuu admin console — primitives & atoms
// Exports: theme, Pill, RiskPill, VerdictPill, StatDot, Card, Button, KPI, SectionTitle, Eyebrow, Toggle

// Two palettes: warm-stone day, charcoal night. The `theme` const below is
// mutated in place by window.__setTheme(mode) so that all inline styles
// (which read theme.bg/ink/orange/… at render time) pick up the new values
// on the next React render. App-level state forces that re-render.
const THEME_LIGHT = {
  bg:'#F7F4ED', panel:'#FFFEFB', ivory:'#FBF8F1',
  // onPrimary = the foreground used on top of brand-orange surfaces (logo
  // tile, primary buttons). Cream in both modes so it always reads.
  onPrimary:'#FBF8F1',
  ink:'#1F2A2E', muted:'#6B7A7D', subtle:'#A9B4B5',
  line:'#E4DED1', lineSoft:'#EDE8DC',
  orange:'#D6843E', orangeDeep:'#A85820', orangeSoft:'#F3DAB6', orangeMist:'#FAEDD5',
  sand:'#E8DFC9',
  terracotta:'#C17457', terracottaSoft:'#F4E2D9', terracottaInk:'#8A4A34',
  amber:'#D4A259', amberSoft:'#F7EBD4', amberInk:'#8A6420',
  ocean:'#4E7A8A', oceanSoft:'#DCE7EC', oceanInk:'#2E5565',
};

const THEME_DARK = {
  bg:'#1C1F21', panel:'#23272A', ivory:'#1F2326',
  onPrimary:'#FBF8F1',
  ink:'#EAE3D5', muted:'#8C857C', subtle:'#5C5853',
  line:'#2D3134', lineSoft:'#25292B',
  // In dark mode `orange` is bumped a touch brighter so eyebrows + active
  // text pop on charcoal; `orangeDeep` stays at the saffron used for
  // primary button bg + the logo tile.
  orange:'#E89B58', orangeDeep:'#D6843E', orangeSoft:'#3A2818', orangeMist:'#261B12',
  sand:'#4A3F30',
  terracotta:'#D88A6A', terracottaSoft:'#3D2820', terracottaInk:'#E4A88E',
  amber:'#DDB063', amberSoft:'#3D3220', amberInk:'#F0CC92',
  ocean:'#7DA0B0', oceanSoft:'#1F2D34', oceanInk:'#A6C2D0',
};

const theme = {
  ...THEME_LIGHT,
  serif: '"Fraunces", "Iowan Old Style", Georgia, serif',
  sans:  '"Inter", ui-sans-serif, system-ui, sans-serif',
  mono:  '"JetBrains Mono", ui-monospace, Consolas, monospace',
};

window.__setTheme = (mode) => {
  const palette = mode === 'dark' ? THEME_DARK : THEME_LIGHT;
  Object.assign(theme, palette);
  if (typeof document !== 'undefined') {
    document.body.style.background = theme.bg;
    document.body.style.color = theme.ink;
    document.documentElement.dataset.theme = mode;
  }
  try { localStorage.setItem('vyuu-mode', mode); } catch {}
};
// Apply persisted mode immediately so the first paint matches.
try {
  const saved = localStorage.getItem('vyuu-mode');
  if (saved === 'dark') window.__setTheme('dark');
} catch {}

const Pill = ({tone='orange', children, soft=true}) => {
  const map = {
    orange:{bg:theme.orangeSoft, fg:theme.orangeDeep},
    terracotta:{bg:theme.terracottaSoft, fg:theme.terracottaInk},
    amber:{bg:theme.amberSoft, fg:theme.amberInk},
    ocean:{bg:theme.oceanSoft, fg:theme.oceanInk},
    neutral:{bg:theme.lineSoft, fg:theme.muted},
  };
  const c = map[tone] || map.orange;
  return <span style={{
    display:'inline-flex', alignItems:'center', gap:6,
    padding:'3px 9px', borderRadius:999,
    background: soft ? c.bg : 'transparent',
    color: c.fg, fontSize:11, fontWeight:500,
    border: soft ? 'none' : `1px solid ${c.fg}`,
    letterSpacing:0.2, fontFamily: theme.sans
  }}>{children}</span>;
};

const RiskPill = ({level}) => {
  const map={low:'orange', medium:'amber', high:'terracotta'};
  return <Pill tone={map[level]}>{level.toUpperCase()}</Pill>;
};

const VerdictPill = ({v}) => {
  const map={allow:{t:'orange',l:'Allowed'}, redact:{t:'amber',l:'Redacted'}, block:{t:'terracotta',l:'Blocked'}};
  const c=map[v]; return <Pill tone={c.t}>{c.l}</Pill>;
};

const StatDot = ({status}) => {
  const map={online:theme.orange, idle:theme.amber, stale:theme.terracotta, offline:theme.subtle,
    approved:theme.orange, review:theme.amber, blocked:theme.terracotta};
  const c = map[status] || theme.muted;
  return <span style={{display:'inline-block',width:8,height:8,borderRadius:999,background:c,boxShadow:`0 0 0 3px ${c}22`}}/>;
};

const Card = ({children, style, padded=true}) => (
  <div style={{background:theme.panel, border:`1px solid ${theme.line}`, borderRadius:12, padding: padded?20:0, ...style}}>
    {children}
  </div>
);

const Eyebrow = ({children}) => (
  <div style={{fontSize:10, letterSpacing:2.5, textTransform:'uppercase', color:theme.orangeDeep, fontWeight:600, marginBottom:6, fontFamily:theme.sans}}>
    {children}
  </div>
);

const SectionTitle = ({eyebrow, title, actions}) => (
  <div style={{display:'flex', alignItems:'flex-end', justifyContent:'space-between', marginBottom:20}}>
    <div>
      {eyebrow && <Eyebrow>{eyebrow}</Eyebrow>}
      <h1 style={{fontFamily:theme.serif, fontWeight:400, fontSize:30, color:theme.ink, letterSpacing:-0.5, margin:0, lineHeight:1.1}}>{title}</h1>
    </div>
    {actions && <div style={{display:'flex', gap:10}}>{actions}</div>}
  </div>
);

const Button = ({children, primary, icon:Icon, small, onClick}) => (
  <button onClick={onClick} style={{
    display:'inline-flex', alignItems:'center', gap:7,
    padding: small?'6px 12px':'9px 16px',
    borderRadius:8,
    border:`1px solid ${primary?theme.orangeDeep:theme.line}`,
    background: primary?theme.orangeDeep:theme.panel,
    color: primary?theme.onPrimary:theme.ink,
    fontSize: small?12:13, fontWeight:500, cursor:'pointer',
    fontFamily: theme.sans, letterSpacing:0.1,
    transition:'filter .15s',
    boxShadow: primary ? '0 2px 8px rgba(79,117,104,.3)' : 'none',
  }}>
    {Icon && <Icon size={small?13:15} strokeWidth={1.8}/>}{children}
  </button>
);

const KPI = ({label, value, delta, tone='orange'}) => (
  <Card>
    <div style={{fontSize:10, color:theme.muted, letterSpacing:1.5, textTransform:'uppercase', marginBottom:10, fontWeight:600, fontFamily:theme.sans}}>{label}</div>
    <div style={{fontFamily:theme.serif, fontSize:36, fontWeight:400, color:theme.ink, letterSpacing:-1, lineHeight:1}}>{value}</div>
    {delta && <div style={{marginTop:12}}><Pill tone={tone}>{delta}</Pill></div>}
  </Card>
);

const Toggle = ({on, onChange}) => (
  <div onClick={onChange} style={{width:34, height:20, borderRadius:999, background: on?theme.orange:theme.line, position:'relative', cursor:'pointer', transition:'background .2s'}}>
    <div style={{width:16, height:16, borderRadius:999, background:theme.panel, position:'absolute', top:2, left: on?16:2, transition:'left .2s', boxShadow:'0 1px 2px rgba(0,0,0,.15)'}}/>
  </div>
);

Object.assign(window, {theme, Pill, RiskPill, VerdictPill, StatDot, Card, Button, KPI, SectionTitle, Eyebrow, Toggle});