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

const { useState: useStateE } = React;

const REASONS = [
  { id: "equipo-retirado", label: "Equipo retirado, robado o no se encuentra" },
  { id: "serie-no-aparece", label: "Serie no aparece / no comprado en Canella / comprado al contado" },
  { id: "cliente-no-serie", label: "Cliente no puede dar la serie" },
  { id: "serie-otro-dato", label: "Da IP / # chasis ADF / cartucho de tóner en vez de serie" },
  { id: "buscar-otro", label: "Pide búsqueda por NIT / nombre / # cliente" },
  { id: "contrato-no-grabado", label: "Contrato (arrendamiento o mantenimiento) no grabado/actualizado" },
  { id: "amerita-visita", label: "Falla amerita visita de técnico" },
];

const ROUTES = [
  { id: "channel", icon: "user", label: "Continuar en el mismo canal", sub: "Responder al cliente vía llamada activa", note: "preserva contexto · cliente espera en línea" },
  { id: "conectividad", icon: "routes", label: "Reasignar a CONECTIVIDAD", sub: "Equipos en arrendamiento · red / IP / firmware" },
  { id: "taller", icon: "wrench", label: "Reasignar a TALLER", sub: "Consulta técnica HW/SW · diagnóstico profundo" },
  { id: "visita", icon: "truck", label: "Agendar visita de técnico", sub: "Dispatcher despacha unidad a campo" },
];

