/* global React, ChIcon, NavIcon, CHANNELS */

const { useState: useStateF } = React;

const FLOW_NODES = [
  {
    id: "ingesta",
    step: "01",
    title: "Ingesta Omnicanal",
    desc: "Recibe mensajes de los 4 canales activos y normaliza el formato.",
    stat: "234",
    statU: "mensajes hoy",
    tone: "cream",
    ico: (<NavIcon name="routes"/>),
    connLabel: "ticket entrante",
  },
  {
    id: "triage",
    step: "02",
    title: "Triage · SOF.IA",
    desc: "Clasifica intención, detecta urgencia y asigna confianza.",
    stat: "0.94",
    statU: "confianza media",
    tone: "lavender",
    ico: (<NavIcon name="bolt"/>),
    connLabel: "intent + score",
  },
  {
    id: "bd",
    step: "03",
    title: "Validación BD",
    desc: "Busca serie, NIT, contrato y cliente en BD Canella.",
    stat: "11ms",
    statU: "latencia p50",
    tone: "pink",
    ico: (<NavIcon name="user"/>),
    connLabel: "cliente OK",
  },
  {
    id: "kb",
    step: "04",
    title: "Knowledge Base",
    desc: "Recupera artículos relevantes con score de similitud.",
    stat: "214",
    statU: "artículos indexados",
    tone: "mint",
    ico: (<NavIcon name="kb"/>),
    connLabel: "KB match",
  },
  {
    id: "decision",
    step: "05",
    title: "Decisión",
    desc: "Auto-resuelve si supera umbral, o escala a operador humano.",
    stat: "80 / 20",
    statU: "auto / escalado",
    tone: "yellow",
    ico: (<NavIcon name="alert"/>),
    connLabel: "ruta elegida",
  },
  {
    id: "accion",
    step: "06",
    title: "Acción",
    desc: "Agenda visita, redacta correo y cierra el ticket con trazabilidad.",
    stat: "5:14",
    statU: "tiempo medio",
    tone: "stone",
    ico: (<NavIcon name="bookmark"/>),
  },
];

const CHANNEL_CONFIGS = [
  { id:"whatsapp", on:true,  business:"L-V 7:00 – 19:00 · sáb 8:00 – 14:00", account:"+502 2447 9100 · WABA verificada", vol:108 },
  { id:"call",     on:true,  business:"L-V 7:00 – 19:00",                    account:"PBX Canella · 4 líneas SIP",       vol:62 },
  { id:"web",      on:true,  business:"24 / 7 · widget en canella.gt",        account:"widget_v3.canella.gt",            vol:31 },
  { id:"email",    on:true,  business:"24 / 7 · respuesta en <4h hábiles",    account:"soporte@canella.gt",              vol:33 },
];

const TRIAGE_RULES = [
  { id:"T1", on:true,  text:"HP sin serie reconocible → escalar a Dispatcher", trig:34 },
  { id:"T2", on:true,  text:"Arrendamiento (ARR-*) → área de Conectividad", trig:218 },
  { id:"T3", on:true,  text:"Contrato vencido o no grabado → notificar al operador antes de proponer visita", trig:47 },
  { id:"T4", on:true,  text:"Cliente facturado / cotización → marcar “fuera de alcance fase 1”", trig:91 },
  { id:"T5", on:true,  text:"Visita matutina por defecto entre 9:00 y 12:00", trig:62 },
  { id:"T6", on:false, text:"Atascos repetidos del mismo equipo (>2 en 30 días) → escalar a Taller", trig:4 },
];

const BD_STEPS = [
  { id:"B1", title:"Match exacto por número de serie", sub:"equipos.serie = ? · index B-tree" },
  { id:"B2", title:"Match por últimos 4 dígitos + verificación de nombre y dirección", sub:"para series parcialmente legibles o dictadas en voz" },
  { id:"B3", title:"Búsqueda por NIT del cliente", sub:"fallback cuando la serie no aparece o el cliente compró al contado" },
  { id:"B4", title:"Búsqueda por nombre comercial / # de cliente", sub:"último recurso · siempre escala a operador para confirmar" },
];

