// =========================================================================
// ALTA DE PROYECTO sobre un inmueble existente
//
// Modelo (CLAUDE.md §1): un INMUEBLE es el activo físico y existe una vez; un
// PROYECTO es CADA operación sobre él. 1 inmueble → N proyectos. Este alta
// AÑADE un proyecto, nunca sustituye: si el inmueble ya tiene otros, se
// muestran como contexto para que quede claro que no se está duplicando.
//
// NO hay campos de balance ni gastos: están deprecados y se calculan desde
// `movimientos` (vista proyecto_balance).
//
// Si el tipo es INTERMEDIACIÓN, se ofrece registrar honorarios. Cada honorario
// es un MOVIMIENTO propio con su pagador (CLAUDE.md §4): REVIN cobra a ambas
// partes con importes independientes, así que se pueden añadir 0, 1 o 2 —
// uno por el comprador y otro por el vendedor. Nacen devengados y sin cobrar.
// =========================================================================

const TIPOS_PROYECTO = [
  { v: "flip", l: "Flip" },
  { v: "intermediacion", l: "Intermediación" },
  { v: "alquiler", l: "Gestión de alquiler" },
  { v: "reforma", l: "Reforma" },
  { v: "interiorismo", l: "Interiorismo" },
  { v: "optimizacion", l: "Optimización" },
  { v: "otro", l: "Otro" },
];

const ESTADOS_PROYECTO = [
  { v: "en_curso", l: "En curso" },
  { v: "presupuestando", l: "Presupuestando" },
  { v: "aprobado", l: "Aprobado" },
  { v: "finalizado", l: "Finalizado" },
  { v: "cancelado", l: "Cancelado" },
  { v: "otro", l: "Otro" },
];

