/* Caballo Natural – Admin-Dashboard
   Bestand (Inventar) · Bestellungen · Beratungen
   Datenquelle: Supabase (window.__SB) */
const { useState: useStateAd, useEffect: useEffectAd, useMemo: useMemoAd } = React;
const SB = () => window.__SB;

const LINE_ORDER = ["Rohkräuter", "Dekokt", "Fluid", "Booster", "Stalllinie", "Externa", "Cobs"];
const ORDER_STATUS = ["neu", "bezahlt", "versandt", "abgeschlossen", "storniert"];
const CONS_STATUS = ["neu", "in_bearbeitung", "beantwortet", "abgeschlossen"];

const fmtDate = (s) => {
  if (!s) return "";
  const d = new Date(s);
  return d.toLocaleDateString("de-DE", { day: "2-digit", month: "2-digit", year: "numeric" }) +
    " " + d.toLocaleTimeString("de-DE", { hour: "2-digit", minute: "2-digit" });
};

// ============ LOGIN ============
const AdminLogin = () => {
  const [email, setEmail] = useStateAd("");
  const [pw, setPw] = useStateAd("");
  const [err, setErr] = useStateAd("");
  const [busy, setBusy] = useStateAd(false);

  const submit = async (e) => {
    e.preventDefault();
    setErr(""); setBusy(true);
    const { error } = await SB().auth.signInWithPassword({ email: email.trim(), password: pw });
    setBusy(false);
    if (error) setErr(error.message === "Invalid login credentials" ? "E-Mail oder Passwort falsch." : error.message);
  };

  return (
    <div className="admin-login">
      <form className="admin-login-card" onSubmit={submit}>
        <div className="admin-login-brand">Caballo Natural · Admin</div>
        <h1>Anmelden</h1>
        <p>Verwalte Bestand, Bestellungen und Beratungen.</p>
        <label>E-Mail</label>
        <input type="email" value={email} onChange={e => setEmail(e.target.value)} placeholder="deine@e-mail.de" required autoFocus />
        <label>Passwort</label>
        <input type="password" value={pw} onChange={e => setPw(e.target.value)} placeholder="••••••••" required />
        {err && <div className="admin-err">{err}</div>}
        <button className="admin-btn-primary" type="submit" disabled={busy}>{busy ? "Anmelden …" : "Anmelden"}</button>
      </form>
    </div>
  );
};

// ============ BESTAND (Inventar) ============
const InventoryRow = ({ p, onSave }) => {
  const [stock, setStock] = useStateAd(p.stock_qty);
  const [thr, setThr] = useStateAd(p.reorder_threshold);
  const [price, setPrice] = useStateAd(p.price_eur == null ? "" : p.price_eur);
  const [saved, setSaved] = useStateAd(false);
  const low = Number(stock) <= Number(thr);

  const commit = async (patch) => {
    await onSave(p.id, patch);
    setSaved(true);
    setTimeout(() => setSaved(false), 1200);
  };

  return (
    <tr className={low ? "row-low" : ""}>
      <td>
        <div className="prod-name">{p.name}</div>
        <div className="prod-unit">{p.unit}{p.supplier_code ? ` · ${p.supplier_code}` : ""}</div>
      </td>
      <td className="num">
        <input type="number" className="cell-input" value={stock}
          onChange={e => setStock(e.target.value)}
          onBlur={() => Number(stock) !== Number(p.stock_qty) && commit({ stock_qty: Number(stock) })} />
      </td>
      <td className="num">
        <input type="number" className="cell-input" value={thr}
          onChange={e => setThr(e.target.value)}
          onBlur={() => Number(thr) !== Number(p.reorder_threshold) && commit({ reorder_threshold: Number(thr) })} />
      </td>
      <td className="num">
        <input type="number" step="0.01" className="cell-input" value={price} placeholder="–"
          onChange={e => setPrice(e.target.value)}
          onBlur={() => { const v = price === "" ? null : Number(price); if (v !== (p.price_eur == null ? null : Number(p.price_eur))) commit({ price_eur: v }); }} />
      </td>
      <td>
        {low
          ? <span className="badge badge-warn">Nachkaufen</span>
          : <span className="badge badge-ok">OK</span>}
        {saved && <span className="saved-hint">✓ gespeichert</span>}
      </td>
    </tr>
  );
};

