// Pantalla: Gastos — conectado a API real

const CATEGORIAS = [
  {id:"materiales",   label:"Materiales",    color:"var(--yellow)"},
  {id:"mano_obra",    label:"Mano de obra",  color:"var(--blue)"},
  {id:"equipos",      label:"Equipos",       color:"var(--green)"},
  {id:"subcontratos", label:"Subcontratos",  color:"var(--purple)"},
  {id:"transporte",   label:"Transporte",    color:"var(--orange)"},
  {id:"otros",        label:"Otros",         color:"var(--text-3)"},
];
const catMap = Object.fromEntries(CATEGORIAS.map(c=>[c.id,c]));

const ModalGasto = ({proyectos, onClose, onSave}) => {
  const [form, setForm] = useState({ proyecto_id:"", fecha:new Date().toISOString().split("T")[0], categoria:"materiales", descripcion:"", proveedor:"", monto:"", estado:"aprobado" });
  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.proyecto_id) { setErr("Selecciona un proyecto."); return; }
    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.gastos.create({...form, monto: parseFloat(form.monto)});
      onSave(r); onClose();
    } catch(e) { setErr(e.message); }
    finally { setSaving(false); }
  };

  return (
    <Modal title="Registrar gasto" sub="Nuevo gasto asociado a un proyecto" 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">Proyecto *</label>
            <select className="form-input" value={form.proyecto_id} onChange={set("proyecto_id")}>
              <option value="">— Seleccionar —</option>
              {proyectos.map(p=><option key={p.id} value={p.id}>{p.nombre}</option>)}
            </select>
          </div>
          <div className="form-row">
            <label className="form-label">Fecha</label>
            <input className="form-input" type="date" value={form.fecha} onChange={set("fecha")}/>
          </div>
        </div>
        <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:12}}>
          <div className="form-row">
            <label className="form-label">Categoría</label>
            <select className="form-input" value={form.categoria} onChange={set("categoria")}>
              {CATEGORIAS.map(c=><option key={c.id} value={c.id}>{c.label}</option>)}
            </select>
          </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 del gasto"/>
        </div>
        <div className="form-row">
          <label className="form-label">Proveedor</label>
          <input className="form-input" value={form.proveedor} onChange={set("proveedor")} placeholder="Nombre del proveedor"/>
        </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 gasto</>}
        </button>
      </div>
    </Modal>
  );
};