const AltaProyecto = ({ inmuebleUid = null, onCancel, onSave }) => {
  const { Icons, Card, fmtEUR } = window;
  const DATA = window.DATA || {};

  const [f, setF] = React.useState({
    tipo: "intermediacion",
    estado: "en_curso",
    inmuebleUid: inmuebleUid || "",
  });
  const [honorarios, setHonorarios] = React.useState([]);   // [{importe, pagadorId, pagadorNombre}]
  const [err, setErr] = React.useState({});
  const [banner, setBanner] = React.useState(null);
  const [guardando, setGuardando] = React.useState(false);
  const set = (k, v) => setF(d => ({ ...d, [k]: v }));

  const enVivo = !!(window.RevinData && window.RevinData.isLive);
  const inmuebles = DATA.INMUEBLES || [];
  // Excluye proveedores: el contratante de un proyecto y el pagador de honorarios
  // son partes de la operación (comprador/vendedor/propietario…), nunca un gremio.
  // Sin este filtro, dar de alta proveedores llenaría estos selectores de fontaneros.
  const clientes = (DATA.CLIENTS || []).filter(c => c.name && c.typeKey !== "proveedor");
  const inmSel = inmuebles.find(i => i._uid === f.inmuebleUid);

  // Proyectos que YA cuelgan de este inmueble (contexto, no bloqueo).
  const yaExisten = (DATA.PROYECTOS || []).filter(p => inmSel && p.inmuebleUiId === inmSel.id);

  // Nombre propuesto, editable: "«dirección» — «tipo»"
  const nombrePropuesto = React.useMemo(() => {
    if (!inmSel) return "";
    const t = TIPOS_PROYECTO.find(x => x.v === f.tipo)?.l || "";
    const dir = (inmSel.nombreCorto || inmSel.addr || "").split(",").slice(0, 2).join(",").trim();
    return `${dir} — ${t}`;
  }, [inmSel, f.tipo]);
  const nombreFinal = (f.nombre ?? "") === "" ? nombrePropuesto : f.nombre;

  const esIntermediacion = f.tipo === "intermediacion";

  const addHonorario = () => setHonorarios(h => [...h, { importe: "", pagadorId: "", pagadorNombre: "" }]);
  const setHon = (i, k, v) => setHonorarios(h => h.map((x, j) => (j === i ? { ...x, [k]: v } : x)));
  const delHonorario = (i) => setHonorarios(h => h.filter((_, j) => j !== i));

  const numOrNaN = (s) => {
    if (s == null || String(s).trim() === "") return null;
    const n = Number(String(s).replace(/\s/g, "").replace(/\./g, "").replace(",", ".").replace(/[^\d.-]/g, ""));
    return Number.isFinite(n) ? n : NaN;
  };

  const validar = () => {
    const e = {};
    if (!f.inmuebleUid) e.inmueble = "Elige el inmueble sobre el que va el proyecto.";
    if (!nombreFinal.trim()) e.nombre = "El proyecto necesita un nombre.";
    if (!f.tipo) e.tipo = "Elige el tipo de proyecto.";
    honorarios.forEach((h, i) => {
      const n = numOrNaN(h.importe);
      if (n === null || Number.isNaN(n) || n <= 0) e[`hon${i}`] = "Importe del honorario no válido.";
      if (!h.pagadorNombre.trim()) e[`honP${i}`] = "Indica quién paga este honorario.";
    });
    return e;
  };

  const guardar = async () => {
    setBanner(null);
    const e = validar();
    setErr(e);
    const n = Object.keys(e).length;
    if (n) {
      setBanner({ tono: "err", texto: `Revisa ${n} ${n === 1 ? "campo" : "campos"} antes de guardar.` });
      return;
    }
    if (!enVivo) {
      setBanner({ tono: "warn", texto: "Conéctate a Supabase para dar de alta. En modo de prueba no se guarda nada." });
      return;
    }
    setGuardando(true);
    try {
      const cliente = clientes.find(c => c.id === f.clienteId);
      const creado = await window.RevinSupabase.crearProyecto({
        nombre: nombreFinal.trim(),
        tipo_proyecto: f.tipo,
        estado_proyecto: f.estado || "en_curso",
        inmueble_id: f.inmuebleUid,
        cliente_id: cliente?._uid || null,
        cliente_nombre: cliente?.name || null,
        fecha_inicio: f.fechaInicio || null,
        fecha_fin: f.fechaFin || null,
        notas: (f.notas || "").trim() || null,
      });
      // Un movimiento por honorario, cada uno con SU pagador.
      for (const h of honorarios) {
        const cli = clientes.find(c => c.id === h.pagadorId);
        await window.RevinSupabase.crearHonorario({
          proyecto_id: creado.id,
          inmueble_id: f.inmuebleUid,
          importe: numOrNaN(h.importe),
          pagador_nombre: h.pagadorNombre.trim(),
          pagador_id: cli?._uid || null,
          vencimiento: f.fechaFin || null,
          concepto: `Honorarios ${TIPOS_PROYECTO.find(t => t.v === f.tipo)?.l.toLowerCase()} — ${nombreFinal.trim()}`,
        });
      }
      // onSave ANTES de recargar: la recarga remonta el árbol (ver _postAlta en App.jsx).
      onSave && onSave(creado);
      if (window.RevinData?.reload) await window.RevinData.reload();
    } catch (ex) {
      setBanner({ tono: "err", texto: `No se pudo guardar: ${ex?.message || ex}` });
      setGuardando(false);
    }
  };

  return (
    <>
      <div className="page-h">
        <div>
          <button className="btn ghost xs" onClick={onCancel} style={{ paddingLeft: 0, marginBottom: 6 }}><Icons.ChevronLeft/> Cancelar</button>
          <h1>NUEVO PROYECTO</h1>
          <div className="sub">Cada operación sobre un inmueble es un proyecto. Un mismo inmueble puede tener varios a lo largo del tiempo.</div>
        </div>
        <div className="actions">
          <button className="btn secondary" onClick={onCancel} disabled={guardando}>Cancelar</button>
          <button className="btn primary" onClick={guardar} disabled={guardando}>
            <Icons.Plus/> {guardando ? "Guardando…" : "Crear proyecto"}
          </button>
        </div>
      </div>

      {banner && <div className={"alta-banner " + banner.tono}><Icons.Alert/><span>{banner.texto}</span></div>}
      {!enVivo && !banner && (
        <div className="alta-banner warn">
          <Icons.Alert/><span><b>Sin conexión</b> — conéctate a Supabase para poder dar de alta.</span>
        </div>
      )}

      <Card title="1 · Inmueble y operación" b={false}>
        <div style={{ padding: 16 }}>
          <div className="intake-grid">
            <Field label="Inmueble *" error={err.inmueble} full>
              <select className={"select" + (err.inmueble ? " err" : "")} value={f.inmuebleUid}
                onChange={e => set("inmuebleUid", e.target.value)} disabled={!!inmuebleUid}>
                <option value="">— Elige un inmueble —</option>
                {inmuebles.map(i => <option key={i._uid} value={i._uid}>{i.ref} · {i.addr}</option>)}
              </select>
            </Field>
            <Field label="Tipo de proyecto *" error={err.tipo}>
              <select className="select" value={f.tipo} onChange={e => set("tipo", e.target.value)}>
                {TIPOS_PROYECTO.map(t => <option key={t.v} value={t.v}>{t.l}</option>)}
              </select>
            </Field>
            <Field label="Estado">
              <select className="select" value={f.estado} onChange={e => set("estado", e.target.value)}>
                {ESTADOS_PROYECTO.map(t => <option key={t.v} value={t.v}>{t.l}</option>)}
              </select>
            </Field>
            <Field label="Nombre del proyecto *" error={err.nombre} full hint="Se propone solo a partir del inmueble y el tipo; puedes cambiarlo.">
              <input className={"input" + (err.nombre ? " err" : "")} value={nombreFinal}
                onChange={e => set("nombre", e.target.value)} placeholder="Calle Real 24 — Intermediación"/>
            </Field>
          </div>

          {yaExisten.length > 0 && (
            <div className="alta-banner warn" style={{ marginTop: 14, marginBottom: 0 }}>
              <Icons.Alert/>
              <span>
                <b>Este inmueble ya tiene {yaExisten.length} {yaExisten.length === 1 ? "proyecto" : "proyectos"}</b> — {yaExisten.map(p => `${p.nombre} (${p.estado})`).join(" · ")}.
                {" "}No pasa nada: un inmueble puede tener varias operaciones. Estás añadiendo una nueva, no sustituyendo.
              </span>
            </div>
          )}
        </div>
      </Card>

      <Card title="2 · Contratante y fechas" b={false} style={{ marginTop: 16 }}>
        <div style={{ padding: 16 }}>
          <div className="intake-grid">
            <Field label="Cliente contratante" full hint="Quien ENCARGA la operación. No tiene por qué ser quien paga los honorarios.">
              <select className="select" value={f.clienteId || ""} onChange={e => set("clienteId", e.target.value)}>
                <option value="">— Sin asignar —</option>
                {clientes.map(c => <option key={c.id} value={c.id}>{c.displayName || c.name}</option>)}
              </select>
            </Field>
            <Field label="Fecha de inicio"><input className="input" type="date" value={f.fechaInicio || ""} onChange={e => set("fechaInicio", e.target.value)}/></Field>
            <Field label="Fecha fin / límite"><input className="input" type="date" value={f.fechaFin || ""} onChange={e => set("fechaFin", e.target.value)}/></Field>
            <Field label="Notas" full>
              <textarea className="input" value={f.notas || ""} onChange={e => set("notas", e.target.value)}
                placeholder="Estado real de la operación, acuerdos, plazos…"/>
            </Field>
          </div>
        </div>
      </Card>

      {esIntermediacion && (
        <Card
          title="3 · Honorarios"
          right={<Pill tone="neutral">Devengado · sin cobrar</Pill>}
          b={false}
          style={{ marginTop: 16, marginBottom: 24 }}
        >
          <div style={{ padding: "10px 16px 0", fontSize: 12, color: "var(--fg-3)" }}>
            REVIN puede cobrar a <b>ambas partes</b> con importes independientes. Añade uno por cada
            parte a la que le cobres — o ninguno. Cada honorario se registra como movimiento contable
            devengado y <b>sin cobrar</b>: entra en el balance de devengo, no en el cobrado.
          </div>
          <div style={{ padding: 16 }}>
            {honorarios.map((h, i) => (
              <div key={i} className="intake-grid" style={{ marginBottom: 12, alignItems: "end" }}>
                <Field label={`Importe ${i + 1} (€) *`} error={err[`hon${i}`]}>
                  <input className={"input" + (err[`hon${i}`] ? " err" : "")} value={h.importe}
                    onChange={e => setHon(i, "importe", e.target.value)} placeholder="2.500"/>
                </Field>
                <Field label="A cargo de *" error={err[`honP${i}`]}>
                  <select className={"select" + (err[`honP${i}`] ? " err" : "")} value={h.pagadorId}
                    onChange={e => {
                      const c = clientes.find(x => x.id === e.target.value);
                      setHon(i, "pagadorId", e.target.value);
                      setHon(i, "pagadorNombre", c?.name || "");
                    }}>
                    <option value="">— Elige quién paga —</option>
                    {clientes.map(c => <option key={c.id} value={c.id}>{c.displayName || c.name}</option>)}
                  </select>
                </Field>
                <Field label=" ">
                  <button className="btn secondary" type="button" onClick={() => delHonorario(i)}>Quitar</button>
                </Field>
              </div>
            ))}
            <button className="btn secondary" type="button" onClick={addHonorario}>
              <Icons.Plus/> Añadir honorario
            </button>
            {honorarios.length === 0 && (
              <div style={{ fontSize: 12, color: "var(--fg-3)", marginTop: 10 }}>
                Sin honorarios registrados. Puedes añadirlos ahora o más tarde desde Contabilidad.
              </div>
            )}
          </div>
        </Card>
      )}
    </>
  );
};

window.AltaProyecto = AltaProyecto;