// agno-section.jsx — Agno agents with RAG over the corpus

const PERSONAS = [
  {
    name: 'Legal Advisor',
    role: 'rrhh · contratos',
    glyph: '§',
    color: '#a1f75e',
    prompts: [
      '¿Cuál es la política de vacaciones?',
      'Dame el último contrato de proveedor',
      'Resume las cláusulas de confidencialidad',
    ],
  },
  {
    name: 'Tech Guide',
    role: 'engineering · arch',
    glyph: '◈',
    color: '#f9f9f9',
    prompts: [
      'Explícame la arquitectura del módulo de pagos',
      '¿Dónde se definen los hooks de Keycloak?',
      'Compara las dos propuestas de caché',
    ],
  },
  {
    name: 'Sales Buddy',
    role: 'gtm · playbook',
    glyph: '↗',
    color: '#a1f75e',
    prompts: [
      'Genera un pitch para el sector salud',
      '¿Qué objeciones hubo en la call de ayer?',
      'Dame casos de éxito comparables',
    ],
  },
];

const AgnoSection = () => {
  const ref = React.useRef(null);
  const inView = useInView(ref, { threshold: 0.15, once: true });
  const [t, setT] = React.useState(0);
  useRaf((s) => setT(s), inView);

  const [selected, setSelected] = React.useState(0);
  React.useEffect(() => {
    if (!inView) return;
    const id = setInterval(() => {
      setSelected((s) => (s + 1) % PERSONAS.length);
    }, 4200);
    return () => clearInterval(id);
  }, [inView]);

  const persona = PERSONAS[selected];
  // Typing animation for the current prompt
  const promptCycle = Math.floor(t * 0.7) % persona.prompts.length;
  const currentPrompt = persona.prompts[promptCycle];
  const typePhase = (t * 0.7) % 1;
  const typedChars = Math.min(currentPrompt.length, Math.floor(typePhase * currentPrompt.length * 1.6));
  const typed = currentPrompt.slice(0, typedChars);

  return (
    <section
      id="agno"
      ref={ref}
      data-screen-label="07 Agno"
      style={{
        position: 'relative',
        padding: 'clamp(96px, 12vw, 160px) clamp(24px, 5vw, 60px)',
        background: '#0d0d0d',
        color: '#f9f9f9',
        overflow: 'hidden',
      }}
    >
      {/* Faint grid pattern */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px)',
        backgroundSize: '80px 80px',
        pointerEvents: 'none',
      }}/>

      <div style={{ position: 'relative', maxWidth: 1400, margin: '0 auto' }}>
        <Reveal>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 10,
            fontSize: 12, letterSpacing: '0.2em', textTransform: 'uppercase',
            fontWeight: 600, marginBottom: 24, color: '#a1f75e',
          }}>
            <span style={{ width: 9, height: 9, background: '#a1f75e' }} />
            06 · Agno Agents
          </div>
        </Reveal>
        <Reveal delay={150}>
          <h2 style={{
            fontSize: 'clamp(40px, 6vw, 84px)',
            fontWeight: 600, lineHeight: 1.0,
            letterSpacing: '-0.025em', margin: 0, maxWidth: '18ch',
          }}>
            Agentes configurables,<br/>
            con memoria y <span style={{ background: '#a1f75e', color: '#0d0d0d', padding: '0 12px' }}>RAG</span>.
          </h2>
        </Reveal>
        <Reveal delay={300}>
          <p style={{
            marginTop: 28, fontSize: 'clamp(16px, 1.3vw, 19px)',
            maxWidth: '56ch', lineHeight: 1.55,
            color: 'rgba(249,249,249,0.62)',
          }}>
            Define agentes desde Payload con su prompt, modelo y scopes de conocimiento.
            Cada conversación vive en el schema <code style={{ color: '#a1f75e' }}>agno</code> de Postgres,
            con sesiones persistentes, historial y tool-calling sobre tu índice RAG.
          </p>
        </Reveal>

        <div style={{
          marginTop: 72,
          display: 'grid',
          gridTemplateColumns: 'minmax(280px, 0.9fr) minmax(0, 1.3fr)',
          gap: 32,
          alignItems: 'stretch',
        }} className="nx-mcp-grid">
          {/* Left: persona picker */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <div style={{
              fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase',
              fontWeight: 600, color: 'rgba(249,249,249,0.5)', marginBottom: 4,
            }}>payload · collections/agents</div>

            {PERSONAS.map((p, i) => {
              const active = i === selected;
              return (
                <button
                  key={p.name}
                  onClick={() => setSelected(i)}
                  style={{
                    all: 'unset',
                    cursor: 'pointer',
                    border: `1px solid ${active ? '#a1f75e' : 'rgba(249,249,249,0.14)'}`,
                    background: active ? 'rgba(161,247,94,0.06)' : 'transparent',
                    padding: '18px 20px',
                    display: 'flex', alignItems: 'center', gap: 16,
                    transition: 'all 300ms cubic-bezier(.2,.7,.2,1)',
                  }}
                >
                  <span style={{
                    width: 44, height: 44,
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                    background: active ? '#a1f75e' : 'rgba(249,249,249,0.06)',
                    color: active ? '#0d0d0d' : '#f9f9f9',
                    fontSize: 22, fontWeight: 600,
                    transition: 'all 300ms',
                  }}>{p.glyph}</span>
                  <div style={{ flex: 1 }}>
                    <div style={{
                      fontSize: 15, fontWeight: 600, letterSpacing: '-0.01em',
                      color: active ? '#f9f9f9' : 'rgba(249,249,249,0.85)',
                    }}>
                      {p.name}
                    </div>
                    <div style={{
                      fontSize: 11, fontFamily: "'JetBrains Mono', ui-monospace, monospace",
                      color: active ? '#a1f75e' : 'rgba(249,249,249,0.4)',
                      marginTop: 3, letterSpacing: '0.04em',
                    }}>
                      {p.role}
                    </div>
                  </div>
                  {active && (
                    <span style={{
                      fontSize: 10, letterSpacing: '0.2em', fontWeight: 600,
                      color: '#a1f75e', fontFamily: "'JetBrains Mono', ui-monospace, monospace",
                    }}>
                      ACTIVE
                    </span>
                  )}
                </button>
              );
            })}

            <div style={{
              marginTop: 8, padding: '16px 18px',
              border: '1px dashed rgba(249,249,249,0.18)',
              fontSize: 12, fontFamily: "'JetBrains Mono', ui-monospace, monospace",
              color: 'rgba(249,249,249,0.55)', lineHeight: 1.7,
            }}>
              <div style={{ color: '#a1f75e', marginBottom: 6 }}>+ new agent</div>
              name · systemPrompt · model · taxonomy_scopes · tools
            </div>
          </div>

          {/* Right: chat session */}
          <div style={{
            background: '#0a0a0a',
            border: '1px solid rgba(249,249,249,0.12)',
            display: 'flex', flexDirection: 'column',
            minHeight: 480,
          }}>
            {/* Header */}
            <div style={{
              padding: '14px 20px',
              borderBottom: '1px solid rgba(249,249,249,0.08)',
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              fontFamily: "'JetBrains Mono', ui-monospace, monospace",
              fontSize: 11, letterSpacing: '0.15em', textTransform: 'uppercase',
              color: 'rgba(249,249,249,0.55)',
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <span style={{
                  display: 'inline-block', width: 8, height: 8, borderRadius: '50%',
                  background: '#a1f75e',
                }}/>
                session · agno.sessions
              </div>
              <div>{persona.name.toLowerCase().replace(' ', '_')}.chat</div>
            </div>

            {/* Messages */}
            <div style={{
              flex: 1, padding: '28px 28px 20px',
              display: 'flex', flexDirection: 'column', gap: 22,
              fontSize: 14.5, lineHeight: 1.55,
            }}>
              {/* User typing */}
              <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
                <div style={{
                  maxWidth: '78%',
                  background: 'rgba(249,249,249,0.08)',
                  color: '#f9f9f9',
                  padding: '12px 16px',
                  minHeight: 44,
                }}>
                  {typed}
                  <span style={{
                    display: 'inline-block', width: 2, height: '1em',
                    background: '#a1f75e',
                    verticalAlign: 'text-bottom', marginLeft: 2,
                    animation: 'nx-blink 1s step-end infinite',
                  }}/>
                </div>
              </div>

              {/* Tool call */}
              <div style={{
                alignSelf: 'flex-start', maxWidth: '78%',
                border: '1px solid rgba(161,247,94,0.3)',
                background: 'rgba(161,247,94,0.04)',
                padding: '10px 14px',
                fontFamily: "'JetBrains Mono', ui-monospace, monospace",
                fontSize: 12,
                color: 'rgba(249,249,249,0.72)',
              }}>
                <div style={{ color: '#a1f75e', marginBottom: 4, fontSize: 10, letterSpacing: '0.18em' }}>
                  ▸ TOOL · search_collections
                </div>
                <div>query: &quot;{currentPrompt.slice(0, 40)}{currentPrompt.length > 40 ? '…' : ''}&quot;</div>
                <div style={{ color: 'rgba(249,249,249,0.5)', marginTop: 4 }}>
                  → 4 chunks · tenant=acme · 182ms
                </div>
              </div>

              {/* Agent answer */}
              <div style={{ alignSelf: 'flex-start', maxWidth: '82%' }}>
                <div style={{
                  display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8,
                  fontSize: 11, letterSpacing: '0.15em', textTransform: 'uppercase',
                  color: '#a1f75e', fontWeight: 600,
                }}>
                  <span style={{
                    width: 22, height: 22,
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                    background: '#a1f75e', color: '#0d0d0d', fontWeight: 700,
                  }}>{persona.glyph}</span>
                  {persona.name}
                </div>
                <div style={{
                  color: 'rgba(249,249,249,0.88)',
                  background: 'transparent',
                  borderLeft: '2px solid #a1f75e',
                  paddingLeft: 16,
                }}>
                  Según los <strong style={{ color: '#a1f75e' }}>4 fragmentos</strong> recuperados del corpus de tu tenant,
                  la respuesta se construye citando <em>posts/#p_8421</em> y <em>books/handbook#ch-3</em>.
                  La sesión y el razonamiento quedan persistidos en <code style={{ color: '#a1f75e' }}>agno.sessions</code>.
                </div>
              </div>
            </div>

            {/* Footer stats */}
            <div style={{
              padding: '14px 20px',
              borderTop: '1px solid rgba(249,249,249,0.08)',
              display: 'flex', gap: 24, flexWrap: 'wrap',
              fontFamily: "'JetBrains Mono', ui-monospace, monospace",
              fontSize: 11, color: 'rgba(249,249,249,0.5)',
            }}>
              <span><span style={{ color: '#a1f75e' }}>●</span> streaming</span>
              <span>tokens · 412</span>
              <span>rag hits · 4</span>
              <span>persisted · agno.sessions</span>
              <span style={{ marginLeft: 'auto' }}>@zetesis/payload-agents-core</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { AgnoSection });