/* panel-views2.jsx — Historial · Mi Plan · Configuración · Drawers */
const { useState: p2State, useEffect: p2Effect } = React;

/* ---------- Drawer: detalle de repartidor ---------- */
function DriverDrawer({ name, drivers: driversProp, onClose }) {
  const list = driversProp || [];
  const d = list.find(x => x.name === name);
  if (!d) return null;
  return (
    <React.Fragment>
      <div className="drawer-bg" onClick={onClose}></div>
      <div className="drawer">
        <button className="dx" onClick={onClose}>✕</button>
        <div className="row" style={{gap:16}}>
          <span style={{width:72,height:72,borderRadius:18,overflow:"hidden",display:"block",flex:"none"}}><Avatar name={d.name} watermark /></span>
          <div>
            <h2 style={{fontSize:22}}>{d.name}</h2>
            <div className="drt" style={{marginTop:5,display:"flex",alignItems:"center",gap:5,color:"var(--ink-2)",fontSize:13.5}}><span style={{color:"var(--g2)",display:"grid",width:14,height:14}}><Star /></span>{d.rating} · {d.years} · {d.deliveries} entregas</div>
            <span className="pill pill-brand" style={{marginTop:9}}><Star />{d.badge}</span>
          </div>
        </div>
        <div className="dbar" style={{border:"1px solid var(--line)",borderRadius:"var(--r)",marginTop:22}}>
          <div className="db"><div className="n">{d.punct}</div><div className="l">Puntualidad</div></div>
          <div className="db"><div className="n">{d.hyg}</div><div className="l">Higiene</div></div>
          <div className="db"><div className="n">{d.rating}</div><div className="l">Calificación</div></div>
        </div>
        <div className="eyebrow-s" style={{margin:"26px 0 12px"}}>Capacitaciones</div>
        <div style={{display:"flex",flexWrap:"wrap",gap:8}}>
          {(d.trainings || []).map(t => <span key={t} className="pill pill-mut"><Icon name="check" style={{width:13,height:13,color:"var(--g1)"}} />{t}</span>)}
        </div>
        <div className="eyebrow-s" style={{margin:"26px 0 12px"}}>Historial con tu restaurante</div>
        <div className="card" style={{overflow:"hidden"}}>
          <table className="tbl">
            <tbody>
              {(d.recent || []).map(([id,cl,st]) => (
                <tr key={id}><td className="id">#{id}</td><td><b>{cl}</b></td><td style={{textAlign:"right"}}>{st==="Entregado"?<span className="pill pill-ok">Entregado</span>:<span className="pill pill-brand">En curso</span>}</td></tr>
              ))}
              {(!d.recent || d.recent.length === 0) && (
                <tr><td colSpan={3} style={{textAlign:'center',color:'var(--ink-3)',padding:16}}>Sin historial aún</td></tr>
              )}
            </tbody>
          </table>
        </div>
        <button className="btn btn-ghost" style={{width:"100%",marginTop:22}}><Icon name="phone" />Contactar · {d.phone}</button>
      </div>
    </React.Fragment>
  );
}

/* ---------- Drawer: detalle de pedido ---------- */
function OrderDrawer({ id, orders, deliveredToday: dtProp, onClose }) {
  const done = dtProp || [];
  const o = [...orders, ...done.map(x => ({...x, stage:4, eta:0}))].find(x => x.id === id);
  if (!o) return null;
  return (
    <React.Fragment>
      <div className="drawer-bg" onClick={onClose}></div>
      <div className="drawer">
        <button className="dx" onClick={onClose}>✕</button>
        <div className="eyebrow-s">Pedido</div>
        <h2 style={{fontSize:24,margin:"6px 0 4px"}}>#{o.id}
          <span className={"pill " + (o.esMarketplace ? "pill-brand" : "pill-mut")}
            style={{fontSize:11,padding:"3px 10px",marginLeft:10,verticalAlign:"middle"}}>
            {o.esMarketplace ? "Marketplace" : "Directo"}
          </span>
        </h2>
        <div className="muted" style={{fontSize:13.5}}>{o.client} · {o.zone} · {o.time}</div>
        <div className="card card-pad" style={{marginTop:20}}><TrackingDetail order={o} /></div>
        <div className="between" style={{marginTop:20,padding:"0 2px"}}>
          <span className="muted">Total del pedido</span>
          <span style={{fontFamily:"var(--font-display)",fontWeight:600,fontSize:22}}>{fmtCOP(o.total)}</span>
        </div>
      </div>
    </React.Fragment>
  );
}

