/* ============================================================
   PRESTIGE BIMMER — Admin: auth, dashboard, listing editor
   Auth is Firebase Authentication (Google sign-in). Only the
   designated admin email may edit — enforced here for the UI and,
   for real, by Firestore security rules.
   ============================================================ */

function useAuth() {
  const [user, setUser] = useState(() => firebase.auth().currentUser);
  const [ready, setReady] = useState(false);
  const [busy, setBusy] = useState(false);
  const [err, setErr] = useState("");

  useEffect(() => firebase.auth().onAuthStateChanged((u) => { setUser(u); setReady(true); }), []);

  const login = async () => {
    setBusy(true); setErr("");
    try {
      const provider = new firebase.auth.GoogleAuthProvider();
      await firebase.auth().signInWithPopup(provider);
    } catch (e) {
      if (e.code !== "auth/popup-closed-by-user" && e.code !== "auth/cancelled-popup-request") {
        setErr(e.message || "Sign-in failed.");
      }
    } finally { setBusy(false); }
  };

  const logout = () => firebase.auth().signOut();
  const isAdmin = !!user && user.email === window.PB_ADMIN_EMAIL;
  return { user, ready, busy, err, isAdmin, login, logout };
}

/* ---------------- Login ---------------- */
function AdminLogin({ auth }) {
  return (
    <main className="admin-login">
      <div className="admin-login-card card">
        <a href="#/" className="admin-login-brand"><Logo size={40} /></a>
        <div className="admin-login-lock"><Icon name="lock" size={22} /></div>
        <h1 className="display-m">Admin access</h1>
        <p className="text-dim">Sign in with the authorised Google account to manage the collection.</p>
        <button className="btn btn-primary btn-block btn-lg" onClick={auth.login} disabled={auth.busy}>
          {auth.busy ? "Opening Google…" : <>Sign in with Google <Icon name="arrow" size={17} /></>}
        </button>
        {auth.err && <span className="admin-login-err mono"><Icon name="x" size={13} /> {auth.err}</span>}
        <div className="admin-login-hint mono">
          <span>SECURE ACCESS</span>
          <code>Google Authentication</code>
        </div>
      </div>
    </main>
  );
}

/* ---------------- Signed in, but not the admin ---------------- */
function AdminDenied({ auth }) {
  return (
    <main className="admin-login">
      <div className="admin-login-card card">
        <a href="#/" className="admin-login-brand"><Logo size={40} /></a>
        <div className="admin-login-lock"><Icon name="lock" size={22} /></div>
        <h1 className="display-m">Not authorised</h1>
        <p className="text-dim">
          You’re signed in as <strong>{auth.user.email}</strong>, which isn’t an admin account for this site.
        </p>
        <button className="btn btn-primary btn-block btn-lg" onClick={auth.logout}>
          <Icon name="logout" size={16} /> Sign out
        </button>
        <a href="#/" className="admin-login-hint mono" style={{ textDecoration: "none" }}>
          <span>RETURN</span>
          <code>Back to site</code>
        </a>
      </div>
    </main>
  );
}

/* ---------------- Auth-resolving placeholder ---------------- */
function AdminLoading() {
  return (
    <main className="admin-login">
      <div className="admin-login-card card">
        <div className="admin-login-lock"><Icon name="cog" size={22} /></div>
        <p className="text-dim mono">Checking access…</p>
      </div>
    </main>
  );
}

