const { useState } = React;

function useTheme(dark) {
  return dark ? THEME.D : THEME.T;
}

function Pill({ fg, bg, outline, children, style }) {
  return (
    <span style={{
      display:'inline-flex', alignItems:'center', gap:4,
      padding:'3px 8px', borderRadius:4, fontSize:FS(11), fontWeight:600, lineHeight:1,
      background: outline ? 'transparent' : bg,
      color: outline ? fg : fg,
      border: outline ? `1px solid ${fg}` : 'none',
      whiteSpace:'nowrap', ...style,
    }}>{children}</span>
  );
}

function TypeChip({ type, style }) {
  const m = TYPE_META[type] || { label:type, color:'#888' };
  return (
    <span style={{
      display:'inline-flex', alignItems:'center', height:22, padding:'0 9px', borderRadius:6,
      background:m.color, color:'#FFF', fontSize:FS(11), fontWeight:700, whiteSpace:'nowrap', ...style,
    }}>{m.label}</span>
  );
}

function StatusPill({ label, fg, bg, style }) {
  return (
    <span style={{
      display:'inline-flex', alignItems:'center', padding:'3px 10px', borderRadius:20,
      fontSize:FS(11), fontWeight:600, whiteSpace:'nowrap', background:bg, color:fg, ...style,
    }}>{label}</span>
  );
}

function ScreenHeader({ title, sub, right, onBack, dark }) {
  const th = useTheme(dark);
  return (
    <div style={{
      padding:'calc(env(safe-area-inset-top,0px) + 44px + 8px) 18px 14px',
      display:'flex', alignItems:'center', gap:12,
    }}>
      {onBack && (
        <button onClick={onBack} className="press" style={{
          width:38, height:38, borderRadius:'50%', border:`1px solid ${th.border}`,
          background:th.surface, color:th.text, display:'flex', alignItems:'center', justifyContent:'center', cursor:'pointer', flexShrink:0,
        }}>‹</button>
      )}
      <div style={{ flex:1, minWidth:0 }}>
        <h1 style={{ fontSize:FS(28), fontWeight:900, color:th.text, letterSpacing:-.8, lineHeight:1.1 }}>{title}</h1>
        {sub && <div style={{ fontSize:FS(13), color:th.textSub, marginTop:2 }}>{sub}</div>}
      </div>
      {right}
    </div>
  );
}

function CTAButton({ children, variant='primary', onClick, dark, disabled, style }) {
  const th = useTheme(dark);
  const styles = {
    primary:   { background: th.text, color: th.surface, border:'none' },
    secondary: { background: th.surface, color: th.text, border:`1px solid ${th.border}` },
    danger:    { background: th.danger, color:'#FFF', border:'none' },
    ghost:     { background: th.surfaceAlt, color: th.text, border:'none' },
    green:     { background: th.success, color:'#FFF', border:'none' },
  };
  return (
    <button onClick={onClick} disabled={disabled} className="press" style={{
      width:'100%', padding:'16px 22px', borderRadius:12, fontSize:FS(16), fontWeight:900,
      cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center', gap:8,
      opacity: disabled ? .5 : 1, fontFamily:'Noto Sans TC', ...styles[variant], ...style,
    }}>{children}</button>
  );
}

function FilterChips({ options, value, onChange, dark, style }) {
  const th = useTheme(dark);
  return (
    <div style={{ display:'flex', gap:8, overflowX:'auto', padding:'4px 0', ...style }} className="scroll-hide">
      {options.map(o => {
        const active = o.key === value;
        return (
          <button key={o.key} onClick={() => onChange(o.key)} className="press"
            style={{
              padding:'7px 14px', borderRadius:18, fontSize:FS(13), fontWeight:active?700:500, whiteSpace:'nowrap',
              background: active ? th.text : 'transparent',
              color: active ? th.surface : th.text,
              border: active ? 'none' : `1px solid ${th.border}`,
              cursor:'pointer', display:'inline-flex', alignItems:'center', gap:6, fontFamily:'Noto Sans TC',
            }}>
            {o.label}
            {typeof o.count === 'number' && (
              <span style={{ fontFamily:FONTS.mono, fontSize:FS(10), opacity:.75 }}>{o.count}</span>
            )}
          </button>
        );
      })}
    </div>
  );
}

function Toggle({ on, onChange, dark }) {
  const th = useTheme(dark);
  return (
    <button onClick={onChange} aria-checked={on} role="switch" style={{
      width:44, height:26, borderRadius:13, background: on ? th.success : th.border, border:'none',
      cursor:'pointer', position:'relative', transition:'background .15s', flexShrink:0,
    }}>
      <span style={{
        position:'absolute', top:3, left:on?21:3, width:20, height:20, borderRadius:'50%',
        background:'#FFF', transition:'left .15s', boxShadow:'0 1px 3px rgba(0,0,0,.3)',
      }} />
    </button>
  );
}

function Avatar({ name, size=40, bg='#0A0A0A', fg='#FFF', style }) {
  return (
    <div style={{
      width:size, height:size, borderRadius:'50%', background:bg, color:fg,
      display:'flex', alignItems:'center', justifyContent:'center',
      fontSize:FS(size*.42), fontWeight:700, flexShrink:0, ...style,
    }}>{name ? name.charAt(name.length-2) : '司'}</div>
  );
}

function Modal({ children, onClose, dark }) {
  const th = useTheme(dark);
  return (
    <div className="modal-overlay fade-in" onClick={onClose}>
      <div className="modal-card" onClick={e => e.stopPropagation()} style={{ background:th.surface }}>
        {children}
      </div>
    </div>
  );
}

function Amount({ value, size=28, color, dark, prefix='NT$' }) {
  const th = useTheme(dark);
  return (
    <span style={{ fontFamily:FONTS.mono, fontWeight:900, fontSize:FS(size), color:color||th.text, letterSpacing:-.5, whiteSpace:'nowrap' }}>
      <span style={{ fontSize:FS(size*.55), fontWeight:600 }}>{prefix}</span>{typeof value==='number' ? value.toLocaleString() : value}
    </span>
  );
}

function SectionLabel({ children, dark }) {
  const th = useTheme(dark);
  return (
    <div style={{ fontSize:FS(11), fontWeight:700, letterSpacing:1.5, color:th.textMuted, textTransform:'uppercase', margin:'18px 2px 8px' }}>{children}</div>
  );
}

function Card({ children, dark, style, onClick }) {
  const th = useTheme(dark);
  return (
    <div onClick={onClick} className={onClick?'press':''} style={{
      background:th.surface, border:`1px solid ${th.border}`, borderRadius:14, padding:'14px 16px', ...style,
    }}>{children}</div>
  );
}

function Toast({ msg, dark }) {
  const th = useTheme(dark);
  return (
    <div className="fade-in" style={{
      position:'absolute', left:'50%', top:90, transform:'translateX(-50%)', zIndex:500,
      background:th.text, color:th.surface, padding:'12px 20px', borderRadius:12, fontSize:FS(13), fontWeight:600,
      boxShadow:'0 8px 24px rgba(0,0,0,.25)', whiteSpace:'nowrap',
    }}>{msg}</div>
  );
}