/* ============================================================
   PURE SPA — AGENDA · Clientas  /admin/customers
   ============================================================ */
function CustomersView() {
  const { version, openModal } = useApp();
  const [q, setQ] = useState("");
  const [tag, setTag] = useState("");
  let list = useMemo(() => PureApi.getCustomers(), [version]);
  list = list.filter((c) => (!q || c.name.toLowerCase().includes(q.toLowerCase()) || c.phone.includes(q))
    && (!tag || c.tags.includes(tag)));

  const th = { fontFamily: "var(--font-body)", fontSize: 9.5, fontWeight: 600, letterSpacing: "0.1em", textTransform: "uppercase", color: C.taupe, padding: "13px 14px", textAlign: "left", whiteSpace: "nowrap" };
  const td = { padding: "13px 14px", fontFamily: "var(--font-body)", fontSize: 13, color: C.espresso, fontWeight: 300, verticalAlign: "middle" };

  return (
    <div>
      <PageHead eyebrow="Directorio" title="Clientas" sub={`${list.length} clientas registradas`} />

      <FilterBar>
        <div style={{ position: "relative", minWidth: 240, flex: "0 1 320px" }}>
          <span style={{ position: "absolute", left: 13, top: "50%", transform: "translateY(-50%)" }}><Icon name="Search" size={15} color={C.taupe} /></span>
          <Input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Buscar por nombre o teléfono" style={{ paddingLeft: 36 }} />
        </div>
        <div style={{ minWidth: 170 }}><Select value={tag} onChange={setTag} placeholder="Todas las etiquetas" options={PureConstants.TAGS} /></div>
      </FilterBar>

      <div className="pu-table-only">
        <TableWrap>
          <table style={{ width: "100%", borderCollapse: "collapse", minWidth: 860 }}>
            <thead><tr style={{ borderBottom: `1px solid ${C.line}` }}>
              <th style={th}>Clienta</th><th style={th}>Teléfono</th><th style={th}>Última visita</th><th style={th}>Próxima</th>
              <th style={{ ...th, textAlign: "center" }}>Visitas</th><th style={{ ...th, textAlign: "right" }}>Total gastado</th><th style={th}>Etiquetas</th>
            </tr></thead>
            <tbody>
              {list.map((c, i) => (
                <tr key={c.id} onClick={() => openModal("customer", { id: c.id })} style={{ borderBottom: i < list.length - 1 ? `1px solid ${C.line}` : "none", cursor: "pointer" }}
                  onMouseEnter={(e) => e.currentTarget.style.background = C.ivory} onMouseLeave={(e) => e.currentTarget.style.background = "transparent"}>
                  <td style={td}><div style={{ display: "flex", alignItems: "center", gap: 11 }}><Avatar name={c.name} size={34} /><div><div style={{ fontWeight: 600 }}>{c.name}</div><div style={{ fontSize: 11, color: C.taupe }}>{c.email}</div></div></div></td>
                  <td style={td}>{c.phone}</td>
                  <td style={td}>{shortDate(c.lastVisit)}</td>
                  <td style={td}>{c.nextBooking ? <span style={{ color: C.goldDeep, fontWeight: 500 }}>{shortDate(c.nextBooking)}</span> : <span style={{ color: C.taupe }}>—</span>}</td>
                  <td style={{ ...td, textAlign: "center", fontWeight: 500 }}>{c.visits}</td>
                  <td style={{ ...td, textAlign: "right", fontFamily: "var(--font-display)", fontSize: 15 }}>{clp(c.spent)}</td>
                  <td style={td}><div style={{ display: "flex", gap: 5, flexWrap: "wrap", maxWidth: 200 }}>{c.tags.slice(0, 2).map((t) => <Tag key={t} tone={t === "VIP" ? "dark" : t === "Frecuente" ? "gold" : "soft"}>{t}</Tag>)}{c.tags.length > 2 && <Tag>+{c.tags.length - 2}</Tag>}</div></td>
                </tr>
              ))}
            </tbody>
          </table>
        </TableWrap>
      </div>

      <div className="pu-card-list" style={{ display: "none", flexDirection: "column", gap: 10 }}>
        {list.map((c) => (
          <Card key={c.id} pad={14} style={{ cursor: "pointer" }}>
            <div onClick={() => openModal("customer", { id: c.id })}>
              <div style={{ display: "flex", gap: 11, alignItems: "center", marginBottom: 10 }}>
                <Avatar name={c.name} size={42} />
                <div style={{ flex: 1 }}><div style={{ fontFamily: "var(--font-body)", fontSize: 14.5, fontWeight: 600, color: C.espresso }}>{c.name}</div>
                  <div style={{ fontFamily: "var(--font-body)", fontSize: 12, color: C.taupe }}>{c.phone}</div></div>
                <div style={{ textAlign: "right" }}><div style={{ fontFamily: "var(--font-display)", fontSize: 17, color: C.espresso }}>{clp(c.spent)}</div><div style={{ fontFamily: "var(--font-body)", fontSize: 10.5, color: C.taupe }}>{c.visits} visitas</div></div>
              </div>
              <div style={{ display: "flex", gap: 5, flexWrap: "wrap" }}>{c.tags.map((t) => <Tag key={t} tone={t === "VIP" ? "dark" : t === "Frecuente" ? "gold" : "soft"}>{t}</Tag>)}</div>
            </div>
          </Card>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { CustomersView });