// other-screens.jsx — Clients, Catalog, Mobile companion

const COLORS = [
  "oklch(0.72 0.12 145)", "oklch(0.72 0.12 220)", "oklch(0.72 0.12 60)",
  "oklch(0.72 0.12 300)", "oklch(0.72 0.12 25)", "oklch(0.72 0.12 175)",
  "oklch(0.72 0.12 195)", "oklch(0.72 0.12 340)",
];

const ClientModal = ({ client, lang, onSave, onClose }) => {
  const [name, setName] = React.useState(client?.name || "");
  const [contact, setContact] = React.useState(client?.contact || "");
  const [email, setEmail] = React.useState(client?.email || "");
  const [city, setCity] = React.useState(client?.city || "");
  const [saving, setSaving] = React.useState(false);
  const [error, setError] = React.useState("");

  const handleSave = async () => {
    if (!name || !email) { setError(lang === "es" ? "Nombre y email son requeridos" : "Name and email are required"); return; }
    setSaving(true);
    try {
      const color = client?.color || COLORS[Math.floor(Math.random() * COLORS.length)];
      await onSave({ ...client, name, contact, email, city, color });
      onClose();
    } catch (e) {
      setError(e.message);
    } finally {
      setSaving(false);
    }
  };

  return (
    <div style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.6)", zIndex: 999, display: "grid", placeItems: "center" }} onClick={onClose}>
      <div className="card" style={{ width: 440, padding: 24 }} onClick={e => e.stopPropagation()}>
        <div style={{ fontWeight: 600, fontSize: 15, marginBottom: 20 }}>
          {client ? (lang === "es" ? "Editar cliente" : "Edit client") : (lang === "es" ? "Nuevo cliente" : "New client")}
        </div>
        <div className="form-grid" style={{ gap: 12 }}>
          <div className="form-row">
            <label>{lang === "es" ? "Empresa / Nombre" : "Company / Name"} *</label>
            <input className="input" value={name} onChange={e => setName(e.target.value)} autoFocus/>
          </div>
          <div className="form-row">
            <label>{lang === "es" ? "Contacto" : "Contact"}</label>
            <input className="input" value={contact} onChange={e => setContact(e.target.value)}/>
          </div>
          <div className="form-row">
            <label>Email *</label>
            <input className="input" type="email" value={email} onChange={e => setEmail(e.target.value)}/>
          </div>
          <div className="form-row">
            <label>{lang === "es" ? "Ciudad" : "City"}</label>
            <input className="input" value={city} onChange={e => setCity(e.target.value)}/>
          </div>
        </div>
        {error && <div style={{ color: "var(--red)", fontSize: 12, marginTop: 10 }}>{error}</div>}
        <div style={{ display: "flex", gap: 8, justifyContent: "flex-end", marginTop: 20 }}>
          <button className="btn" onClick={onClose}>{lang === "es" ? "Cancelar" : "Cancel"}</button>
          <button className="btn primary" onClick={handleSave} disabled={saving}>
            {saving ? "..." : (lang === "es" ? "Guardar" : "Save")}
          </button>
        </div>
      </div>
    </div>
  );
};

