// Pantalla: Proyectos — conectado a API real

const ESTADOS = {
  licitacion: { label:"Licitación", color:"var(--purple)", bg:"var(--purple-dim)", icon:"📋" },
  ejecucion:  { label:"Ejecución",  color:"var(--yellow)", bg:"var(--yellow-dim)", icon:"🏗️" },
  atraso:     { label:"En atraso",  color:"var(--red)",    bg:"var(--red-dim)",    icon:"⚠️" },
  prorroga:   { label:"Prórroga",   color:"var(--orange)", bg:"var(--orange-dim)", icon:"⏳" },
  finalizado: { label:"Finalizado", color:"var(--green)",  bg:"var(--green-dim)",  icon:"✅" },
};

const parseInicio = (s) => {
  if (!s) return null;
  const d = new Date(String(s).slice(0,10) + "T00:00:00");
  return isNaN(d.getTime()) ? null : d;
};

const diasRestantes = (inicio, dias) => {
  const start = parseInicio(inicio);
  if (!start || !dias) return null;
  const fin = new Date(start.getTime() + dias * 86400000);
  const hoy = new Date(); hoy.setHours(0,0,0,0);
  return Math.ceil((fin - hoy) / 86400000);
};

const progresoDias = (inicio, dias) => {
  const start = parseInicio(inicio);
  if (!start || !dias) return 0;
  const pasados = Math.max(0, Math.ceil((new Date() - start) / 86400000));
  return Math.min(100, Math.round((pasados / dias) * 100));
};

const EstadoPill = ({ estado }) => {
  const e = ESTADOS[estado] || {label:estado, color:"var(--text-3)", bg:"var(--bg-3)"};
  return (
    <span style={{display:"inline-flex",alignItems:"center",gap:5,padding:"3px 10px",borderRadius:20,
      background:e.bg,fontSize:11,fontWeight:600,fontFamily:"'JetBrains Mono',monospace",color:e.color,whiteSpace:"nowrap"}}>
      {e.icon} {e.label}
    </span>
  );
};

const PlazoBarra = ({ p }) => {
  if (!p.dias_ejecucion || !["ejecucion","atraso","prorroga"].includes(p.estado)) return null;
  const total  = (parseInt(p.dias_ejecucion)||0) + (parseInt(p.dias_prorroga)||0);
  const dias   = diasRestantes(p.inicio, total);
  const prog   = progresoDias(p.inicio, total);
  const vencido = dias !== null && dias < 0;
  const urgente = dias !== null && dias >= 0 && dias <= 7;
  const color   = vencido ? "var(--red)" : urgente ? "var(--orange)" : "var(--yellow)";
  return (
    <div style={{marginTop:10}}>
      <div style={{display:"flex",justifyContent:"space-between",fontSize:11,marginBottom:5}}>
        <span style={{color:"var(--text-3)"}}>Plazo</span>
        <span style={{fontFamily:"'JetBrains Mono',monospace",fontWeight:600,color:vencido?"var(--red)":urgente?"var(--orange)":"var(--text-2)"}}>
          {vencido ? `Vencido hace ${Math.abs(dias)}d` : `${dias}d restantes`}
        </span>
      </div>
      <div style={{height:5,background:"var(--bg-3)",borderRadius:3,overflow:"hidden"}}>
        <div style={{height:"100%",borderRadius:3,width:`${Math.min(100,prog)}%`,background:color,transition:"width 0.6s"}}/>
      </div>
      <div style={{display:"flex",justifyContent:"space-between",fontSize:10,marginTop:3,color:"var(--text-4)",fontFamily:"'JetBrains Mono',monospace"}}>
        <span>{total}d totales{p.dias_prorroga?` (+${p.dias_prorroga} prórroga)`:""}</span>
        <span>{prog}% del plazo</span>
      </div>
    </div>
  );
};

