/* global React, Wordmark, Icon */

/* ===========================================================
   Design System Panel — overlay shown when toggled from Tweaks
   Brief explicitly requested: paleta HEX, tipografía,
   botones (estados), cards, inputs, badges, navegación,
   wordmark variants light/dark.
   =========================================================== */

function DesignSystemPanel({ open, onClose }) {
  if (!open) return null;

  return (
    <div style={{
      position: 'fixed', inset: 0, background: 'rgba(6,19,40,.85)',
      backdropFilter: 'blur(6px)', zIndex: 90, overflow: 'auto', padding: 24,
    }} onClick={onClose}>
      <div onClick={(e) => e.stopPropagation()} style={{
        maxWidth: 1100, margin: '0 auto', background: 'var(--paper)',
        borderRadius: 14, padding: 40, boxShadow: '0 30px 80px rgba(0,0,0,.6)',
      }}>
        {/* Header */}
        <div className="flex items-center justify-between mb-8" style={{ flexWrap: 'wrap', gap: 12 }}>
          <div>
            <p className="eyebrow" style={{ margin: 0 }}>SLF Energía · Design System v0.1</p>
            <h2 className="h-2 mt-2">Sistema visual y componentes</h2>
          </div>
          <button onClick={onClose} className="btn btn-ghost btn-sm"><Icon.X /> Cerrar</button>
        </div>

        {/* Wordmark variants */}
        <DSSection title="Wordmark" subtitle="Variantes full y compacto, sobre fondo claro y oscuro.">
          <div className="grid grid-2" style={{ gap: 16 }}>
            <div className="card p-6" style={{ background: '#fff' }}>
              <p className="mono mb-4" style={{ fontSize: 11, color: 'var(--slate)' }}>FONDO CLARO · FULL</p>
              <Wordmark variant="full" tone="dark" size={28} />
            </div>
            <div className="card p-6" style={{ background: 'var(--pv-blue)' }}>
              <p className="mono mb-4" style={{ fontSize: 11, color: 'rgba(255,255,255,.5)' }}>FONDO OSCURO · FULL</p>
              <Wordmark variant="full" tone="light" size={28} />
            </div>
            <div className="card p-6" style={{ background: '#fff' }}>
              <p className="mono mb-4" style={{ fontSize: 11, color: 'var(--slate)' }}>FONDO CLARO · COMPACTO</p>
              <Wordmark variant="compact" tone="dark" size={28} />
            </div>
            <div className="card p-6" style={{ background: 'var(--pv-blue)' }}>
              <p className="mono mb-4" style={{ fontSize: 11, color: 'rgba(255,255,255,.5)' }}>FONDO OSCURO · COMPACTO</p>
              <Wordmark variant="compact" tone="light" size={28} />
            </div>
          </div>
        </DSSection>

        {/* Palette */}
        <DSSection title="Paleta" subtitle="Color principal, acento y neutros. Verde solo para CO₂.">
          <div className="grid grid-4">
            <Swatch hex="#0B2545" label="PV Blue · principal" tone="dark" />
            <Swatch hex="#FFB800" label="Solar · acento" tone="dark" />
            <Swatch hex="#1A1D23" label="Antracita · texto" tone="dark" />
            <Swatch hex="#6B7280" label="Slate · texto 2°" tone="dark" />
            <Swatch hex="#F7F8FA" label="Off-white · bg" tone="light" />
            <Swatch hex="#FFFFFF" label="Paper" tone="light" border />
            <Swatch hex="#E5E7EB" label="Line · borde" tone="light" />
            <Swatch hex="#16A34A" label="Green · CO₂ only" tone="dark" />
          </div>
        </DSSection>

        {/* Typography */}
        <DSSection title="Tipografía" subtitle="Inter (UI/body) · JetBrains Mono (cifras técnicas).">
          <div className="card p-6">
            <h1 className="h-display mb-4">Display · 72/64/56</h1>
            <h2 className="h-1 mb-4">Heading 1 · 48</h2>
            <h3 className="h-2 mb-4">Heading 2 · 32</h3>
            <p className="lead mb-4">Lead paragraph · 20px — descripciones de sección, subtítulos. text-wrap: balance / pretty.</p>
            <p className="body mb-4" style={{ fontSize: 16 }}>Body · 16 — texto corrido para descripciones, copy general. Inter regular, line-height 1.5.</p>
            <p className="mono mb-4" style={{ fontSize: 28, color: 'var(--pv-blue)' }}>12.4 MWp · 47 proyectos · 99.4%</p>
            <p className="mono" style={{ fontSize: 13, color: 'var(--slate)' }}>JETBRAINS MONO · CIFRAS · TAGS · EYEBROW</p>
          </div>
        </DSSection>

        {/* Buttons */}
        <DSSection title="Botones · estados" subtitle="Primary (solar) · Secondary (blue) · Ghost · WhatsApp.">
          <div className="card p-6">
            <div className="grid grid-4 mb-6">
              <div>
                <p className="mono mb-3" style={{ fontSize: 11, color: 'var(--slate)' }}>PRIMARY</p>
                <div className="flex flex-col gap-2 items-start">
                  <button className="btn btn-primary">Default</button>
                  <button className="btn btn-primary" style={{ background: 'var(--solar-600)', borderColor: 'var(--solar-600)' }}>Hover</button>
                  <button className="btn btn-primary" disabled>Disabled</button>
                </div>
              </div>
              <div>
                <p className="mono mb-3" style={{ fontSize: 11, color: 'var(--slate)' }}>SECONDARY</p>
                <div className="flex flex-col gap-2 items-start">
                  <button className="btn btn-secondary">Default</button>
                  <button className="btn btn-secondary" style={{ background: 'var(--pv-blue-700)' }}>Hover</button>
                  <button className="btn btn-secondary" disabled style={{ opacity: .5 }}>Disabled</button>
                </div>
              </div>
              <div>
                <p className="mono mb-3" style={{ fontSize: 11, color: 'var(--slate)' }}>GHOST</p>
                <div className="flex flex-col gap-2 items-start">
                  <button className="btn btn-ghost">Default</button>
                  <button className="btn btn-ghost" style={{ background: 'var(--off)', borderColor: 'var(--slate-2)' }}>Hover</button>
                  <button className="btn btn-ghost" disabled style={{ opacity: .5 }}>Disabled</button>
                </div>
              </div>
              <div>
                <p className="mono mb-3" style={{ fontSize: 11, color: 'var(--slate)' }}>WHATSAPP</p>
                <div className="flex flex-col gap-2 items-start">
                  <button className="btn btn-wa"><Icon.Whatsapp size={16} /> Default</button>
                  <button className="btn btn-wa btn-sm"><Icon.Whatsapp size={14} /> Small</button>
                  <button className="btn btn-wa btn-lg"><Icon.Whatsapp size={18} /> Large</button>
                </div>
              </div>
            </div>
          </div>
        </DSSection>

        {/* Inputs */}
        <DSSection title="Inputs" subtitle="Field default, focus, with helper.">
          <div className="grid grid-3">
            <div className="card p-6">
              <label className="label">Email corporativo</label>
              <input className="input" placeholder="nombre@empresa.cl" />
              <p className="help">Default</p>
            </div>
            <div className="card p-6">
              <label className="label">Consumo mensual</label>
              <input className="input" defaultValue="50000" style={{ borderColor: 'var(--pv-blue)', boxShadow: '0 0 0 4px rgba(11,37,69,.08)' }} />
              <p className="help">Focus state · kWh/mes</p>
            </div>
            <div className="card p-6">
              <label className="label">Sector</label>
              <select className="select">
                <option>Manufactura</option>
              </select>
              <p className="help">Dropdown</p>
            </div>
          </div>
        </DSSection>

        {/* Badges */}
        <DSSection title="Badges" subtitle="Tags, metadata, certificaciones.">
          <div className="card p-6 flex flex-wrap gap-3">
            <span className="badge">Default</span>
            <span className="badge badge-solar">Sin costo</span>
            <span className="badge badge-blue">Regulación</span>
            <span className="badge badge-green">CO₂ evitado</span>
            <span className="tech-tag"><Icon.Shield /> ISO 9001</span>
            <span className="tech-tag"><Icon.Bolt /> 1.84 MWp</span>
          </div>
        </DSSection>

        {/* Cards */}
        <DSSection title="Cards" subtitle="Default, hover, stat card.">
          <div className="grid grid-3">
            <div className="card p-6">
              <p className="eyebrow mb-3">Default</p>
              <h3 className="h-3 mb-2">Card title</h3>
              <p className="body" style={{ fontSize: 14, margin: 0 }}>Borde 1px var(--line), radius 12px.</p>
            </div>
            <div className="card card-hover p-6" style={{ boxShadow: 'var(--sh-2)', transform: 'translateY(-2px)', borderColor: 'var(--slate-2)' }}>
              <p className="eyebrow mb-3">Hover</p>
              <h3 className="h-3 mb-2">Card title</h3>
              <p className="body" style={{ fontSize: 14, margin: 0 }}>Elevación + borde más oscuro.</p>
            </div>
            <div className="card p-6">
              <p className="eyebrow mb-3">Stat</p>
              <div className="stat-num">12.4<span style={{ fontSize: 16, color: 'var(--slate)' }}> MWp</span></div>
              <div className="stat-label">capacidad instalada</div>
            </div>
          </div>
        </DSSection>

        {/* Nav */}
        <DSSection title="Navegación" subtitle="Estados de nav-link.">
          <div className="card p-6 flex flex-wrap gap-2">
            <a className="nav-link">Default</a>
            <a className="nav-link is-active">Active</a>
            <a className="nav-link" style={{ background: 'var(--off)' }}>Hover</a>
          </div>
        </DSSection>

        <hr className="hr mb-6" />
        <p className="mono" style={{ fontSize: 12, color: 'var(--slate)', textAlign: 'center', margin: 0 }}>
          SLF Energía · Design System v0.1 · base inicial — se expande con cada nueva pantalla.
        </p>
      </div>
    </div>
  );
}

function DSSection({ title, subtitle, children }) {
  return (
    <div className="mb-8">
      <div className="mb-4">
        <h3 style={{ fontSize: 18, fontWeight: 600, margin: 0 }}>{title}</h3>
        {subtitle && <p style={{ margin: '4px 0 0', color: 'var(--slate)', fontSize: 14 }}>{subtitle}</p>}
      </div>
      {children}
    </div>
  );
}

function Swatch({ hex, label, tone, border }) {
  return (
    <div className="card" style={{ overflow: 'hidden' }}>
      <div style={{
        background: hex, height: 80,
        color: tone === 'dark' ? '#fff' : '#0B2545',
        padding: 12,
        borderBottom: border ? '1px solid var(--line)' : 'none',
        fontFamily: 'var(--mono)', fontSize: 13, fontWeight: 500,
        display: 'flex', alignItems: 'flex-end',
      }}>
        {hex}
      </div>
      <div style={{ padding: 12 }}>
        <p style={{ margin: 0, fontSize: 13, fontWeight: 500, color: 'var(--ink)' }}>{label}</p>
      </div>
    </div>
  );
}

Object.assign(window, { DesignSystemPanel });