/* PLASTIFY · ADMIN — toate paginile.
   Foloseste state + update primite prin props din admin.jsx.
   Toate "save" actiunile = update(state) -> ADM.saveState (auto). */

const { useState, useMemo, useEffect } = React;
const ADM2 = window.PLASTIFY_ADMIN;

/* ---------- helpers ---------- */
function statusKey(s) {
  if (s === "Nou") return "nou";
  if (s === "În lucru") return "in-lucru";
  if (s === "Trimis ofertă") return "trimis";
  if (s === "Câștigat") return "castigat";
  return "refuzat";
}
function stocClass(s) {
  if (!s) return "comanda";
  if (s.toLowerCase().includes("stoc brașov")) return "ok";
  if (s.toLowerCase().includes("parțial") || s.toLowerCase().includes("partial")) return "partial";
  return "comanda";
}

/* ---------- 1. DASHBOARD ---------- */
function DashboardPage({ state, update }) {
  const newReqs = state.requests.filter(r => r.status === "Nou").length;
  const inProgress = state.requests.filter(r => r.status === "În lucru").length;
  const totalProducts = state.products.length;
  const recent = [...state.requests].sort((a, b) => b.id.localeCompare(a.id)).slice(0, 5);

  return (
    <div className="adm-page">
      <div className="adm-page-head">
        <div>
          <span className="eyebrow">Privire de ansamblu</span>
          <h1>Dashboard</h1>
          <p>Bună, {state.session?.user?.name || "Aron"}. Aici e situația acum:</p>
        </div>
        <div className="actions">
          <a href="#/cereri" className="adm-btn adm-btn-gold"><i data-lucide="inbox"></i> Vezi cereri noi</a>
        </div>
      </div>

      <div className="adm-stats">
        <div className="adm-stat-card">
          <div className="label">Cereri noi</div>
          <div className="num">{newReqs}</div>
          <div className="delta">+ 2 față de săptămâna trecută</div>
        </div>
        <div className="adm-stat-card">
          <div className="label">În lucru</div>
          <div className="num">{inProgress}</div>
          <div className="delta">+ 1 azi</div>
        </div>
        <div className="adm-stat-card">
          <div className="label">Produse active</div>
          <div className="num">{totalProducts}</div>
          <div className="delta">— neschimbat</div>
        </div>
        <div className="adm-stat-card">
          <div className="label">Vizitatori (estimare)</div>
          <div className="num">248</div>
          <div className="delta">+ 18%</div>
        </div>
      </div>

      <div className="adm-grid-2">
        <div className="adm-card">
          <div className="adm-card-head">
            <h2>Cereri recente</h2>
            <a href="#/cereri" className="adm-btn adm-btn-ghost adm-btn-sm">Vezi toate <i data-lucide="arrow-right"></i></a>
          </div>
          <div className="adm-card-body flush">
            {recent.map(r => (
              <div key={r.id}
                className={`adm-inbox-row ${r.status === "Nou" ? "unread" : ""}`}
                onClick={() => window.admNavigate(`#/cereri?id=${r.id}`)}>
                <span className="marker"></span>
                <div>
                  <div className="who">{r.nume} <span style={{ color: "var(--silver-700)", fontWeight: 400 }}>· {r.firma || "Persoană fizică"}</span></div>
                  <div className="meta">{r.id} · {(r.produse || []).join(", ")} · {r.cantitate}</div>
                </div>
                <span className={`adm-status ${statusKey(r.status)}`}><span className="dot"></span>{r.status}</span>
                <span className="when">{r.date.split(" ")[0]}</span>
              </div>
            ))}
          </div>
        </div>

        <div className="adm-card">
          <div className="adm-card-head"><h2>Acțiuni rapide</h2></div>
          <div className="adm-card-body">
            <div className="adm-quick" style={{ flexDirection: "column" }}>
              <a href="#/produse?new=1">
                <span className="icon"><i data-lucide="package-plus"></i></span>
                <div>
                  <div className="title">Adaugă produs</div>
                  <div className="sub">Adaugă o nouă referință în catalog</div>
                </div>
              </a>
              <a href="#/continut">
                <span className="icon"><i data-lucide="edit-3"></i></span>
                <div>
                  <div className="title">Editează texte landing</div>
                  <div className="sub">Schimbă headline, eyebrow, stats</div>
                </div>
              </a>
              <a href="#/contact">
                <span className="icon"><i data-lucide="phone"></i></span>
                <div>
                  <div className="title">Actualizează contact</div>
                  <div className="sub">Telefon, email, program, adresă</div>
                </div>
              </a>
              <a href="https://plastify-a1.pages.dev/" target="_blank" rel="noopener">
                <span className="icon"><i data-lucide="external-link"></i></span>
                <div>
                  <div className="title">Vezi site-ul live →</div>
                  <div className="sub">Deschide variantele publice</div>
                </div>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---------- 2. CERERI OFERTĂ (Inbox) ---------- */
function CereriPage({ state, update, router }) {
  const [filterStatus, setFilterStatus] = useState("Toate");
  const [search, setSearch] = useState("");
  const [openId, setOpenId] = useState(null);

  // open via ?id=...
  useEffect(() => {
    const m = (router.clean || "").match(/\?id=([^&]+)/);
    if (m) setOpenId(decodeURIComponent(m[1]));
  }, [router.clean]);

  const filtered = useMemo(() => {
    return state.requests.filter(r => {
      if (filterStatus !== "Toate" && r.status !== filterStatus) return false;
      if (search) {
        const s = search.toLowerCase();
        if (!(r.nume + " " + r.firma + " " + r.id + " " + (r.produse || []).join(" ")).toLowerCase().includes(s)) return false;
      }
      return true;
    });
  }, [state.requests, filterStatus, search]);

  const open = state.requests.find(r => r.id === openId);

  const setStatus = (id, status) => {
    update(s => ({ ...s, requests: s.requests.map(r => r.id === id ? { ...r, status } : r) }));
    window.toast("Status actualizat ✓");
  };

  return (
    <div className="adm-page">
      <div className="adm-page-head">
        <div>
          <span className="eyebrow">Inbox</span>
          <h1>Cereri ofertă</h1>
          <p>Toate cererile primite prin formular. Click pe o cerere pentru detalii.</p>
        </div>
        <div className="actions">
          <button className="adm-btn adm-btn-ghost"><i data-lucide="download"></i> Export CSV</button>
        </div>
      </div>

      <div className="adm-card">
        <div className="adm-toolbar">
          <div className="adm-search">
            <i data-lucide="search"></i>
            <input placeholder="Caută după nume, firmă, ID..." value={search} onChange={e => setSearch(e.target.value)} />
          </div>
          <div className="adm-chips">
            {["Toate", ...ADM2.REQUEST_STATUSES].map(s =>
              <button key={s} className={`adm-chip ${filterStatus === s ? "active" : ""}`} onClick={() => setFilterStatus(s)}>{s}</button>)}
          </div>
        </div>
        <div className="adm-table-wrap">
          <table className="adm-table">
            <thead>
              <tr>
                <th>ID</th><th>Client</th><th>Material</th><th>Cantitate</th><th>Status</th><th>Primită</th><th></th>
              </tr>
            </thead>
            <tbody>
              {filtered.map(r => (
                <tr key={r.id} onClick={() => setOpenId(r.id)}>
                  <td className="row-mono">{r.id}{r.urgent ? <span className="adm-tag" style={{ marginLeft: 6, color: "#B3261E", borderColor: "#FBC4C0" }}>URGENT</span> : null}</td>
                  <td>
                    <div className="row-name">{r.nume}</div>
                    <div className="row-mono">{r.firma || r.tip}</div>
                  </td>
                  <td>{(r.produse || []).join(", ")}</td>
                  <td className="row-mono">{r.cantitate}</td>
                  <td><span className={`adm-status ${statusKey(r.status)}`}><span className="dot"></span>{r.status}</span></td>
                  <td className="row-mono">{r.date}</td>
                  <td><i data-lucide="chevron-right" style={{ width: 14, height: 14, color: "var(--silver-700)" }}></i></td>
                </tr>
              ))}
            </tbody>
          </table>
          {filtered.length === 0 && (
            <div className="adm-empty"><i data-lucide="inbox"></i><h3>Nicio cerere</h3><p>Nu există cereri care să corespundă filtrelor.</p></div>
          )}
        </div>
      </div>

      {/* Drawer detalii */}
      <div className={`adm-drawer-overlay ${open ? "open" : ""}`} onClick={() => setOpenId(null)}></div>
      <aside className={`adm-drawer ${open ? "open" : ""}`}>
        {open && (<>
          <div className="adm-drawer-head">
            <div>
              <span className="eyebrow">{open.id}</span>
              <h3>Cerere ofertă</h3>
            </div>
            <button className="adm-drawer-close" onClick={() => setOpenId(null)}><i data-lucide="x"></i></button>
          </div>
          <div className="adm-drawer-body">
            <div className="adm-flex-between" style={{ marginBottom: 24 }}>
              <span className={`adm-status ${statusKey(open.status)}`}><span className="dot"></span>{open.status}</span>
              <select className="adm-field" style={{ width: "auto" }} value={open.status} onChange={e => setStatus(open.id, e.target.value)}>
                {ADM2.REQUEST_STATUSES.map(s => <option key={s} value={s}>{s}</option>)}
              </select>
            </div>

            <div className="adm-section-h">Client</div>
            <div className="adm-row">
              <div><div className="adm-field-label">Nume</div><div>{open.nume}</div></div>
              <div><div className="adm-field-label">Tip</div><div>{open.tip}{open.firma ? ` · ${open.firma}` : ""}</div></div>
            </div>
            {open.cui && <div className="adm-mono" style={{ marginTop: 8 }}>CUI: {open.cui}</div>}
            <div className="adm-row" style={{ marginTop: 16 }}>
              <div><div className="adm-field-label">Email</div><div><a href={`mailto:${open.email}`}>{open.email}</a></div></div>
              <div><div className="adm-field-label">Telefon</div><div className="adm-mono">{open.telefon}</div></div>
            </div>
            <div className="adm-field-label" style={{ marginTop: 16 }}>Localitate</div>
            <div>{open.localitate}</div>

            <div className="adm-section-h" style={{ marginTop: 32 }}>Material cerut</div>
            <div className="adm-row-3">
              <div><div className="adm-field-label">Categorii</div><div>{(open.produse || []).join(", ")}</div></div>
              <div><div className="adm-field-label">Cantitate</div><div className="adm-mono">{open.cantitate}</div></div>
              <div><div className="adm-field-label">Grosime</div><div className="adm-mono">{open.grosime}</div></div>
            </div>
            <div className="adm-field-label" style={{ marginTop: 16 }}>Dimensiuni</div>
            <div className="adm-mono">{open.dim}</div>
            {open.finisare && open.finisare.length > 0 && (<>
              <div className="adm-field-label" style={{ marginTop: 16 }}>Finisare</div>
              <div className="adm-chips">{open.finisare.map((f, i) => <span key={i} className="adm-chip active">{f}</span>)}</div>
            </>)}

            <div className="adm-section-h" style={{ marginTop: 32 }}>Mesaj</div>
            <p style={{ background: "var(--bg-soft)", padding: 16, borderRadius: 2, lineHeight: 1.55 }}>{open.mesaj}</p>

            <div className="adm-section-h" style={{ marginTop: 24 }}>Livrare</div>
            <div>{open.livrare}{open.urgent ? " · URGENT" : ""}</div>
          </div>
          <div className="adm-drawer-foot">
            <a className="adm-btn adm-btn-ghost" href={`mailto:${open.email}?subject=Ofertă pentru cererea ${open.id}`}>
              <i data-lucide="mail"></i> Răspunde prin email
            </a>
            <button className="adm-btn adm-btn-gold" onClick={() => { setStatus(open.id, "Trimis ofertă"); }}>
              <i data-lucide="check"></i> Marchează "Trimis ofertă"
            </button>
          </div>
        </>)}
      </aside>
    </div>
  );
}

/* ---------- 3. PRODUSE ---------- */
function ProduseEditor({ product, onSave, onClose, isNew }) {
  const [p, setP] = useState(product);
  const set = (k, v) => setP(prev => ({ ...prev, [k]: v }));
  const save = () => {
    if (!p.name) { window.toast("Numele e obligatoriu"); return; }
    if (!p.slug) p.slug = (p.name || "produs").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
    onSave(p);
  };
  return (
    <aside className={`adm-drawer ${p ? "open" : ""}`}>
      <div className="adm-drawer-head">
        <div>
          <span className="eyebrow">{isNew ? "Adaugă produs" : "Editează produs"}</span>
          <h3>{p.name || "Produs nou"}</h3>
        </div>
        <button className="adm-drawer-close" onClick={onClose}><i data-lucide="x"></i></button>
      </div>
      <div className="adm-drawer-body">
        <div className="adm-section-h">Bazic</div>
        <div className="adm-field-group">
          <label className="adm-field-label">Nume produs</label>
          <input className="adm-field" value={p.name || ""} onChange={e => set("name", e.target.value)} />
        </div>
        <div className="adm-field-group">
          <label className="adm-field-label">Nume scurt (Audiowide)</label>
          <input className="adm-field" value={p.short || ""} onChange={e => set("short", e.target.value)} />
        </div>
        <div className="adm-row">
          <div className="adm-field-group">
            <label className="adm-field-label">Categorie</label>
            <select className="adm-field" value={p.cat || "Plăci"} onChange={e => set("cat", e.target.value)}>
              <option>Plăci</option><option>Accesorii</option><option>Signage</option>
            </select>
          </div>
          <div className="adm-field-group">
            <label className="adm-field-label">Sub-categorie</label>
            <input className="adm-field" value={p.subcat || ""} onChange={e => set("subcat", e.target.value)} />
          </div>
        </div>

        <div className="adm-section-h">Specificații</div>
        <div className="adm-field-group">
          <label className="adm-field-label">Spec scurtă (apare pe card)</label>
          <input className="adm-field" value={p.spec || ""} onChange={e => set("spec", e.target.value)} placeholder="ex. 4 mm · 2050 × 1250" />
        </div>
        <div className="adm-row-3">
          <div className="adm-field-group">
            <label className="adm-field-label">Grosime</label>
            <input className="adm-field" value={p.grosime || ""} onChange={e => set("grosime", e.target.value)} />
          </div>
          <div className="adm-field-group">
            <label className="adm-field-label">Culoare</label>
            <input className="adm-field" value={p.culoare || ""} onChange={e => set("culoare", e.target.value)} />
          </div>
          <div className="adm-field-group">
            <label className="adm-field-label">Greutate</label>
            <input className="adm-field" value={p.greutate || ""} onChange={e => set("greutate", e.target.value)} />
          </div>
        </div>
        <div className="adm-field-group">
          <label className="adm-field-label">Dimensiuni</label>
          <input className="adm-field" value={p.dim || ""} onChange={e => set("dim", e.target.value)} />
        </div>

        <div className="adm-section-h">Preț & stoc</div>
        <div className="adm-row">
          <div className="adm-field-group">
            <label className="adm-field-label">Preț afișat</label>
            <input className="adm-field" value={p.price || ""} onChange={e => set("price", e.target.value)} placeholder="ex. de la 4,20 lei" />
          </div>
          <div className="adm-field-group">
            <label className="adm-field-label">Stoc</label>
            <select className="adm-field" value={p.stoc || ""} onChange={e => set("stoc", e.target.value)}>
              <option value="Stoc Brașov">Stoc Brașov</option>
              <option value="Stoc parțial Brașov">Stoc parțial Brașov</option>
              <option value="Disponibil pe comandă">Disponibil pe comandă</option>
              <option value="Indisponibil">Indisponibil</option>
            </select>
          </div>
        </div>

        <div className="adm-section-h">Descriere & aplicații</div>
        <div className="adm-field-group">
          <label className="adm-field-label">Descriere</label>
          <textarea className="adm-field" value={p.desc || ""} onChange={e => set("desc", e.target.value)}></textarea>
        </div>
        <div className="adm-field-group">
          <label className="adm-field-label">Aplicații (separate prin virgulă)</label>
          <input className="adm-field" value={(p.apl || []).join(", ")} onChange={e => set("apl", e.target.value.split(",").map(x => x.trim()).filter(Boolean))} />
        </div>

        <div className="adm-section-h">Imagine</div>
        <div className="adm-flex" style={{ alignItems: "flex-start" }}>
          <div className="adm-table" style={{ width: 120, height: 120, border: "1px solid var(--line-1)", display: "grid", placeItems: "center", background: "var(--bg-soft)" }}>
            {p.img ? <img src={p.img} alt="" style={{ maxWidth: "80%", maxHeight: "80%" }} /> : <i data-lucide="image" style={{ width: 24, height: 24, color: "var(--silver-500)" }}></i>}
          </div>
          <div style={{ flex: 1 }}>
            <input className="adm-field" value={p.img || ""} onChange={e => set("img", e.target.value)} placeholder="../assets/products/sheet-1.png" />
            <div className="adm-field-help">În producție, aici va fi un upload zone. Pentru demo, paste calea către imagine.</div>
          </div>
        </div>
      </div>
      <div className="adm-drawer-foot">
        <button className="adm-btn adm-btn-ghost" onClick={onClose}>Anulează</button>
        <button className="adm-btn adm-btn-gold" onClick={save}><i data-lucide="check"></i> Salvează produs</button>
      </div>
    </aside>
  );
}

function ProdusePage({ state, update, router }) {
  const [editing, setEditing] = useState(null); // product or "new"
  const [search, setSearch] = useState("");
  const [filterCat, setFilterCat] = useState("Toate");

  useEffect(() => {
    if ((router.clean || "").includes("?new=1")) {
      setEditing({ id: "", name: "", cat: "Plăci", subcat: "", img: "../assets/products/sheet-1.png", spec: "", price: "preț la cerere", stoc: "Disponibil pe comandă", desc: "", apl: [], gallery: [] });
    }
  }, [router.clean]);

  const filtered = state.products.filter(p => {
    if (filterCat !== "Toate" && p.cat !== filterCat) return false;
    if (search && !(p.name + " " + p.subcat).toLowerCase().includes(search.toLowerCase())) return false;
    return true;
  });

  const onSave = (p) => {
    update(s => {
      const exists = s.products.find(x => x.id === p.id);
      if (exists) {
        return { ...s, products: s.products.map(x => x.id === p.id ? p : x) };
      }
      const id = p.slug || ((p.name || "produs").toLowerCase().replace(/[^a-z0-9]+/g, "-") + "-" + Date.now().toString(36).slice(-4));
      return { ...s, products: [{ ...p, id, slug: id }, ...s.products] };
    });
    window.toast("Produs salvat ✓");
    setEditing(null);
  };
  const onDelete = (p) => {
    if (!confirm(`Șterge "${p.name}"?`)) return;
    update(s => ({ ...s, products: s.products.filter(x => x.id !== p.id) }));
    window.toast("Produs șters");
  };
  const onDuplicate = (p) => {
    const copy = { ...p, id: p.id + "-copy-" + Date.now().toString(36).slice(-4), slug: p.slug + "-copy", name: p.name + " (copie)" };
    update(s => ({ ...s, products: [copy, ...s.products] }));
    window.toast("Produs duplicat ✓");
  };

  return (
    <div className="adm-page">
      <div className="adm-page-head">
        <div>
          <span className="eyebrow">Catalog</span>
          <h1>Produse</h1>
          <p>{state.products.length} referințe în catalog. Adaugă, editează, șterge.</p>
        </div>
        <div className="actions">
          <button className="adm-btn adm-btn-gold" onClick={() => setEditing({ id: "", name: "", cat: "Plăci", subcat: "", img: "../assets/products/sheet-1.png", spec: "", price: "preț la cerere", stoc: "Disponibil pe comandă", desc: "", apl: [], gallery: [] })}>
            <i data-lucide="plus"></i> Adaugă produs
          </button>
        </div>
      </div>

      <div className="adm-card">
        <div className="adm-toolbar">
          <div className="adm-search">
            <i data-lucide="search"></i>
            <input placeholder="Caută produs..." value={search} onChange={e => setSearch(e.target.value)} />
          </div>
          <div className="adm-chips">
            {["Toate", "Plăci", "Accesorii", "Signage"].map(c =>
              <button key={c} className={`adm-chip ${filterCat === c ? "active" : ""}`} onClick={() => setFilterCat(c)}>{c}</button>)}
          </div>
        </div>
        <div className="adm-table-wrap">
          <table className="adm-table">
            <thead>
              <tr>
                <th></th><th>Nume</th><th>Categorie</th><th>Specs</th><th>Preț</th><th>Stoc</th><th></th>
              </tr>
            </thead>
            <tbody>
              {filtered.map(p => (
                <tr key={p.id}>
                  <td><div className="img-thumb"><img src={p.img} alt="" /></div></td>
                  <td>
                    <div className="row-name">{p.name}</div>
                    <div className="row-mono">{p.subcat}</div>
                  </td>
                  <td><span className="adm-tag">{p.cat}</span></td>
                  <td className="row-mono">{p.spec}</td>
                  <td className="row-mono">{p.price}</td>
                  <td><span className={`adm-stoc ${stocClass(p.stoc)}`}>{p.stoc}</span></td>
                  <td>
                    <div className="adm-flex" style={{ gap: 4 }}>
                      <button className="adm-btn adm-btn-ghost adm-btn-sm" onClick={() => setEditing(p)}><i data-lucide="pencil"></i></button>
                      <button className="adm-btn adm-btn-ghost adm-btn-sm" onClick={() => onDuplicate(p)}><i data-lucide="copy"></i></button>
                      <button className="adm-btn adm-btn-danger adm-btn-sm" onClick={() => onDelete(p)}><i data-lucide="trash-2"></i></button>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
          {filtered.length === 0 && <div className="adm-empty"><i data-lucide="package"></i><h3>Niciun produs</h3><p>Modifică filtrele sau adaugă unul nou.</p></div>}
        </div>
      </div>

      <div className={`adm-drawer-overlay ${editing ? "open" : ""}`} onClick={() => setEditing(null)}></div>
      {editing && <ProduseEditor product={editing} onSave={onSave} onClose={() => setEditing(null)} isNew={!editing.id} />}
    </div>
  );
}

/* ---------- 4. CATEGORII ---------- */
function CategoriiPage({ state, update }) {
  const setCats = (cats) => update(s => ({ ...s, categories: cats }));
  const setFilters = (filters) => update(s => ({ ...s, filters }));

  const move = (i, dir) => {
    const arr = [...state.categories];
    const j = i + dir;
    if (j < 0 || j >= arr.length) return;
    [arr[i], arr[j]] = [arr[j], arr[i]];
    setCats(arr);
    window.toast("Reordonat ✓");
  };
  const updateNume = (i, val) => {
    const arr = state.categories.map((c, k) => k === i ? { ...c, nume: val } : c);
    setCats(arr);
  };
  const updateSubs = (i, val) => {
    const arr = state.categories.map((c, k) => k === i ? { ...c, subcategorii: val.split(",").map(x => x.trim()).filter(Boolean) } : c);
    setCats(arr);
  };
  const setFilter = (key, val) => {
    setFilters({ ...state.filters, [key]: val.split(",").map(x => x.trim()).filter(Boolean) });
  };

  return (
    <div className="adm-page">
      <div className="adm-page-head">
        <div>
          <span className="eyebrow">Catalog</span>
          <h1>Categorii & filtre</h1>
          <p>Organizează catalogul. Reorganizează categoriile, modifică sub-categoriile și filtrele.</p>
        </div>
        <button className="adm-btn adm-btn-gold" onClick={() => { window.toast("Salvat ✓"); }}><i data-lucide="check"></i> Salvează tot</button>
      </div>

      <div className="adm-section-h">Categorii principale</div>
      {state.categories.map((c, i) => (
        <div className="adm-cat-card" key={i}>
          <div className="handle" title="Reordonează">⋮⋮</div>
          <div>
            <input
              className="adm-field"
              style={{ fontFamily: "var(--font-display)", fontSize: 22, padding: 4, textTransform: "uppercase", border: 0, background: "transparent" }}
              value={c.nume}
              onChange={e => updateNume(i, e.target.value)}
            />
            <div className="meta">{c.count} produse · {c.subcategorii.length} sub-categorii</div>
            <div className="adm-field-label" style={{ marginTop: 12 }}>Sub-categorii (separate prin virgulă)</div>
            <input className="adm-field" value={c.subcategorii.join(", ")} onChange={e => updateSubs(i, e.target.value)} />
          </div>
          <div className="adm-flex" style={{ flexDirection: "column", gap: 4 }}>
            <button className="adm-btn adm-btn-ghost adm-btn-sm" onClick={() => move(i, -1)}><i data-lucide="arrow-up"></i></button>
            <button className="adm-btn adm-btn-ghost adm-btn-sm" onClick={() => move(i, 1)}><i data-lucide="arrow-down"></i></button>
          </div>
        </div>
      ))}

      <div className="adm-hr"></div>
      <div className="adm-section-h">Filtre globale</div>
      <div className="adm-grid-2">
        <div className="adm-card">
          <div className="adm-card-head"><h2>Grosimi disponibile</h2></div>
          <div className="adm-card-body">
            <input className="adm-field" value={state.filters.grosimi.join(", ")} onChange={e => setFilter("grosimi", e.target.value)} />
            <div className="adm-field-help">Apar ca filtre pe pagina /materiale</div>
            <div className="adm-chips" style={{ marginTop: 12 }}>
              {state.filters.grosimi.map(g => <span key={g} className="adm-chip">{g}</span>)}
            </div>
          </div>
        </div>
        <div className="adm-card">
          <div className="adm-card-head"><h2>Culori disponibile</h2></div>
          <div className="adm-card-body">
            <input className="adm-field" value={state.filters.culori.join(", ")} onChange={e => setFilter("culori", e.target.value)} />
            <div className="adm-field-help">Apar ca filtre pe pagina /materiale</div>
            <div className="adm-chips" style={{ marginTop: 12 }}>
              {state.filters.culori.map(g => <span key={g} className="adm-chip">{g}</span>)}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---------- 5. CONȚINUT SITE ---------- */
function ContinutPage({ state, update }) {
  const [variant, setVariant] = useState("A1");
  const c = state.content[variant] || {};
  const setField = (path, val) => {
    update(s => {
      const next = JSON.parse(JSON.stringify(s.content));
      const parts = path.split(".");
      let ref = next[variant];
      for (let i = 0; i < parts.length - 1; i++) ref = ref[parts[i]];
      ref[parts[parts.length - 1]] = val;
      return { ...s, content: next };
    });
  };
  const setStat = (i, k, v) => {
    update(s => {
      const next = JSON.parse(JSON.stringify(s.content));
      next.A1.stats[i][k] = v;
      return { ...s, content: next };
    });
  };

  return (
    <div className="adm-page">
      <div className="adm-page-head">
        <div>
          <span className="eyebrow">Conținut</span>
          <h1>Conținut site</h1>
          <p>Editează headline-uri, eyebrow-uri, subtitluri și stats per varianta de pagina Acasă.</p>
        </div>
        <button className="adm-btn adm-btn-gold" onClick={() => window.toast("Texte salvate ✓")}><i data-lucide="check"></i> Salvează</button>
      </div>

      <div className="adm-tabs">
        {["A1", "A2", "A3"].map(v => (
          <button key={v} className={variant === v ? "active" : ""} onClick={() => setVariant(v)}>Variant {v}</button>
        ))}
      </div>

      {variant === "A1" && c.hero && (
        <div className="adm-card" style={{ marginBottom: 16 }}>
          <div className="adm-card-head"><h2>Hero — Acasă A1</h2></div>
          <div className="adm-card-body">
            <div className="adm-field-group">
              <label className="adm-field-label">Eyebrow</label>
              <input className="adm-field" value={c.hero.eyebrow} onChange={e => setField("hero.eyebrow", e.target.value)} />
            </div>
            <div className="adm-row">
              <div className="adm-field-group">
                <label className="adm-field-label">Headline (rândul 1)</label>
                <input className="adm-field" value={c.hero.headline_1} onChange={e => setField("hero.headline_1", e.target.value)} />
              </div>
              <div className="adm-field-group">
                <label className="adm-field-label">Cuvânt accent gold</label>
                <input className="adm-field" value={c.hero.headline_2} onChange={e => setField("hero.headline_2", e.target.value)} />
              </div>
            </div>
            <div className="adm-field-group">
              <label className="adm-field-label">Subtitlu</label>
              <textarea className="adm-field" value={c.hero.subtitle} onChange={e => setField("hero.subtitle", e.target.value)}></textarea>
            </div>
          </div>
        </div>
      )}

      {variant === "A1" && c.stats && (
        <div className="adm-card" style={{ marginBottom: 16 }}>
          <div className="adm-card-head"><h2>Stats — 4 numere sub hero</h2></div>
          <div className="adm-card-body">
            {c.stats.map((s, i) => (
              <div className="adm-row" key={i} style={{ marginBottom: 12 }}>
                <div className="adm-field-group" style={{ marginBottom: 0 }}>
                  <label className="adm-field-label">Număr / valoare</label>
                  <input className="adm-field" value={s.num} onChange={e => setStat(i, "num", e.target.value)} />
                </div>
                <div className="adm-field-group" style={{ marginBottom: 0 }}>
                  <label className="adm-field-label">Etichetă</label>
                  <input className="adm-field" value={s.label} onChange={e => setStat(i, "label", e.target.value)} />
                </div>
              </div>
            ))}
          </div>
        </div>
      )}

      {variant === "A1" && c.cta_strip && (
        <div className="adm-card">
          <div className="adm-card-head"><h2>CTA strip de jos</h2></div>
          <div className="adm-card-body">
            <div className="adm-row">
              <div className="adm-field-group" style={{ marginBottom: 0 }}>
                <label className="adm-field-label">Eyebrow</label>
                <input className="adm-field" value={c.cta_strip.eyebrow} onChange={e => setField("cta_strip.eyebrow", e.target.value)} />
              </div>
              <div className="adm-field-group" style={{ marginBottom: 0 }}>
                <label className="adm-field-label">Titlu</label>
                <input className="adm-field" value={c.cta_strip.titlu} onChange={e => setField("cta_strip.titlu", e.target.value)} />
              </div>
            </div>
          </div>
        </div>
      )}

      {variant === "A2" && c.hero && (
        <div className="adm-card" style={{ marginBottom: 16 }}>
          <div className="adm-card-head"><h2>Hero editorial — A2</h2></div>
          <div className="adm-card-body">
            <div className="adm-field-group">
              <label className="adm-field-label">Eyebrow</label>
              <input className="adm-field" value={c.hero.eyebrow} onChange={e => setField("hero.eyebrow", e.target.value)} />
            </div>
            <div className="adm-row">
              <div className="adm-field-group">
                <label className="adm-field-label">Display rândul 1 (silver)</label>
                <input className="adm-field" value={c.hero.line1} onChange={e => setField("hero.line1", e.target.value)} />
              </div>
              <div className="adm-field-group">
                <label className="adm-field-label">Display rândul 2 (gold)</label>
                <input className="adm-field" value={c.hero.line2} onChange={e => setField("hero.line2", e.target.value)} />
              </div>
            </div>
            <div className="adm-field-group">
              <label className="adm-field-label">Lead paragraph</label>
              <textarea className="adm-field" value={c.hero.lead} onChange={e => setField("hero.lead", e.target.value)}></textarea>
            </div>
          </div>
        </div>
      )}

      {variant === "A2" && c.cta && (
        <div className="adm-card">
          <div className="adm-card-head"><h2>CTA gold full-bleed</h2></div>
          <div className="adm-card-body">
            <div className="adm-row">
              <div className="adm-field-group" style={{ marginBottom: 0 }}>
                <label className="adm-field-label">Titlu rând 1</label>
                <input className="adm-field" value={c.cta.titlu_l1} onChange={e => setField("cta.titlu_l1", e.target.value)} />
              </div>
              <div className="adm-field-group" style={{ marginBottom: 0 }}>
                <label className="adm-field-label">Titlu rând 2</label>
                <input className="adm-field" value={c.cta.titlu_l2} onChange={e => setField("cta.titlu_l2", e.target.value)} />
              </div>
            </div>
          </div>
        </div>
      )}

      {variant === "A3" && c.hero && (
        <div className="adm-card">
          <div className="adm-card-head"><h2>Hero split — A3</h2></div>
          <div className="adm-card-body">
            <div className="adm-field-group">
              <label className="adm-field-label">Eyebrow</label>
              <input className="adm-field" value={c.hero.eyebrow} onChange={e => setField("hero.eyebrow", e.target.value)} />
            </div>
            <div className="adm-row">
              <div className="adm-field-group">
                <label className="adm-field-label">Headline</label>
                <input className="adm-field" value={c.hero.headline} onChange={e => setField("hero.headline", e.target.value)} />
              </div>
              <div className="adm-field-group">
                <label className="adm-field-label">Accent gold</label>
                <input className="adm-field" value={c.hero.headline_accent} onChange={e => setField("hero.headline_accent", e.target.value)} />
              </div>
            </div>
            <div className="adm-field-group">
              <label className="adm-field-label">Lead paragraph</label>
              <textarea className="adm-field" value={c.hero.lead} onChange={e => setField("hero.lead", e.target.value)}></textarea>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

/* ---------- 6. PARTENERI ---------- */
function ParteneriPage({ state, update }) {
  const setName = (i, v) => update(s => ({ ...s, partners: s.partners.map((n, k) => k === i ? v : n) }));
  const remove = (i) => update(s => ({ ...s, partners: s.partners.filter((_, k) => k !== i) }));
  const move = (i, dir) => update(s => {
    const arr = [...s.partners]; const j = i + dir;
    if (j < 0 || j >= arr.length) return s;
    [arr[i], arr[j]] = [arr[j], arr[i]];
    return { ...s, partners: arr };
  });
  const add = () => update(s => ({ ...s, partners: [...s.partners, "Partener nou"] }));

  return (
    <div className="adm-page">
      <div className="adm-page-head">
        <div>
          <span className="eyebrow">Conținut</span>
          <h1>Parteneri</h1>
          <p>{state.partners.length} parteneri afișați în strip-ul "Colaborăm cu" de pe Acasă.</p>
        </div>
        <button className="adm-btn adm-btn-gold" onClick={add}><i data-lucide="plus"></i> Adaugă partener</button>
      </div>
      <div className="adm-partners">
        {state.partners.map((n, i) => (
          <div className="adm-partner-card" key={i}>
            <div className="logo">LOGO</div>
            <input value={n} onChange={e => setName(i, e.target.value)} />
            <div className="adm-flex" style={{ gap: 4 }}>
              <button className="rm" onClick={() => move(i, -1)} title="Sus"><i data-lucide="arrow-up" style={{ width: 14, height: 14 }}></i></button>
              <button className="rm" onClick={() => move(i, 1)} title="Jos"><i data-lucide="arrow-down" style={{ width: 14, height: 14 }}></i></button>
              <button className="rm" onClick={() => remove(i)} title="Șterge"><i data-lucide="trash-2" style={{ width: 14, height: 14 }}></i></button>
            </div>
          </div>
        ))}
      </div>
      <div className="adm-spacer"></div>
      <button className="adm-btn adm-btn-gold" onClick={() => window.toast("Parteneri salvați ✓")}><i data-lucide="check"></i> Salvează</button>
    </div>
  );
}

/* ---------- 7. CONTACT ---------- */
function ContactPage({ state, update }) {
  const c = state.contact;
  const set = (k, v) => update(s => ({ ...s, contact: { ...s.contact, [k]: v } }));
  const setProgram = (i, k, v) => update(s => ({
    ...s, contact: { ...s.contact, program: s.contact.program.map((p, j) => j === i ? { ...p, [k]: v } : p) }
  }));

  return (
    <div className="adm-page">
      <div className="adm-page-head">
        <div>
          <span className="eyebrow">Conținut</span>
          <h1>Contact</h1>
          <p>Datele apar în pagina /contact, footer și drawer mobile.</p>
        </div>
        <button className="adm-btn adm-btn-gold" onClick={() => window.toast("Contact salvat ✓")}><i data-lucide="check"></i> Salvează</button>
      </div>

      <div className="adm-grid-2">
        <div className="adm-card">
          <div className="adm-card-head"><h2>Coordonate</h2></div>
          <div className="adm-card-body">
            <div className="adm-field-group">
              <label className="adm-field-label">Telefon</label>
              <input className="adm-field" value={c.telefon} onChange={e => set("telefon", e.target.value)} />
            </div>
            <div className="adm-field-group">
              <label className="adm-field-label">Email</label>
              <input className="adm-field" type="email" value={c.email} onChange={e => set("email", e.target.value)} />
            </div>
            <div className="adm-field-group">
              <label className="adm-field-label">Adresă (stradă)</label>
              <input className="adm-field" value={c.adresa_strada} onChange={e => set("adresa_strada", e.target.value)} />
            </div>
            <div className="adm-row">
              <div className="adm-field-group">
                <label className="adm-field-label">Oraș</label>
                <input className="adm-field" value={c.adresa_oras} onChange={e => set("adresa_oras", e.target.value)} />
              </div>
              <div className="adm-field-group">
                <label className="adm-field-label">Cod poștal</label>
                <input className="adm-field" value={c.adresa_cp} onChange={e => set("adresa_cp", e.target.value)} />
              </div>
            </div>
            <div className="adm-field-group">
              <label className="adm-field-label">Coordonate GPS</label>
              <input className="adm-field" value={c.coords} onChange={e => set("coords", e.target.value)} />
            </div>
          </div>
        </div>

        <div className="adm-card">
          <div className="adm-card-head"><h2>Program</h2></div>
          <div className="adm-card-body">
            {c.program.map((p, i) => (
              <div className="adm-row" key={i} style={{ marginBottom: 12 }}>
                <div className="adm-field-group" style={{ marginBottom: 0 }}>
                  <label className="adm-field-label">Zi</label>
                  <input className="adm-field" value={p.zi} onChange={e => setProgram(i, "zi", e.target.value)} />
                </div>
                <div className="adm-field-group" style={{ marginBottom: 0 }}>
                  <label className="adm-field-label">Ore</label>
                  <input className="adm-field" value={p.ore} onChange={e => setProgram(i, "ore", e.target.value)} />
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className="adm-spacer"></div>
      <div className="adm-card">
        <div className="adm-card-head"><h2>Preview card pe site</h2></div>
        <div className="adm-card-body">
          <div className="adm-grid-3">
            <div style={{ padding: 16, border: "1px solid var(--line-1)", borderRadius: 2 }}>
              <i data-lucide="phone" style={{ width: 18, height: 18, color: "var(--gold-500)" }}></i>
              <div className="adm-field-label" style={{ marginTop: 8 }}>Telefon</div>
              <div className="adm-mono" style={{ fontSize: 16, fontWeight: 600, color: "var(--ink-900)" }}>{c.telefon}</div>
            </div>
            <div style={{ padding: 16, border: "1px solid var(--line-1)", borderRadius: 2 }}>
              <i data-lucide="mail" style={{ width: 18, height: 18, color: "var(--gold-500)" }}></i>
              <div className="adm-field-label" style={{ marginTop: 8 }}>Email</div>
              <div className="adm-mono" style={{ fontSize: 14, fontWeight: 600, color: "var(--ink-900)" }}>{c.email}</div>
            </div>
            <div style={{ padding: 16, border: "1px solid var(--line-1)", borderRadius: 2 }}>
              <i data-lucide="map-pin" style={{ width: 18, height: 18, color: "var(--gold-500)" }}></i>
              <div className="adm-field-label" style={{ marginTop: 8 }}>Adresă</div>
              <div className="adm-mono" style={{ fontSize: 13, color: "var(--ink-900)" }}>{c.adresa_strada}, {c.adresa_oras} {c.adresa_cp}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---------- 8. LEGALE ---------- */
function LegalePage({ state, update }) {
  const [tab, setTab] = useState("company");
  const l = state.legal;
  const setCompany = (k, v) => update(s => ({ ...s, legal: { ...s.legal, company: { ...s.legal.company, [k]: v } } }));
  const setText = (k, v) => update(s => ({ ...s, legal: { ...s.legal, [k]: v } }));

  return (
    <div className="adm-page">
      <div className="adm-page-head">
        <div>
          <span className="eyebrow">Configurare</span>
          <h1>Pagini legale</h1>
          <p>Date firmă + texte pentru Termeni, GDPR, Cookies.</p>
        </div>
        <button className="adm-btn adm-btn-gold" onClick={() => window.toast("Legale salvate ✓")}><i data-lucide="check"></i> Salvează</button>
      </div>

      <div className="adm-tabs">
        {[["company", "Date firmă"], ["termeni", "Termeni & Condiții"], ["gdpr", "GDPR"], ["cookies", "Cookies"]].map(([k, label]) =>
          <button key={k} className={tab === k ? "active" : ""} onClick={() => setTab(k)}>{label}</button>
        )}
      </div>

      {tab === "company" && (
        <div className="adm-card">
          <div className="adm-card-body">
            <div className="adm-row">
              <div className="adm-field-group">
                <label className="adm-field-label">Denumire legală</label>
                <input className="adm-field" value={l.company.nume_legal} onChange={e => setCompany("nume_legal", e.target.value)} />
              </div>
              <div className="adm-field-group">
                <label className="adm-field-label">CUI</label>
                <input className="adm-field" value={l.company.cui} onChange={e => setCompany("cui", e.target.value)} />
              </div>
            </div>
            <div className="adm-row">
              <div className="adm-field-group">
                <label className="adm-field-label">Reg. comerțului</label>
                <input className="adm-field" value={l.company.reg_com} onChange={e => setCompany("reg_com", e.target.value)} />
              </div>
              <div className="adm-field-group">
                <label className="adm-field-label">Sediu social</label>
                <input className="adm-field" value={l.company.sediu} onChange={e => setCompany("sediu", e.target.value)} />
              </div>
            </div>
            <div className="adm-field-group">
              <label className="adm-field-label">Domeniu</label>
              <input className="adm-field" value={l.company.domeniu} onChange={e => setCompany("domeniu", e.target.value)} />
            </div>
          </div>
        </div>
      )}

      {tab === "termeni" && (
        <div className="adm-card">
          <div className="adm-card-body">
            <label className="adm-field-label">Termeni & Condiții (text complet)</label>
            <textarea className="adm-field" style={{ minHeight: 320 }} value={l.termeni} onChange={e => setText("termeni", e.target.value)}></textarea>
            <div className="adm-field-help">Apare la /legale. Suportă paragrafe simple. În producție va fi rich text editor.</div>
          </div>
        </div>
      )}

      {tab === "gdpr" && (
        <div className="adm-card">
          <div className="adm-card-body">
            <label className="adm-field-label">Politica de confidențialitate</label>
            <textarea className="adm-field" style={{ minHeight: 320 }} value={l.gdpr} onChange={e => setText("gdpr", e.target.value)}></textarea>
            <div className="adm-field-help">Apare la /legale/confidentialitate</div>
          </div>
        </div>
      )}

      {tab === "cookies" && (
        <div className="adm-card">
          <div className="adm-card-body">
            <label className="adm-field-label">Cookies policy</label>
            <textarea className="adm-field" style={{ minHeight: 320 }} value={l.cookies} onChange={e => setText("cookies", e.target.value)}></textarea>
            <div className="adm-field-help">Apare la /legale/cookies</div>
          </div>
        </div>
      )}
    </div>
  );
}

/* ---------- 9. SETĂRI ---------- */
function SetariPage({ state, update }) {
  const setNotif = (k, v) => update(s => ({ ...s, notifications: { ...s.notifications, [k]: v } }));
  const reset = () => {
    if (!confirm("Resetează toate datele demo la starea inițială?\n\nSe vor pierde toate modificările făcute.")) return;
    ADM2.resetState();
    window.location.reload();
  };

  return (
    <div className="adm-page">
      <div className="adm-page-head">
        <div>
          <span className="eyebrow">Configurare</span>
          <h1>Setări</h1>
          <p>Branding, notificări, controlul demo-ului.</p>
        </div>
      </div>

      <div className="adm-grid-2">
        <div className="adm-card">
          <div className="adm-card-head"><h2>Branding</h2></div>
          <div className="adm-card-body">
            <div style={{ background: "var(--bg-soft)", padding: 12, borderRadius: 2, marginBottom: 16, fontSize: 12, color: "var(--silver-700)" }}>
              <i data-lucide="info" style={{ width: 14, height: 14, verticalAlign: "middle", marginRight: 6 }}></i>
              Modificările de brand (logo, culori, fonturi) necesită intervenția designerului.
            </div>
            <div className="adm-row">
              <div>
                <div className="adm-field-label">Culoare primară</div>
                <div className="adm-flex"><div style={{ width: 32, height: 32, background: "var(--gold-400)", borderRadius: 2 }}></div><span className="adm-mono">#D4A82F</span></div>
              </div>
              <div>
                <div className="adm-field-label">Brand black</div>
                <div className="adm-flex"><div style={{ width: 32, height: 32, background: "var(--ink-900)", borderRadius: 2 }}></div><span className="adm-mono">#0A0A0A</span></div>
              </div>
            </div>
            <div className="adm-spacer"></div>
            <div className="adm-field-label">Fonturi</div>
            <div className="adm-mono" style={{ marginTop: 4 }}>Sifonn Pro · Audiowide · Saira</div>
          </div>
        </div>

        <div className="adm-card">
          <div className="adm-card-head"><h2>Notificări email</h2></div>
          <div className="adm-card-body">
            {[
              ["email_cerere_noua", "La fiecare cerere nouă"],
              ["email_cerere_urgenta", "Doar cereri marcate URGENT"],
              ["email_zilnic_rezumat", "Rezumat zilnic (8 dimineața)"],
              ["sms_cerere_urgenta", "SMS la cerere URGENT (extra cost)"],
            ].map(([k, label]) => (
              <label key={k} className="adm-flex" style={{ marginBottom: 12, cursor: "pointer" }}>
                <input type="checkbox" checked={!!state.notifications[k]} onChange={e => setNotif(k, e.target.checked)} />
                <span>{label}</span>
              </label>
            ))}
          </div>
        </div>
      </div>

      <div className="adm-hr"></div>
      <div className="adm-card">
        <div className="adm-card-head"><h2>Demo mode</h2></div>
        <div className="adm-card-body">
          <p style={{ marginTop: 0, marginBottom: 16, color: "var(--silver-700)", fontSize: 13 }}>
            Datele se salvează local în browser-ul tău (localStorage). Resetează pentru a reveni la starea inițială.
          </p>
          <button className="adm-btn adm-btn-danger" onClick={reset}><i data-lucide="rotate-ccw"></i> Resetează demo</button>
        </div>
      </div>
    </div>
  );
}

/* ---------- expose to admin.jsx ---------- */
window.AdmPages = {
  dashboard: DashboardPage,
  cereri: CereriPage,
  produse: ProdusePage,
  categorii: CategoriiPage,
  continut: ContinutPage,
  parteneri: ParteneriPage,
  contact: ContactPage,
  legale: LegalePage,
  setari: SetariPage,
};