// Clients catalog: list, edit, delete, and search-picker

// Normalize a string for case/space/punctuation-insensitive comparisons
function normName(s) {
  return (s || "").toString().trim().toLowerCase().replace(/\s+/g, " ");
}
function normRut(s) {
  return (s || "").toString().replace(/[^0-9kK]/g, "").toLowerCase();
}

// Upsert a client into the catalog. Match by RUT (preferred) then by name.
// Returns { clients, matchedId } so callers can update references if needed.
function upsertClient(clients, c) {
  const safe = {
    name:    (c.name    || "").trim(),
    rut:     (c.rut     || "").trim(),
    contact: (c.contact || "").trim(),
    email:   (c.email   || "").trim(),
    phone:   (c.phone   || "").trim(),
    address: (c.address || "").trim(),
  };
  // Need at least a name OR rut to consider this a real client
  if (!safe.name && !safe.rut) return { clients, matchedId: null };

  const list = Array.isArray(clients) ? clients : [];
  let match = null;
  if (safe.rut) {
    const k = normRut(safe.rut);
    match = list.find(x => normRut(x.rut) === k);
  }
  if (!match && safe.name) {
    const k = normName(safe.name);
    match = list.find(x => normName(x.name) === k);
  }

  if (match) {
    // Update: only overwrite fields the new data actually provides
    const updated = { ...match };
    let changed = false;
    for (const k of ["name","rut","contact","email","phone","address"]) {
      if (safe[k] && safe[k] !== match[k]) { updated[k] = safe[k]; changed = true; }
    }
    if (!changed) return { clients: list, matchedId: match.id };
    updated.updatedAt = new Date().toISOString();
    return {
      clients: list.map(x => x.id === match.id ? updated : x),
      matchedId: match.id,
    };
  }

  // New client
  const fresh = {
    id: window.uid("cl"),
    ...safe,
    createdAt: new Date().toISOString(),
    updatedAt: new Date().toISOString(),
  };
  return { clients: [fresh, ...list], matchedId: fresh.id };
}
window.upsertClient = upsertClient;
window.normName = normName;
window.normRut = normRut;