const Clients = ({ t, lang, clients, onClientsChange }) => {
  const [modal, setModal] = React.useState(null);
  const [search, setSearch] = React.useState("");

  const filtered = (clients || []).filter(c =>
    !search || c.name.toLowerCase().includes(search.toLowerCase()) || c.email?.toLowerCase().includes(search.toLowerCase())
  );

  const handleSave = async (clientData) => {
    const saved = await saveClient(clientData);
    onClientsChange();
  };

  const handleDelete = async (c) => {
    if (!confirm(lang === "es" ? `¿Eliminar ${c.name}?` : `Delete ${c.name}?`)) return;
    await deleteClient(c.id);
    onClientsChange();
  };

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
      {modal && <ClientModal client={modal === "new" ? null : modal} lang={lang} onSave={handleSave} onClose={() => setModal(null)}/>}

      <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
        <div className="search-input" style={{ flex: 1, maxWidth: 360 }}>
          <Icon name="search"/>
          <input className="input" placeholder={lang === "es" ? "Buscar clientes…" : "Search clients…"} value={search} onChange={e => setSearch(e.target.value)}/>
        </div>
        <div style={{ marginLeft: "auto" }}>
          <button className="btn primary" onClick={() => setModal("new")}><Icon name="plus" size={13}/> {lang === "es" ? "Nuevo cliente" : "New client"}</button>
        </div>
      </div>

      {filtered.length === 0 && (
        <div className="empty">
          <Icon name="users" size={28} style={{ opacity: 0.4 }}/>
          <div style={{ marginTop: 10 }}>{lang === "es" ? "Sin clientes todavía" : "No clients yet"}</div>
        </div>
      )}

      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 14 }}>
        {filtered.map(c => (
          <div key={c.id} className="card" style={{ cursor: "pointer" }}>
            <div className="card-body">
              <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 14 }}>
                <div style={{ width: 40, height: 40, borderRadius: 9, background: c.color || "var(--accent)", display: "grid", placeItems: "center", color: "oklch(0.18 0 0)", fontWeight: 700, fontSize: 14 }}>
                  {c.name.split(" ").slice(0, 2).map(w => w[0]).join("")}
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontWeight: 600, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{c.name}</div>
                  <div style={{ fontSize: 11, color: "var(--fg-2)" }}>{c.city}</div>
                  <div style={{ fontSize: 11, color: "var(--fg-2)" }}>{c.email}</div>
                </div>
              </div>
              <div style={{ display: "flex", gap: 8, paddingTop: 10, borderTop: "1px solid var(--line-soft)" }}>
                <button className="btn sm" style={{ flex: 1 }} onClick={() => setModal(c)}><Icon name="copy" size={12}/> {lang === "es" ? "Editar" : "Edit"}</button>
                <button className="btn sm danger" onClick={() => handleDelete(c)}><Icon name="trash" size={12}/></button>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

const Stat = ({ label, value, accent }) => (
  <div>
    <div style={{ fontSize: 10, color: "var(--fg-3)", textTransform: "uppercase", letterSpacing: 0.05, fontWeight: 600 }}>{label}</div>
    <div className="num" style={{ fontSize: 13, fontWeight: 600, marginTop: 2, color: accent ? "var(--amber)" : "var(--fg-0)" }}>{value}</div>
  </div>
);

const Catalog = ({ t, lang }) => {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
      <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
        <div className="search-input" style={{ flex: 1, maxWidth: 360 }}>
          <Icon name="search"/>
          <input className="input" placeholder={lang === "es" ? "Buscar servicios…" : "Search services…"}/>
        </div>
        <div style={{ marginLeft: "auto" }}>
          <button className="btn primary"><Icon name="plus" size={13}/> {lang === "es" ? "Nuevo servicio" : "New service"}</button>
        </div>
      </div>
      <div className="card" style={{ overflow: "hidden" }}>
        <table className="tbl">
          <thead>
            <tr>
              <th style={{ width: 140 }}>{lang === "es" ? "Código" : "Code"}</th>
              <th>{lang === "es" ? "Servicio" : "Service"}</th>
              <th style={{ width: 100 }}>{lang === "es" ? "Unidad" : "Unit"}</th>
              <th className="right" style={{ width: 120 }}>{t("rate")}</th>
              <th style={{ width: 36 }}></th>
            </tr>
          </thead>
          <tbody>
            {SERVICES.map(s => (
              <tr key={s.id} style={{ cursor: "default" }}>
                <td className="num" style={{ color: "var(--accent)", fontWeight: 500 }}>{s.code}</td>
                <td><span style={{ fontWeight: 500 }}>{s.name}</span></td>
                <td><span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--fg-1)" }}>{s.unit === "hr" ? (lang === "es" ? "hora" : "hour") : (lang === "es" ? "unidad" : "each")}</span></td>
                <td className="num right" style={{ fontWeight: 600 }}>{fmtMoney(s.rate)}{s.unit === "hr" ? "/hr" : ""}</td>
                <td><button className="btn ghost icon sm"><Icon name="more" size={14}/></button></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
};

// Mobile companion view — shows phone alongside desktop, demonstrating the responsive companion
const MobileCompanion = ({ t, lang }) => {
  const [tab, setTab] = React.useState("home");
  return (
    <div style={{ display: "flex", justifyContent: "center", alignItems: "flex-start", padding: "8px 0", gap: 32, flexWrap: "wrap" }}>
      <MobilePhone label={lang === "es" ? "Inicio" : "Home"} t={t} lang={lang} screen="home"/>
      <MobilePhone label={lang === "es" ? "Facturas" : "Invoices"} t={t} lang={lang} screen="list"/>
      <MobilePhone label={lang === "es" ? "Detalle" : "Detail"} t={t} lang={lang} screen="detail"/>
    </div>
  );
};

const MobilePhone = ({ label, t, lang, screen }) => (
  <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 10 }}>
    <div className="mobile-frame">
      <div className="mobile-status">
        <span>9:41</span>
        <span style={{ display: "flex", gap: 4 }}>●●● ▮▮▮ ▮▯</span>
      </div>
      {screen === "home" && <MobileHome t={t} lang={lang}/>}
      {screen === "list" && <MobileList t={t} lang={lang}/>}
      {screen === "detail" && <MobileDetail t={t} lang={lang}/>}
      <div className="mob-tab-bar">
        <div className={`mob-tab ${screen === "home" ? "active" : ""}`}><Icon name="dashboard" size={18}/>{t("dashboard")}</div>
        <div className={`mob-tab ${screen === "list" ? "active" : ""}`}><Icon name="invoice" size={18}/>{t("invoices")}</div>
        <div className="mob-tab"><Icon name="plus" size={18}/>{lang === "es" ? "Nuevo" : "New"}</div>
        <div className="mob-tab"><Icon name="users" size={18}/>{t("clients")}</div>
      </div>
    </div>
    <div style={{ fontSize: 11, color: "var(--fg-2)", fontFamily: "var(--font-mono)", textTransform: "uppercase", letterSpacing: 0.06 }}>{label}</div>
  </div>
);

const MobileHome = ({ t, lang }) => {
  const totalOutstanding = INVOICES.filter(i => i.status === "pending" || i.status === "overdue").reduce((s, i) => s + calcInvoiceTotal(i).total, 0);
  return (
    <div className="mob-content">
      <div className="mob-header" style={{ padding: 0, marginBottom: 16 }}>
        <h2 className="mob-h1">{lang === "es" ? "Hola, Andrés" : "Hi, Andrés"}</h2>
        <Icon name="bell" size={18} style={{ color: "var(--fg-1)" }}/>
      </div>
      <div className="mob-card" style={{ marginBottom: 12, background: "linear-gradient(135deg, oklch(from var(--accent) l c h / 0.18), var(--bg-1))", borderColor: "var(--accent-line)" }}>
        <div style={{ fontSize: 10.5, color: "var(--fg-2)", textTransform: "uppercase", letterSpacing: 0.06, fontWeight: 600 }}>{t("outstanding")}</div>
        <div style={{ fontSize: 28, fontWeight: 600, marginTop: 4, letterSpacing: -0.02, fontVariantNumeric: "tabular-nums" }}>{fmtMoney(totalOutstanding)}</div>
        <div style={{ fontSize: 11, color: "var(--accent)", marginTop: 2 }}>3 {lang === "es" ? "facturas abiertas" : "open invoices"}</div>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8, marginBottom: 16 }}>
        <button className="btn primary" style={{ height: 40 }}><Icon name="plus" size={14}/> {t("newInvoice")}</button>
        <button className="btn" style={{ height: 40 }}><Icon name="bolt" size={14}/> {lang === "es" ? "Tiempo" : "Log time"}</button>
      </div>
      <div style={{ fontSize: 10.5, color: "var(--fg-2)", textTransform: "uppercase", letterSpacing: 0.06, fontWeight: 600, marginBottom: 8 }}>{t("upcoming")}</div>
      {INVOICES.filter(i => i.status === "pending" || i.status === "overdue").slice(0, 3).map(inv => {
        const c = CLIENTS.find(c => c.id === inv.clientId);
        return (
          <div key={inv.id} className="mob-card" style={{ marginBottom: 8, padding: 12, display: "flex", alignItems: "center", gap: 10 }}>
            <div style={{ width: 8, height: 8, borderRadius: "50%", background: c.color }}/>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 12.5, fontWeight: 500, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{c.name}</div>
              <div style={{ fontSize: 10.5, color: "var(--fg-2)", fontFamily: "var(--font-mono)" }}>{inv.number}</div>
            </div>
            <div className="num" style={{ fontSize: 12, fontWeight: 600 }}>{fmtMoneyShort(calcInvoiceTotal(inv).total)}</div>
          </div>
        );
      })}
    </div>
  );
};

