// Wireframe kit — DivineAI
// Sistema de design: wireframe estruturado, off-white quente, dourado sutil, tipografia serif/sans.
// NÃO desenha ícones religiosos — apenas formas abstratas (círculos, linhas, pontos de luz).

// Paleta inspirada na refência visual: azul-marinho profundo + ouro
const TOKENS = {
  bg: '#F4F6FB',          // azul-claro de fundo (ref)
  bgAlt: '#E8ECF5',       // tom levemente mais escuro
  ink: '#0E1838',         // azul-marinho profundo (texto principal)
  ink2: '#4A5478',        // azul médio (secundário)
  ink3: '#8892AC',        // azul claro (terciário / placeholder)
  line: '#C9D2E5',        // linha fina (azul acinzentado)
  line2: '#E2E7F1',       // linha mais clara
  navy: '#0E1838',        // navy para hero / dark cards
  navy2: '#1B2754',       // navy mais claro
  gold: '#C9A24A',        // ouro principal (ref)
  goldSoft: '#F2E5BF',    // ouro claro para fills
  goldDeep: '#9E7A2C',    // ouro escuro para texto sobre dourado
  serif: '"Cormorant Garamond", "Cormorant", Georgia, serif',
  sans: '"Inter", -apple-system, system-ui, sans-serif',
  mono: '"JetBrains Mono", ui-monospace, monospace',
};
window.TOKENS = TOKENS;

// Linha hachurada / placeholder
function Placeholder({ height = 80, label = 'imagem', radius = 8, style = {} }) {
  return (
    <div style={{
      height, borderRadius: radius,
      background: `repeating-linear-gradient(135deg, ${TOKENS.line2} 0 6px, transparent 6px 12px)`,
      border: `1px dashed ${TOKENS.line}`,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontFamily: TOKENS.mono, fontSize: 10, color: TOKENS.ink3,
      letterSpacing: 0.5, textTransform: 'uppercase',
      ...style,
    }}>{label}</div>
  );
}
window.Placeholder = Placeholder;

// Linha de texto fake (wireframe bar)
function Bar({ width = '100%', height = 8, opacity = 1, style = {} }) {
  return (
    <div style={{
      width, height, borderRadius: height / 2,
      background: TOKENS.line, opacity,
      ...style,
    }} />
  );
}
window.Bar = Bar;

// Card básico do wireframe
function WCard({ children, padding = 16, style = {}, onClick, ...rest }) {
  return (
    <div onClick={onClick} style={{
      background: '#fff',
      border: `1px solid ${TOKENS.line2}`,
      borderRadius: 16,
      padding,
      cursor: onClick ? 'pointer' : 'default',
      ...style,
    }} {...rest}>{children}</div>
  );
}
window.WCard = WCard;

// Botão principal (dourado outline)
function WButton({ children, primary, full, onClick, style = {} }) {
  return (
    <button onClick={onClick} style={{
      width: full ? '100%' : 'auto',
      padding: '14px 20px',
      borderRadius: 999,
      border: primary ? `1px solid ${TOKENS.gold}` : `1px solid ${TOKENS.line}`,
      background: primary ? TOKENS.gold : 'transparent',
      color: primary ? '#fff' : TOKENS.ink,
      fontFamily: TOKENS.sans,
      fontSize: 14,
      fontWeight: 500,
      letterSpacing: 0.2,
      cursor: 'pointer',
      ...style,
    }}>{children}</button>
  );
}
window.WButton = WButton;

// Símbolo abstrato (sol/luz) — substitui ícones religiosos
function LightMark({ size = 32, color = TOKENS.gold }) {
  return (
    <svg width={size} height={size} viewBox="0 0 32 32">
      <circle cx="16" cy="16" r="5" fill="none" stroke={color} strokeWidth="1"/>
      {[0, 45, 90, 135, 180, 225, 270, 315].map((a, i) => {
        const rad = (a * Math.PI) / 180;
        const x1 = 16 + Math.cos(rad) * 9;
        const y1 = 16 + Math.sin(rad) * 9;
        const x2 = 16 + Math.cos(rad) * 13;
        const y2 = 16 + Math.sin(rad) * 13;
        return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke={color} strokeWidth="1" strokeLinecap="round"/>;
      })}
    </svg>
  );
}
window.LightMark = LightMark;

// Ponto / partícula
function Dot({ size = 4, color = TOKENS.gold, style = {} }) {
  return <div style={{ width: size, height: size, borderRadius: '50%', background: color, ...style }} />;
}
window.Dot = Dot;