function ClientPicker({ clients, onPick, onClose, onCreateNew }) {
  const [q, setQ] = React.useState("");
  const filtered = (clients || []).filter(c => {
    if (!q.trim()) return true;
    const t = `${c.name} ${c.rut} ${c.contact} ${c.email}`.toLowerCase();
    return t.includes(q.toLowerCase());
  });
  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()} style={{maxWidth:680,width:"100%"}}>
        <div className="modal-head">
          <h2>Buscar cliente</h2>
          <button className="btn ghost" onClick={onClose}>✕</button>
        </div>
        <div className="modal-body stack" style={{gap:12}}>
          <div className="row" style={{gap:10,flexWrap:"wrap"}}>
            <div className="row" style={{flex:1,minWidth:220,gap:8,padding:"8px 12px",border:"1px solid var(--line-strong)",borderRadius:8}}>
              <Icon.search size={16} />
              <input value={q} onChange={e=>setQ(e.target.value)} autoFocus
                     placeholder="Buscar por razón social, RUT, contacto…"
                     style={{border:0,background:"transparent",flex:1,outline:"none",fontSize:15}} />
            </div>
            {onCreateNew && (
              <button className="btn primary" onClick={() => onCreateNew({ name: q })}>
                <Icon.plus /> Nuevo cliente
              </button>
            )}
            <span className="muted" style={{fontSize:12,alignSelf:"center"}}>{filtered.length} resultados</span>
          </div>
          <div style={{maxHeight:"55vh",overflow:"auto",border:"1px solid var(--line)",borderRadius:8}}>
            {filtered.length === 0 ? (
              <div className="empty">
                <div className="ico">∅</div>
                {q.trim()
                  ? "Sin resultados — los clientes nuevos se guardan automáticamente al escribir."
                  : "Aún no hay clientes guardados. Empieza a escribir en la cotización y se guardarán automáticamente."}
              </div>
            ) : filtered.map(c => (
              <div key={c.id} className="picker-row" onClick={() => onPick(c)}>
                <div style={{flex:1,minWidth:0}}>
                  <div style={{fontWeight:600,fontSize:14,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"}}>
                    {c.name || "(Sin razón social)"}
                  </div>
                  <div className="mono" style={{fontSize:11,color:"var(--muted)",marginTop:2,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"}}>
                    {c.rut || "sin RUT"} · {c.contact || "—"} · {c.email || c.phone || "—"}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

function ClientModal({ initial, onSave, onClose }) {
  const [c, setC] = React.useState(() => ({
    name: "", rut: "", contact: "", email: "", phone: "", address: "",
    ...(initial || {}),
  }));
  const set = (patch) => setC(prev => ({ ...prev, ...patch }));
  const canSave = (c.name || "").trim().length > 0 || (c.rut || "").trim().length > 0;
  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()} style={{maxWidth:640,width:"100%"}}>
        <div className="modal-head">
          <h2>{initial && initial.id ? "Editar cliente" : "Nuevo cliente"}</h2>
          <button className="btn ghost" onClick={onClose}>✕</button>
        </div>
        <div className="modal-body">
          <div className="grid-2">
            <div className="field">
              <label>Razón social *</label>
              <input value={c.name} onChange={e => set({ name: e.target.value })} autoFocus />
            </div>
            <div className="field">
              <label>RUT</label>
              <input value={c.rut} onChange={e => set({ rut: e.target.value })} placeholder="76.543.210-8" />
            </div>
            <div className="field">
              <label>Contacto</label>
              <input value={c.contact} onChange={e => set({ contact: e.target.value })} />
            </div>
            <div className="field">
              <label>Email</label>
              <input value={c.email} onChange={e => set({ email: e.target.value })} />
            </div>
            <div className="field">
              <label>Teléfono</label>
              <input value={c.phone} onChange={e => set({ phone: e.target.value })} />
            </div>
            <div className="field">
              <label>Dirección</label>
              <input value={c.address} onChange={e => set({ address: e.target.value })} />
            </div>
          </div>
        </div>
        <div style={{padding:"12px 18px",borderTop:"1px solid var(--line)",display:"flex",justifyContent:"flex-end",gap:8}}>
          <button className="btn" onClick={onClose}>Cancelar</button>
          <button className="btn primary" disabled={!canSave} onClick={() => onSave(c)}>
            <Icon.check /> Guardar
          </button>
        </div>
      </div>
    </div>
  );
}

function ClientsView({ state, setState }) {
  const clients = state.clients || [];
  const [q, setQ] = React.useState("");
  const [editing, setEditing] = React.useState(null); // client object or { __new: true }
  const [confirmDel, setConfirmDel] = React.useState(null);

  const filtered = clients.filter(c => {
    if (!q.trim()) return true;
    const t = `${c.name} ${c.rut} ${c.contact} ${c.email} ${c.phone} ${c.address}`.toLowerCase();
    return t.includes(q.toLowerCase());
  });

  const usageCount = (cid) => {
    // Count quotes that reference this client (by RUT or normalized name)
    const me = clients.find(x => x.id === cid);
    if (!me) return 0;
    return (state.quotes || []).filter(qt => {
      const d = qt.data?.client;
      if (!d) {
        // legacy snapshot: only client name string
        return normName(qt.client) === normName(me.name);
      }
      if (me.rut && d.rut && normRut(d.rut) === normRut(me.rut)) return true;
      return normName(d.name) === normName(me.name);
    }).length;
  };

  const saveClient = (data) => {
    setState(s => {
      const list = s.clients || [];
      if (data.id) {
        return { ...s, clients: list.map(x => x.id === data.id
          ? { ...x, ...data, updatedAt: new Date().toISOString() }
          : x) };
      }
      const fresh = {
        ...data,
        id: window.uid("cl"),
        createdAt: new Date().toISOString(),
        updatedAt: new Date().toISOString(),
      };
      return { ...s, clients: [fresh, ...list] };
    });
    setEditing(null);
  };

  const deleteClient = (cid) => {
    setState(s => ({ ...s, clients: (s.clients || []).filter(x => x.id !== cid) }));
    setConfirmDel(null);
  };

  return (
    <>
      <Topbar
        title="Clientes"
        crumb="Catálogo"
        actions={
          <button className="btn primary" onClick={() => setEditing({ __new: true })}>
            <Icon.plus /> Nuevo cliente
          </button>
        }
      />
      <div className="content">
        <div className="section-title">
          <span className="n">01</span>
          <h3>Catálogo de clientes</h3>
          <span className="hint">{clients.length} guardados · se agregan automáticamente al cotizar</span>
        </div>
        <div className="card">
          <div className="card-head">
            <div className="row" style={{flex:1,gap:8,padding:"6px 10px",border:"1px solid var(--line-strong)",borderRadius:8,maxWidth:420}}>
              <Icon.search size={16} />
              <input value={q} onChange={e=>setQ(e.target.value)}
                     placeholder="Buscar por nombre, RUT, contacto…"
                     style={{border:0,background:"transparent",flex:1,outline:"none",fontSize:14}} />
            </div>
          </div>
          <div className="card-body flush" style={{overflow:"auto"}}>
            <table className="data">
              <thead>
                <tr>
                  <th style={{width:240}}>Razón social</th>
                  <th style={{width:140}}>RUT</th>
                  <th>Contacto</th>
                  <th>Email · Teléfono</th>
                  <th style={{width:90}} className="num">Cotiz.</th>
                  <th style={{width:120}}>Acciones</th>
                </tr>
              </thead>
              <tbody>
                {filtered.length === 0 ? (
                  <tr><td colSpan={6}>
                    <div className="empty">
                      <div className="ico">👥</div>
                      {clients.length === 0
                        ? "Aún no hay clientes. Empieza a escribir un cliente en una cotización y se guardará automáticamente aquí."
                        : "Sin resultados para esa búsqueda."}
                    </div>
                  </td></tr>
                ) : filtered.map(c => (
                  <tr key={c.id}>
                    <td style={{fontWeight:600}}>{c.name || <span className="muted">(sin nombre)</span>}</td>
                    <td className="mono" style={{fontSize:12}}>{c.rut || <span className="muted">—</span>}</td>
                    <td>{c.contact || <span className="muted">—</span>}</td>
                    <td>
                      <div style={{fontSize:12.5}}>{c.email || <span className="muted">—</span>}</div>
                      <div className="muted" style={{fontSize:11.5}}>{c.phone || ""}</div>
                    </td>
                    <td className="num">{usageCount(c.id)}</td>
                    <td>
                      <div className="row" style={{gap:4}}>
                        <button className="btn icon" title="Editar"
                                onClick={() => setEditing(c)}>
                          <Icon.edit />
                        </button>
                        <button className="btn danger icon" title="Eliminar"
                                onClick={() => setConfirmDel(c)}>
                          <Icon.trash />
                        </button>
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>

        <div style={{marginTop:14,padding:"12px 14px",background:"var(--surface-2)",borderRadius:8,fontSize:12.5,color:"var(--ink-2)",lineHeight:1.6}}>
          💡 <b>Auto-guardado activo:</b> cada vez que escribes los datos de un cliente nuevo en una cotización,
          se agrega automáticamente a este catálogo. Si el RUT o la razón social coinciden con uno existente,
          se actualizan los datos en vez de crear un duplicado.
        </div>
      </div>

      {editing && (
        <ClientModal
          initial={editing.__new ? {} : editing}
          onClose={() => setEditing(null)}
          onSave={saveClient}
        />
      )}
      {confirmDel && (
        <div className="modal-backdrop" onClick={() => setConfirmDel(null)}>
          <div className="modal" onClick={e => e.stopPropagation()} style={{maxWidth:440,width:"100%"}}>
            <div className="modal-head">
              <h2>Eliminar cliente</h2>
              <button className="btn ghost" onClick={() => setConfirmDel(null)}>✕</button>
            </div>
            <div className="modal-body">
              <p style={{margin:"0 0 8px",fontSize:14}}>
                ¿Eliminar <b>{confirmDel.name || confirmDel.rut}</b> del catálogo?
              </p>
              <p className="muted" style={{margin:0,fontSize:12.5,lineHeight:1.6}}>
                Las cotizaciones existentes mantienen sus datos. Sólo se borra del catálogo;
                si vuelves a escribir el mismo cliente, se creará otra vez.
              </p>
            </div>
            <div style={{padding:"12px 18px",borderTop:"1px solid var(--line)",display:"flex",justifyContent:"flex-end",gap:8}}>
              <button className="btn" onClick={() => setConfirmDel(null)}>Cancelar</button>
              <button className="btn danger" onClick={() => deleteClient(confirmDel.id)}>
                <Icon.trash /> Eliminar
              </button>
            </div>
          </div>
        </div>
      )}
    </>
  );
}

Object.assign(window, { ClientPicker, ClientModal, ClientsView });