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

const { useState: useStateP, useMemo: useMemoP } = React;

// ============ Data ============

const PENDING_ACTION = [
  {
    id: "CNL-2840",
    channel: "call",
    customer: "Roberto Cifuentes",
    company: "Constructora Cifuentes Hnos.",
    printer: "Canon imageRUNNER 2630i",
    serial: "DLP04221 (no encontrada)",
    blocker: "Escalado por SOF.IA · cliente en línea esperando",
    why: "serie no aparece · compra al contado",
    waitFor: "00:01:08",
    slaPct: 12,
    primary: "Tomar línea",
    secondary: "Devolver a SOF.IA",
    severity: "danger",
    route: "escalation",
  },
  {
    id: "CNL-2837",
    channel: "call",
    customer: "Industrias Polar",
    company: "Industrias Polar de CA",
    printer: "Canon LBP6230dw",
    serial: "—",
    blocker: "Equipo arrendado robado · requiere trámite con seguro",
    why: "equipo retirado / robado",
    waitFor: "00:18:02",
    slaPct: 62,
    primary: "Tomar caso",
    secondary: "Asignar",
    severity: "warn",
    route: "escalation",
  },
  {
    id: "CNL-2834",
    channel: "call",
    customer: "Helena Castañeda",
    company: "Clínicas Vida Nueva",
    printer: "HP LaserJet Pro M428",
    serial: "CNB8H4XXXX (ilegible)",
    blocker: "Cliente no pudo leer la serie completa · enviada a Taller",
    why: "cliente no puede dar serie",
    waitFor: "00:14:30",
    slaPct: 48,
    primary: "Revisar en Taller",
    secondary: "Reasignar",
    severity: "warn",
  },
];

const PENDING_CUSTOMER = [
  {
    id: "CNL-2839",
    channel: "web",
    customer: "Luis Pérez",
    company: "Imprenta Color GT",
    printer: "HP LaserJet M428fdw",
    serial: "CNB8H42P11",
    blocker: "Esperando que el cliente envíe la página de calidad",
    why: "indagación HW · pendiente input",
    waitFor: "00:08:14",
    slaPct: 24,
    primary: "Recordar al cliente",
    secondary: "Ver chat",
    severity: "ok",
  },
  {
    id: "CNL-2738",
    channel: "whatsapp",
    customer: "Tienda La Aurora",
    company: "Tienda La Aurora, S.A.",
    printer: "HP LaserJet Pro M404n",
    serial: "VNB6L33042",
    blocker: "Cliente no confirma horario de visita propuesto",
    why: "esperando confirmación de agenda",
    waitFor: "02:14:08",
    slaPct: 41,
    primary: "Recordar al cliente",
    secondary: "Reagendar",
    severity: "warn",
  },
  {
    id: "CNL-2701",
    channel: "email",
    customer: "Bufete Solórzano",
    company: "Solórzano & Asoc.",
    printer: "HP OfficeJet Pro 9015e",
    serial: "TH2C4471XL",
    blocker: "Cliente sin responder desde ayer · solicitamos NIT",
    why: "validación de cliente pendiente",
    waitFor: "1d 03:42",
    slaPct: 78,
    primary: "Reenviar correo",
    secondary: "Cerrar como no-respuesta",
    severity: "danger",
  },
];

const PENDING_SLA = [
  {
    id: "CNL-2701",
    channel: "email",
    customer: "Bufete Solórzano",
    company: "Solórzano & Asoc.",
    printer: "HP OfficeJet Pro 9015e",
    serial: "TH2C4471XL",
    blocker: "Sin primera respuesta del cliente · 78% del SLA consumido",
    why: "SLA primera respuesta · vence en 3:18",
    waitFor: "1d 03:42",
    slaPct: 78,
    primary: "Escalar",
    secondary: "Reenviar",
    severity: "danger",
  },
  {
    id: "CNL-2611",
    channel: "whatsapp",
    customer: "Hotel del Lago",
    company: "Hotel del Lago Atitlán",
    printer: "HP Color LaserJet M283fdw",
    serial: "CNF8R55801",
    blocker: "Visita agendada se aproxima · falta confirmar arribo",
    why: "SLA visita · vence en 0:47",
    waitFor: "06:22:11",
    slaPct: 88,
    primary: "Confirmar arribo",
    secondary: "Reagendar",
    severity: "danger",
  },
];

