/* ASIN Library — Catalogue centralisé de tous les produits KCC */

const STATUS_TONES = {
  stock:     "green",
  commande:  "blue",
  valide:    "amber",
  recherche: "muted",
  evaluer:   "muted",
};

const AsinLibrary = ({ onNavigate }) => {
  const [search, setSearch] = useState("");
  const [cat, setCat] = useState("all");
  const [owner, setOwner] = useState("all");
  const [sortBy, setSortBy] = useState("margin");
  const [sortDir, setSortDir] = useState("desc");
  const [, force] = useState(0);
  const toast = (window.useToast || (() => () => {}))();
  const trashHook = (window.useKCCTrash || (() => ({ items: [], send: async () => {} })))();

  const [newOpen, setNewOpen] = useState(false);
  const [draft, setDraft] = useState({ asin: "", name: "", status: "evaluer", brand: "" });

  const create = async () => {
    if (!draft.name?.trim() && !draft.asin?.trim()) return;
    const id = "p-" + Date.now().toString(36);
    const fresh = {
      id,
      asin: draft.asin.trim() || id.toUpperCase(),
      name: draft.name.trim() || draft.asin.trim() || "Nouveau produit",
      brand: draft.brand.trim() || "—",
      status: draft.status || "evaluer",
      cat: "—",
      owner: "clarens",
      price: 0, cost: 0, margin: 0, bsr: 0, stock: 0, vel: 0,
    };
    PRODUCTS.push(fresh);
    setNewOpen(false);
    setDraft({ asin: "", name: "", status: "evaluer", brand: "" });
    force(x => x + 1);
    try {
      await fetch("/api/sync", {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ col: "asins", items: [fresh] }),
      });
    } catch (_) {}
    toast?.({ message: `ASIN "${fresh.name}" ajouté`, tone: "green" });
  };

  const deleteProduct = async (target) => {
    if (!target) return;
    if (!window.confirm(`Mettre "${target.name}" à la corbeille ?`)) return;
    const idx = PRODUCTS.findIndex(p => p.id === target.id);
    if (idx >= 0) PRODUCTS.splice(idx, 1);
    await trashHook.send("asins", target);
    force(x => x + 1);
    toast?.({ message: `"${target.name}" → corbeille`, tone: "muted" });
  };

  const persistProduct = async (id, patch) => {
    const p = PRODUCTS.find(x => x.id === id);
    if (!p) return;
    Object.assign(p, patch);
    force(x => x + 1);
    try {
      await fetch("/api/sync", {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ col: "products", items: [{ ...p }] }),
      });
    } catch (_) {}
  };

  const categories = Array.from(new Set(PRODUCTS.map(p => p.cat)));

  const filtered = PRODUCTS
    .filter(p => cat === "all" || p.cat === cat)
    .filter(p => owner === "all" || p.owner === owner)
    .filter(p => !search || (p.name + " " + p.asin).toLowerCase().includes(search.toLowerCase()))
    .sort((a, b) => {
      const dir = sortDir === "asc" ? 1 : -1;
      const va = a[sortBy], vb = b[sortBy];
      if (typeof va === "number") return (va - vb) * dir;
      return String(va).localeCompare(String(vb)) * dir;
    });

  const toggleSort = (col) => {
    if (sortBy === col) setSortDir(sortDir === "asc" ? "desc" : "asc");
    else { setSortBy(col); setSortDir("desc"); }
  };

  const Header = ({ col, label, align }) => (
    <th
      onClick={() => toggleSort(col)}
      style={{ cursor: "pointer", textAlign: align || "left", userSelect: "none" }}
    >
      {label} {sortBy === col && (sortDir === "asc" ? "↑" : "↓")}
    </th>
  );

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="page-title">Bibliothèque ASIN</div>
          <div className="page-sub">
            {PRODUCTS.length} produits actifs · {categories.length} catégories · sourcé par les 3 cofondateurs
          </div>
        </div>
        <div className="row" style={{ gap: 6 }}>
          <button className="btn" data-variant="ghost"><Icon name="upload" size={12} /> Import CSV</button>
          <button className="btn" data-variant="primary" onClick={() => setNewOpen(true)}><Icon name="plus" size={12} /> Nouvel ASIN</button>
        </div>
      </div>

      {/* Filters bar */}
      <div className="card" style={{ padding: 10, marginBottom: 12 }}>
        <div className="row" style={{ gap: 8, flexWrap: "wrap" }}>
          <div className="input" style={{ flex: 1, minWidth: 220 }}>
            <Icon name="search" size={12} style={{ marginRight: 6, color: "var(--text-dim)" }} />
            <input
              value={search}
              onChange={(e) => setSearch(e.target.value)}
              placeholder="Chercher par nom ou ASIN…"
              style={{ flex: 1, background: "transparent", border: "none", outline: "none", color: "var(--text)" }}
            />
          </div>
          <select value={cat} onChange={(e) => setCat(e.target.value)} className="input" style={{ width: 180 }}>
            <option value="all">Toutes catégories</option>
            {categories.map(c => <option key={c} value={c}>{c}</option>)}
          </select>
          <select value={owner} onChange={(e) => setOwner(e.target.value)} className="input" style={{ width: 160 }}>
            <option value="all">Tous owners</option>
            {USERS.map(u => <option key={u.id} value={u.id}>{u.name}</option>)}
          </select>
          <div className="mono" style={{ alignSelf: "center", fontSize: 11.5, color: "var(--text-faint)" }}>
            {filtered.length} / {PRODUCTS.length} résultats
          </div>
        </div>
      </div>

      <div className="card" style={{ padding: 0, overflow: "auto" }}>
        <table className="table">
          <thead>
            <tr>
              <Header col="name" label="Produit" />
              <Header col="asin" label="ASIN" />
              <Header col="cat" label="Catégorie" />
              <Header col="price" label="Prix" align="right" />
              <Header col="margin" label="Marge %" align="right" />
              <Header col="bsr" label="BSR" align="right" />
              <Header col="stock" label="Stock" align="right" />
              <Header col="vel" label="Vél/j" align="right" />
              <Header col="status" label="Statut" />
              <Header col="owner" label="Owner" />
              <th></th>
            </tr>
          </thead>
          <tbody>
            {filtered.map(p => (
              <tr key={p.id}>
                <td style={{ maxWidth: 260 }}>
                  <EditableField value={p.name} onSave={(v) => persistProduct(p.id, { name: v })} width={240}/>
                </td>
                <td><Asin value={p.asin} /></td>
                <td className="muted" style={{ fontSize: 11.5 }}>
                  <EditableField value={p.cat} onSave={(v) => persistProduct(p.id, { cat: v })} width={120}/>
                </td>
                <td className="mono" style={{ textAlign: "right" }}>
                  <EditableField value={p.price} onSave={(v) => persistProduct(p.id, { price: Number(v) || 0 })} type="number" format={(v) => "$" + Number(v).toFixed(2)} width={80}/>
                </td>
                <td className="mono" style={{ textAlign: "right", color: p.margin >= 28 ? "var(--green)" : p.margin >= 22 ? "var(--text)" : "var(--red)", fontWeight: 600 }}>
                  <EditableField value={p.margin} onSave={(v) => persistProduct(p.id, { margin: Number(v) || 0 })} type="number" format={(v) => Number(v).toFixed(1) + "%"} width={70}/>
                </td>
                <td className="mono" style={{ textAlign: "right" }}>
                  <div className="row" style={{ gap: 6, justifyContent: "flex-end" }}>
                    <EditableField value={p.bsr} onSave={(v) => persistProduct(p.id, { bsr: Number(v) || 0 })} type="number" format={(v) => Number(v).toLocaleString()} width={90}/>
                    {window.KeepaCell && p.asin && <window.KeepaCell asin={p.asin} fields={[]} />}
                  </div>
                </td>
                <td className="mono" style={{ textAlign: "right", color: p.stock <= 15 ? "var(--red)" : p.stock <= 50 ? "var(--amber)" : "var(--text)" }}>
                  <EditableField value={p.stock} onSave={(v) => persistProduct(p.id, { stock: Number(v) || 0 })} type="number" width={60}/>
                </td>
                <td className="mono" style={{ textAlign: "right" }}>
                  <EditableField value={p.vel} onSave={(v) => persistProduct(p.id, { vel: Number(v) || 0 })} type="number" width={50}/>
                </td>
                <td>
                  <EditableField
                    value={p.status}
                    onSave={(v) => persistProduct(p.id, { status: v })}
                    options={[
                      { value: "evaluer", label: "À évaluer" },
                      { value: "recherche", label: "En recherche" },
                      { value: "valide", label: "Validé" },
                      { value: "commande", label: "Commandé" },
                      { value: "stock", label: "En stock" },
                    ]}
                    format={(v) => <Badge tone={STATUS_TONES[v] || "muted"} dot>{v}</Badge>}
                    width={110}
                  />
                </td>
                <td>
                  <EditableField
                    value={p.owner}
                    onSave={(v) => persistProduct(p.id, { owner: v })}
                    options={USERS.map(u => ({ value: u.id, label: u.name }))}
                    format={(v) => (
                      <span className="row" style={{ gap: 6 }}>
                        <Avatar user={v} size="sm" />
                        <span style={{ textTransform: "capitalize", fontSize: 12 }}>{v}</span>
                      </span>
                    )}
                    width={100}
                  />
                </td>
                <td>
                  <button
                    className="btn" data-variant="ghost" data-size="sm"
                    title="Mettre à la corbeille"
                    onClick={() => deleteProduct(p)}
                    style={{ color: "var(--red)" }}
                  >
                    <Icon name="x" size={11}/>
                  </button>
                </td>
              </tr>
            ))}
            {filtered.length === 0 && (
              <tr><td colSpan={11} style={{ textAlign: "center", padding: 30, color: "var(--text-faint)" }}>
                {PRODUCTS.length === 0 ? "Aucun ASIN — clique « + Nouvel ASIN » pour en ajouter un." : "Aucun résultat pour ces filtres"}
              </td></tr>
            )}
          </tbody>
        </table>
      </div>

      {newOpen && (
        <div onClick={() => setNewOpen(false)} style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.55)", zIndex: 9999, display: "grid", placeItems: "center" }}>
          <div className="card" onClick={(e) => e.stopPropagation()} style={{ width: 480, padding: 20 }}>
            <div style={{ fontSize: 15, fontWeight: 600, marginBottom: 14 }}>Nouvel ASIN</div>
            <div className="stack" style={{ gap: 10 }}>
              <div>
                <div style={{ fontSize: 11, color: "var(--text-dim)", marginBottom: 4 }}>ASIN</div>
                <div className="input" style={{ height: 32, padding: "0 10px" }}>
                  <input autoFocus value={draft.asin} onChange={(e) => setDraft(d => ({ ...d, asin: e.target.value }))} placeholder="B0XXXXXXX" style={{ flex: 1, background: "transparent", border: "none", outline: "none", color: "var(--text)", fontSize: 12.5 }}/>
                </div>
              </div>
              <div>
                <div style={{ fontSize: 11, color: "var(--text-dim)", marginBottom: 4 }}>Nom *</div>
                <div className="input" style={{ height: 32, padding: "0 10px" }}>
                  <input value={draft.name} onChange={(e) => setDraft(d => ({ ...d, name: e.target.value }))} placeholder="Nom du produit" style={{ flex: 1, background: "transparent", border: "none", outline: "none", color: "var(--text)", fontSize: 12.5 }}/>
                </div>
              </div>
              <div>
                <div style={{ fontSize: 11, color: "var(--text-dim)", marginBottom: 4 }}>Marque</div>
                <div className="input" style={{ height: 32, padding: "0 10px" }}>
                  <input value={draft.brand} onChange={(e) => setDraft(d => ({ ...d, brand: e.target.value }))} placeholder="Marque" style={{ flex: 1, background: "transparent", border: "none", outline: "none", color: "var(--text)", fontSize: 12.5 }}/>
                </div>
              </div>
              <div>
                <div style={{ fontSize: 11, color: "var(--text-dim)", marginBottom: 4 }}>Statut</div>
                <select value={draft.status} onChange={(e) => setDraft(d => ({ ...d, status: e.target.value }))} className="input" style={{ height: 32, width: "100%" }}>
                  <option value="evaluer">À évaluer</option>
                  <option value="recherche">En recherche</option>
                  <option value="valide">Validé</option>
                  <option value="commande">Commandé</option>
                  <option value="stock">En stock</option>
                </select>
              </div>
            </div>
            <div className="row" style={{ marginTop: 16, justifyContent: "flex-end", gap: 8 }}>
              <button className="btn" onClick={() => setNewOpen(false)}>Annuler</button>
              <button className="btn" data-variant="primary" onClick={create} disabled={!draft.name.trim() && !draft.asin.trim()}>Créer</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

window.AsinLibrary = AsinLibrary;