/* global React */
const { useState } = React;

// Letterpress D — official Didion mark (double-frame, tilted, Fraunces D)
function LetterpressD({ size = 32, color = 'var(--accent)', bg = null, tilt = -4 }) {
  const p = size * 0.14;
  const outer = size - p * 2;
  const s = size / 48;
  const inner = 3, gap = 2, thin = 1;
  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} aria-hidden="true" style={{ display: 'block' }}>
      {bg && <rect width={size} height={size} fill={bg} />}
      <g transform={`rotate(${tilt} ${size / 2} ${size / 2})`}>
        <rect x={p} y={p} width={outer} height={outer} fill="none" stroke={color} strokeWidth={inner * s} />
        <rect x={p + (inner + gap) * s} y={p + (inner + gap) * s}
          width={outer - 2 * (inner + gap) * s} height={outer - 2 * (inner + gap) * s}
          fill="none" stroke={color} strokeWidth={thin * s} />
        <text x={size / 2} y={size / 2} textAnchor="middle" dominantBaseline="central"
          fontFamily='"Fraunces", Georgia, serif' fontWeight="900" fontSize={size * 0.58} fill={color}>D</text>
      </g>
    </svg>
  );
}

function BrandMark({ size = 28, light = false }) {
  const markSize = Math.round(size * 1.1);
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: Math.round(size * 0.32), lineHeight: 1 }}>
      <LetterpressD size={markSize} color="var(--accent)" />
      <span style={{
        fontFamily: 'var(--font-display)',
        fontSize: size,
        fontWeight: 600,
        fontStyle: 'italic',
        letterSpacing: 'var(--track-display)',
        color: light ? 'var(--text-on-dark)' : 'var(--text)',
      }}>Didion</span>
    </span>
  );
}

function Stamp({ children, color = 'var(--text-muted)', filled = false, bold = false }) {
  return (
    <span className="didion-stamp" style={{
      color: filled ? 'var(--text-on-accent)' : color,
      background: filled ? color : 'transparent',
      borderColor: color,
      fontWeight: bold ? 600 : 400,
    }}>
      {children}
    </span>
  );
}

function Btn({ children, variant = 'secondary', size = 'md', leadingIcon, trailingIcon, kbd, fullWidth = false, style = {}, ...rest }) {
  const SIZES = {
    sm: { fontSize: 12, padding: '4px 8px' },
    md: { fontSize: 14, padding: '8px 16px' },
    lg: { fontSize: 15, padding: '12px 20px' },
  };
  const VARIANTS = {
    primary: { background: 'var(--accent)', color: 'var(--text-on-accent)', borderColor: 'var(--accent)' },
    secondary: { background: 'var(--bg-elev)', color: 'var(--text)', borderColor: 'var(--text)' },
    ghost: { background: 'transparent', color: 'var(--text)', borderColor: 'transparent' },
    solid: { background: 'var(--bg-dark)', color: 'var(--text-on-dark)', borderColor: 'var(--bg-dark)' },
    outlineLight: { background: 'transparent', color: 'var(--text-on-dark)', borderColor: 'var(--text-on-dark)' },
  };
  const v = VARIANTS[variant], s = SIZES[size];
  return (
    <button {...rest} className="didion-focusable" style={{
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
      fontFamily: 'var(--font-body)', fontWeight: 500,
      fontSize: s.fontSize, padding: s.padding,
      border: '1px solid', borderColor: v.borderColor, borderRadius: 'var(--radius-sm)',
      background: v.background, color: v.color, cursor: 'pointer',
      width: fullWidth ? '100%' : 'auto',
      fontVariantNumeric: 'tabular-nums',
      transition: 'background 120ms var(--ease-standard)',
      ...style,
    }}>
      {leadingIcon && <span style={{ display: 'inline-flex', lineHeight: 0 }}>{leadingIcon}</span>}
      <span>{children}</span>
      {trailingIcon && <span style={{ display: 'inline-flex', lineHeight: 0 }}>{trailingIcon}</span>}
      {kbd && (
        <span style={{
          fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: 'var(--track-caption)',
          padding: '1px 5px', border: '1px solid currentColor', borderRadius: 2,
          opacity: 0.6, marginLeft: 4,
        }}>{kbd}</span>
      )}
    </button>
  );
}