const ESC_REASONS_DEF = [
  { id:"r1", label:"Equipo retirado, robado o no se encuentra", on:true },
  { id:"r2", label:"Serie no aparece / compra al contado", on:true },
  { id:"r3", label:"Cliente no puede dar la serie", on:true },
  { id:"r4", label:"Da IP / chasis ADF / cartucho en vez de serie", on:true },
  { id:"r5", label:"Pide búsqueda por NIT / nombre / # cliente", on:true },
  { id:"r6", label:"Contrato no grabado/actualizado", on:true },
  { id:"r7", label:"Falla amerita visita de técnico", on:true },
];

const TONE_OPTIONS = [
  { id:"formal",  name:"Formal",  desc:"Lenguaje neutro, distancia profesional.",  sample:"Estimada Licda. Estrada, recibimos su reporte…" },
  { id:"warm",    name:"Cercano", desc:"Cálido, conversacional pero profesional.", sample:"Hola María, soy SOF.IA. Lamento el inconveniente…" },
  { id:"concise", name:"Conciso", desc:"Directo, mínimo de fricción.",              sample:"Ticket #CNL-2841 abierto. Necesito la serie:" },
];

// SVG arrow component for connector between nodes
const ConnectorArrow = ({ label }) => (
  <div className="flow-connector">
    {label && <span className="lbl">{label}</span>}
    <svg width="78" height="10" viewBox="0 0 78 10">
      <line x1="2" y1="5" x2="68" y2="5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeDasharray="3 3.5"/>
      <path d="M68 1 L76 5 L68 9 Z" fill="currentColor"/>
    </svg>
  </div>
);