const MobileList = ({ t, lang }) => (
  <div className="mob-content">
    <h2 className="mob-h1" style={{ marginBottom: 14 }}>{t("invoices")}</h2>
    <div className="seg" style={{ marginBottom: 14, width: "100%", justifyContent: "stretch" }}>
      <button className="on" style={{ flex: 1 }}>{t("all")}</button>
      <button style={{ flex: 1 }}>{t("pending")}</button>
      <button style={{ flex: 1 }}>{t("paid")}</button>
    </div>
    {INVOICES.slice(0, 5).map(inv => {
      const c = CLIENTS.find(c => c.id === inv.clientId);
      return (
        <div key={inv.id} className="mob-card" style={{ marginBottom: 8, padding: 12 }}>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 6 }}>
            <span className="num" style={{ fontSize: 11, color: "var(--fg-2)" }}>{inv.number}</span>
            <StatusPill status={inv.status} t={t}/>
          </div>
          <div style={{ fontSize: 13, fontWeight: 500, marginBottom: 2 }}>{c.name}</div>
          <div style={{ fontSize: 11, color: "var(--fg-2)", marginBottom: 8 }}>{inv.project}</div>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
            <span style={{ fontSize: 11, color: "var(--fg-3)", fontFamily: "var(--font-mono)" }}>{t("due")} {inv.due}</span>
            <span className="num" style={{ fontSize: 14, fontWeight: 600 }}>{fmtMoney(calcInvoiceTotal(inv).total)}</span>
          </div>
        </div>
      );
    })}
  </div>
);