function Field({ label, type = 'text', placeholder, value, onChange, autoFocus, dark = false, hint }) {
  return (
    <div>
      <label style={{
        fontFamily: 'var(--font-mono)', fontSize: 10,
        letterSpacing: 'var(--track-stamp)', textTransform: 'uppercase',
        color: dark ? 'var(--text-subtle)' : 'var(--text-muted)',
        display: 'block', marginBottom: 4,
      }}>{label}</label>
      <input
        type={type} placeholder={placeholder} value={value || ''}
        onChange={onChange} autoFocus={autoFocus}
        className="didion-focusable"
        style={{
          width: '100%',
          padding: '10px 12px',
          fontFamily: 'var(--font-body)', fontSize: 14,
          background: dark ? 'transparent' : 'var(--bg-elev)',
          border: '1px solid',
          borderColor: dark ? '#3a342c' : 'var(--border)',
          borderRadius: 'var(--radius-sm)',
          color: dark ? 'var(--text-on-dark)' : 'var(--text)',
          outline: 'none',
          fontVariantNumeric: 'tabular-nums',
        }}
      />
      {hint && (
        <div style={{
          fontFamily: 'var(--font-mono)', fontSize: 10,
          letterSpacing: 'var(--track-caption)', textTransform: 'uppercase',
          color: dark ? 'var(--text-subtle)' : 'var(--text-subtle)',
          marginTop: 4,
        }}>{hint}</div>
      )}
    </div>
  );
}

function GoogleGlyph({ size = 16 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 18 18" aria-hidden="true">
      <path fill="#4285F4" d="M17.64 9.2c0-.64-.06-1.25-.16-1.84H9v3.48h4.84a4.14 4.14 0 0 1-1.79 2.71v2.26h2.9c1.7-1.56 2.69-3.87 2.69-6.61z"/>
      <path fill="#34A853" d="M9 18c2.43 0 4.47-.8 5.96-2.18l-2.9-2.26c-.8.54-1.83.86-3.06.86-2.35 0-4.34-1.59-5.05-3.71H.96v2.33A9 9 0 0 0 9 18z"/>
      <path fill="#FBBC04" d="M3.95 10.71a5.41 5.41 0 0 1 0-3.42V4.96H.96a9 9 0 0 0 0 8.08l2.99-2.33z"/>
      <path fill="#EA4335" d="M9 3.58c1.32 0 2.51.45 3.44 1.35l2.58-2.58A9 9 0 0 0 .96 4.96l2.99 2.33C4.66 5.17 6.65 3.58 9 3.58z"/>
    </svg>
  );
}

function GoogleBtn({ dark = false }) {
  return (
    <button className="didion-focusable" style={{
      width: '100%',
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 10,
      fontFamily: 'var(--font-body)', fontWeight: 500, fontSize: 14,
      padding: '10px 16px',
      background: dark ? 'transparent' : 'var(--bg-elev)',
      color: dark ? 'var(--text-on-dark)' : 'var(--text)',
      border: '1px solid',
      borderColor: dark ? '#3a342c' : 'var(--border)',
      borderRadius: 'var(--radius-sm)',
      cursor: 'pointer',
    }}>
      <GoogleGlyph size={16} /> Continuar com Google
    </button>
  );
}

function Sparkline({ data, color = 'var(--text)', width = 80, height = 18 }) {
  const max = Math.max(...data), min = Math.min(...data);
  const range = max - min || 1;
  const step = width / (data.length - 1);
  const pts = data.map((v, i) => `${(i * step).toFixed(1)},${(height - ((v - min) / range) * height).toFixed(1)}`).join(' ');
  return (
    <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`}>
      <line x1="0" y1={height - 1} x2={width} y2={height - 1} stroke="var(--border)" strokeDasharray="2 2" strokeWidth="1" />
      <polyline points={pts} fill="none" stroke={color} strokeWidth="1.5" strokeLinejoin="round" strokeLinecap="round" />
    </svg>
  );
}

function Divider({ label, dark = false }) {
  const c = dark ? '#3a342c' : 'var(--border-soft)';
  const txt = dark ? 'var(--text-subtle)' : 'var(--text-subtle)';
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 8, margin: '16px 0' }}>
      <span style={{ flex: 1, height: 0, borderTop: `1px dashed ${c}` }} />
      <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: 'var(--track-caption)', color: txt, textTransform: 'uppercase' }}>
        {label}
      </span>
      <span style={{ flex: 1, height: 0, borderTop: `1px dashed ${c}` }} />
    </div>
  );
}

function PlatformGlyph({ kind, size = 12 }) {
  const colors = { ig: 'var(--platform-ig)', x: 'var(--platform-x)', news: 'var(--platform-news)' };
  return (
    <span style={{
      width: size, height: size,
      background: colors[kind],
      display: 'inline-block',
      borderRadius: kind === 'ig' ? 2 : 0,
    }} />
  );
}

Object.assign(window, { BrandMark, LetterpressD, Stamp, Btn, Field, GoogleBtn, GoogleGlyph, Sparkline, Divider, PlatformGlyph });