const FlowScreen = ({ setRoute }) => {
  const [selectedNode, setSelectedNode] = useStateF("triage");
  const [channels, setChannels] = useStateF(CHANNEL_CONFIGS);
  const [rules, setRules] = useStateF(TRIAGE_RULES);
  const [kbThreshold, setKbThreshold] = useStateF(70);
  const [kbTopK, setKbTopK] = useStateF(3);
  const [autoConfidence, setAutoConfidence] = useStateF(82);
  const [reasons, setReasons] = useStateF(ESC_REASONS_DEF);
  const [tone, setTone] = useStateF("warm");
  const [greeting, setGreeting] = useStateF("Hola {{cliente.nombre}}, soy SOF.IA, asistente de soporte de Canella. ¿En qué te ayudo hoy?");
  const [signature, setSignature] = useStateF("SOF.IA · Soporte Canella\n(generado automáticamente · {{fecha}} {{hora}})");

  const toggle = (arr, setter, id) => setter(arr.map(x => x.id === id ? {...x, on: !x.on} : x));

  const scrollToCfg = (nodeId) => {
    setSelectedNode(nodeId);
    setTimeout(() => {
      const el = document.querySelector(`[data-cfg="${nodeId}"]`);
      if (el) el.scrollIntoView({behavior:"smooth", block:"start"});
    }, 80);
  };

  const sliderStyle = (v) => ({ "--p": `${v}%` });

  const sectionHighlight = (id) => selectedNode === id ? "highlight" : "";

  return (
    <div className="page" data-screen-label="09 Centro de Control · Flujo">
      <div className="page-head-v2">
        <div className="ttl-block">
          <p className="eyebrow">Centro de Control · cerebro del sistema</p>
          <h1>Flujo de SOF.IA</h1>
        </div>
        <div className="kpis-inline">
          <div className="kpi-inline">
            <span className="l">Auto-resolución</span>
            <span className="v" style={{color:"var(--orange-deep)"}}>80<span className="u">%</span></span>
          </div>
          <div className="kpi-inline">
            <span className="l">Mensajes hoy</span>
            <span className="v">234</span>
          </div>
          <div className="kpi-inline">
            <span className="l">Latencia BD</span>
            <span className="v">11<span className="u">ms</span></span>
          </div>
          <div className="kpi-inline">
            <span className="l">Uptime sistema</span>
            <span className="v" style={{color:"var(--green)"}}>99.97<span className="u">%</span></span>
          </div>
        </div>
      </div>

      {/* Pill tabs nav */}
      <div className="pill-tabs">
        <span className="pill-tab on">Flujo</span>
        <span className="pill-tab" onClick={() => setRoute && setRoute("mcp")}>Reglas en lenguaje natural</span>
        <span className="pill-tab" onClick={() => setRoute && setRoute("kb")}>Knowledge Base</span>
        <div style={{flex:1}}/>
        <span className="icon-pill" title="Importar / Exportar config"><NavIcon name="bookmark"/></span>
        <span className="icon-pill" title="Recargar"><NavIcon name="rotate"/></span>
        <span className="icon-pill" title="Ajustes avanzados"><NavIcon name="settings"/></span>
      </div>

      {/* === FLOW DIAGRAM === */}
      <div className="flow-canvas">
        <div className="flow-head">
          <span className="title">Pipeline · ticket entrante → resolución</span>
          <div className="meta">
            <span className="live"><span className="dot"/> EN VIVO</span>
            <span>4 sistemas conectados vía MCP</span>
            <span>última sincronización · hace 3 s</span>
          </div>
        </div>

        <div className="flow-row">
          {FLOW_NODES.map((n, i) => (
            <React.Fragment key={n.id}>
              <div
                className={`flow-node tone-${n.tone} ${selectedNode === n.id ? "selected" : ""}`}
                onClick={() => scrollToCfg(n.id)}
              >
                <div className="top-row">
                  <div className="ico">{n.ico}</div>
                  <div className="step">{n.step}</div>
                </div>
                <div className="nh">Nodo {n.step}</div>
                <h4>{n.title}</h4>
                <div className="desc">{n.desc}</div>
                <div className="stat"><b>{n.stat}</b> {n.statU}</div>
              </div>
              {i < FLOW_NODES.length - 1 && <ConnectorArrow label={n.connLabel}/>}
            </React.Fragment>
          ))}
        </div>

        <div className="flow-stats">
          <div className="flow-stat">
            <span className="l">Tickets procesados hoy</span>
            <span className="v">128<span className="u">/día</span></span>
          </div>
          <div className="flow-stat">
            <span className="l">Cerrados sin humano</span>
            <span className="v" style={{color:"var(--orange-deep)"}}>102<span className="u">/128</span></span>
          </div>
          <div className="flow-stat">
            <span className="l">Escalados al operador</span>
            <span className="v" style={{color:"var(--red)"}}>23</span>
          </div>
          <div className="flow-stat">
            <span className="l">Tiempo medio resolución</span>
            <span className="v">5<span className="u">min 14 s</span></span>
          </div>
        </div>
      </div>

      {/* === STICKY SECTION NAV === */}
      <div className="cfg-nav">
        {FLOW_NODES.map(n => (
          <span
            key={n.id}
            className={`cfg-nav-item ${selectedNode === n.id ? "on" : ""}`}
            onClick={() => scrollToCfg(n.id)}
          >
            <span className="n">{n.step}</span>
            {n.title}
          </span>
        ))}
      </div>

      {/* === CONFIG STACK === */}
      <div className="cfg-stack">

        {/* 01 INGESTA · CANALES */}
        <div className={`cfg-card ${sectionHighlight("ingesta")}`} data-cfg="ingesta">
          <div className="cfg-band cream"/>
          <div className="cfg-head">
            <div className="ico" style={{background:"var(--pastel-cream)"}}><NavIcon name="routes"/></div>
            <div>
              <h3>Ingesta Omnicanal <span className="num">/ 01</span></h3>
              <div className="sub">Configura los 4 canales activos · todos desembocan en la misma cola unificada.</div>
            </div>
            <div className="right">
              <span className="conn-chip"><span className="dot"/> 4 / 4 activos</span>
            </div>
          </div>
          <div className="cfg-body">
            <div className="ch-grid">
              {channels.map(ch => {
                const meta = CHANNELS.find(c => c.id === ch.id);
                return (
                  <div key={ch.id} className="ch-cfg">
                    <div className="top">
                      <ChIcon channel={ch.id} size="lg"/>
                      <div style={{flex:1, minWidth:0}}>
                        <div className="name">{meta.label}</div>
                        <div className="sub">{ch.business}</div>
                      </div>
                      <span className={`tgl orange ${ch.on ? "on" : ""}`} onClick={() => toggle(channels, setChannels, ch.id)}/>
                    </div>
                    <div className="creds">↳ {ch.account}</div>
                    <div className="stats-row">
                      <span><b>{ch.vol}</b> msg hoy</span>
                      <span>uptime <b>100%</b></span>
                      <span>latencia <b>&lt;200ms</b></span>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </div>

        {/* 02 TRIAGE · REGLAS */}
        <div className={`cfg-card ${sectionHighlight("triage")}`} data-cfg="triage">
          <div className="cfg-band lavender"/>
          <div className="cfg-head">
            <div className="ico" style={{background:"var(--pastel-lavender)"}}><NavIcon name="bolt"/></div>
            <div>
              <h3>Triage · Reglas de SOF.IA <span className="num">/ 02</span></h3>
              <div className="sub">Reglas que SOF.IA aplica antes de procesar cualquier ticket entrante.</div>
            </div>
            <div className="right">
              <span className="conn-chip"><span className="dot"/> {rules.filter(r => r.on).length} de {rules.length}</span>
              <button className="btn sm" onClick={() => setRoute && setRoute("mcp")}>Editar en lenguaje natural →</button>
            </div>
          </div>
          <div className="cfg-body" style={{gap:0}}>
            {rules.map(r => (
              <div key={r.id} className={`cfg-rule ${r.on ? "" : "off"}`}>
                <span className={`tgl ${r.on ? "on" : ""}`} onClick={() => toggle(rules, setRules, r.id)}/>
                <div className="info">
                  <div className="rt">{r.text}</div>
                  <div className="rm">
                    <span>{r.id}</span>
                    <span>· {r.trig} disparos</span>
                    <span>· últimas 24 h</span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* 03 VALIDACION BD */}
        <div className={`cfg-card ${sectionHighlight("bd")}`} data-cfg="bd">
          <div className="cfg-band pink"/>
          <div className="cfg-head">
            <div className="ico" style={{background:"var(--pastel-pink)"}}><NavIcon name="user"/></div>
            <div>
              <h3>Validación en BD Canella <span className="num">/ 03</span></h3>
              <div className="sub">Estrategia de búsqueda en orden · primera coincidencia gana.</div>
            </div>
            <div className="right">
              <span className="conn-chip"><span className="dot"/> Conectado · 11 ms</span>
            </div>
          </div>
          <div className="cfg-body">
            <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",fontFamily:"var(--mono)",fontSize:11,color:"var(--text-3)",letterSpacing:"0.04em",fontWeight:500,padding:"8px 12px",background:"var(--bg-2)",border:"1px solid var(--line)",borderRadius:8}}>
              <span style={{textTransform:"uppercase"}}>Endpoint</span>
              <span style={{color:"var(--text-2)"}}>equipos.canella.gt/api/v2</span>
            </div>
            {BD_STEPS.map((s, i) => (
              <div key={s.id} className="bd-step">
                <div className="n">{i+1}</div>
                <div className="desc">
                  <b>{s.title}</b>
                  <span>{s.sub}</span>
                </div>
                <div className="reorder">
                  <button title="Subir">▲</button>
                  <button title="Bajar">▼</button>
                </div>
              </div>
            ))}
            <div style={{padding:"12px 14px",background:"var(--bg-2)",border:"1px solid var(--line)",borderRadius:10,fontSize:12.5,color:"var(--text-2)",lineHeight:1.55}}>
              Si los 4 pasos fallan, SOF.IA <b style={{color:"var(--text)"}}>escala automáticamente al Dispatcher</b> preservando todo el contexto recolectado.
            </div>
          </div>
        </div>

        {/* 04 KB */}
        <div className={`cfg-card ${sectionHighlight("kb")}`} data-cfg="kb">
          <div className="cfg-band mint"/>
          <div className="cfg-head">
            <div className="ico" style={{background:"var(--pastel-mint)"}}><NavIcon name="kb"/></div>
            <div>
              <h3>Knowledge Base <span className="num">/ 04</span></h3>
              <div className="sub">Cuándo y cómo SOF.IA consulta la base de conocimiento para resolver.</div>
            </div>
            <div className="right">
              <span className="conn-chip"><span className="dot"/> 214 artículos</span>
              <button className="btn sm" onClick={() => setRoute && setRoute("kb")}>Ver KB →</button>
            </div>
          </div>
          <div className="cfg-body cols-2">
            <div>
              <div className="sld-row">
                <div className="label">
                  <b>Umbral de confianza para citar KB</b>
                  <p>Solo usa artículos cuyo score de similitud supere este valor.</p>
                </div>
                <input
                  type="range" min="50" max="95"
                  value={kbThreshold}
                  onChange={e => setKbThreshold(+e.target.value)}
                  style={sliderStyle(((kbThreshold-50)/(95-50))*100)}
                />
                <span className="val">{(kbThreshold/100).toFixed(2)}</span>
              </div>
              <div className="sld-row">
                <div className="label">
                  <b>Top-K artículos a recuperar</b>
                  <p>Cuántos resultados consulta antes de decidir.</p>
                </div>
                <input
                  type="range" min="1" max="10"
                  value={kbTopK}
                  onChange={e => setKbTopK(+e.target.value)}
                  style={sliderStyle(((kbTopK-1)/9)*100)}
                />
                <span className="val">{kbTopK}</span>
              </div>
            </div>
            <div style={{padding:"16px 18px",background:"var(--pastel-mint)",border:"1px solid rgba(14,143,92,0.15)",borderRadius:12,fontSize:12.5,color:"var(--text)",lineHeight:1.55,display:"flex",flexDirection:"column",gap:8}}>
              <div style={{fontFamily:"var(--mono)",fontSize:10,letterSpacing:"0.08em",textTransform:"uppercase",color:"var(--green)",fontWeight:600}}>Sugerencia activa</div>
              <div>
                SOF.IA detectó <b>7 casos similares</b> sin artículo formal sobre <i>“Error 49.4C02 en HP M428fdw”</i>. Vale formalizarlo en la KB.
              </div>
              <div style={{display:"flex",gap:8,marginTop:4}}>
                <button className="btn sm primary">Crear KB</button>
                <button className="btn sm">Posponer</button>
              </div>
            </div>
          </div>
        </div>

        {/* 05 DECISION */}
        <div className={`cfg-card ${sectionHighlight("decision")}`} data-cfg="decision">
          <div className="cfg-band yellow"/>
          <div className="cfg-head">
            <div className="ico" style={{background:"var(--pastel-yellow)"}}><NavIcon name="alert"/></div>
            <div>
              <h3>Decisión · Auto vs. Escalar <span className="num">/ 05</span></h3>
              <div className="sub">Define cuándo SOF.IA actúa sola y cuándo entrega el caso al operador humano.</div>
            </div>
          </div>
          <div className="cfg-body cols-2">
            <div>
              <div className="sld-row">
                <div className="label">
                  <b>Umbral de confianza para auto-resolver</b>
                  <p>Por debajo de este score SOF.IA escala, aunque tenga una propuesta.</p>
                </div>
                <input
                  type="range" min="60" max="95"
                  value={autoConfidence}
                  onChange={e => setAutoConfidence(+e.target.value)}
                  style={sliderStyle(((autoConfidence-60)/(95-60))*100)}
                />
                <span className="val">{(autoConfidence/100).toFixed(2)}</span>
              </div>
              <div style={{marginTop:8,padding:"12px 14px",background:"var(--bg-2)",border:"1px solid var(--line)",borderRadius:10,fontSize:12,color:"var(--text-2)",lineHeight:1.55}}>
                <div style={{fontFamily:"var(--mono)",fontSize:10,letterSpacing:"0.08em",textTransform:"uppercase",color:"var(--text-3)",fontWeight:600,marginBottom:6}}>Resultado actual</div>
                Con umbral <b style={{color:"var(--text)"}}>{(autoConfidence/100).toFixed(2)}</b>, SOF.IA está cerrando <b style={{color:"var(--orange-deep)"}}>~80%</b> de los tickets sin humano. Subirlo a 0.90 reduciría errores pero escalaría más casos a Dispatcher.
              </div>
            </div>
            <div>
              <div style={{fontFamily:"var(--mono)",fontSize:11,color:"var(--text-3)",letterSpacing:"0.06em",fontWeight:600,marginBottom:10,textTransform:"uppercase"}}>
                Motivos de escalamiento permitidos
              </div>
              <div className="esc-reasons">
                {reasons.map(r => (
                  <div
                    key={r.id}
                    className={`esc-reason ${r.on ? "on" : ""}`}
                    onClick={() => toggle(reasons, setReasons, r.id)}
                  >
                    <span className="chk">{r.on && <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round"><polyline points="20 6 9 17 4 12"/></svg>}</span>
                    {r.label}
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>

        {/* 06 ACCION · TONE */}
        <div className={`cfg-card ${sectionHighlight("accion")}`} data-cfg="accion">
          <div className="cfg-band stone"/>
          <div className="cfg-head">
            <div className="ico" style={{background:"var(--pastel-stone)"}}><NavIcon name="bookmark"/></div>
            <div>
              <h3>Acción · Tono y respuestas de SOF.IA <span className="num">/ 06</span></h3>
              <div className="sub">Cómo le habla SOF.IA al cliente y cómo redacta correos formales.</div>
            </div>
          </div>
          <div className="cfg-body">
            <div style={{fontFamily:"var(--mono)",fontSize:11,color:"var(--text-3)",letterSpacing:"0.06em",textTransform:"uppercase",fontWeight:600}}>Tono predeterminado</div>
            <div className="tone-grid">
              {TONE_OPTIONS.map(t => (
                <div
                  key={t.id}
                  className={`tone-opt ${tone === t.id ? "on" : ""}`}
                  onClick={() => setTone(t.id)}
                >
                  <b>{t.name}</b>
                  <span>{t.desc}</span>
                  <em>{t.sample}</em>
                </div>
              ))}
            </div>

            <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:18,marginTop:10}}>
              <div>
                <div style={{fontFamily:"var(--mono)",fontSize:11,color:"var(--text-3)",letterSpacing:"0.06em",textTransform:"uppercase",fontWeight:600,marginBottom:8}}>Saludo inicial</div>
                <textarea
                  className="cfg-textarea"
                  value={greeting}
                  onChange={e => setGreeting(e.target.value)}
                />
                <div className="hint" style={{marginTop:8}}>Variables: <code style={{fontFamily:"var(--mono)"}}>{`{{cliente.nombre}}`}</code> · <code style={{fontFamily:"var(--mono)"}}>{`{{canal.label}}`}</code></div>
              </div>
              <div>
                <div style={{fontFamily:"var(--mono)",fontSize:11,color:"var(--text-3)",letterSpacing:"0.06em",textTransform:"uppercase",fontWeight:600,marginBottom:8}}>Firma de correo</div>
                <textarea
                  className="cfg-textarea"
                  value={signature}
                  onChange={e => setSignature(e.target.value)}
                />
                <div className="hint" style={{marginTop:8}}>Variables: <code style={{fontFamily:"var(--mono)"}}>{`{{fecha}}`}</code> · <code style={{fontFamily:"var(--mono)"}}>{`{{hora}}`}</code> · <code style={{fontFamily:"var(--mono)"}}>{`{{ticket.id}}`}</code></div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Footer actions */}
      <div style={{
        position:"sticky",bottom:0,marginLeft:-36,marginRight:-36,marginBottom:-72,
        background:"linear-gradient(180deg, rgba(239,237,230,0) 0%, var(--bg) 40%)",
        padding:"24px 36px 32px",
        display:"flex",justifyContent:"flex-end",gap:10,
      }}>
        <button className="btn">Descartar cambios</button>
        <button className="btn">Probar en sandbox</button>
        <button className="btn primary">Guardar configuración</button>
      </div>
    </div>
  );
};

window.FlowScreen = FlowScreen;