const MobileDetail = ({ t, lang }) => {
  const inv = INVOICES[0];
  const c = CLIENTS.find(c => c.id === inv.clientId);
  const totals = calcInvoiceTotal(inv);
  return (
    <div className="mob-content">
      <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 14 }}>
        <Icon name="arrowLeft" size={18}/>
        <span className="num" style={{ fontSize: 13, fontWeight: 500 }}>{inv.number}</span>
        <StatusPill status={inv.status} t={t}/>
      </div>
      <div style={{ fontSize: 28, fontWeight: 600, letterSpacing: -0.02, fontVariantNumeric: "tabular-nums" }}>{fmtMoney(totals.total)}</div>
      <div style={{ fontSize: 11.5, color: "var(--fg-2)", marginBottom: 16 }}>{t("due")} {inv.due}</div>

      <div className="mob-card" style={{ marginBottom: 12 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <div style={{ width: 32, height: 32, borderRadius: 7, background: c.color, display: "grid", placeItems: "center", color: "oklch(0.18 0 0)", fontWeight: 700, fontSize: 11 }}>
            {c.name.split(" ").slice(0, 2).map(w => w[0]).join("")}
          </div>
          <div>
            <div style={{ fontSize: 12.5, fontWeight: 500 }}>{c.name}</div>
            <div style={{ fontSize: 11, color: "var(--fg-2)" }}>{inv.project}</div>
          </div>
        </div>
      </div>

      <div style={{ fontSize: 10.5, color: "var(--fg-2)", textTransform: "uppercase", letterSpacing: 0.06, fontWeight: 600, marginBottom: 8 }}>{lang === "es" ? "Líneas" : "Items"}</div>
      {inv.items.map((it, i) => (
        <div key={i} style={{ padding: "8px 0", borderBottom: "1px solid var(--line-soft)" }}>
          <div style={{ display: "flex", justifyContent: "space-between", gap: 10 }}>
            <span style={{ fontSize: 12, flex: 1 }}>{it.desc}</span>
            <span className="num" style={{ fontSize: 12, fontWeight: 600 }}>{fmtMoney(it.qty * it.rate)}</span>
          </div>
          <div style={{ fontSize: 10.5, color: "var(--fg-3)", fontFamily: "var(--font-mono)" }}>{it.qty}{it.type === "hr" ? "h" : ""} × {fmtMoney(it.rate)}</div>
        </div>
      ))}

      <div style={{ display: "flex", gap: 8, marginTop: 16 }}>
        <button className="btn" style={{ flex: 1, height: 40 }}><Icon name="bell" size={14}/> {lang === "es" ? "Recordar" : "Remind"}</button>
        <button className="btn primary" style={{ flex: 1, height: 40 }}><Icon name="check" size={14}/> {t("markPaid")}</button>
      </div>
    </div>
  );
};

Object.assign(window, { Clients, Catalog, MobileCompanion });