/* ---------- Campos compartidos del formulario de incidencia ---------- */
const TK_TIPOS = [
  ["error_pedido", "Error en el pedido"],
  ["calidad", "Problema de calidad"],
  ["tiempo", "Incumplimiento de tiempos"],
  ["falla_entrega", "Falla en la entrega"],
  ["falla_comunicacion", "Falla de comunicación"],
  ["incumplimiento_requisitos", "Incumplimiento de requisitos"],
];

function TicketFields({ f, setF, file, setFile }) {
  const [drag, setDrag] = p2State(false);
  return (
    <React.Fragment>
      <div className="tk-grp">
        <span className="tk-lbl">Tipo de incidencia</span>
        <div className="tk-chips">
          {TK_TIPOS.map(([val, lab]) => (
            <button type="button" key={val} className={"tk-chip" + (f.tipo_incidencia === val ? " on" : "")}
              onClick={() => setF((p) => ({ ...p, tipo_incidencia: val }))}>{lab}</button>
          ))}
        </div>
      </div>
      <div className="tk-grp">
        <span className="tk-lbl">Descripción del problema</span>
        <textarea className="tk-textarea" rows={3} value={f.descripcion}
          onChange={(e) => setF((p) => ({ ...p, descripcion: e.target.value }))}
          placeholder="Cuéntanos qué pasó..." />
      </div>
      <div className="tk-grp">
        <span className="tk-lbl" style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <span>Adjuntar foto</span><span style={{ color: "var(--ink-3)", fontWeight: 400, fontSize: 12 }}>Opcional</span>
        </span>
        <label className={"tk-drop" + (drag ? " tk-drag" : "")}
          onDragOver={(e) => { e.preventDefault(); setDrag(true); }}
          onDragLeave={() => setDrag(false)}
          onDrop={(e) => { e.preventDefault(); setDrag(false); const fl = e.dataTransfer.files[0]; if (fl) setFile(fl); }}>
          <input type="file" accept="image/jpeg,image/png" style={{ display: "none" }}
            onChange={(e) => setFile(e.target.files[0] || null)} />
          <Icon name="camera" style={{ width: 24, height: 24 }} />
          {file
            ? <span className="tk-drop-file">{file.name}</span>
            : <span className="tk-drop-t">Arrastra una foto o haz clic para seleccionar</span>}
        </label>
      </div>
    </React.Fragment>
  );
}

/* ---------- TICKET MODAL (desde el Historial: pedido ya asociado) ---------- */
function TicketModal({ row, onClose }) {
  const [f, setF] = p2State({ tipo_incidencia: "error_pedido", descripcion: "" });
  const [file, setFile] = p2State(null);
  const [busy, setBusy] = p2State(false);
  const [err, setErr] = p2State("");
  const [ok, setOk] = p2State(false);

  async function enviar() {
    if (busy) return;
    if (!f.descripcion.trim()) { setErr("Describe el problema."); return; }
    setBusy(true); setErr("");
    const { error } = await window.crearTicket({
      pedido_id: row.pedido_id, restaurante_id: row.restaurante_id, repartidor_id: row.repartidor_id,
      tipo_incidencia: f.tipo_incidencia, descripcion: f.descripcion,
    }, file);
    setBusy(false);
    if (error) { console.error("[Treego] crearTicket:", error.message); setErr(error.message || "No se pudo enviar la incidencia."); return; }
    setOk(true);
  }

  return (
    <React.Fragment>
      <div className="drawer-bg" onClick={onClose}></div>
      <div className="an-modal tk-modal">
        <button className="dx" onClick={onClose}><Icon name="plus" style={{ transform: "rotate(45deg)" }} /></button>
        <div className="tk-head">
          <span className="tk-ic"><Icon name="flag" /></span>
          <div><h2>Reportar incidencia</h2><div className="tk-sub">Pedido #{row[0]} · {row[2]}</div></div>
        </div>
        {ok ? (
          <div className="tk-ok">
            <p>Tu incidencia fue enviada. La verás en <b>Mis reclamaciones</b> y el equipo Treego la revisará.</p>
            <button className="btn btn-primary full" onClick={onClose}>Listo</button>
          </div>
        ) : (
          <React.Fragment>
            <div className="tk-body">
              {err && <p style={{ color: "var(--red)", fontSize: 13.5, margin: "0 0 14px" }}>{err}</p>}
              <TicketFields f={f} setF={setF} file={file} setFile={setFile} />
            </div>
            <div className="tk-foot">
              <button className="btn btn-primary full" disabled={busy} onClick={enviar}><Icon name="check" />{busy ? "Enviando…" : "Enviar incidencia"}</button>
              <button className="tk-cancel" disabled={busy} onClick={onClose}>Cancelar</button>
            </div>
          </React.Fragment>
        )}
      </div>
    </React.Fragment>
  );
}