// Modal: Nuevo / Editar proyecto
const ModalProyecto = ({ proyecto, onClose, onSave }) => {
  const editing = !!proyecto;
  const [form, setForm] = useState({
    nombre: proyecto?.nombre || "",
    descripcion: proyecto?.descripcion || "",
    cliente: proyecto?.cliente || "",
    ubicacion: proyecto?.ubicacion || "",
    presupuesto: proyecto?.presupuesto != null ? String(proyecto.presupuesto) : "",
    inicio: proyecto?.inicio ? String(proyecto.inicio).slice(0,10) : "",
    estado: proyecto?.estado || "licitacion",
    dias_ejecucion: proyecto?.dias_ejecucion != null ? String(proyecto.dias_ejecucion) : "",
    dias_prorroga:  proyecto?.dias_prorroga  != null ? String(proyecto.dias_prorroga)  : "",
  });
  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.nombre.trim()) { setErr("El nombre del proyecto es requerido."); return; }
    setSaving(true); setErr("");
    try {
      const payload = {...form, presupuesto: parseFloat(form.presupuesto)||0, dias_ejecucion: parseInt(form.dias_ejecucion)||null, dias_prorroga: parseInt(form.dias_prorroga)||0};
      let result;
      if (editing) result = await window.API.proyectos.update(proyecto.id, payload);
      else result = await window.API.proyectos.create(payload);
      onSave(result);
      onClose();
    } catch (e) { setErr(e.message); }
    finally { setSaving(false); }
  };

  return (
    <Modal title={editing?"Editar proyecto":"Nuevo proyecto"} sub={editing?"Modifica los datos del proyecto":"Completa la información del nuevo proyecto"} onClose={onClose} width={520}>
      {err && <ErrorBanner msg={err}/>}
      <div style={{display:"flex",flexDirection:"column",gap:14}}>
        <div className="form-row">
          <label className="form-label">Nombre del proyecto *</label>
          <input className="form-input" value={form.nombre} onChange={set("nombre")} placeholder="Ej: Cine Libertad"/>
        </div>
        <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:12}}>
          <div className="form-row">
            <label className="form-label">Cliente</label>
            <input className="form-input" value={form.cliente} onChange={set("cliente")} placeholder="Nombre del cliente"/>
          </div>
          <div className="form-row">
            <label className="form-label">Estado</label>
            <select className="form-input" value={form.estado} onChange={set("estado")}>
              {Object.entries(ESTADOS).map(([k,v])=><option key={k} value={k}>{v.icon} {v.label}</option>)}
            </select>
          </div>
        </div>
        <div className="form-row">
          <label className="form-label">Ubicación</label>
          <input className="form-input" value={form.ubicacion} onChange={set("ubicacion")} placeholder="Dirección o municipio"/>
        </div>
        <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:12}}>
          <div className="form-row">
            <label className="form-label">Presupuesto ($)</label>
            <input className="form-input" type="number" value={form.presupuesto} onChange={set("presupuesto")} placeholder="0.00"/>
          </div>
          <div className="form-row">
            <label className="form-label">Fecha de inicio</label>
            <input className="form-input" type="date" value={form.inicio} onChange={set("inicio")}/>
          </div>
        </div>
        {["ejecucion","prorroga","atraso"].includes(form.estado) && (
          <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:12}}>
            <div className="form-row">
              <label className="form-label">Días de ejecución</label>
              <input className="form-input" type="number" value={form.dias_ejecucion} onChange={set("dias_ejecucion")} placeholder="ej: 180"/>
            </div>
            <div className="form-row">
              <label className="form-label">Días de prórroga</label>
              <input className="form-input" type="number" value={form.dias_prorroga} onChange={set("dias_prorroga")} placeholder="0"/>
            </div>
          </div>
        )}
        <div className="form-row">
          <label className="form-label">Descripción</label>
          <textarea className="form-input" rows={2} value={form.descripcion} onChange={set("descripcion")} placeholder="Descripción del proyecto..." style={{resize:"vertical"}}/>
        </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}/> {editing?"Guardar cambios":"Crear proyecto"}</>}
        </button>
      </div>
    </Modal>
  );
};