const PENDING_APPROVALS = [
  {
    kind: "visit",
    title: "Visita técnica propuesta · Notaría Estrada (CNL-2836)",
    sub: "SOF.IA agendó visita para miércoles 28/05 entre 9:00 y 12:00 con Walter A. Galindo. Esperando tu aprobación final por estar dentro de la franja matutina premium.",
    meta: [
      { k: "Cliente", v: "Notaría Estrada & Asoc." },
      { k: "Equipo", v: "HP OfficeJet Pro 9015e · TH1B9011XK" },
      { k: "Técnico", v: "Walter A. Galindo · zona 10" },
      { k: "Propuesto", v: "hace 12 min" },
    ],
  },
  {
    kind: "rule",
    title: "Regla sugerida por SOF.IA · fallback por NIT",
    sub: "Detecté 41 casos en 30 días donde la serie no apareció y el operador resolvió buscando por NIT. ¿Quieres que lo haga automáticamente como segundo intento antes de escalar?",
    meta: [
      { k: "Patrón", v: "32% de los escalamientos del mes" },
      { k: "Impacto estimado", v: "−36 escalamientos/mes" },
      { k: "Riesgo", v: "Bajo · sin cambio en datos cliente" },
    ],
  },
  {
    kind: "kb",
    title: "KB sugerida · Error 49.4C02 en HP M428fdw",
    sub: "7 casos resueltos manualmente con el mismo procedimiento en 14 días. SOF.IA preparó un borrador del artículo.",
    meta: [
      { k: "Borrador", v: "5 pasos + 1 repuesto" },
      { k: "Autor sugerido", v: "Eddy R. Marroquín" },
    ],
  },
  {
    kind: "scope",
    title: "Caso marcado ‘fuera de alcance fase 1’ · Cotización Importadora Sol",
    sub: "Cliente facturado solicitó cotización de mantenimiento. SOF.IA aplicó la regla R-004 y marcó el caso fuera de alcance. ¿Confirmas o lo retomas manualmente?",
    meta: [
      { k: "Cliente", v: "Importadora Sol · Mario Ovalle" },
      { k: "Regla aplicada", v: "R-004 · facturado/cotización" },
      { k: "Recibido", v: "hace 28 min" },
    ],
  },
];

const APPR_ICON = {
  visit: <NavIcon name="truck"/>,
  rule: <NavIcon name="bolt"/>,
  kb: <NavIcon name="kb"/>,
  scope: <NavIcon name="alert"/>,
};

const FILTERS = [
  { id: "all",      label: "Todos" },
  { id: "action",   label: "Tu acción" },
  { id: "customer", label: "Esperando cliente" },
  { id: "sla",      label: "SLA en riesgo" },
  { id: "approval", label: "Aprobaciones" },
];

// ============ Row ============
const PendRow = ({ t, openTicket }) => {
  const cls = t.severity === "danger" ? "danger" : t.severity === "warn" ? "warn" : "";
  return (
    <div className="pend-row" onClick={() => openTicket(t)}>
      <ChIcon channel={t.channel}/>
      <div className="id">#{t.id}</div>
      <div className="cust">
        <b>{t.customer}</b>
        <span>{t.company}</span>
      </div>
      <div className="printer">
        {t.printer}
        <span className="serial">SN · {t.serial}</span>
      </div>
      <div className="blocker">
        {t.blocker}
        <span className="why">{t.why}</span>
      </div>
      <div className={`wait ${cls}`}>
        <span style={{fontFamily:"var(--mono)",fontSize:11.5,color:"var(--text-2)",fontWeight:500}}>{t.waitFor}</span>
        <span className="sla-mini"><i style={{width:`${Math.min(t.slaPct,100)}%`}}/></span>
        <span style={{fontFamily:"var(--mono)",fontSize:9,color:"var(--text-3)",letterSpacing:"0.04em",fontWeight:500}}>{t.slaPct}% SLA</span>
      </div>
      <div className="actions" onClick={e => e.stopPropagation()}>
        <button className="btn sm">{t.secondary}</button>
        <button className="btn primary sm">{t.primary}</button>
      </div>
    </div>
  );
};