/* ---------- HISTORIAL ---------- */
/* ---------- Encuesta de satisfacción post-entrega (CSAT/NPS) ---------- */
function EscalaBotones({ min, max, value, onPick }) {
  const items = [];
  for (let i = min; i <= max; i++) items.push(i);
  return (
    <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
      {items.map((n) => (
        <button type="button" key={n} onClick={() => onPick(n)}
          style={{ minWidth: 34, padding: "7px 0", borderRadius: 8, fontWeight: 600, fontSize: 13, cursor: "pointer",
            border: "1.5px solid " + (value === n ? "var(--g2)" : "var(--line-2)"),
            background: value === n ? "var(--g2)" : "var(--panel-2)", color: value === n ? "#fff" : "var(--ink-2)" }}>
          {n}
        </button>
      ))}
    </div>
  );
}

function CalificarModal({ onClose, onCreated, pedido }) {
  const [pedidos, setPedidos] = p2State(pedido ? [pedido] : []);
  const [cargandoP, setCargandoP] = p2State(!pedido);
  const [pedidoId, setPedidoId] = p2State(pedido ? String(pedido.id) : "");
  const [estrellas, setEstrellas] = p2State(0);
  const [nps, setNps] = p2State(null);
  const [tiempo, setTiempo] = p2State(0);
  const [estado, setEstado] = p2State(0);
  const [comentario, setComentario] = p2State("");
  const [busy, setBusy] = p2State(false);
  const [err, setErr] = p2State("");
  const [ok, setOk] = p2State(false);

  p2Effect(() => {
    if (pedido) return; // pedido preseleccionado (card "Por calificar")
    window.cargarPedidosReportables().then((d) => {
      setPedidos(d); setCargandoP(false);
      if (d.length) setPedidoId(String(d[0].id));
    });
  }, []);
  const fechaP = (p) => new Date(p.fecha_cierre || p.fecha_creacion).toLocaleDateString("es-CO", { day: "numeric", month: "short" });

  async function enviar() {
    if (busy) return;
    if (!pedidoId) { setErr("Selecciona un pedido."); return; }
    if (!estrellas) { setErr("Asigna una calificación general (estrellas)."); return; }
    const ped = pedidos.find((p) => String(p.id) === String(pedidoId));
    if (!ped) { setErr("Pedido no válido."); return; }
    setBusy(true); setErr("");
    const { error } = await window.crearCalificacion({
      pedido_id: ped.id, restaurante_id: ped.restaurante_id, repartidor_id: ped.repartidor_id,
      puntuacion: estrellas, recomendaria: nps, tiempo, estado, comentario: comentario.trim(),
    });
    setBusy(false);
    if (error) { console.error("[Treego] crearCalificacion:", error.message); setErr(error.message || "No se pudo guardar la calificación."); return; }
    setOk(true); onCreated && onCreated();
  }

  return (
    <React.Fragment>
      <div className="drawer-bg" onClick={onClose}></div>
      <div className="an-modal tk-modal">
        <button className="dx" onClick={onClose}><Icon name="plus" style={{ transform: "rotate(45deg)" }} /></button>
        <div className="tk-head">
          <span className="tk-ic"><Icon name="star" /></span>
          <div><h2>Calificar pedido</h2><div className="tk-sub">Tu opinión mejora el servicio</div></div>
        </div>
        {ok ? (
          <div className="tk-ok">
            <p>¡Gracias! Tu calificación quedó registrada.</p>
            <button className="btn btn-primary full" onClick={onClose}>Listo</button>
          </div>
        ) : (
          <React.Fragment>
            <div className="tk-body">
              {err && <p style={{ color: "var(--red)", fontSize: 13.5, margin: "0 0 14px" }}>{err}</p>}
              <div className="tk-grp">
                <span className="tk-lbl">Pedido</span>
                <select className="tk-select" value={pedidoId} onChange={(e) => setPedidoId(e.target.value)} disabled={cargandoP || pedidos.length === 0}>
                  {cargandoP && <option value="">Cargando pedidos…</option>}
                  {!cargandoP && pedidos.length === 0 && <option value="">No tienes pedidos entregados</option>}
                  {pedidos.map((p) => (
                    <option key={p.id} value={p.id}>#{p.codigo_restaurante || p.id} · {p.nombre_cliente} · {fechaP(p)}</option>
                  ))}
                </select>
              </div>
              <div className="tk-grp">
                <span className="tk-lbl">Calificación general</span>
                <div style={{ display: "flex", gap: 4 }}>
                  {[1, 2, 3, 4, 5].map((n) => (
                    <button type="button" key={n} onClick={() => setEstrellas(n)} style={{ background: "none", border: "none", cursor: "pointer", padding: 2 }}>
                      <Icon name="star" style={{ width: 26, height: 26, color: n <= estrellas ? "var(--g2)" : "var(--line-2)" }} />
                    </button>
                  ))}
                </div>
              </div>
              <div className="tk-grp">
                <span className="tk-lbl">¿Qué tan probable es que recomiendes Treego? (0–10)</span>
                <EscalaBotones min={0} max={10} value={nps} onPick={setNps} />
              </div>
              <div className="tk-grp">
                <span className="tk-lbl">¿Cómo califica el tiempo de entrega? (1–5)</span>
                <EscalaBotones min={1} max={5} value={tiempo} onPick={setTiempo} />
              </div>
              <div className="tk-grp">
                <span className="tk-lbl">¿Cómo califica el estado en que llegó el pedido? (1–5)</span>
                <EscalaBotones min={1} max={5} value={estado} onPick={setEstado} />
              </div>
              <div className="tk-grp">
                <span className="tk-lbl">Comentario (opcional)</span>
                <textarea className="tk-select" rows="2" value={comentario} onChange={(e) => setComentario(e.target.value)} placeholder="Cuéntanos qué tal estuvo el servicio…"></textarea>
              </div>
            </div>
            <div className="tk-foot">
              <button className="btn btn-primary full" disabled={busy || cargandoP || pedidos.length === 0} onClick={enviar}><Icon name="check" />{busy ? "Guardando…" : "Enviar calificación"}</button>
              <button className="tk-cancel" disabled={busy} onClick={onClose}>Cancelar</button>
            </div>
          </React.Fragment>
        )}
      </div>
    </React.Fragment>
  );
}

