// Screen T03 · Gate Definition — Dr. Cervantes define gates sobre una arista del grafo.
// "Atlas propone, tú firmas." Este es el origen pedagógico de la evidencia
// que Mariana necesita para abrir la conexión EDA → Regresión Lineal.
const { useState: useStateT03 } = React;

function T03GateDefinition() {
  const [appState, set] = useAtlasState();
  const proposal = AtlasData.gateProposals;
  const edge = proposal.edge;

  const [gates, setGates] = useStateT03(() =>
    proposal.proposed.map(g => ({ ...g }))
  );
  const [saving, setSaving] = useStateT03('idle'); // idle | saving | saved
  const [tickingId, setTickingId] = useStateT03(null);
  const [hoverId, setHoverId] = useStateT03(null);
  const [editToast, setEditToast] = useStateT03(null);
  const [customToast, setCustomToast] = useStateT03(false);

  const activeCount  = gates.filter(g => g.enabled).length;
  const totalCount   = gates.length;
  const totalMinutes = gates.filter(g => g.enabled).reduce((a, g) => a + g.estMinutes, 0);

  // Mini-grafo con la arista resaltada. Filtramos a EDA, regLin y dos vecinos
  // cercanos, reposicionando en un lienzo chico.
  const miniNodes = [
    { ...AtlasData.nodes.find(n => n.id === 'limpieza'), x: 70,  y: 60  },
    { ...AtlasData.nodes.find(n => n.id === 'eda'),      x: 90,  y: 130, state: 'completed' },
    { ...AtlasData.nodes.find(n => n.id === 'regLin'),   x: 220, y: 130, state: 'in_progress' },
    { ...AtlasData.nodes.find(n => n.id === 'residuales'),x: 370,y: 90  },
  ];
  const miniEdges = [
    { id: 'me1', src: 'limpieza', tgt: 'regLin',     satisfied: true,  gated: false, locked: false },
    { id: 'me2', src: 'eda',      tgt: 'regLin',     satisfied: false, gated: false, locked: false, _highlight: true },
    { id: 'me3', src: 'regLin',   tgt: 'residuales', satisfied: false, gated: true,  locked: false },
  ];

  function toggleGate(id) {
    setGates(gs => gs.map(g => g.id === id ? { ...g, enabled: !g.enabled } : g));
    setTickingId(id);
    setTimeout(() => setTickingId(null), 200);
  }

  function flashEditToast(gateId) {
    setEditToast(gateId);
    setTimeout(() => setEditToast(null), 2000);
  }

  function flashCustomToast() {
    setCustomToast(true);
    setTimeout(() => setCustomToast(false), 2000);
  }

  function handleSave() {
    setSaving('saving');
    setTimeout(() => {
      setSaving('saved');
      setTimeout(() => set({ screen: 'portafolio' }), 1500);
    }, 50);
  }

  // Kind → chip spec (texto corto, sin emojis).
  function kindChip(kind) {
    if (kind === 'submission')   return { label: 'entregable', color: T.warm6,  border: T.warm4 };
    if (kind === 'mini_problem') return { label: 'mini',       color: T.acc6,   border: 'hsl(var(--atlas-accent-400))' };
    if (kind === 'peer_review')  return { label: 'peer',       color: T.crit7,  border: 'hsl(var(--atlas-critical-300))' };
    return { label: kind, color: T.ink5, border: T.paper4 };
  }

  // ── Micro-cierre overlay ────────────────────────────────────────────────
  if (saving === 'saved') {
    return (
      <div style={{ height:'100%', display:'flex', alignItems:'center', justifyContent:'center',
        background:`rgba(255,250,240,.94)`, animation:'fadeIn 180ms ease-out' }}>
        <div style={{ textAlign:'center', animation:'fadeSlideUp 260ms ease-out' }}>
          <svg width="58" height="58" viewBox="0 0 58 58" style={{ marginBottom:18 }}>
            <circle cx="29" cy="29" r="26" fill="none" stroke={T.warm6} strokeWidth="2.5" opacity="0.28"/>
            <polyline points="16,29 25,38 42,20" fill="none" stroke={T.warm6} strokeWidth="2.8"
              strokeLinecap="round" strokeLinejoin="round"
              style={{ strokeDasharray:42, strokeDashoffset:42,
                animation:'drawCheck 400ms ease-out 180ms forwards' }}/>
          </svg>
          <p style={{ fontFamily:T.serif, fontSize:'1.375rem', fontWeight:500, color:T.warm6,
            lineHeight:1.4, fontVariationSettings:'"opsz" 24', margin:0 }}>
            Gates guardados para <span style={{ fontFamily:T.mono, fontSize:'1.0625rem' }}>
              {edge.srcLabel} → {edge.tgtLabel}
            </span>.
          </p>
          <p style={{ fontFamily:T.sans, fontSize:'0.875rem', color:T.ink5, marginTop:10 }}>
            {activeCount} {activeCount === 1 ? 'gate activo' : 'gates activos'} · {totalMinutes} min estimados
          </p>
        </div>
      </div>
    );
  }

  // ── Main layout ─────────────────────────────────────────────────────────
  return (
    <div style={{ height:'100%', display:'flex', flexDirection:'column', background:T.paper0,
      overflow:'hidden' }}>
      <TopBar
        left={
          <>
            <button onClick={() => set({ screen: 't02' })}
              style={{ background:'none', border:'none', cursor:'pointer', color:T.ink5,
                fontSize:18, padding:'0 4px' }}>←</button>
            <AtlasLogo size={16}/>
            <span style={{ fontFamily:T.sans, fontSize:'0.8125rem', color:T.ink5 }}>
              / MAT-PMD · actividades-gate
            </span>
          </>
        }
        right={
          <Btn onClick={handleSave} variant="primary" size="sm">Guardar</Btn>
        }
      />

      <div style={{ flex:1, overflow:'auto', padding:'28px 32px 40px' }}>
        <div style={{ maxWidth:1160, margin:'0 auto', display:'flex', flexDirection:'column', gap:22 }}>

          {/* Two columns */}
          <div style={{ display:'grid', gridTemplateColumns:'minmax(340px, 1fr) minmax(420px, 1.25fr)',
            gap:22, alignItems:'start' }}>

            {/* ── LEFT · Arista seleccionada ─────────────────────────── */}
            <div style={{ background:T.paper1, padding:24, border:`1px solid ${T.paper3}`,
              borderRadius:10, animation:'fadeIn 280ms ease-out both' }}>
              <div style={{ fontFamily:T.sans, fontSize:'0.8125rem', color:T.ink5,
                textTransform:'uppercase', letterSpacing:'0.08em', fontWeight:600,
                marginBottom:10 }}>Arista</div>

              <div style={{ fontFamily:T.serif, fontSize:'1.75rem', fontWeight:500, color:T.ink9,
                fontVariationSettings:'"opsz" 32', lineHeight:1.2, marginBottom:20 }}>
                {edge.srcLabel} <span style={{ color:T.warm6 }}>→</span> {edge.tgtLabel}
              </div>

              {/* Mini-graph */}
              <div style={{ background:T.paper0, border:`1px solid ${T.paper3}`, borderRadius:8,
                padding:'14px 10px', marginBottom:22, display:'flex', justifyContent:'center' }}>
                <svg viewBox="0 0 440 200" width={260} height={220} style={{ overflow:'visible' }}>
                  <defs>
                    <marker id="t03-arrow-warm" markerWidth="7" markerHeight="7" refX="6" refY="3.5" orient="auto">
                      <path d="M0,0.5 L6,3.5 L0,6.5 Z" fill={T.warm6}/>
                    </marker>
                    <marker id="t03-arrow-mute" markerWidth="7" markerHeight="7" refX="6" refY="3.5" orient="auto">
                      <path d="M0,0.5 L6,3.5 L0,6.5 Z" fill="hsl(var(--atlas-cool-300))"/>
                    </marker>
                  </defs>

                  {miniEdges.map(e => {
                    const s = miniNodes.find(n => n.id === e.src);
                    const t = miniNodes.find(n => n.id === e.tgt);
                    if (!s || !t) return null;
                    const dx = t.x - s.x, dy = t.y - s.y;
                    const len = Math.sqrt(dx*dx + dy*dy);
                    const ux = dx/len, uy = dy/len;
                    const x1 = s.x + ux*18, y1 = s.y + uy*18;
                    const x2 = t.x - ux*24, y2 = t.y - uy*24;
                    if (e._highlight) {
                      return (
                        <line key={e.id} x1={x1} y1={y1} x2={x2} y2={y2}
                          stroke={T.warm6} strokeWidth="2.5"
                          markerEnd="url(#t03-arrow-warm)"/>
                      );
                    }
                    return (
                      <line key={e.id} x1={x1} y1={y1} x2={x2} y2={y2}
                        stroke="hsl(var(--atlas-cool-300))" strokeWidth="1.2"
                        strokeDasharray={e.gated ? '5 4' : 'none'}
                        markerEnd="url(#t03-arrow-mute)" opacity="0.55"/>
                    );
                  })}

                  {miniNodes.map(n => {
                    const isEdgeSrc = n.id === edge.src;
                    const isEdgeTgt = n.id === edge.tgt;
                    const onPath    = isEdgeSrc || isEdgeTgt;
                    const fill   = onPath ? 'hsl(var(--atlas-warm-200))'
                                         : (n.state === 'completed' ? T.paper2 : 'hsl(var(--atlas-cool-200))');
                    const stroke = onPath ? T.warm6
                                         : (n.state === 'completed' ? T.paper4 : 'hsl(var(--atlas-cool-400))');
                    const sw = onPath ? 2 : 1;
                    return (
                      <g key={n.id}>
                        <circle cx={n.x} cy={n.y} r={18} fill={fill} stroke={stroke} strokeWidth={sw}/>
                        <text x={n.x} y={n.y + 4} textAnchor="middle"
                          fontFamily={T.mono} fontSize={9} fontWeight="700"
                          fill={onPath ? T.warm7 : T.ink7}>
                          {n.shortLabel}
                        </text>
                        <text x={n.x} y={n.y + 34} textAnchor="middle"
                          fontFamily={T.sans} fontSize={9} fontWeight={onPath ? 600 : 500}
                          fill={onPath ? T.ink8 : T.ink5}>
                          {n.label.length > 14 ? n.label.slice(0, 13) + '…' : n.label}
                        </text>
                      </g>
                    );
                  })}
                </svg>
              </div>

              <div style={{ fontFamily:T.sans, fontSize:'0.875rem', color:T.ink5,
                textTransform:'uppercase', letterSpacing:'0.06em', fontWeight:600,
                marginBottom:10 }}>Contexto</div>

              <p style={{ fontFamily:T.serif, fontSize:'0.9375rem', color:T.ink7,
                lineHeight:1.6, fontVariationSettings:'"opsz" 18', margin:'0 0 18px' }}>
                Esta arista se abre cuando el estudiante produce evidencia de que puede
                aplicar regresión a un dataset que exploró por su cuenta — no solo correr{' '}
                <span style={{ fontFamily:T.mono, fontSize:'0.875rem', background:T.paper2,
                  border:`1px solid ${T.paper3}`, borderRadius:3, padding:'0.08em 0.3em' }}>
                  .fit()
                </span>. Los gates que eliges definen <em>qué</em> cuenta como esa evidencia.
              </p>

              <div style={{ fontFamily:T.mono, fontSize:'0.75rem', color:T.ink4 }}>
                Arista <Ref>{edge.id}</Ref> · versión 2026-04-01.v1
              </div>
            </div>

            {/* ── RIGHT · Gates propuestos ───────────────────────────── */}
            <div style={{ background:T.paper0, padding:24, border:`1px solid ${T.warm4}`,
              borderRadius:10 }}>
              <p style={{ fontFamily:T.serif, fontStyle:'italic', fontSize:'1rem',
                color:T.warm7, fontVariationSettings:'"opsz" 18',
                margin:'0 0 6px' }}>
                Atlas propone, tú firmas.
              </p>
              <p style={{ fontFamily:T.sans, fontSize:'0.875rem', color:T.ink5,
                margin:'0 0 18px' }}>
                Activa o descarta. Edita si necesitas.
              </p>

              {/* Gate list */}
              <div>
                {gates.map((g, i) => {
                  const isLast = i === gates.length - 1;
                  const chip = kindChip(g.kind);
                  const isHover = hoverId === g.id;
                  const showRationale = g.enabled || isHover;
                  const isTicking = tickingId === g.id;

                  return (
                    <div key={g.id}
                      onMouseEnter={() => setHoverId(g.id)}
                      onMouseLeave={() => setHoverId(null)}
                      onClick={() => toggleGate(g.id)}
                      style={{
                        display:'grid',
                        gridTemplateColumns:'28px 1fr auto',
                        columnGap:12,
                        padding:'16px 8px',
                        borderBottom: isLast ? 'none' : `1px solid ${T.paper3}`,
                        cursor:'pointer',
                        background: isHover ? T.paper1 : 'transparent',
                        transition:'background 120ms ease-out',
                        animation:`fadeSlideUp 300ms ease-out ${i*60}ms both`,
                      }}>
                      {/* Checkbox */}
                      <div
                        onClick={e => { e.stopPropagation(); toggleGate(g.id); }}
                        style={{
                          width:18, height:18, borderRadius:3,
                          border:`1.5px solid ${g.enabled ? T.acc6 : T.paper4}`,
                          background: g.enabled ? T.acc6 : T.paper0,
                          display:'flex', alignItems:'center', justifyContent:'center',
                          marginTop:2,
                          transform: isTicking ? 'scale(1.1)' : 'scale(1)',
                          transition:'transform 180ms ease-out, background 150ms, border-color 150ms',
                          boxSizing:'border-box',
                        }}>
                        {g.enabled && (
                          <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
                            <polyline points="2.5,6.5 5,9 9.5,3.5" stroke="white"
                              strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
                          </svg>
                        )}
                      </div>

                      {/* Body */}
                      <div style={{ minWidth:0 }}>
                        <div style={{ display:'flex', alignItems:'center', gap:10, flexWrap:'wrap',
                          marginBottom:6 }}>
                          <span style={{ fontFamily:T.mono, fontSize:'0.9375rem', fontWeight:600,
                            color: g.enabled ? T.ink9 : T.ink7 }}>
                            {g.title}
                          </span>
                          <span style={{ fontFamily:T.sans, fontSize:'0.6875rem', fontWeight:600,
                            textTransform:'uppercase', letterSpacing:'0.06em',
                            color: chip.color, border:`1px solid ${chip.border}`,
                            borderRadius:3, padding:'2px 7px' }}>
                            {chip.label}
                          </span>
                        </div>
                        <div style={{ fontFamily:T.sans, fontSize:'0.875rem', color:T.ink6,
                          lineHeight:1.55 }}>
                          {g.description}
                        </div>
                        {showRationale && (
                          <div style={{ fontFamily:T.serif, fontStyle:'italic',
                            fontSize:'0.8125rem', color:T.ink5,
                            fontVariationSettings:'"opsz" 14',
                            marginTop:8, lineHeight:1.55,
                            animation:'fadeSlideUp 220ms ease-out both' }}>
                            <span style={{ color:T.warm6, marginRight:4 }}>↳</span>
                            {g.rationale}
                          </div>
                        )}
                      </div>

                      {/* Right rail: minutes + edit */}
                      <div style={{ display:'flex', flexDirection:'column', alignItems:'flex-end',
                        gap:8, minWidth:64 }}>
                        <span style={{ fontFamily:T.sans, fontSize:'0.75rem', color:T.ink5,
                          whiteSpace:'nowrap' }}>
                          {g.estMinutes} min
                        </span>
                        <div style={{ position:'relative' }}>
                          <button
                            onClick={e => { e.stopPropagation(); flashEditToast(g.id); }}
                            style={{ background:'none', border:'none', cursor:'pointer',
                              fontFamily:T.sans, fontSize:'0.75rem', color:T.ink5,
                              padding:'2px 6px', borderRadius:3 }}>
                            editar
                          </button>
                          {editToast === g.id && (
                            <div style={{ position:'absolute', right:0, top:'calc(100% + 4px)',
                              background:T.ink9, color:T.paper0, fontFamily:T.sans,
                              fontSize:'0.6875rem', padding:'4px 8px', borderRadius:3,
                              whiteSpace:'nowrap', zIndex:5,
                              animation:'fadeIn 140ms ease-out' }}>
                              En Fase 2
                            </div>
                          )}
                        </div>
                      </div>
                    </div>
                  );
                })}
              </div>

              {/* Add custom gate */}
              <div style={{ position:'relative', marginTop:16 }}>
                <button onClick={flashCustomToast}
                  style={{ width:'100%', fontFamily:T.sans, fontSize:'0.875rem', fontWeight:500,
                    color:T.ink5, background:'transparent',
                    border:`1.5px dashed ${T.paper4}`, borderRadius:6,
                    padding:'12px 16px', cursor:'pointer',
                    transition:'border-color 150ms, color 150ms' }}
                  onMouseEnter={e => { e.currentTarget.style.borderColor = T.warm5;
                    e.currentTarget.style.color = T.warm6; }}
                  onMouseLeave={e => { e.currentTarget.style.borderColor = T.paper4;
                    e.currentTarget.style.color = T.ink5; }}>
                  + añadir gate custom
                </button>
                {customToast && (
                  <div style={{ position:'absolute', left:'50%', top:'calc(100% + 6px)',
                    transform:'translateX(-50%)',
                    background:T.ink9, color:T.paper0, fontFamily:T.sans,
                    fontSize:'0.75rem', padding:'6px 12px', borderRadius:4,
                    whiteSpace:'nowrap', zIndex:5,
                    animation:'fadeIn 140ms ease-out' }}>
                    Disponible en Fase 2.
                  </div>
                )}
              </div>
            </div>
          </div>

          {/* Footer */}
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center',
            padding:'18px 4px 0', borderTop:`1px solid ${T.paper3}`, flexWrap:'wrap', gap:16 }}>
            <div style={{ fontFamily:T.sans, fontSize:'0.9375rem', color:T.ink7 }}>
              <span style={{ color:T.ink9, fontWeight:600 }}>{activeCount}</span> de {totalCount}{' '}
              gates activos · <span style={{ color:T.ink9, fontWeight:600 }}>{totalMinutes} min</span>{' '}
              estimados
            </div>
            <div style={{ display:'flex', flexDirection:'column', alignItems:'flex-end', gap:8 }}>
              <Btn onClick={handleSave} variant="primary" size="lg"
                style={{ width:320, display:'flex', justifyContent:'space-between' }}>
                <span>Guardar y continuar</span><span>→</span>
              </Btn>
              <button onClick={() => set({ screen: 't02' })}
                style={{ background:'none', border:'none', cursor:'pointer',
                  fontFamily:T.sans, fontSize:'0.8125rem', color:T.ink4, padding:'4px 8px' }}>
                Cancelar
              </button>
            </div>
          </div>

        </div>
      </div>
    </div>
  );
}

Object.assign(window, { T03GateDefinition });