const Proyectos = ({user, setRoute}) => {
  const [proyectos, setProyectos] = useState([]);
  const [loading, setLoading]     = useState(true);
  const [error, setError]         = useState("");
  const [showModal, setShowModal] = useState(false);
  const [editando, setEditando]   = useState(null);
  const [filterEst, setFilterEst] = useState("todos");

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

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

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

  const filtered = proyectos.filter(p => filterEst === "todos" || p.estado === filterEst);

  const handleSaved = (p) => {
    if (editando) setProyectos(prev => prev.map(x => x.id === p.id ? p : x));
    else setProyectos(prev => [p, ...prev]);
  };

  return (
    <div className="content">
      <div className="page-title-row">
        <div>
          <div className="page-title">Proyectos</div>
          <div className="page-sub">Gestión de obras · Estados, plazos y presupuestos</div>
        </div>
        <div className="page-actions">
          <button className="btn-secondary" onClick={load}><Icon name="refresh" size={14}/></button>
          {canCreate && (
            <button className="btn-primary" style={{width:"auto",padding:"10px 14px"}} onClick={()=>{setEditando(null);setShowModal(true);}}>
              <Icon name="plus" size={14}/> Nuevo proyecto
            </button>
          )}
        </div>
      </div>

      {/* Filtros por estado */}
      <div className="filters" style={{marginBottom:18}}>
        {[{id:"todos",l:"Todos"}, ...Object.entries(ESTADOS).map(([k,v])=>({id:k,l:v.label}))].map(f=>(
          <button key={f.id} className={`filter-chip${filterEst===f.id?" active":""}`} onClick={()=>setFilterEst(f.id)}>{f.l}</button>
        ))}
      </div>

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

      {loading ? (
        <div style={{display:"flex",justifyContent:"center",padding:60}}><Spinner size={28}/></div>
      ) : filtered.length === 0 ? (
        <EmptyState icon="building" title="Sin proyectos"
          sub={filterEst==="todos"?"Crea el primer proyecto para comenzar.":"No hay proyectos con este estado."}
          action={canCreate && filterEst==="todos" && <button className="btn-primary" style={{width:"auto",padding:"10px 18px"}} onClick={()=>{setEditando(null);setShowModal(true);}}><Icon name="plus" size={14}/> Nuevo proyecto</button>}
        />
      ) : (
        <div style={{display:"grid",gridTemplateColumns:"repeat(auto-fill,minmax(360px,1fr))",gap:16}}>
          {filtered.map(p => {
            const ec = ESTADOS[p.estado] || {label:p.estado, color:"var(--text-3)", bg:"var(--bg-3)"};
            const pctMonto = parseFloat(p.presupuesto) > 0 ? Math.min(100, Math.round(parseFloat(p.ejecutado||0)/parseFloat(p.presupuesto)*100)) : 0;
            return (
              <div key={p.id} className="card" style={{border:`1px solid var(--border)`,transition:"border-color 0.2s",cursor:"default"}}
                onMouseEnter={e=>e.currentTarget.style.borderColor=ec.color+"50"}
                onMouseLeave={e=>e.currentTarget.style.borderColor="var(--border)"}>
                <div className="card-head">
                  <div style={{flex:1,minWidth:0}}>
                    <div style={{fontWeight:700,fontSize:14,marginBottom:4,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{p.nombre}</div>
                    {p.cliente && <div style={{fontSize:12,color:"var(--text-3)"}}>{p.cliente}</div>}
                  </div>
                  <EstadoPill estado={p.estado}/>
                </div>
                <div className="card-body">
                  {p.ubicacion && (
                    <div style={{display:"flex",alignItems:"center",gap:6,fontSize:12,color:"var(--text-3)",marginBottom:12}}>
                      <Icon name="location" size={12}/> {p.ubicacion}
                    </div>
                  )}

                  {/* Barra de presupuesto */}
                  <div style={{marginBottom:10}}>
                    <div style={{display:"flex",justifyContent:"space-between",fontSize:11,marginBottom:6}}>
                      <span style={{color:"var(--text-3)"}}>Ejecutado</span>
                      <span className="mono" style={{fontWeight:600}}>{fmt(p.ejecutado||0)} / {fmt(p.presupuesto)}</span>
                    </div>
                    <div style={{height:6,background:"var(--bg-3)",borderRadius:4,overflow:"hidden"}}>
                      <div style={{height:"100%",borderRadius:4,width:`${pctMonto}%`,background:pctMonto>90?"var(--red)":pctMonto>70?"var(--orange)":ec.color,transition:"width 0.6s"}}/>
                    </div>
                    <div style={{textAlign:"right",fontSize:10,marginTop:3,color:"var(--text-4)",fontFamily:"'JetBrains Mono',monospace"}}>{pctMonto}% del presupuesto</div>
                  </div>

                  <PlazoBarra p={p}/>

                  {p.inicio && (
                    <div style={{display:"flex",alignItems:"center",gap:6,fontSize:11,color:"var(--text-3)",marginTop:10}}>
                      <Icon name="calendar" size={11}/> Inicio: {fmtDateFull(p.inicio)}
                    </div>
                  )}
                </div>

                {canCreate && (
                  <div style={{padding:"10px 18px",borderTop:"1px solid var(--border)",display:"flex",gap:8}}>
                    <button className="btn-ghost" style={{fontSize:12}} onClick={()=>{setEditando(p);setShowModal(true);}}>
                      <Icon name="pencil" size={13}/> Editar
                    </button>
                    <button className="btn-ghost" style={{fontSize:12}} onClick={()=>setRoute("gastos")}>
                      <Icon name="expense" size={13}/> Gastos
                    </button>
                  </div>
                )}
              </div>
            );
          })}
        </div>
      )}

      {showModal && <ModalProyecto proyecto={editando} onClose={()=>setShowModal(false)} onSave={handleSaved}/>}
    </div>
  );
};

window.Proyectos = Proyectos;