/* ---------------- Dashboard ---------------- */
function AdminDashboard({ onLogout }) {
  const list = useInventory();
  const [editing, setEditing] = useState(null); // vehicle object or null
  const [filter, setFilter] = useState("all");

  const stats = {
    total: list.length,
    available: list.filter(v => v.status === "available").length,
    reserved: list.filter(v => v.status === "reserved").length,
    sold: list.filter(v => v.status === "sold").length,
    value: list.filter(v => v.status !== "sold").reduce((s, v) => s + Number(v.price || 0), 0),
  };

  const shown = filter === "all" ? list : list.filter(v => v.status === filter);

  if (editing !== null) {
    return <ListingEditor vehicle={editing} onClose={() => setEditing(null)} />;
  }

  return (
    <main className="admin">
      <div className="admin-bar">
        <div className="wrap admin-bar-inner">
          <a href="#/" className="admin-bar-brand"><Logo /></a>
          <span className="admin-bar-tag mono"><Icon name="cog" size={14} /> Control Panel</span>
          <div className="admin-bar-actions">
            <a href="#/" className="btn btn-ghost admin-bar-view">View site <Icon name="arrowUR" size={15} /></a>
            <button className="btn btn-ghost" onClick={onLogout}><Icon name="logout" size={16} /> Sign out</button>
          </div>
        </div>
      </div>

      <div className="wrap admin-content">
        <div className="admin-head">
          <div>
            <h1 className="display-m">Inventory manager</h1>
            <p className="text-dim">Add, edit and publish vehicles. Changes appear on the live site instantly.</p>
          </div>
          <button className="btn btn-primary btn-lg" onClick={() => setEditing(PB.Store.blank())}>
            <Icon name="plus" size={18} /> Add vehicle
          </button>
        </div>

        <div className="admin-stats">
          <StatCard label="Total listings" value={stats.total} icon="road" />
          <StatCard label="Available" value={stats.available} icon="check" tone="green" />
          <StatCard label="Reserved" value={stats.reserved} icon="clock" tone="amber" />
          <StatCard label="Sold" value={stats.sold} icon="star" tone="red" />
          <StatCard label="Live stock value" value={fmtPrice(stats.value)} icon="spark" wide />
        </div>

        <div className="admin-toolbar">
          <div className="inv-chips">
            {["all", "available", "reserved", "sold"].map(f => (
              <button key={f} className={"chip " + (filter === f ? "active" : "")} onClick={() => setFilter(f)}>
                {f === "all" ? "All" : statusLabel[f]}
              </button>
            ))}
          </div>
          <button className="admin-reset mono" onClick={async () => {
            if (!confirm("Reset inventory to the original demo data? This removes your changes.")) return;
            try { await PB.Store.reset(); } catch (e) { alert("Reset failed: " + (e.message || e)); }
          }}>
            <Icon name="cog" size={13} /> Reset demo data
          </button>
        </div>

        <div className="admin-table card">
          <div className="admin-trow admin-thead mono">
            <span>Vehicle</span><span>Price</span><span>Mileage</span><span>Status</span><span>Featured</span><span></span>
          </div>
          {shown.map(v => (
            <div className="admin-trow" key={v.id}>
              <div className="admin-tveh">
                <Photo className="admin-tthumb" label={v.model} src={v.imageUrls && v.imageUrls[0]} />
                <div><strong>{v.model}</strong><span className="mono text-dim">{v.year} · {v.series}</span></div>
              </div>
              <span className="tnum admin-tprice">{fmtPrice(v.price)}</span>
              <span className="tnum text-dim">{fmtMiles(v.mileage)} mi</span>
              <span><span className={"badge badge-" + v.status}>{statusLabel[v.status]}</span></span>
              <span>{v.featured ? <Icon name="star" size={16} fill style={{ color: "var(--blue-bright)" }} /> : <span className="text-faint mono">—</span>}</span>
              <div className="admin-tactions">
                <button className="admin-iconbtn" title="Edit" onClick={() => setEditing(v)}><Icon name="edit" size={16} /></button>
                <button className="admin-iconbtn danger" title="Delete" onClick={async () => { if (confirm("Delete " + v.model + "?")) { try { await PB.Store.remove(v.id); } catch (e) { alert("Delete failed: " + (e.message || e)); } } }}><Icon name="trash" size={16} /></button>
              </div>
            </div>
          ))}
          {!shown.length && (
            <div className="admin-empty">
              {stats.total === 0 ? (
                <>
                  <p>No listings yet.</p>
                  <button className="btn btn-primary" onClick={async () => {
                    try { await PB.Store.seed(); } catch (e) { alert("Import failed: " + (e.message || e)); }
                  }}><Icon name="plus" size={16} /> Import starter inventory</button>
                </>
              ) : "No vehicles in this view."}
            </div>
          )}
        </div>
      </div>
    </main>
  );
}