const InventoryTab = () => {
  const [rows, setRows] = useStateAd([]);
  const [loading, setLoading] = useStateAd(true);
  const [q, setQ] = useStateAd("");
  const [onlyLow, setOnlyLow] = useStateAd(false);
  const [lineFilter, setLineFilter] = useStateAd("all");

  const load = async () => {
    setLoading(true);
    const { data, error } = await SB().from("products").select("*").eq("active", true);
    if (!error) setRows(data || []);
    setLoading(false);
  };
  useEffectAd(() => { load(); }, []);

  const save = async (id, patch) => {
    const { error } = await SB().from("products").update(patch).eq("id", id);
    if (!error) setRows(rs => rs.map(r => r.id === id ? { ...r, ...patch } : r));
  };

  const filtered = useMemoAd(() => {
    return rows
      .filter(r => lineFilter === "all" || r.line === lineFilter)
      .filter(r => !onlyLow || Number(r.stock_qty) <= Number(r.reorder_threshold))
      .filter(r => !q || r.name.toLowerCase().includes(q.toLowerCase()))
      .sort((a, b) => {
        const la = LINE_ORDER.indexOf(a.line), lb = LINE_ORDER.indexOf(b.line);
        if (la !== lb) return la - lb;
        return a.name.localeCompare(b.name, "es");
      });
  }, [rows, q, onlyLow, lineFilter]);

  const lowCount = rows.filter(r => Number(r.stock_qty) <= Number(r.reorder_threshold)).length;
  const lines = ["all", ...LINE_ORDER.filter(l => rows.some(r => r.line === l))];

  // gruppiert nach Linie
  const groups = {};
  filtered.forEach(r => { (groups[r.line] = groups[r.line] || []).push(r); });
  const groupKeys = Object.keys(groups).sort((a, b) => LINE_ORDER.indexOf(a) - LINE_ORDER.indexOf(b));

  return (
    <div>
      <div className="admin-toolbar">
        <input className="admin-search" placeholder="Produkt suchen …" value={q} onChange={e => setQ(e.target.value)} />
        <div className="admin-filters">
          {lines.map(l => (
            <button key={l} className={`chip ${lineFilter === l ? "chip-active" : ""}`} onClick={() => setLineFilter(l)}>
              {l === "all" ? "Alle" : l}
            </button>
          ))}
        </div>
        <button className={`chip ${onlyLow ? "chip-warn-active" : "chip-warn"}`} onClick={() => setOnlyLow(v => !v)}>
          ⚠ Nachkaufen ({lowCount})
        </button>
      </div>

      {loading ? <div className="admin-empty">Lade Bestand …</div> : (
        filtered.length === 0 ? <div className="admin-empty">Keine Produkte gefunden.</div> :
        groupKeys.map(line => (
          <div key={line} className="inv-group">
            <div className="inv-group-head">{line} <span>({groups[line].length})</span></div>
            <table className="admin-table">
              <thead>
                <tr><th>Produkt</th><th className="num">Bestand</th><th className="num">Min. (nachkaufen ab)</th><th className="num">Grundpreis (€)</th><th>Status</th></tr>
              </thead>
              <tbody>
                {groups[line].map(p => <InventoryRow key={p.id} p={p} onSave={save} />)}
              </tbody>
            </table>
          </div>
        ))
      )}
    </div>
  );
};