const Gastos = ({user, setRoute}) => {
  const [gastos, setGastos]         = useState([]);
  const [proyectos, setProyectos]   = useState([]);
  const [loading, setLoading]       = useState(true);
  const [error, setError]           = useState("");
  const [showModal, setShowModal]   = useState(false);
  const [filterProj, setFilterProj] = useState("todos");
  const [filterCat, setFilterCat]   = useState("todos");
  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 {
      const [g, p] = await Promise.all([window.API.gastos.list({limit:200}), window.API.proyectos.list()]);
      setGastos(g); setProyectos(p);
    } catch(e) { setError(e.message); }
    finally { setLoading(false); }
  };

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

  const filtered = gastos.filter(g =>
    (filterProj==="todos" || String(g.proyecto_id)===String(filterProj)) &&
    (filterCat==="todos"  || g.categoria===filterCat)
  );

  const totales = {
    monto:    filtered.reduce((a,g)=>a+parseFloat(g.monto||0), 0),
    qty:      filtered.length,
    porProj:  proyectos.length,
  };

  const projMap = Object.fromEntries(proyectos.map(p=>[String(p.id), p.nombre]));

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

  const handleExport = () => {
    const pid = filterProj !== "todos" ? filterProj : proyectos[0]?.id;
    if (!pid) { alert("Selecciona un proyecto para exportar."); return; }
    window.API.gastos.exportCsv(pid);
  };

  return (
    <div className="content">
      <div className="page-title-row">
        <div>
          <div className="page-title">Gastos</div>
          <div className="page-sub">Registro centralizado · Categorización y aprobación por proyecto</div>
        </div>
        <div className="page-actions">
          <button className="btn-secondary" onClick={handleExport}><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}/> Registrar gasto
          </button>
        </div>
      </div>

      {/* Mini KPIs */}
      <div className="kpi-grid" style={{gridTemplateColumns:"repeat(3,1fr)",marginBottom:20}}>
        <KpiCard label="Total filtrado" value={fmt(totales.monto)} icon="expense" meta={`${totales.qty} registros`}/>
        <KpiCard label="Registros" value={totales.qty} icon="check" meta="gastos visibles"/>
        <KpiCard label="Proyectos" value={totales.porProj} icon="building" meta="con gastos asignables"/>
      </div>

      {/* Filtros */}
      <div className="filters" style={{marginBottom:16,flexWrap:"wrap",gap:8}}>
        <select className="filter-chip" value={filterProj} onChange={e=>setFilterProj(e.target.value)} style={{appearance:"none"}}>
          <option value="todos">Todos los proyectos</option>
          {proyectos.map(p=><option key={p.id} value={p.id}>{p.nombre}</option>)}
        </select>
        <select className="filter-chip" value={filterCat} onChange={e=>setFilterCat(e.target.value)} style={{appearance:"none"}}>
          <option value="todos">Todas las categorías</option>
          {CATEGORIAS.map(c=><option key={c.id} value={c.id}>{c.label}</option>)}
        </select>
      </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="expense" title="Sin gastos"
            sub="No hay gastos que coincidan con los filtros seleccionados."
            action={<button className="btn-primary" style={{width:"auto",padding:"10px 18px"}} onClick={()=>setShowModal(true)}><Icon name="plus" size={14}/> Registrar gasto</button>}
          />
        ) : (
          <div style={{overflowX:"auto"}}>
            <table className="table">
              <thead>
                <tr>
                  <th>Fecha</th>
                  <th>Proyecto</th>
                  <th>Categoría</th>
                  <th>Descripción</th>
                  <th>Proveedor</th>
                  <th style={{textAlign:"right"}}>Monto</th>
                  {canDelete && <th style={{textAlign:"center",width:60}}></th>}
                </tr>
              </thead>
              <tbody>
                {filtered.map(g => {
                  const cat = catMap[g.categoria] || {label:g.categoria, color:"var(--text-3)"};
                  return (
                    <tr key={g.id}>
                      <td className="mono" style={{fontSize:12,whiteSpace:"nowrap"}}>{fmtDate(g.fecha)}</td>
                      <td style={{fontSize:12,maxWidth:120,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{g.proyecto_nombre || projMap[g.proyecto_id] || g.proyecto_id}</td>
                      <td>
                        <span style={{display:"inline-flex",alignItems:"center",gap:6,fontSize:11}}>
                          <span style={{width:7,height:7,borderRadius:"50%",background:cat.color}}/>
                          {cat.label}
                        </span>
                      </td>
                      <td style={{maxWidth:200,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{g.descripcion}</td>
                      <td style={{fontSize:12,color:"var(--text-3)",maxWidth:120,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{g.proveedor||"—"}</td>
                      <td className="num strong">{fmt(g.monto)}</td>
                      {canDelete && (
                        <td style={{textAlign:"center"}}>
                          <button className="btn-ghost" style={{padding:"4px 8px",fontSize:11,color:"var(--red)"}}
                            onClick={()=>setConfirmDel(g)} title="Eliminar (error humano)">
                            <Icon name="trash" size={13}/>
                          </button>
                        </td>
                      )}
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        )}
      </div>

      {showModal && <ModalGasto proyectos={proyectos} onClose={()=>setShowModal(false)} onSave={g=>setGastos(prev=>[g,...prev])}/>}

      {confirmDel && (
        <Modal title="Eliminar gasto" 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 este gasto?
          </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.proveedor||"—"}</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.Gastos = Gastos;