const EscalationScreen = ({ goToQueue, goToCase }) => {
  const c = ESCALATED_CASE;
  const channelMeta = CHANNELS.find(x => x.id === c.channel);
  const [reason, setReason] = useStateE(c.reason);
  const [route, setRoute] = useStateE("channel");
  const [draft, setDraft] = useStateE("Don Roberto, soy Sofía Marroquín del equipo de Canella. Le ayudo a partir de aquí. Veo que mi colega SOF.IA validó la serie sin encontrarla. ¿Me podría confirmar el NIT de su empresa para buscar por ahí?");

  return (
    <div className="page" data-screen-label="03 Escalamiento al operador">
      <div className="crumb">
        <a onClick={goToQueue} style={{cursor:"pointer"}}>← Bandeja</a>
        <span className="sep">/</span>
        <a>Escalamientos</a>
        <span className="sep">/</span>
        <a>#{c.id}</a>
      </div>

      <div className="page-head">
        <div>
          <h1 className="page-title">Escalamiento #{c.id} · {c.customer}</h1>
          <div className="page-sub">SOF.IA transfirió el caso · esperando acción del Dispatcher</div>
        </div>
        <div style={{display:"flex",gap:8}}>
          <button className="btn" onClick={goToQueue}>← Cola</button>
          <button className="btn" onClick={goToCase}>Ver caso resuelto (referencia)</button>
        </div>
      </div>

      {/* Escalation banner */}
      <div className="esc-banner">
        <div className="icon"><NavIcon name="alert"/></div>
        <div style={{flex:1}}>
          <b>SOF.IA escaló este caso · cliente sigue en línea</b>
          <p>Motivo principal: <b style={{color:"var(--text)"}}>{REASONS.find(r => r.id === c.reason).label}</b>. El cliente está esperando en la llamada · te paso el control con todo el contexto recolectado.</p>
          <div className="tag-row">
            <span className="k-pill" style={{color:"var(--red)",borderColor:"rgba(255,107,122,0.3)"}}>● en vivo</span>
            <span className="k-pill">canal: {channelMeta.label}</span>
            <span className="k-pill">capturado por SOF.IA en {c.duration}</span>
            <span className="k-pill">escalado a las {c.escalatedAt}</span>
          </div>
        </div>
        <div style={{display:"flex",flexDirection:"column",gap:8}}>
          <button className="btn primary"><NavIcon name="user"/> Tomar el caso</button>
          <button className="btn sm">Devolver a SOF.IA</button>
        </div>
      </div>

      <div className="esc-grid">
        {/* LEFT — voice transcript + composer */}
        <div className="conv-panel">
          <div className="conv-head">
            <ChIcon channel={c.channel} size="lg"/>
            <div className="who">
              <b>{c.customer}</b>
              <span>{c.customerSub} · {channelMeta.label} en curso</span>
            </div>
            <StateBadge state="escalated"/>
          </div>

          <div className="cv-voice" style={{flex:1,display:"flex",flexDirection:"column"}}>
            <div className="voice-strip">
              <div className="live"><span className="dot"/> EN VIVO</div>
              <div className="waveform">
                {Array.from({length:48}).map((_,i) => (
                  <i key={i} style={{
                    animationDelay: `${(i*0.04) % 1.4}s`,
                    opacity: 0.4 + (i % 5) * 0.12,
                  }}/>
                ))}
              </div>
              <div className="dur">02:14 / —</div>
            </div>

            <div className="transcript">
              {c.transcript.map((line, i) => (
                <div key={i} className={`tx-line ${line.bot ? "bot" : ""}`}>
                  <div>
                    <div className="speaker">{line.speaker}</div>
                    <div className="stamp">{line.time}</div>
                  </div>
                  <div className="text">{line.text}</div>
                </div>
              ))}
              <div className="tx-line">
                <div>
                  <div className="speaker" style={{color:"var(--orange-bright)"}}>SOF.IA → OP</div>
                  <div className="stamp">11:08:42</div>
                </div>
                <div className="text" style={{color:"var(--text-3)",fontStyle:"italic"}}>
                  Transferencia silenciosa al operador. Cliente en hold con música. Tienes ~30 seg antes de que pregunte.
                </div>
              </div>
            </div>

            <div className="composer">
              <div className="ch-label">
                <ChIcon channel={c.channel} size="sm"/> Responder por {channelMeta.label} · misma llamada
              </div>
              <textarea
                value={draft}
                onChange={e => setDraft(e.target.value)}
                rows={3}
              />
              <div className="composer-actions">
                <button className="btn sm">Insertar plantilla</button>
                <button className="btn sm">Pedir NIT</button>
                <button className="btn sm">Buscar por nombre</button>
                <div style={{flex:1}}/>
                <span className="hint">⌘ + Enter para enviar</span>
                <button className="btn primary sm">Tomar línea</button>
              </div>
            </div>
          </div>
        </div>

        {/* RIGHT — reason picker, collected context, routing */}
        <div style={{display:"flex",flexDirection:"column",gap:18}}>
          <div className="kb-card">
            <div className="card-head">
              <NavIcon name="alert"/>
              <h3>Motivo del escalamiento</h3>
              <span className="tag">clasificado por SOF.IA</span>
            </div>
            <div className="reason-picker">
              <span className="picker-label">selecciona o ajusta</span>
              <div className="reason-list">
                {REASONS.map(r => (
                  <div
                    key={r.id}
                    className={`reason-opt ${reason === r.id ? "selected" : ""}`}
                    onClick={() => setReason(r.id)}
                  >
                    <div className="radio"/>
                    <span>{r.label}</span>
                    {r.id === c.reason && (
                      <span className="auto-badge" style={{marginLeft:"auto"}}>SUGERIDO</span>
                    )}
                  </div>
                ))}
              </div>
            </div>
          </div>

          <div className="kb-card">
            <div className="card-head">
              <NavIcon name="bookmark"/>
              <h3>Contexto que SOF.IA ya recolectó</h3>
              <span className="tag">{c.collected.length} campos</span>
            </div>
            <div className="collected">
              {c.collected.map((row, i) => (
                <div key={i} className="coll-row">
                  <div className="k">{row.k}</div>
                  <div className={`v ${row.mono ? "mono" : ""} ${row.muted ? "muted" : ""}`}>
                    {row.v}
                    {row.hint && <span style={{color:"var(--red)",fontFamily:"var(--mono)",fontSize:10,marginLeft:8}}>· {row.hint}</span>}
                  </div>
                  <div className="src">{row.src}</div>
                </div>
              ))}
            </div>
          </div>

          <div className="kb-card">
            <div className="card-head">
              <NavIcon name="routes"/>
              <h3>Ruta de atención</h3>
              <span className="tag">elige cómo continuar</span>
            </div>
            <div className="routing">
              {ROUTES.map(r => (
                <div
                  key={r.id}
                  className={`route-opt ${route === r.id ? "selected" : ""}`}
                  onClick={() => setRoute(r.id)}
                >
                  <div className="ricon"><NavIcon name={r.icon}/></div>
                  <div className="info">
                    <b>{r.label}</b>
                    <span>{r.sub}{r.note ? ` · ${r.note}` : ""}</span>
                  </div>
                  {route === r.id && <span className="auto-badge">ACTIVA</span>}
                </div>
              ))}
            </div>
            <div className="action-bar">
              <span className="hint">Política: arrendamiento → conectividad · facturado/cotización → fuera de alcance fase 1</span>
              <div className="grow"/>
              <button className="btn">Guardar borrador</button>
              <button className="btn primary">Confirmar ruta</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

window.EscalationScreen = EscalationScreen;