/* ============================================================
   INside quote generator — Módulo Clientes
   Libreta de clientes (CRUD) + selector para el constructor.
   ============================================================ */

function ClientsView() {
  const { clients, addClient, updateClient, removeClient, goTo } = React.useContext(window.AppCtx);
  const [editing, setEditing] = React.useState(null); // client obj or "new"
  const [confirm, setConfirm] = React.useState(null);
  const [search, setSearch] = React.useState("");
  const [importing, setImporting] = React.useState(false);
  const fileRef = React.useRef(null);

  const downloadTemplate = () => {
    if (typeof XLSX === "undefined") { alert("La librería aún no cargó. Intenta de nuevo."); return; }
    const rows = [
      ["EMPRESA", "NOMBRE", "CORREO", "NÚMERO"],
      ["CREATIVE DEV, INC.", "Carlos Quintero", "carlos@creative.com", "6000-0000"],
      ["INSIDE ELEMENTOS", "María López", "maria@inside.com", "6100-1111"],
    ];
    const ws = XLSX.utils.aoa_to_sheet(rows);
    ws["!cols"] = [{ wch: 28 }, { wch: 22 }, { wch: 28 }, { wch: 14 }];
    const wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, "Clientes");
    XLSX.writeFile(wb, "plantilla-clientes.xlsx");
  };

  const handleImportFile = async (file) => {
    if (!file) return;
    if (typeof XLSX === "undefined") { alert("La librería aún no cargó. Intenta de nuevo."); return; }
    try {
      let wb;
      if (file.name.toLowerCase().endsWith(".csv")) wb = XLSX.read(await file.text(), { type: "string" });
      else wb = XLSX.read(await file.arrayBuffer(), { type: "array" });
      const rows = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]], { defval: "" });
      const norm = (s) => String(s == null ? "" : s).trim().toLowerCase().normalize("NFD").replace(/[̀-ͯ]/g, "");
      const pick = (row, ...keys) => { for (const k of keys) { const v = row[Object.keys(row).find(rk => norm(rk) === k) || ""] ; if (v != null && String(v).trim()) return String(v).trim(); } return ""; };

      const existingEmails = new Set(clients.map(c => (c.email || "").toLowerCase().trim()));
      const creates = [], skips = [];

      rows.forEach(raw => {
        const company = pick(raw, "empresa", "company", "compañia", "compania");
        const name    = pick(raw, "nombre", "name", "contacto", "contact");
        const email   = pick(raw, "correo", "email", "mail", "e-mail");
        const phone   = pick(raw, "numero", "número", "phone", "telefono", "teléfono", "cel", "celular", "movil", "móvil");
        if (!name && !company) { skips.push(raw); return; }
        if (email && existingEmails.has(email.toLowerCase())) { skips.push(raw); return; }
        creates.push({ name: name || company, company, email, phone });
      });

      setImporting({ creates, skipped: skips.length, total: rows.length });
    } catch (e) {
      alert("No se pudo leer el archivo: " + (e.message || e));
    }
  };

  const confirmImport = async () => {
    if (!importing || importing.creates.length === 0) { setImporting(false); return; }
    for (const c of importing.creates) await addClient(c);
    setImporting(false);
  };

  const filtered = clients.filter((c) => {
    if (!search) return true;
    const q = search.toLowerCase();
    return (c.name + " " + (c.company || "") + " " + (c.email || "") + " " + (c.phone || "")).toLowerCase().includes(q);
  });

  return (
    <div style={{ padding: "28px 36px 80px", maxWidth: 1100, margin: "0 auto" }}>
      <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", marginBottom: 22, gap: 20, flexWrap: "wrap" }}>
        <div>
          <div className="eyebrow">Módulo · Clientes</div>
          <h1 className="page-title">Clientes</h1>
          <p className="page-sub">{clients.length} {clients.length === 1 ? "cliente guardado" : "clientes guardados"} · úsalos para llenar cotizaciones en un clic</p>
        </div>
        <div style={{ display: "flex", gap: 8 }}>
          <window.Btn variant="outline" icon="download" onClick={downloadTemplate}>Plantilla</window.Btn>
          <window.Btn variant="outline" icon="upload" onClick={() => fileRef.current && fileRef.current.click()}>Importar Excel</window.Btn>
          <input ref={fileRef} type="file" accept=".xlsx,.xls,.csv" style={{ display: "none" }}
            onChange={(e) => { handleImportFile(e.target.files[0]); e.target.value = ""; }} />
          <window.Btn variant="gold" icon="plus" onClick={() => setEditing("new")}>Nuevo cliente</window.Btn>
        </div>
      </div>

      <div className="searchbox" style={{ maxWidth: 340, marginBottom: 18 }}>
        <window.Icon name="search" size={16} />
        <input value={search} onChange={(e) => setSearch(e.target.value)} placeholder="Buscar cliente, empresa, correo…" />
      </div>

      {clients.length === 0 ? (
        <div className="empty" style={{ padding: "50px 20px" }}>
          <window.Icon name="user" size={28} style={{ color: "var(--muted)", marginBottom: 12 }} />
          <div style={{ fontSize: 15, color: "var(--text)", marginBottom: 4 }}>Aún no tienes clientes guardados</div>
          <div style={{ fontSize: 13 }}>Agrégalos con «Nuevo cliente» o guárdalos directo desde una cotización.</div>
        </div>
      ) : (
        <div className="client-grid">
          {filtered.map((c) => (
            <window.Card key={c.id} pad={0} style={{ overflow: "hidden" }}>
              <div style={{ padding: "15px 16px", display: "flex", gap: 12, alignItems: "flex-start" }}>
                <div className="user-avatar" style={{ width: 38, height: 38, fontSize: 14, flexShrink: 0 }}>
                  {(c.name || "?").split(" ").map((w) => w[0]).slice(0, 2).join("").toUpperCase()}
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 15, fontWeight: 600, lineHeight: 1.2 }}>{c.name}</div>
                  {c.company && <div style={{ fontSize: 12.5, color: "var(--muted)", marginTop: 2 }}>{c.company}</div>}
                </div>
              </div>
              <div style={{ padding: "0 16px 14px", display: "flex", flexDirection: "column", gap: 5 }}>
                {c.email && <div className="client-meta"><window.Icon name="doc" size={13} /> {c.email}</div>}
                {c.phone && <div className="client-meta"><window.Icon name="user" size={13} /> {c.phone}</div>}
              </div>
              <div style={{ display: "flex", borderTop: "1px solid var(--border)" }}>
                <button className="client-action" onClick={() => setEditing(c)}><window.Icon name="edit" size={14} /> Editar</button>
                <button className="client-action danger" style={{ borderLeft: "1px solid var(--border)" }}
                  onClick={() => setConfirm({ title: "Eliminar cliente", message: `Se eliminará «${c.name}» de la libreta. Esta acción no se puede deshacer.`, onConfirm: () => removeClient(c.id) })}>
                  <window.Icon name="trash" size={14} /> Eliminar
                </button>
              </div>
            </window.Card>
          ))}
          {filtered.length === 0 && <div className="empty">Sin resultados para «{search}»</div>}
        </div>
      )}

      {editing && <ClientModal client={editing === "new" ? null : editing}
        onClose={() => setEditing(null)}
        onSave={(data) => { if (editing === "new") addClient(data); else updateClient(editing.id, data); setEditing(null); }} />}
      <window.ConfirmModal open={!!confirm} title={confirm && confirm.title} message={confirm && confirm.message}
        onConfirm={() => confirm && confirm.onConfirm()} onClose={() => setConfirm(null)} />

      {importing && (
        <div className="modal-overlay" onClick={() => setImporting(false)}>
          <div className="modal" onClick={(e) => e.stopPropagation()} style={{ width: 500 }}>
            <div className="modal-head">
              <div>
                <div className="eyebrow">Importar clientes</div>
                <h3 style={{ margin: "3px 0 0", fontFamily: "var(--display)", fontSize: 20, fontWeight: 600 }}>Vista previa</h3>
              </div>
              <button className="iconbtn" onClick={() => setImporting(false)}><window.Icon name="x" size={18} /></button>
            </div>
            <div style={{ padding: "10px 22px 4px", display: "flex", gap: 10, flexWrap: "wrap" }}>
              {importing.creates.length > 0 && <span className="imp-stat ok"><b>{importing.creates.length}</b> cliente{importing.creates.length !== 1 ? "s" : ""} nuevo{importing.creates.length !== 1 ? "s" : ""}</span>}
              {importing.skipped > 0 && <span className="imp-stat warn"><b>{importing.skipped}</b> fila{importing.skipped !== 1 ? "s" : ""} omitida{importing.skipped !== 1 ? "s" : ""} (sin nombre o correo duplicado)</span>}
            </div>
            <div style={{ padding: "10px 22px", maxHeight: 320, overflowY: "auto" }}>
              {importing.creates.length === 0 ? (
                <div className="empty">No se encontraron clientes nuevos. Revisa que el archivo tenga las columnas EMPRESA, NOMBRE, CORREO, NÚMERO.</div>
              ) : (
                <table className="imp-table">
                  <thead><tr><th>Nombre</th><th>Empresa</th><th>Correo</th><th>Número</th></tr></thead>
                  <tbody>
                    {importing.creates.map((c, i) => (
                      <tr key={i}>
                        <td style={{ fontWeight: 600 }}>{c.name}</td>
                        <td style={{ color: "var(--muted)" }}>{c.company || "—"}</td>
                        <td style={{ fontFamily: "var(--mono)", fontSize: 12 }}>{c.email || "—"}</td>
                        <td style={{ fontFamily: "var(--mono)", fontSize: 12 }}>{c.phone || "—"}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              )}
            </div>
            <div className="modal-foot">
              <div style={{ flex: 1 }} />
              <window.Btn variant="outline" onClick={() => setImporting(false)}>Cancelar</window.Btn>
              <window.Btn variant="gold" icon="check" disabled={importing.creates.length === 0} onClick={confirmImport}>
                Importar {importing.creates.length > 0 ? importing.creates.length : ""} cliente{importing.creates.length !== 1 ? "s" : ""}
              </window.Btn>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

function ClientModal({ client, onClose, onSave }) {
  const [f, setF] = React.useState({
    name: client ? client.name : "", company: client ? client.company || "" : "",
    phone: client ? client.phone || "" : "", email: client ? client.email || "" : "",
  });
  const set = (patch) => setF((s) => ({ ...s, ...patch }));
  const valid = f.name.trim();
  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()} style={{ width: 440 }}>
        <div className="modal-head">
          <div>
            <div className="eyebrow">Clientes</div>
            <h3 style={{ margin: "3px 0 0", fontFamily: "var(--display)", fontSize: 20, fontWeight: 600 }}>{client ? "Editar cliente" : "Nuevo cliente"}</h3>
          </div>
          <button className="iconbtn" onClick={onClose}><window.Icon name="x" size={18} /></button>
        </div>
        <div style={{ padding: "6px 22px 4px", display: "flex", flexDirection: "column", gap: 12 }}>
          <div>
            <label className="field-lbl">Nombre *</label>
            <input className="inp" autoFocus value={f.name} onChange={(e) => set({ name: e.target.value })} placeholder="Carlos Quintero" />
          </div>
          <div>
            <label className="field-lbl">Empresa</label>
            <input className="inp" value={f.company} onChange={(e) => set({ company: e.target.value })} placeholder="CREATIVE DEV, INC." />
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
            <div>
              <label className="field-lbl">Número</label>
              <input className="inp" value={f.phone} onChange={(e) => set({ phone: e.target.value })} placeholder="6000-0000" style={{ fontFamily: "var(--mono)" }} />
            </div>
            <div>
              <label className="field-lbl">Correo</label>
              <input className="inp" type="email" value={f.email} onChange={(e) => set({ email: e.target.value })} placeholder="cliente@correo.com" style={{ fontFamily: "var(--mono)" }} />
            </div>
          </div>
        </div>
        <div className="modal-foot">
          <div style={{ flex: 1 }} />
          <window.Btn variant="outline" onClick={onClose}>Cancelar</window.Btn>
          <window.Btn variant="gold" icon="check" disabled={!valid}
            onClick={() => onSave({ name: f.name.trim(), company: f.company.trim(), phone: f.phone.trim(), email: f.email.trim() })}>
            {client ? "Guardar" : "Crear cliente"}
          </window.Btn>
        </div>
      </div>
    </div>
  );
}

window.ClientsView = ClientsView;
window.ClientModal = ClientModal;