function Historial({ historial: histProp, openDetail }) {
  const [q, setQ] = p2State("");
  const [reportar, setReportar] = p2State(null);
  const [calificar, setCalificar] = p2State(false);
  const allRows = histProp || [];
  const rows = allRows.filter(r => (r[2] + r[3] + r[0]).toLowerCase().includes(q.toLowerCase()));
  const total = rows.reduce((a, r) => a + r[6], 0);
  const finesCount = (window.FINES || []).length;
  const arrMins = allRows.map(r => parseInt(r[4], 10)).filter(n => !isNaN(n));
  const avgLlegada = arrMins.length ? (arrMins.reduce((a, b) => a + b, 0) / arrMins.length).toFixed(1).replace(".", ",") + " min" : "—";
  return (
    <div className="fade-in">
      <div className="kpis" style={{gridTemplateColumns:"repeat(4,1fr)"}}>
        <div className="kpi"><div className="top"><span className="ic"><Icon name="check" /></span></div><div className="n">{allRows.length}</div><div className="l">Entregas (últimos 7 días)</div></div>
        <div className="kpi"><div className="top"><span className="ic"><Icon name="clock" /></span></div><div className="n">{avgLlegada}</div><div className="l">Llegada promedio</div></div>
        <div className="kpi"><div className="top"><span className="ic"><Icon name="flag" /></span></div><div className="n">{finesCount}</div><div className="l">Multas del periodo</div></div>
        <div className="kpi"><div className="top"><span className="ic"><Icon name="chart" /></span></div><div className="n">{fmtCOP(total)}</div><div className="l">Valor entregado</div></div>
      </div>
      <div className="between" style={{margin:"8px 0 16px"}}>
        <h3 style={{fontSize:18}}>Historial de entregas</h3>
        <div className="row" style={{gap:10, alignItems:"center"}}>
          <button className="btn btn-primary" style={{padding:"9px 14px"}} onClick={() => setCalificar(true)}><Icon name="star" style={{width:15,height:15}} />Calificar pedido</button>
          <div className="search" style={{minWidth:220}}>
            <Icon name="user" style={{width:16,height:16}} />
            <input placeholder="Buscar cliente o repartidor" value={q} onChange={e => setQ(e.target.value)} />
          </div>
        </div>
      </div>
      <div className="card" style={{overflow:"hidden"}}>
        <table className="tbl">
          <thead><tr><th>Pedido</th><th>Fecha</th><th>Cliente</th><th>Repartidor</th><th>Llegada</th><th>Estado</th><th style={{textAlign:"right"}}>Valor</th><th></th></tr></thead>
          <tbody>
            {rows.length === 0 && (
              <tr><td colSpan={7} style={{textAlign:'center',color:'var(--ink-3)',padding:32}}>Sin historial aún</td></tr>
            )}
            {rows.map(r => (
              <tr key={r[0]} style={{cursor:"pointer"}} onClick={() => openDetail(r[0])}>
                <td className="id">#{r[0]}</td>
                <td className="muted">{r[1]}</td>
                <td><b>{r[2]}</b></td>
                <td><div className="dvrcell"><span className="av"><Avatar name={r[3]} /></span>{r[3].split(" ")[0]}</div></td>
                <td>{r[4]}</td>
                <td>{r[5]==="Entregado"
                  ?<span className="pill pill-ok">Entregado</span>
                  :<span className="pill pill-warn"><Icon name="flag" style={{width:12,height:12}} />Multa</span>}
                </td>
                <td style={{textAlign:"right",fontWeight:600}}>{fmtCOP(r[6])}</td>
                <td style={{textAlign:"right"}}>
                  <button className="btn btn-ghost" style={{padding:"6px 10px",fontSize:12.5}}
                    onClick={(e) => { e.stopPropagation(); setReportar(r); }}>
                    <Icon name="flag" style={{width:14,height:14}} />Reportar incidencia
                  </button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      {reportar && <TicketModal row={reportar} onClose={() => setReportar(null)} />}
      {calificar && <CalificarModal onClose={() => setCalificar(false)} />}
    </div>
  );
}

/* ---------- MI PLAN ---------- */
function MiPlan({ fines: finesProp }) {
  const activeFines = finesProp || [];
  return (
    <div className="fade-in">
      <div className="plan-hero">
        <div className="plan-current">
          <div className="pglow"></div>
          <div className="between" style={{ position: "relative" }}>
            <div><span className="pill pill-brand">Plan actual</span><h2 style={{ fontSize: 30, marginTop: 14 }}>{S.plan.name}</h2></div>
            <div style={{ textAlign: "right" }}><div style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 26 }}>{fmtCOP(S.plan.price)}</div><div className="muted" style={{ fontSize: 12.5 }}>COP / mes</div></div>
          </div>
          <div style={{ marginTop: 26, position: "relative" }}>
            <div className="between" style={{ fontSize: 13.5 }}><span className="muted">Domicilios</span><b>Ilimitados</b></div>
            <div className="muted" style={{ fontSize: 12.5, marginTop: 6 }}>{S.plan.used || 0} pedidos en el período actual. Se renueva el {S.plan.renew}.</div>
          </div>
          <div className="feat-list">
            {S.plan.feats.map((f) => <div className="fi" key={f}><span className="ck"><Icon name="check" /></span>{f}</div>)}
          </div>
          <div className="row" style={{ marginTop: 24, gap: 12 }}>
            <button className="btn btn-primary"><Icon name="zap" />Subir a Elite Gastro</button>
          </div>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
          <div className="card card-pad">
            <div className="eyebrow-s" style={{ marginBottom: 14 }}>Multas del periodo</div>
            <div className="between" style={{ padding: "0 0 14px", borderBottom: "1px solid var(--line)", marginBottom: 6 }}>
              <div><b>Tarifa de espera</b><div className="muted" style={{ fontSize: 12.5 }}>Se cobra por cada minuto tras la tolerancia ({S.plan.tolerance} min)</div></div>
              <span className="pill pill-brand">{fmtCOP(S.plan.perMinute)} / min</span>
            </div>
            {activeFines.map((f) => (
              <div key={f.id} className="between" style={{ padding: "12px 0", borderBottom: "1px solid var(--line)" }}>
                <div><b>Pedido #{f.id}</b><div className="muted" style={{ fontSize: 12.5 }}>Espera de {f.waited} min · {f.minutes} min de multa · {f.date}</div></div>
                <span className="pill pill-warn">{fmtCOP(f.minutes * S.plan.perMinute)}</span>
              </div>
            ))}
            <div className="between" style={{ paddingTop: 14 }}><span className="muted">Total en multas</span><b style={{ color: "var(--red)" }}>{fmtCOP(activeFines.reduce((a, f) => a + f.minutes * S.plan.perMinute, 0))}</b></div>
          </div>
          <div className="card card-pad">
            <div className="eyebrow-s" style={{ marginBottom: 12 }}>Facturación</div>
            <div className="between" style={{ padding: "8px 0" }}><span className="muted">Próximo cobro</span><b>{S.plan.renew}</b></div>
            <div className="between" style={{ padding: "8px 0" }}><span className="muted">Método</span><b>•••• 4821</b></div>
            <button className="btn btn-ghost" style={{ width: "100%", marginTop: 12 }}>Ver historial de pagos</button>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---------- CONFIGURACIÓN ---------- */
function Toggle({ on, set, title, desc }) {
  return (
    <div className="toggle">
      <div className="tl"><b>{title}</b><p>{desc}</p></div>
      <button className={"sw" + (on ? " on" : "")} onClick={() => set(!on)}></button>
    </div>
  );
}
function Configuracion({ usuario: usuarioProp }) {
  const [n1, sn1] = p2State(true), [n2, sn2] = p2State(true), [n3, sn3] = p2State(false), [n4, sn4] = p2State(true);
  return (
    <div className="fade-in set-grid">
      <div className="card card-pad">
        <h3 style={{ fontSize: 18, marginBottom: 18 }}>Datos del restaurante</h3>
        <div className="set-field"><label>Nombre</label><input defaultValue={S.rest.name} /></div>
        <div className="set-field"><label>Zona</label><input defaultValue={S.rest.zone} /></div>
        <div className="set-field"><label>Dirección</label><input defaultValue="Cra. 7 # 12-40, Chía" /></div>
        <div className="row" style={{ gap: 12 }}>
          <div className="set-field" style={{ flex: 1 }}><label>Teléfono</label><input defaultValue="(601) 865 4421" /></div>
          <div className="set-field" style={{ flex: 1 }}><label>Horario</label><input defaultValue="11:00 a. m. – 10:00 p. m." /></div>
        </div>
        <button className="btn btn-primary" style={{ marginTop: 6 }}><Icon name="check" />Guardar cambios</button>
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
        <div className="card card-pad">
          <h3 style={{ fontSize: 18, marginBottom: 6 }}>Notificaciones</h3>
          <Toggle on={n1} set={sn1} title="Pedido asignado" desc="Cuando un repartidor toma tu pedido." />
          <Toggle on={n2} set={sn2} title="Repartidor en restaurante" desc="Avísame cuando esté por llegar." />
          <Toggle on={n3} set={sn3} title="Resumen diario" desc="Reporte de entregas al cierre." />
          <Toggle on={n4} set={sn4} title="Alertas de multas" desc="Notificar cualquier multa aplicada." />
        </div>
        <div className="card card-pad">
          <h3 style={{ fontSize: 18, marginBottom: 14 }}>Cuenta</h3>
          <div className="between" style={{ padding: "8px 0" }}><span className="muted">Correo</span><b className="mono">{usuarioProp ? usuarioProp.email : S.user}</b></div>
          <div className="between" style={{ padding: "8px 0" }}><span className="muted">Plan</span><b>{S.plan.name}</b></div>
          <button className="btn btn-ghost" style={{ width: "100%", marginTop: 12 }}>Cambiar contraseña</button>
          {/* F2 p45: revoca la sesión en TODOS los dispositivos/pestañas */}
          <button className="btn btn-ghost" style={{ width: "100%", marginTop: 10, color: "var(--red)" }}
            title="Cierra tu sesión en todos los dispositivos y pestañas"
            onClick={() => { if (window.confirm("¿Cerrar tu sesión en TODOS los dispositivos?")) window.treegoCerrarTodasSesiones(); }}>
            Cerrar todas las sesiones activas
          </button>
          <p className="muted" style={{ fontSize: 11.5, marginTop: 10 }}>Por seguridad, la sesión se cierra sola tras 4 horas de inactividad.</p>
        </div>
      </div>
    </div>
  );
}

/* ---------- MODAL: NUEVA RECLAMACIÓN (con selector de pedido) ---------- */
function NuevaReclamacionModal({ onClose, onCreated }) {
  const [pedidos, setPedidos] = p2State([]);
  const [cargandoP, setCargandoP] = p2State(true);
  const [f, setF] = p2State({ pedido_id: "", tipo_incidencia: "error_pedido", descripcion: "" });
  const [file, setFile] = p2State(null);
  const [busy, setBusy] = p2State(false);
  const [err, setErr] = p2State("");
  const [ok, setOk] = p2State(false);
  const set = (k) => (e) => setF((p) => ({ ...p, [k]: e.target.value }));

  p2Effect(() => {
    window.cargarPedidosReportables().then((d) => {
      setPedidos(d); setCargandoP(false);
      if (d.length) setF((p) => ({ ...p, pedido_id: String(d[0].id) }));
    });
  }, []);

  const fechaP = (p) => new Date(p.fecha_cierre || p.fecha_creacion).toLocaleDateString("es-CO", { day: "numeric", month: "short" });

  async function enviar() {
    if (busy) return;
    if (!f.pedido_id) { setErr("Selecciona un pedido."); return; }
    if (!f.descripcion.trim()) { setErr("Describe el problema."); return; }
    const ped = pedidos.find((p) => String(p.id) === String(f.pedido_id));
    if (!ped) { setErr("Pedido no válido."); return; }
    setBusy(true); setErr("");
    const { error } = await window.crearTicket({
      pedido_id: ped.id, restaurante_id: ped.restaurante_id, repartidor_id: ped.repartidor_id,
      tipo_incidencia: f.tipo_incidencia, descripcion: f.descripcion,
    }, file);
    setBusy(false);
    if (error) { console.error("[Treego] crearTicket:", error.message); setErr(error.message || "No se pudo enviar la incidencia."); return; }
    setOk(true);
    onCreated && onCreated();
  }

  return (
    <React.Fragment>
      <div className="drawer-bg" onClick={onClose}></div>
      <div className="an-modal tk-modal">
        <button className="dx" onClick={onClose}><Icon name="plus" style={{ transform: "rotate(45deg)" }} /></button>
        <div className="tk-head">
          <span className="tk-ic"><Icon name="flag" /></span>
          <div><h2>Reportar incidencia</h2><div className="tk-sub">Elige el pedido afectado</div></div>
        </div>
        {ok ? (
          <div className="tk-ok">
            <p>Tu incidencia fue enviada. La verás abajo en <b>Mis reclamaciones</b> y el equipo Treego la revisará.</p>
            <button className="btn btn-primary full" onClick={onClose}>Listo</button>
          </div>
        ) : (
          <React.Fragment>
            <div className="tk-body">
              {err && <p style={{ color: "var(--red)", fontSize: 13.5, margin: "0 0 14px" }}>{err}</p>}
              <div className="tk-grp">
                <span className="tk-lbl">Pedido afectado</span>
                <select className="tk-select" value={f.pedido_id} onChange={set("pedido_id")} disabled={cargandoP || pedidos.length === 0}>
                  {cargandoP && <option value="">Cargando pedidos…</option>}
                  {!cargandoP && pedidos.length === 0 && <option value="">No tienes pedidos entregados</option>}
                  {pedidos.map((p) => (
                    <option key={p.id} value={p.id}>#{p.codigo_restaurante || p.id} · {p.nombre_cliente} · {fechaP(p)}</option>
                  ))}
                </select>
              </div>
              <TicketFields f={f} setF={setF} file={file} setFile={setFile} />
            </div>
            <div className="tk-foot">
              <button className="btn btn-primary full" disabled={busy || cargandoP || pedidos.length === 0} onClick={enviar}><Icon name="check" />{busy ? "Enviando…" : "Enviar incidencia"}</button>
              <button className="tk-cancel" disabled={busy} onClick={onClose}>Cancelar</button>
            </div>
          </React.Fragment>
        )}
      </div>
    </React.Fragment>
  );
}

/* ---------- Línea de tiempo de trazabilidad de un ticket ---------- */
const TK_FLOW = [["abierto", "Abierto"], ["en_revision", "En revisión"], ["resuelto", "Resuelto"]];
const TK_TIME = (iso) => iso ? new Date(iso).toLocaleString("es-CO", { day: "numeric", month: "short", hour: "numeric", minute: "2-digit" }) : null;

function TicketTimeline({ t }) {
  const idx = TK_FLOW.findIndex(([s]) => s === t.estado);
  const stamps = { abierto: t.fecha_creacion, en_revision: t.fecha_revision, resuelto: t.fecha_resolucion };
  return (
    <div className="tk-tl">
      {TK_FLOW.map(([s, lab], i) => {
        const cls = i < idx ? "done" : (i === idx ? "cur" : "future");
        const time = TK_TIME(stamps[s]);
        return (
          <div className={"tk-tl-step " + cls} key={s}>
            <div className="tk-tl-rail">
              <span className="tk-tl-dot">
                {cls === "done" ? <Icon name="check" />
                  : cls === "cur" ? <span style={{ width: 8, height: 8, borderRadius: "50%", background: "currentColor" }}></span>
                  : null}
              </span>
              {i < TK_FLOW.length - 1 && <span className="tk-tl-line"></span>}
            </div>
            <div className="tk-tl-body">
              <div className="tk-tl-name">{lab}</div>
              <div className="tk-tl-time">{cls === "future" ? "Pendiente" : (time || "—")}</div>
            </div>
          </div>
        );
      })}
    </div>
  );
}

/* ---------- MIS RECLAMACIONES ---------- */
function MisReclamaciones() {
  const [tickets, setTickets] = p2State([]);
  const [cargando, setCargando] = p2State(true);
  const [nuevo, setNuevo] = p2State(false);
  const recargar = () => window.cargarMisTickets().then((d) => { setTickets(d); setCargando(false); });
  p2Effect(() => {
    recargar();
    const db = window.treego_db;
    if (!db) return;
    /* Tiempo real: recarga cuando el admin cambia el estado (RLS limita a los tickets propios) */
    const ch = db.channel("mis-tickets-rt")
      .on("postgres_changes", { event: "*", schema: "public", table: "tickets" }, () => recargar())
      .subscribe();
    return () => { db.removeChannel(ch); };
  }, []);
  return (
    <div className="fade-in">
      <div className="between" style={{ margin: "8px 0 16px" }}>
        <h3 style={{ fontSize: 18 }}>Mis reclamaciones</h3>
        <div className="row" style={{ gap: 12, alignItems: "center" }}>
          <span className="muted" style={{ fontSize: 13 }}>{tickets.length} en total</span>
          <button className="btn btn-primary" style={{ padding: "10px 16px" }} onClick={() => setNuevo(true)}><Icon name="plus" />Reportar incidencia</button>
        </div>
      </div>
      {nuevo && <NuevaReclamacionModal onClose={() => setNuevo(false)} onCreated={recargar} />}
      {cargando && <div className="card" style={{ padding: 28, textAlign: "center", color: "var(--ink-3)" }}>Cargando…</div>}
      {!cargando && tickets.length === 0 && <div className="card" style={{ padding: 28, textAlign: "center", color: "var(--ink-3)" }}>No has reportado incidencias. Usa “Reportar incidencia” para crear la primera.</div>}
      {!cargando && tickets.map((t) => {
        const ei = window.estadoInfo(t.estado);
        const cod = t.pedidos ? (t.pedidos.codigo_restaurante || t.pedido_id) : t.pedido_id;
        return (
          <div className="tk-card" key={t.id}>
            <div className="tk-card-head">
              <div>
                <div className="tk-ttl">{window.labelTipo(t.tipo_incidencia)}</div>
                <span className="muted" style={{ fontSize: 12.5 }}>Pedido #{cod}</span>
              </div>
              <span className={"pill " + ei.pill}>{ei.label}</span>
            </div>
            {t.descripcion && <p className="tk-card-desc">{t.descripcion}</p>}
            <TicketTimeline t={t} />
            {t.estado === "resuelto" && (
              <div className="tk-comp">
                {t.compensacion_tipo ? (
                  <React.Fragment>
                    <span className="tk-comp-l">Compensación aplicada · {window.labelComp(t.compensacion_tipo)}</span>
                    <span className="tk-comp-v">{t.compensacion_valor != null ? fmtCOP(t.compensacion_valor) : "—"}</span>
                  </React.Fragment>
                ) : (
                  <span className="tk-comp-l">Resuelto sin compensación económica</span>
                )}
              </div>
            )}
          </div>
        );
      })}
    </div>
  );
}

Object.assign(window, { DriverDrawer, OrderDrawer, Historial, MiPlan, Configuracion, MisReclamaciones, TicketModal, NuevaReclamacionModal, TicketTimeline, CalificarModal });