// Pantalla: Transferencias — sin flujo de aprobacion. Estados: enviada/recibida/completada.
// Eliminar permitido (por error humano).

const ESTADOS_TRANSFER = [
  { id: "completada", label: "Completada", color: "var(--green)" },
  { id: "enviada",    label: "Enviada",    color: "var(--green)" },
  { id: "recibida",   label: "Recibida",   color: "var(--blue)" },
];

const ModalTransferencia = ({onClose, onSave}) => {
  const [form, setForm] = useState({
    fecha: new Date().toISOString().split("T")[0],
    descripcion: "", beneficiario: "", monto: "",
    estado: "completada",
    banco_origen: "", banco_destino: "", referencia: "",
  });
  const [saving, setSaving] = useState(false);
  const [err, setErr] = useState("");
  const set = k => e => setForm(f => ({...f, [k]: e.target.value}));

  const handleSave = async () => {
    if (!form.descripcion.trim()) { setErr("La descripción es requerida."); return; }
    if (!form.monto || parseFloat(form.monto) <= 0) { setErr("Ingresa un monto válido."); return; }
    setSaving(true); setErr("");
    try {
      const r = await window.API.transferencias.create({...form, monto: parseFloat(form.monto)});
      onSave(r); onClose();
    } catch (e) { setErr(e.message); }
    finally { setSaving(false); }
  };

  return (
    <Modal title="Nueva transferencia" sub="Movimiento bancario · Se registra directo, sin esperar aprobación" onClose={onClose}>
      {err && <ErrorBanner msg={err}/>}
      <div style={{display:"flex",flexDirection:"column",gap:14}}>
        <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:12}}>
          <div className="form-row">
            <label className="form-label">Fecha</label>
            <input className="form-input" type="date" value={form.fecha} onChange={set("fecha")}/>
          </div>
          <div className="form-row">
            <label className="form-label">Monto ($) *</label>
            <input className="form-input" type="number" value={form.monto} onChange={set("monto")} placeholder="0.00" step="0.01"/>
          </div>
        </div>
        <div className="form-row">
          <label className="form-label">Descripción *</label>
          <input className="form-input" value={form.descripcion} onChange={set("descripcion")} placeholder="Descripción de la transferencia"/>
        </div>
        <div className="form-row">
          <label className="form-label">Beneficiario / Remitente</label>
          <input className="form-input" value={form.beneficiario} onChange={set("beneficiario")} placeholder="Nombre del beneficiario o remitente"/>
        </div>
        <div style={{display:"grid",gridTemplateColumns:"1fr 1fr 1fr",gap:12}}>
          <div className="form-row">
            <label className="form-label">Banco origen</label>
            <input className="form-input" value={form.banco_origen} onChange={set("banco_origen")} placeholder="Banco origen"/>
          </div>
          <div className="form-row">
            <label className="form-label">Banco destino</label>
            <input className="form-input" value={form.banco_destino} onChange={set("banco_destino")} placeholder="Banco destino"/>
          </div>
          <div className="form-row">
            <label className="form-label">Tipo</label>
            <select className="form-input" value={form.estado} onChange={set("estado")}>
              {ESTADOS_TRANSFER.map(s => <option key={s.id} value={s.id}>{s.label}</option>)}
            </select>
          </div>
        </div>
        <div className="form-row">
          <label className="form-label">Referencia / N° documento</label>
          <input className="form-input" value={form.referencia} onChange={set("referencia")} placeholder="Número de referencia bancaria"/>
        </div>
      </div>
      <div style={{display:"flex",justifyContent:"flex-end",gap:10,marginTop:20}}>
        <button className="btn-secondary" onClick={onClose}>Cancelar</button>
        <button className="btn-primary" style={{width:"auto",padding:"10px 18px"}} onClick={handleSave} disabled={saving}>
          {saving ? <Spinner size={14} color="#0A0A0A"/> : <><Icon name="check" size={14}/> Registrar</>}
        </button>
      </div>
    </Modal>
  );
};

