// KSANET — Plataforma del cooperativista (KSA) · Tema CLARO

const { useState, useEffect } = React;

function PlatformSidebar({ active, onChange }) {
  const items = [
    { k: 'overview',  label: 'Resumen',           icon: '◐' },
    { k: 'obra',      label: 'Avance de obra',    icon: '◧' },
    { k: 'pagos',     label: 'Aportaciones',      icon: '◑' },
    { k: 'audit',     label: 'Auditoría técnica', icon: '◇' },
    { k: 'docs',      label: 'Documentos',        icon: '▤' },
    { k: 'asambleas', label: 'Asambleas',         icon: '◉', badge: 1 },
    { k: 'mensajes',  label: 'Mensajes',          icon: '◌', badge: 2 },
  ];
  return (
    <aside className="ks-side">
      <div className="ks-side-brand">
        <KMonogram size={32} color="#8C1E22" accent="#4a4945" bg="transparent"/>
        <div>
          <div className="ks-side-name">KSANET</div>
          <div className="ks-side-sub">Plataforma del socio</div>
        </div>
      </div>

      <div className="ks-side-coop">
        <div className="ks-side-coop-lbl">Cooperativa activa</div>
        <div className="ks-side-coop-name">Edificio Victoria</div>
        <div className="ks-side-coop-meta">COOP-2026-LCH-46 · 3B · 96 m² · 3 dorm</div>
      </div>

      <nav className="ks-side-nav">
        <div className="ks-side-h">Mi cooperativa</div>
        {items.map(it => (
          <button key={it.k}
                  className={'ks-nav-item' + (active === it.k ? ' active' : '')}
                  onClick={() => onChange(it.k)}>
            <span className="ks-nav-icon">{it.icon}</span>
            <span>{it.label}</span>
            {it.badge && <span className="ks-nav-badge">{it.badge}</span>}
          </button>
        ))}
      </nav>

      <div className="ks-side-foot">
        <div className="ks-side-h" style={{ marginBottom: 14 }}>Sesión</div>
        <div className="ks-user">
          <div className="ks-user-av">DA</div>
          <div>
            <div className="ks-user-name">David Aroca</div>
            <div className="ks-user-role">Socio · nº 042</div>
          </div>
        </div>
        <button className="ks-logout">Cerrar sesión</button>
      </div>
    </aside>
  );
}