// ============ Main ============
const PendingScreen = ({ openTicket, goToEscalation, setRoute }) => {
  const [filter, setFilter] = useStateP("all");

  const counts = {
    action: PENDING_ACTION.length,
    customer: PENDING_CUSTOMER.length,
    sla: PENDING_SLA.length,
    approval: PENDING_APPROVALS.length,
  };
  const total = counts.action + counts.customer + counts.sla + counts.approval;

  const handleOpen = (t) => {
    if (t.route === "escalation") {
      goToEscalation();
    } else {
      openTicket(t);
    }
  };

  const show = (key) => filter === "all" || filter === key;

  return (
    <div className="page" data-screen-label="07 Pendientes · bandeja del operador">
      <div className="page-head-v2">
        <div className="ttl-block">
          <p className="eyebrow">Bandeja del operador · {total} tickets en espera</p>
          <h1>Pendientes</h1>
        </div>
        <div className="kpis-inline">
          <div className="kpi-inline">
            <span className="l">Tu acción</span>
            <span className="v">{counts.action}</span>
          </div>
          <div className="kpi-inline">
            <span className="l">Esperando cliente</span>
            <span className="v">{counts.customer}</span>
          </div>
          <div className="kpi-inline">
            <span className="l">SLA en riesgo</span>
            <span className="v">{counts.sla}</span>
          </div>
          <div className="kpi-inline">
            <span className="l">Aprobaciones</span>
            <span className="v">{counts.approval}</span>
          </div>
        </div>
      </div>

      {/* Cross-nav */}
      <div className="pill-tabs">
        <span className="pill-tab" onClick={() => setRoute && setRoute("queue")}>
          Activos
          <span className="ct">22</span>
        </span>
        <span className="pill-tab on">
          Pendientes
          <span className="ct urgent">{total}</span>
        </span>
        <span className="pill-tab" onClick={() => setRoute && setRoute("resolved")}>
          Resueltos hoy
          <span className="ct">47</span>
        </span>
        <span className="pill-tab" onClick={() => setRoute && setRoute("lifecycle")}>
          Todos los tickets
          <span className="ct">52</span>
        </span>
      </div>

      {/* Filter row */}
      <div className="filter-row">
        <div className="filter-group">
          <span className="filter-label">Categoría</span>
          <div className="filter-pills">
            {FILTERS.map(f => (
              <span
                key={f.id}
                className={`filter-pill ${filter === f.id ? "on" : ""}`}
                onClick={() => setFilter(f.id)}
              >
                {f.label}
                <span className="cn">{f.id === "all" ? total : counts[f.id]}</span>
              </span>
            ))}
          </div>
        </div>
      </div>

      {/* Section: Requieren tu acción */}
      {show("action") && (
        <div className="pend-section-clean">
          <div className="tk-section-head">
            <span className="tk-section-title">Requieren tu acción ahora</span>
            <span className="tk-section-count">{counts.action} · cliente esperando</span>
            <span className="tk-section-rule"/>
          </div>
          <div className="pend-list">
            {PENDING_ACTION.length === 0
              ? <div className="pend-empty">— sin pendientes —</div>
              : PENDING_ACTION.map(t => <PendRow key={t.id} t={t} openTicket={handleOpen}/>)
            }
          </div>
        </div>
      )}

      {/* Section: Esperando cliente */}
      {show("customer") && (
        <div className="pend-section-clean">
          <div className="tk-section-head">
            <span className="tk-section-title">Esperando respuesta del cliente</span>
            <span className="tk-section-count">{counts.customer} · sin respuesta reciente</span>
            <span className="tk-section-rule"/>
          </div>
          <div className="pend-list">
            {PENDING_CUSTOMER.length === 0
              ? <div className="pend-empty">— sin pendientes —</div>
              : PENDING_CUSTOMER.map(t => <PendRow key={t.id} t={t} openTicket={handleOpen}/>)
            }
          </div>
        </div>
      )}

      {/* Section: SLA en riesgo */}
      {show("sla") && (
        <div className="pend-section-clean">
          <div className="tk-section-head">
            <span className="tk-section-title">SLA en riesgo</span>
            <span className="tk-section-count">{counts.sla} · acción preventiva sugerida</span>
            <span className="tk-section-rule"/>
          </div>
          <div className="pend-list">
            {PENDING_SLA.length === 0
              ? <div className="pend-empty">— todos los SLA están sanos —</div>
              : PENDING_SLA.map(t => <PendRow key={t.id + "-sla"} t={t} openTicket={handleOpen}/>)
            }
          </div>
        </div>
      )}

      {/* Section: Aprobaciones */}
      {show("approval") && (
        <div className="pend-section-clean">
          <div className="tk-section-head">
            <span className="tk-section-title">Aprobaciones pendientes</span>
            <span className="tk-section-count">{counts.approval} · SOF.IA preparó propuestas</span>
            <span className="tk-section-rule"/>
          </div>
          <div className="appr-list">
            {PENDING_APPROVALS.map((a, i) => (
              <div key={i} className="appr-card-clean">
                <div className="appr-icon-clean">{APPR_ICON[a.kind]}</div>
                <div className="appr-body">
                  <div className="ti">{a.title}</div>
                  <div className="sub">{a.sub}</div>
                  <div className="meta">
                    {a.meta.map((m, j) => (
                      <span key={j}><b>{m.k}:</b> {m.v}</span>
                    ))}
                  </div>
                </div>
                <div className="actions">
                  <button className="btn sm">Posponer</button>
                  <button className="btn danger sm">Rechazar</button>
                  <button className="btn primary sm">Aprobar ✓</button>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
};

window.PendingScreen = PendingScreen;