const Transferencias = ({user}) => {
  const [transferencias, setTransferencias] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError]     = useState("");
  const [filter, setFilter]   = useState("todos");
  const [showModal, setShowModal] = useState(false);
  const [confirmDel, setConfirmDel] = useState(null);
  const [deleting, setDeleting] = useState(false);

  const canDelete = ["admin","gerencia","finanzas"].includes(user.rol);

  const load = async () => {
    setLoading(true); setError("");
    try { setTransferencias(await window.API.transferencias.list()); }
    catch (e) { setError(e.message); }
    finally { setLoading(false); }
  };

  useEffect(() => { load(); }, []);

  const filtered = transferencias.filter(t => filter === "todos" || t.estado === filter);

  const stats = {
    total:     transferencias.length,
    enviadas:  transferencias.filter(t => t.estado === "enviada").reduce((a,t) => a + parseFloat(t.monto||0), 0),
    recibidas: transferencias.filter(t => t.estado === "recibida").reduce((a,t) => a + parseFloat(t.monto||0), 0),
    completadas: transferencias.filter(t => t.estado === "completada").reduce((a,t) => a + parseFloat(t.monto||0), 0),
  };

  const eliminar = async () => {
    if (!confirmDel) return;
    setDeleting(true);
    try {
      await window.API.transferencias.delete(confirmDel.id);
      setTransferencias(prev => prev.filter(t => t.id !== confirmDel.id));
      setConfirmDel(null);
    } catch (e) { alert("Error al eliminar: " + e.message); }
    finally { setDeleting(false); }
  };

  return (
    <div className="content">
      <div className="page-title-row">
        <div>
          <div className="page-title">Transferencias</div>
          <div className="page-sub">Movimientos bancarios · Registro directo, sin aprobación previa</div>
        </div>
        <div className="page-actions">
          <button className="btn-secondary" onClick={() => window.API.transferencias.exportCsv()}>
            <Icon name="download" size={14}/> Exportar CSV
          </button>
          <button className="btn-secondary" onClick={load}><Icon name="refresh" size={14}/></button>
          <button className="btn-primary" style={{width:"auto",padding:"10px 14px"}} onClick={() => setShowModal(true)}>
            <Icon name="plus" size={14}/> Nueva transferencia
          </button>
        </div>
      </div>

      <div className="kpi-grid" style={{marginBottom:20}}>
        <div className="kpi-card featured">
          <div className="kpi-head"><div className="kpi-label">Total registros</div><div className="kpi-icon"><Icon name="bank" size={14}/></div></div>
          <div className="kpi-value">{stats.total}</div>
          <div className="kpi-meta">transferencias en el sistema</div>
        </div>
        <div className="kpi-card">
          <div className="kpi-head"><div className="kpi-label">Enviadas</div><div className="kpi-icon" style={{background:"var(--green-dim)",color:"var(--green)"}}><Icon name="arrowup" size={14}/></div></div>
          <div className="kpi-value" style={{color:"var(--green)"}}>{fmt(stats.enviadas)}</div>
          <div className="kpi-meta">a proveedores</div>
        </div>
        <div className="kpi-card">
          <div className="kpi-head"><div className="kpi-label">Recibidas</div><div className="kpi-icon" style={{background:"var(--blue-dim)",color:"var(--blue)"}}><Icon name="arrowdown" size={14}/></div></div>
          <div className="kpi-value" style={{color:"var(--blue)"}}>{fmt(stats.recibidas)}</div>
          <div className="kpi-meta">de clientes</div>
        </div>
        <div className="kpi-card">
          <div className="kpi-head"><div className="kpi-label">Completadas</div><div className="kpi-icon" style={{background:"var(--green-dim)",color:"var(--green)"}}><Icon name="check" size={14}/></div></div>
          <div className="kpi-value" style={{color:"var(--green)"}}>{fmt(stats.completadas)}</div>
          <div className="kpi-meta">movimientos cerrados</div>
        </div>
      </div>

      <div className="filters" style={{marginBottom:16}}>
        {["todos","completada","enviada","recibida"].map(f => (
          <button key={f} className={`filter-chip${filter === f ? " active" : ""}`} onClick={() => setFilter(f)}>
            {f === "todos" ? "Todos" : f.charAt(0).toUpperCase() + f.slice(1)}
          </button>
        ))}
      </div>

      {error && <ErrorBanner msg={error} onRetry={load}/>}

      <div className="card">
        {loading ? (
          <div style={{display:"flex",justifyContent:"center",padding:40}}><Spinner size={24}/></div>
        ) : filtered.length === 0 ? (
          <EmptyState icon="bank" title="Sin transferencias"
            sub={filter === "todos" ? "No hay transferencias registradas. Usa el botón para agregar." : "No hay transferencias con este filtro."}
            action={filter === "todos" && <button className="btn-primary" style={{width:"auto",padding:"10px 18px"}} onClick={() => setShowModal(true)}><Icon name="plus" size={14}/> Nueva transferencia</button>}
          />
        ) : (
          <div style={{overflowX:"auto"}}>
            <table className="table">
              <thead>
                <tr>
                  <th>Fecha</th>
                  <th>Descripción</th>
                  <th>Beneficiario</th>
                  <th>Banco</th>
                  <th style={{textAlign:"right"}}>Monto</th>
                  <th style={{textAlign:"center"}}>Estado</th>
                  <th>Referencia</th>
                  {canDelete && <th style={{textAlign:"center",width:60}}></th>}
                </tr>
              </thead>
              <tbody>
                {filtered.map(t => (
                  <tr key={t.id}>
                    <td className="mono" style={{fontSize:12,whiteSpace:"nowrap"}}>{fmtDate(t.fecha)}</td>
                    <td style={{maxWidth:200,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{t.descripcion}</td>
                    <td style={{fontSize:12,color:"var(--text-2)",maxWidth:140,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{t.beneficiario || "—"}</td>
                    <td style={{fontSize:11,color:"var(--text-3)"}}>
                      {t.banco_origen && <div>{t.banco_origen}</div>}
                      {t.banco_destino && <div>→ {t.banco_destino}</div>}
                    </td>
                    <td className="num strong">{fmt(t.monto)}</td>
                    <td style={{textAlign:"center"}}>{estadoPill(t.estado)}</td>
                    <td className="mono" style={{fontSize:11,color:"var(--text-3)"}}>{t.referencia || "—"}</td>
                    {canDelete && (
                      <td style={{textAlign:"center"}}>
                        <button className="btn-ghost" style={{padding:"4px 8px",fontSize:11,color:"var(--red)"}}
                          onClick={() => setConfirmDel(t)} title="Eliminar (error humano)">
                          <Icon name="trash" size={13}/>
                        </button>
                      </td>
                    )}
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </div>

      {showModal && <ModalTransferencia onClose={() => setShowModal(false)} onSave={t => setTransferencias(prev => [t, ...prev])}/>}

      {confirmDel && (
        <Modal title="Eliminar transferencia" sub="Esta acción no se puede deshacer" onClose={() => setConfirmDel(null)} width={420}>
          <div style={{fontSize:13,color:"var(--text-2)",marginBottom:8}}>
            ¿Eliminar definitivamente esta transferencia?
          </div>
          <div style={{background:"var(--bg-3)",padding:"10px 14px",borderRadius:8,fontSize:12,marginBottom:16}}>
            <div><strong>{confirmDel.descripcion}</strong></div>
            <div style={{color:"var(--text-3)",marginTop:4}}>{fmtDate(confirmDel.fecha)} · {fmt(confirmDel.monto)} · {confirmDel.beneficiario || "—"}</div>
          </div>
          <div style={{display:"flex",justifyContent:"flex-end",gap:10}}>
            <button className="btn-secondary" onClick={() => setConfirmDel(null)} disabled={deleting}>Cancelar</button>
            <button onClick={eliminar} disabled={deleting}
              style={{padding:"10px 16px",background:"var(--red)",color:"white",border:"none",borderRadius:8,fontWeight:600,cursor:"pointer",fontSize:13,display:"inline-flex",alignItems:"center",gap:6}}>
              {deleting ? <Spinner size={13} color="white"/> : <Icon name="trash" size={13}/>} Eliminar
            </button>
          </div>
        </Modal>
      )}
    </div>
  );
};

window.Transferencias = Transferencias;