function ViewOverview({ onGo }) {
  return (
    <>
      <div className="ks-h-row">
        <div>
          <div className="ks-h-eyebrow">Hola, David</div>
          <h1 className="ks-h-title">Tu cooperativa, <em>en directo.</em></h1>
        </div>
        <div className="ks-h-meta">Última actualización · 26 marzo 2026 · 14:42</div>
      </div>

      <div className="ks-cards">
        <div className="ks-card">
          <div className="ks-card-lbl">Avance de obra</div>
          <div className="ks-card-num">42<span>%</span></div>
          <div className="ks-bar"><div style={{ width: '42%' }}></div></div>
          <div className="ks-card-mini">Estructura · planta 4 de 7</div>
        </div>
        <div className="ks-card">
          <div className="ks-card-lbl">Mi aportación</div>
          <div className="ks-card-num">38.420<span> €</span></div>
          <div className="ks-card-mini" style={{ color: 'var(--brand)' }}>Próximo: 1 abril · 4.200 €</div>
        </div>
        <div className="ks-card">
          <div className="ks-card-lbl">Cooperativa</div>
          <div className="ks-card-num">71<span>/84</span></div>
          <div className="ks-card-mini">socios · 13 plazas libres</div>
        </div>
        <div className="ks-card">
          <div className="ks-card-lbl">Próxima asamblea</div>
          <div className="ks-card-num" style={{ fontSize: 32 }}>14 <em style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', color: 'var(--brand)', fontWeight: 400 }}>abr</em></div>
          <div className="ks-card-mini">Orden del día disponible</div>
        </div>
      </div>

      <div className="ks-row">
        <div className="ks-panel">
          <div className="ks-panel-h">
            <span className="eyebrow"><span className="dot"></span>Avance de obra · semana 12</span>
            <a href="#" className="ks-link" onClick={(e) => { e.preventDefault(); onGo('obra'); }}>Ver completa →</a>
          </div>
          <div className="ks-photo-card">
            <svg viewBox="0 0 600 280" preserveAspectRatio="xMidYMid slice" style={{ width: '100%', height: 'auto', display: 'block' }}>
              <defs>
                <linearGradient id="ovsky" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0%" stopColor="#e9c896"/>
                  <stop offset="100%" stopColor="#c97a4a"/>
                </linearGradient>
              </defs>
              <rect width="600" height="280" fill="url(#ovsky)"/>
              <rect x="20" y="160" width="80" height="120" fill="#3d3530" opacity="0.55"/>
              <rect x="110" y="140" width="90" height="140" fill="#2a2422" opacity="0.5"/>
              <rect x="220" y="60" width="280" height="220" fill="#1a1715"/>
              {Array.from({ length: 14 }).map((_, c) =>
                Array.from({ length: 11 }).map((_, r) => (
                  <rect key={c+'-'+r} x={228 + c * 20} y={68 + r * 19} width="14" height="14"
                        fill={r < 7 ? '#3d3530' : (r === 7 ? '#8C1E22' : '#8C1E22')}
                        opacity={r < 4 ? 0.95 : (r < 7 ? 0.7 : 0.55)}/>
                ))
              )}
              <rect x="500" y="20" width="3" height="200" fill="#1a1715"/>
              <rect x="430" y="24" width="120" height="3" fill="#1a1715"/>
              <line x1="510" y1="27" x2="510" y2="80" stroke="#1a1715" strokeWidth="1.5"/>
              <rect x="505" y="80" width="10" height="10" fill="#8C1E22"/>
              <rect x="0" y="240" width="600" height="40" fill="#2a2422" opacity="0.85"/>
            </svg>
            <div className="ks-photo-bar">
              <div>
                <span className="lbl">Foto auditor</span>
                <span className="val">22.03.26 · KSA-Tech</span>
              </div>
              <div>
                <span className="lbl">Hito</span>
                <span className="val">Forjado planta 4 — completado</span>
              </div>
              <div className="ks-tag-ok">● EN PLAZO</div>
            </div>
          </div>
        </div>

        <div className="ks-panel">
          <div className="ks-panel-h">
            <span className="eyebrow"><span className="dot"></span>Mi plan de pagos</span>
            <a href="#" className="ks-link" onClick={(e) => { e.preventDefault(); onGo('pagos'); }}>Detalle →</a>
          </div>
          <div className="ks-pay-list">
            {[
              { d: '15 mar 2026', c: 'Aportación 6', a: 4200, s: 'paid' },
              { d: '01 abr 2026', c: 'Aportación 7', a: 4200, s: 'next' },
              { d: '15 jun 2026', c: 'Aportación 8', a: 4200, s: 'pending' },
              { d: '15 sep 2026', c: 'Aportación 9', a: 4200, s: 'pending' },
              { d: '15 dic 2026', c: 'Aportación 10', a: 4200, s: 'pending' },
            ].map((p, i) => (
              <div key={i} className={'ks-pay ' + p.s}>
                <span className="ks-pay-d">{p.d}</span>
                <span className="ks-pay-c">{p.c}</span>
                <span className="ks-pay-a">{new Intl.NumberFormat('es-ES').format(p.a)} €</span>
                <span className="ks-pay-s">
                  {p.s === 'paid' && '✓ Pagado'}
                  {p.s === 'next' && '● Próximo'}
                  {p.s === 'pending' && '○ Pendiente'}
                </span>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className="ks-row">
        <div className="ks-panel">
          <div className="ks-panel-h">
            <span className="eyebrow"><span className="dot"></span>Auditoría · marzo 2026</span>
            <a href="#" className="ks-link" onClick={(e) => { e.preventDefault(); onGo('audit'); }}>Ver informe →</a>
          </div>
          <div className="ks-audit">
            {[
              { k: 'Calidad de hormigón H-30', v: 'Conforme', s: 'ok' },
              { k: 'Verticalidad muros', v: '± 2 mm', s: 'ok' },
              { k: 'Avance vs. cronograma', v: '+3 días sobre plan', s: 'ok' },
              { k: 'Coste vs. presupuesto', v: '−1,2 % desviación', s: 'ok' },
              { k: 'Seguridad y salud', v: '0 incidencias', s: 'ok' },
              { k: 'Residuos gestionados', v: '94 % reciclado', s: 'ok' },
            ].map((a, i) => (
              <div key={i} className="ks-audit-row">
                <span className="ks-audit-k">{a.k}</span>
                <span className="ks-audit-v">{a.v}</span>
                <span className={'ks-audit-s ' + a.s}>●</span>
              </div>
            ))}
          </div>
        </div>

        <div className="ks-panel">
          <div className="ks-panel-h">
            <span className="eyebrow"><span className="dot"></span>Próxima asamblea · 14 abril</span>
            <a href="#" className="ks-link" onClick={(e) => { e.preventDefault(); onGo('asambleas'); }}>Ver →</a>
          </div>
          <div className="ks-vote">
            <div className="ks-vote-q">Aprobación de modificación del proyecto: ampliación de zona de coworking en planta baja (+ 22 m²)</div>
            <div className="ks-vote-meta">Coste estimado · +18.400 € · 219 € por socio</div>
            <div className="ks-vote-bars">
              <div className="ks-vote-bar"><span className="lbl">A favor</span><div className="bar"><div style={{ width: '64%', background: 'var(--moss)' }}></div></div><span className="num">45</span></div>
              <div className="ks-vote-bar"><span className="lbl">En contra</span><div className="bar"><div style={{ width: '17%', background: 'var(--brand)' }}></div></div><span className="num">12</span></div>
              <div className="ks-vote-bar"><span className="lbl">Abstención</span><div className="bar"><div style={{ width: '6%', background: '#9b9590' }}></div></div><span className="num">4</span></div>
              <div className="ks-vote-bar"><span className="lbl">Sin votar</span><div className="bar"><div style={{ width: '14%', background: '#d6cfc4' }}></div></div><span className="num">10</span></div>
            </div>
            <div className="ks-vote-actions">
              <button className="btn btn-primary" style={{ flex: 1, justifyContent: 'center' }}>Votar ahora</button>
              <button className="btn btn-ghost" style={{ flex: 1, justifyContent: 'center' }}>Ver dossier</button>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

function PlatformPage() {
  useReveal();
  const [logged, setLogged] = useState(false);
  const [active, setActive] = useState('overview');

  if (!logged) {
    return (
      <>
        <Header active="plataforma"/>
        <section className="page-head">
          <div className="container">
            <div className="login-grid">
              <div>
                <span className="eyebrow"><span className="dot"></span>Plataforma del cooperativista</span>
                <h1 className="h-display" style={{ fontSize: 'clamp(46px, 6vw, 92px)', marginTop: 18 }}>
                  Tu cooperativa,<br/><em>al milímetro.</em>
                </h1>
                <p className="lede" style={{ marginTop: 32 }}>
                  Aportaciones, avance de obra, auditoría técnica, asambleas, votaciones y todos los documentos firmados. Una plataforma. Tu cooperativa entera.
                </p>
                <div className="login-feats">
                  <div><span className="num">42%</span><span className="lbl">avance medio en directo</span></div>
                  <div><span className="num">24/7</span><span className="lbl">acceso permanente</span></div>
                  <div><span className="num">100%</span><span className="lbl">trazabilidad documental</span></div>
                </div>
              </div>
              <div className="login-card">
                <div className="login-h">
                  <KMonogram size={36} color="#8C1E22" accent="#4a4945"/>
                  <div>
                    <div style={{ fontFamily: 'var(--tight)', fontSize: 20, fontWeight: 500, letterSpacing: '-0.02em' }}>KSA · Plataforma</div>
                    <div style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--muted)', marginTop: 4 }}>Acceso socio</div>
                  </div>
                </div>
                <form onSubmit={(e) => { e.preventDefault(); setLogged(true); }}>
                  <div className="field">
                    <label>Email o nº de socio</label>
                    <input type="text" defaultValue="david.aroca@ksanet.es"/>
                  </div>
                  <div className="field">
                    <label>Contraseña</label>
                    <input type="password" defaultValue="••••••••••"/>
                  </div>
                  <button className="btn btn-primary" type="submit" style={{ width: '100%', justifyContent: 'space-between', marginTop: 20 }}>
                    Acceder a la demo <span className="btn-arrow">→</span>
                  </button>
                  <div style={{ marginTop: 16, fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--muted)', textAlign: 'center' }}>
                    Demo · acceso libre · datos de ejemplo
                  </div>
                </form>
              </div>
            </div>
          </div>
        </section>
        <Footer/>
      </>
    );
  }

  return (
    <div className="ks-app">
      <PlatformSidebar active={active} onChange={setActive}/>
      <main className="ks-main">
        <div className="ks-topbar">
          <a href="index.html" className="ks-back">← Salir de la plataforma</a>
          <div className="ks-topbar-actions">
            <button className="ks-icon-btn" title="Notificaciones">◔</button>
            <button className="ks-icon-btn" title="Mensajes" onClick={() => setActive('mensajes')}>◌</button>
          </div>
        </div>
        <div className="ks-content">
          {active === 'overview'  && <ViewOverview onGo={setActive}/>}
          {active === 'obra'      && <ViewObra/>}
          {active === 'pagos'     && <ViewPagos/>}
          {active === 'audit'     && <ViewAudit/>}
          {active === 'docs'      && <ViewDocs/>}
          {active === 'asambleas' && <ViewAsambleas/>}
          {active === 'mensajes'  && <ViewMensajes/>}
        </div>
      </main>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<PlatformPage/>);