// ============ BESTELLUNGEN ============
const OrdersTab = () => {
  const [orders, setOrders] = useStateAd([]);
  const [items, setItems] = useStateAd({});
  const [loading, setLoading] = useStateAd(true);
  const [statusFilter, setStatusFilter] = useStateAd("all");

  const load = async () => {
    setLoading(true);
    const { data: ords } = await SB().from("orders").select("*").order("created_at", { ascending: false });
    const { data: its } = await SB().from("order_items").select("*");
    const byOrder = {};
    (its || []).forEach(i => { (byOrder[i.order_id] = byOrder[i.order_id] || []).push(i); });
    setItems(byOrder);
    setOrders(ords || []);
    setLoading(false);
  };
  useEffectAd(() => { load(); }, []);

  const setStatus = async (id, status) => {
    await SB().from("orders").update({ status }).eq("id", id);
    setOrders(os => os.map(o => o.id === id ? { ...o, status } : o));
  };

  const visible = orders.filter(o => statusFilter === "all" || o.status === statusFilter);

  return (
    <div>
      <div className="admin-toolbar">
        <div className="admin-filters">
          {["all", ...ORDER_STATUS].map(s => (
            <button key={s} className={`chip ${statusFilter === s ? "chip-active" : ""}`} onClick={() => setStatusFilter(s)}>
              {s === "all" ? "Alle" : s}
            </button>
          ))}
        </div>
      </div>
      {loading ? <div className="admin-empty">Lade Bestellungen …</div> : (
        visible.length === 0 ? <div className="admin-empty">Noch keine Bestellungen.</div> :
        <div className="card-list">
          {visible.map(o => (
            <div key={o.id} className="order-card">
              <div className="order-head">
                <div>
                  <span className="order-no">{o.order_number}</span>
                  <span className="order-date">{fmtDate(o.created_at)}</span>
                </div>
                <select className="status-select" value={o.status} onChange={e => setStatus(o.id, e.target.value)}>
                  {ORDER_STATUS.map(s => <option key={s} value={s}>{s}</option>)}
                </select>
              </div>
              <div className="order-body">
                <div className="order-cust">
                  <strong>{o.customer_name || "—"}</strong>
                  {o.customer_email && <div>{o.customer_email}</div>}
                  {o.customer_phone && <div>{o.customer_phone}</div>}
                  {o.shipping_address && <div className="muted">{o.shipping_address}</div>}
                </div>
                <ul className="order-items">
                  {(items[o.id] || []).map(i => (
                    <li key={i.id}>{i.qty}× {i.product_name}{i.unit_price_eur != null && <span className="muted"> · {Number(i.unit_price_eur).toFixed(2)} €</span>}</li>
                  ))}
                  {(!items[o.id] || items[o.id].length === 0) && <li className="muted">Keine Positionen erfasst</li>}
                </ul>
              </div>
              {o.total_eur != null && <div className="order-total">Summe: <strong>{Number(o.total_eur).toFixed(2)} €</strong></div>}
              {o.notes && <div className="order-notes">{o.notes}</div>}
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

// ============ BERATUNGEN ============
const ConsultationsTab = () => {
  const [rows, setRows] = useStateAd([]);
  const [loading, setLoading] = useStateAd(true);
  const [statusFilter, setStatusFilter] = useStateAd("all");

  const load = async () => {
    setLoading(true);
    const { data } = await SB().from("consultations").select("*").order("created_at", { ascending: false });
    setRows(data || []);
    setLoading(false);
  };
  useEffectAd(() => { load(); }, []);

  const setStatus = async (id, status) => {
    await SB().from("consultations").update({ status }).eq("id", id);
    setRows(rs => rs.map(r => r.id === id ? { ...r, status } : r));
  };

  const visible = rows.filter(r => statusFilter === "all" || r.status === statusFilter);
  const newCount = rows.filter(r => r.status === "neu").length;

  return (
    <div>
      <div className="admin-toolbar">
        <div className="admin-filters">
          {["all", ...CONS_STATUS].map(s => (
            <button key={s} className={`chip ${statusFilter === s ? "chip-active" : ""}`} onClick={() => setStatusFilter(s)}>
              {s === "all" ? `Alle` : s.replace("_", " ")}{s === "neu" && newCount ? ` (${newCount})` : ""}
            </button>
          ))}
        </div>
      </div>
      {loading ? <div className="admin-empty">Lade Beratungen …</div> : (
        visible.length === 0 ? <div className="admin-empty">Noch keine Beratungsanfragen.</div> :
        <div className="card-list">
          {visible.map(c => (
            <div key={c.id} className={`cons-card ${c.status === "neu" ? "cons-new" : ""}`}>
              <div className="order-head">
                <div>
                  <strong>{c.name || "—"}</strong>
                  <span className="order-date">{fmtDate(c.created_at)}</span>
                </div>
                <select className="status-select" value={c.status} onChange={e => setStatus(c.id, e.target.value)}>
                  {CONS_STATUS.map(s => <option key={s} value={s}>{s.replace("_", " ")}</option>)}
                </select>
              </div>
              <div className="cons-meta">
                {c.email && <a href={`mailto:${c.email}`}>{c.email}</a>}
                {c.phone && <span>· {c.phone}</span>}
                {(c.horse_name || c.horse_age) && <span>· 🐴 {c.horse_name} {c.horse_age && `(${c.horse_age})`}</span>}
                {c.topic && <span className="badge badge-topic">{c.topic}</span>}
              </div>
              {c.message && <div className="cons-msg">{c.message}</div>}
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

// ============ SHELL ============
const AdminView = ({ onNav }) => {
  const [session, setSession] = useStateAd(null);
  const [ready, setReady] = useStateAd(false);
  const [isAdmin, setIsAdmin] = useStateAd(null); // null = noch unbekannt
  const [tab, setTab] = useStateAd("bestand");

  useEffectAd(() => {
    if (!window.__SB) { setReady(true); return; }
    SB().auth.getSession().then(({ data }) => { setSession(data.session); setReady(true); });
    const { data: sub } = SB().auth.onAuthStateChange((_e, s) => setSession(s));
    return () => sub && sub.subscription && sub.subscription.unsubscribe();
  }, []);

  // Admin-Recht prüfen sobald eingeloggt
  useEffectAd(() => {
    if (!session) { setIsAdmin(null); return; }
    SB().from("profiles").select("is_admin").eq("id", session.user.id).maybeSingle()
      .then(({ data }) => setIsAdmin(!!(data && data.is_admin)));
  }, [session]);

  if (!window.__SB) {
    return <div className="admin-empty" style={{ padding: 80 }}>Supabase ist nicht verbunden. Bitte Seite neu laden.</div>;
  }
  if (!ready) return <div className="admin-empty" style={{ padding: 80 }}>Laden …</div>;
  if (!session) return <AdminLogin />;

  const logout = async () => { await SB().auth.signOut(); };

  if (isAdmin === null) return <div className="admin-empty" style={{ padding: 80 }}>Prüfe Zugriff …</div>;
  if (isAdmin === false) return (
    <div className="admin-login"><div className="admin-login-card" style={{ textAlign: "center" }}>
      <h1>Kein Admin-Zugriff</h1>
      <p>Dieses Konto hat keine Admin-Rechte.</p>
      <button className="admin-btn-primary" onClick={() => onNav && onNav("konto")}>Zu meinem Konto</button>
      <button className="admin-link" style={{ marginTop: 12, color: "var(--ad-mute)" }} onClick={logout}>Abmelden</button>
    </div></div>
  );

  return (
    <div className="admin-page">
      <header className="admin-top">
        <div className="admin-top-left">
          <span className="admin-logo">Caballo Natural</span>
          <span className="admin-tag">Admin</span>
        </div>
        <nav className="admin-tabs">
          <button className={tab === "bestand" ? "active" : ""} onClick={() => setTab("bestand")}>Bestand</button>
          <button className={tab === "bestellungen" ? "active" : ""} onClick={() => setTab("bestellungen")}>Bestellungen</button>
          <button className={tab === "beratungen" ? "active" : ""} onClick={() => setTab("beratungen")}>Beratungen</button>
        </nav>
        <div className="admin-top-right">
          <a href="#/home" className="admin-link" onClick={(e) => { e.preventDefault(); onNav && onNav("home"); }}>↗ Zur Website</a>
          <button className="admin-link" onClick={logout}>Abmelden</button>
        </div>
      </header>
      <main className="admin-main">
        {tab === "bestand" && <InventoryTab />}
        {tab === "bestellungen" && <OrdersTab />}
        {tab === "beratungen" && <ConsultationsTab />}
      </main>
    </div>
  );
};

window.AdminView = AdminView;