// Header de tela (substitui o NavBar — mais limpo para wireframe)
function ScreenHeader({ title, subtitle, onBack, action, dark }) {
  const fg = dark ? '#fff' : TOKENS.ink;
  const fg2 = dark ? 'rgba(255,255,255,0.6)' : TOKENS.ink2;
  return (
    <div style={{ padding: '64px 20px 16px' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16, height: 32 }}>
        {onBack ? (
          <button onClick={onBack} style={{
            border: 'none', background: 'transparent', cursor: 'pointer',
            fontFamily: TOKENS.sans, fontSize: 13, color: fg2, padding: 0,
            display: 'flex', alignItems: 'center', gap: 6,
          }}>
            <svg width="14" height="14" viewBox="0 0 14 14"><path d="M9 2L4 7l5 5" stroke={fg2} strokeWidth="1.4" fill="none" strokeLinecap="round"/></svg>
            voltar
          </button>
        ) : <div />}
        {action || <div />}
      </div>
      {subtitle && <div style={{
        fontFamily: TOKENS.sans, fontSize: 11, color: fg2,
        textTransform: 'uppercase', letterSpacing: 1.5, marginBottom: 8,
      }}>{subtitle}</div>}
      {title && <div style={{
        fontFamily: TOKENS.serif, fontSize: 30, lineHeight: 1.1,
        color: fg, fontWeight: 500, letterSpacing: -0.5,
      }}>{title}</div>}
    </div>
  );
}
window.ScreenHeader = ScreenHeader;

// Tab bar inferior
function TabBar({ active = 'home', onNav }) {
  const tabs = [
    { id: 'home', label: 'Início' },
    { id: 'pray', label: 'Orar' },
    { id: 'create', label: 'Criar' },
    { id: 'promise', label: 'Promessas' },
    { id: 'me', label: 'Eu' },
  ];
  return (
    <div style={{
      position: 'absolute', bottom: 0, left: 0, right: 0,
      paddingBottom: 28, paddingTop: 10,
      background: 'rgba(250,247,242,0.92)',
      backdropFilter: 'blur(10px)',
      borderTop: `1px solid ${TOKENS.line2}`,
      display: 'flex', justifyContent: 'space-around',
      zIndex: 10,
    }}>
      {tabs.map(t => (
        <button key={t.id} onClick={() => onNav?.(t.id)} style={{
          background: 'transparent', border: 'none', cursor: 'pointer',
          display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4,
          fontFamily: TOKENS.sans, fontSize: 10,
          color: active === t.id ? TOKENS.gold : TOKENS.ink3,
          letterSpacing: 0.3,
        }}>
          <div style={{
            width: 6, height: 6, borderRadius: '50%',
            background: active === t.id ? TOKENS.gold : TOKENS.line,
          }} />
          {t.label}
        </button>
      ))}
    </div>
  );
}
window.TabBar = TabBar;

// Annotation marginal — para wireframe
function Annotation({ children, style = {} }) {
  return (
    <div style={{
      fontFamily: TOKENS.mono, fontSize: 9, color: TOKENS.ink3,
      letterSpacing: 0.5, textTransform: 'uppercase',
      ...style,
    }}>{children}</div>
  );
}
window.Annotation = Annotation;

// Chip
function Chip({ children, active, onClick, style = {} }) {
  return (
    <button onClick={onClick} style={{
      padding: '8px 14px', borderRadius: 999,
      border: `1px solid ${active ? TOKENS.gold : TOKENS.line}`,
      background: active ? TOKENS.goldSoft : '#fff',
      color: active ? TOKENS.ink : TOKENS.ink2,
      fontFamily: TOKENS.sans, fontSize: 12, fontWeight: 500,
      cursor: 'pointer', whiteSpace: 'nowrap',
      ...style,
    }}>{children}</button>
  );
}
window.Chip = Chip;

// Wrapper: app screen background com tab bar opcional
function Screen({ children, dark, noTabs, scroll = true }) {
  return (
    <div style={{
      width: '100%', height: '100%',
      background: dark ? '#1A1814' : TOKENS.bg,
      position: 'relative',
      overflow: scroll ? 'auto' : 'hidden',
    }}>
      <div style={{ paddingBottom: noTabs ? 40 : 100, minHeight: '100%' }}>
        {children}
      </div>
    </div>
  );
}
window.Screen = Screen;