function StatCard({ label, value, icon, tone, wide }) {
  return (
    <div className={"admin-stat card " + (wide ? "admin-stat-wide " : "") + (tone ? "tone-" + tone : "")}>
      <span className="admin-stat-ic"><Icon name={icon} size={18} /></span>
      <span className="admin-stat-v tnum">{value}</span>
      <span className="admin-stat-l mono">{label}</span>
    </div>
  );
}

/* ---------------- Listing editor ---------------- */
function ListingEditor({ vehicle, onClose }) {
  const isNew = !vehicle.id;
  const [v, setV] = useState({ ...vehicle, _featList: (vehicle.features || []).join("\n"), _imgList: (vehicle.images || []).join("\n") });
  const set = (k) => (e) => {
    const el = e.target;
    const val = el.type === "checkbox" ? el.checked : (el.type === "number" ? el.value : el.value);
    setV(s => ({ ...s, [k]: val }));
  };

  const [saving, setSaving] = useState(false);

  const save = async (e) => {
    e.preventDefault();
    const out = {
      ...v,
      id: v.id || PB.Store.newId(v.model),
      year: Number(v.year) || new Date().getFullYear(),
      price: Number(v.price) || 0,
      mileage: Number(v.mileage) || 0,
      power: Number(v.power) || 0,
      zeroSixty: Number(v.zeroSixty) || 0,
      topSpeed: Number(v.topSpeed) || 0,
      featured: !!v.featured,
      features: v._featList.split("\n").map(s => s.trim()).filter(Boolean),
      images: v._imgList.split("\n").map(s => s.trim()).filter(Boolean),
    };
    delete out._featList; delete out._imgList;
    setSaving(true);
    try {
      await PB.Store.upsert(out);
      onClose();
    } catch (err) {
      console.error(err);
      alert("Couldn’t save: " + (err.message || err));
      setSaving(false);
    }
  };

  return (
    <main className="admin editor">
      <div className="admin-bar">
        <div className="wrap admin-bar-inner">
          <button className="admin-bar-brand editor-back" onClick={onClose}><Icon name="chevL" size={18} /> Back to dashboard</button>
          <span className="admin-bar-tag mono">{isNew ? "New listing" : "Editing"}</span>
        </div>
      </div>

      <form className="wrap editor-content" onSubmit={save}>
        <div className="editor-head">
          <div>
            <span className="kicker">{isNew ? "Add vehicle" : "Edit vehicle"}</span>
            <h1 className="display-m">{v.model || "Untitled vehicle"}</h1>
          </div>
          <div className="editor-head-actions">
            <button type="button" className="btn btn-ghost" onClick={onClose}>Cancel</button>
            <button type="submit" className="btn btn-primary" disabled={saving}><Icon name="check" size={17} /> {saving ? "Saving…" : (isNew ? "Publish" : "Save changes")}</button>
          </div>
        </div>

        <div className="editor-grid">
          <div className="editor-main">
            <EditorSection title="Identity">
              <div className="editor-row-2">
                <Field label="Model name"><input required value={v.model} onChange={set("model")} placeholder="e.g. 540i xDrive M Sport" /></Field>
                <Field label="Year"><input type="number" value={v.year} onChange={set("year")} min="1990" max="2030" /></Field>
              </div>
              <div className="editor-row-2">
                <Field label="Series">
                  <select value={v.series} onChange={set("series")}>{PB.SERIES.map(s => <option key={s}>{s}</option>)}</select>
                </Field>
                <Field label="Body style">
                  <select value={v.body} onChange={set("body")}>{PB.BODIES.map(b => <option key={b}>{b}</option>)}</select>
                </Field>
              </div>
              <Field label="Tagline"><input value={v.tagline} onChange={set("tagline")} placeholder="One evocative line for the detail page" /></Field>
            </EditorSection>

            <EditorSection title="Pricing & condition">
              <div className="editor-row-3">
                <Field label="Price ($)"><input type="number" value={v.price} onChange={set("price")} /></Field>
                <Field label="Mileage (mi)"><input type="number" value={v.mileage} onChange={set("mileage")} /></Field>
                <Field label="Exterior colour"><input value={v.color} onChange={set("color")} placeholder="e.g. Tanzanite Blue" /></Field>
              </div>
              <Field label="VIN"><input value={v.vin} onChange={set("vin")} placeholder="Optional" /></Field>
            </EditorSection>

            <EditorSection title="Performance & drivetrain">
              <div className="editor-row-2">
                <Field label="Engine"><input value={v.engine} onChange={set("engine")} placeholder="e.g. 3.0L Turbo I6" /></Field>
                <Field label="Fuel">
                  <select value={v.fuel} onChange={set("fuel")}>{PB.FUELS.map(f => <option key={f}>{f}</option>)}</select>
                </Field>
              </div>
              <div className="editor-row-2">
                <Field label="Drivetrain"><input value={v.drivetrain} onChange={set("drivetrain")} placeholder="e.g. xDrive AWD" /></Field>
                <Field label="Transmission"><input value={v.transmission} onChange={set("transmission")} placeholder="e.g. 8-Spd Steptronic" /></Field>
              </div>
              <div className="editor-row-3">
                <Field label="Power (hp)"><input type="number" value={v.power} onChange={set("power")} /></Field>
                <Field label="0–60 (s)"><input type="number" step="0.1" value={v.zeroSixty} onChange={set("zeroSixty")} /></Field>
                <Field label="Top speed (mph)"><input type="number" value={v.topSpeed} onChange={set("topSpeed")} /></Field>
              </div>
            </EditorSection>

            <EditorSection title="Equipment & images">
              <Field label="Equipment / options (one per line)">
                <textarea rows="5" value={v._featList} onChange={set("_featList")} placeholder={"Merino Leather\nCarbon Ceramic Brakes\nHeads-Up Display"} />
              </Field>
              <Field label="Image labels (one per line — placeholders shown until you add real photos)">
                <textarea rows="4" value={v._imgList} onChange={set("_imgList")} placeholder={"M5 — front 3/4\nM5 — interior"} />
              </Field>
            </EditorSection>
          </div>

          <aside className="editor-side">
            <EditorSection title="Publish">
              <Field label="Status">
                <select value={v.status} onChange={set("status")}>{PB.STATUSES.map(s => <option key={s} value={s}>{statusLabel[s]}</option>)}</select>
              </Field>
              <label className="editor-toggle">
                <input type="checkbox" checked={!!v.featured} onChange={set("featured")} />
                <span className="editor-toggle-track"><span className="editor-toggle-thumb" /></span>
                <span>Feature on homepage</span>
              </label>
            </EditorSection>

            <EditorSection title="Live preview">
              <div className="editor-preview">
                <VehicleCard v={{
                  ...v, year: Number(v.year), price: Number(v.price), mileage: Number(v.mileage),
                  power: Number(v.power),
                  features: v._featList.split("\n").filter(Boolean),
                  images: v._imgList.split("\n").filter(Boolean),
                }} reveal={false} />
              </div>
            </EditorSection>
          </aside>
        </div>
      </form>
    </main>
  );
}

function EditorSection({ title, children }) {
  return (
    <section className="editor-section card">
      <h3 className="editor-section-title mono">{title}</h3>
      <div className="editor-section-body">{children}</div>
    </section>
  );
}

/* ---------------- Admin router entry ---------------- */
function AdminApp() {
  const auth = useAuth();
  if (!auth.ready) return <AdminLoading />;
  if (!auth.user) return <AdminLogin auth={auth} />;
  if (!auth.isAdmin) return <AdminDenied auth={auth} />;
  return <AdminDashboard onLogout={auth.logout} />;
}

Object.assign(window, { AdminApp, AdminLogin, AdminDenied, AdminLoading, AdminDashboard, ListingEditor });