// components.jsx — shared UI primitives for the Paisa prototype

const C = {
  bg: '#f5f1ea',
  surface: '#fffdf8',
  ink: '#181513',
  ink2: '#4a4541',
  ink3: '#8a847e',
  line: '#e6dfd2',
  line2: '#efe9dd',
  accent: 'oklch(0.66 0.15 45)',
  accentInk: 'oklch(0.32 0.09 45)',
  accentSoft: 'oklch(0.93 0.04 60)',
  good: 'oklch(0.62 0.13 155)',
  goodSoft: 'oklch(0.94 0.04 155)',
  bad: 'oklch(0.58 0.18 25)',
  gov: 'oklch(0.42 0.10 250)',
  govSoft: 'oklch(0.94 0.03 250)',
};

// ── Logo ───────────────────────────────────────────────────
function PaisaMark({ size = 28, color = C.ink }) {
  return (
    <svg width={size} height={size} viewBox="0 0 32 32">
      <circle cx="16" cy="16" r="15" fill="none" stroke={color} strokeWidth="2"/>
      <path d="M11 9 L11 23 M11 9 L18 9 Q22 9 22 13.5 Q22 18 18 18 L11 18 M14 14 L20 14"
            fill="none" stroke={color} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}

// Government NID seal
function NIDSeal({ size = 36 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 40 40">
      <circle cx="20" cy="20" r="18" fill="none" stroke={C.gov} strokeWidth="1.5"/>
      <circle cx="20" cy="20" r="14" fill="none" stroke={C.gov} strokeWidth="0.8" strokeDasharray="2 2"/>
      <path d="M20 8 L22 14 L28 14 L23 18 L25 24 L20 20 L15 24 L17 18 L12 14 L18 14 Z"
            fill={C.gov}/>
      <text x="20" y="33" textAnchor="middle" fontSize="4" fontWeight="700"
            fill={C.gov} fontFamily="Inter">NEPAL · NID</text>
    </svg>
  );
}

// ── Buttons ────────────────────────────────────────────────
function PrimaryBtn({ children, onClick, disabled, style = {}, dark = false }) {
  return (
    <button onClick={onClick} disabled={disabled} style={{
      width: '100%', height: 54, borderRadius: 14,
      background: disabled ? '#d6cfc1' : C.ink,
      color: '#fffdf8', fontSize: 16, fontWeight: 600,
      letterSpacing: -0.1,
      transition: 'all .15s', cursor: disabled ? 'default' : 'pointer',
      display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
      ...style,
    }}>
      {children}
    </button>
  );
}

function GhostBtn({ children, onClick, style = {} }) {
  return (
    <button onClick={onClick} style={{
      width: '100%', height: 48, borderRadius: 12,
      border: `1px solid ${C.line}`, background: 'transparent',
      color: C.ink, fontSize: 15, fontWeight: 500,
      ...style,
    }}>{children}</button>
  );
}

// ── Input ──────────────────────────────────────────────────
function TextField({ label, value, onChange, placeholder, type = 'text', mono, hint, error, maxLength }) {
  const [focus, setFocus] = React.useState(false);
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
      {label && (
        <label style={{ fontSize: 12, fontWeight: 600, color: C.ink2,
                        textTransform: 'uppercase', letterSpacing: 0.6 }}>{label}</label>
      )}
      <div style={{
        height: 56, borderRadius: 12,
        background: C.surface,
        border: `1.5px solid ${error ? C.bad : focus ? C.ink : C.line}`,
        padding: '0 16px',
        display: 'flex', alignItems: 'center',
        transition: 'border-color .15s',
      }}>
        <input
          type={type} value={value} onChange={e => onChange(e.target.value)}
          placeholder={placeholder} maxLength={maxLength}
          onFocus={() => setFocus(true)} onBlur={() => setFocus(false)}
          style={{
            border: 'none', outline: 'none', background: 'transparent',
            width: '100%', fontSize: 17, color: C.ink,
            fontFamily: mono ? 'JetBrains Mono, monospace' : 'inherit',
            letterSpacing: mono ? 1 : 0,
          }}
        />
      </div>
      {hint && !error && <div style={{ fontSize: 12, color: C.ink3 }}>{hint}</div>}
      {error && <div style={{ fontSize: 12, color: C.bad }}>{error}</div>}
    </div>
  );
}

// ── Tier badge ─────────────────────────────────────────────
function TierBadge({ tier, size = 'sm' }) {
  const labels = { 0: 'Tier 0 · Inclusion', 1: 'Tier 1 · Full', 2: 'Tier 2 · Bank-grade' };
  const colors = {
    0: { bg: C.govSoft, fg: C.gov },
    1: { bg: C.accentSoft, fg: C.accentInk },
    2: { bg: '#1a1715', fg: '#f5f1ea' },
  };
  const c = colors[tier];
  const big = size === 'lg';
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      background: c.bg, color: c.fg,
      padding: big ? '8px 14px' : '4px 10px',
      borderRadius: 999, fontSize: big ? 13 : 11,
      fontWeight: 600, letterSpacing: 0.2,
      whiteSpace: 'nowrap',
    }}>
      <span style={{ width: big ? 6 : 5, height: big ? 6 : 5, borderRadius: 999, background: c.fg }} />
      {labels[tier]}
    </span>
  );
}

// ── Step dots progress ─────────────────────────────────────
function StepDots({ count, current }) {
  return (
    <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
      {Array.from({ length: count }).map((_, i) => (
        <div key={i} style={{
          height: 4, borderRadius: 2,
          width: i === current ? 24 : 8,
          background: i <= current ? C.ink : C.line,
          transition: 'all .3s',
        }} />
      ))}
    </div>
  );
}

// ── Spinner ────────────────────────────────────────────────
function Spinner({ size = 18, color = C.ink }) {
  return (
    <div style={{
      width: size, height: size, borderRadius: '50%',
      border: `2px solid ${color}30`, borderTopColor: color,
      animation: 'spin .8s linear infinite',
    }} />
  );
}

// ── Animated check ─────────────────────────────────────────
function AnimatedCheck({ size = 64, color = C.good }) {
  return (
    <div style={{
      width: size, height: size, borderRadius: '50%',
      background: `${color}20`,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
    }}>
      <svg width={size * 0.55} height={size * 0.55} viewBox="0 0 24 24">
        <path d="M5 12.5l4.5 4.5L19 7"
              fill="none" stroke={color} strokeWidth="3"
              strokeLinecap="round" strokeLinejoin="round"
              strokeDasharray="30" strokeDashoffset="30"
              style={{ animation: 'draw-check .6s .1s ease forwards' }}/>
      </svg>
    </div>
  );
}

// ── Signed bundle row ──────────────────────────────────────
function BundleRow({ k, v, mono }) {
  return (
    <div style={{
      display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
      padding: '12px 0', borderBottom: `1px solid ${C.line2}`,
      gap: 12,
    }}>
      <span style={{ fontSize: 12, color: C.ink3, textTransform: 'uppercase',
                     letterSpacing: 0.6, fontWeight: 600 }}>{k}</span>
      <span style={{
        fontSize: 14, color: C.ink, fontWeight: 500,
        textAlign: 'right', maxWidth: '60%',
        fontFamily: mono ? 'JetBrains Mono, monospace' : 'inherit',
      }}>{v}</span>
    </div>
  );
}

// ── Photo placeholder ──────────────────────────────────────
function PhotoPlaceholder({ size = 80, name = 'AS' }) {
  return (
    <div style={{
      width: size, height: size, borderRadius: 12,
      background: `linear-gradient(135deg, oklch(0.85 0.04 60), oklch(0.78 0.06 50))`,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      color: C.ink, fontSize: size * 0.32, fontWeight: 600,
      letterSpacing: -0.5,
      border: `1px solid ${C.line}`,
      position: 'relative', overflow: 'hidden',
    }}>
      {/* striped overlay to read as placeholder */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: `repeating-linear-gradient(45deg,
          rgba(255,255,255,0.0) 0px, rgba(255,255,255,0.0) 8px,
          rgba(255,255,255,0.18) 8px, rgba(255,255,255,0.18) 9px)`,
      }}/>
      <span style={{ position: 'relative' }}>{name}</span>
    </div>
  );
}

// Export to window so other Babel scripts can use them
Object.assign(window, {
  C, PaisaMark, NIDSeal,
  PrimaryBtn, GhostBtn, TextField,
  TierBadge, StepDots, Spinner, AnimatedCheck,
  BundleRow, PhotoPlaceholder,
});