/* global React, DCAuth, DCIcons */
const { IconSearch: AuthIconSearch, IconUser: AuthIconUser, IconArrow: AuthIconArrow,
        IconCheck: AuthIconCheck } = DCIcons;

/* ─────────────────────────────────────────────
   useAuth — react hook over DCAuth events
   ───────────────────────────────────────────── */
function useAuth() {
  const [user, setUser] = React.useState(() => window.DCAuth?.currentUser?.() || null);
  React.useEffect(() => {
    return window.DCAuth.onChange(setUser);
  }, []);
  return user;
}

/* ─────────────────────────────────────────────
   Auth Modal — login + signup
   ───────────────────────────────────────────── */
function AuthModal({ open, mode: modeProp, onClose, onSuccess }) {
  const [mode, setMode] = React.useState(modeProp || "login");
  const [err, setErr] = React.useState("");
  const [loading, setLoading] = React.useState(false);
  const [form, setForm] = React.useState({ name:"", email:"", phone:"", password:"" });

  React.useEffect(() => { if (open) { setMode(modeProp || "login"); setErr(""); } }, [open, modeProp]);

  // ESC closes
  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === "Escape") onClose?.(); };
    document.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => { document.removeEventListener("keydown", onKey); document.body.style.overflow = ""; };
  }, [open, onClose]);

  const submit = (e) => {
    e.preventDefault();
    setErr(""); setLoading(true);
    try {
      let user;
      if (mode === "login") {
        user = window.DCAuth.login({ email: form.email, password: form.password });
      } else {
        user = window.DCAuth.signup(form);
      }
      window.DCAuth._seedDemoIfEmpty?.();
      setLoading(false);
      onSuccess?.(user);
    } catch(ex) {
      setLoading(false);
      setErr(ex.message || "Något gick fel");
    }
  };

  if (!open) return null;
  return (
    <div className="auth-overlay" onClick={(e) => { if (e.target.classList.contains("auth-overlay")) onClose?.(); }}>
      <div className="auth-card" role="dialog" aria-modal="true" aria-label={mode === "login" ? "Logga in" : "Skapa konto"}>
        <button className="auth-close" onClick={onClose} aria-label="Stäng">
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"><path d="M2 2l10 10M12 2L2 12"/></svg>
        </button>

        <div className="auth-tabs">
          <button className={mode === "login" ? "on" : ""} onClick={() => setMode("login")}>Logga in</button>
          <button className={mode === "signup" ? "on" : ""} onClick={() => setMode("signup")}>Skapa konto</button>
        </div>

        <h2 className="auth-h">
          {mode === "login" ? <>Välkommen <em>tillbaka</em>.</> : <>Skapa ditt <em>konto</em>.</>}
        </h2>
        <p className="auth-sub">
          {mode === "login"
            ? "Logga in för att se dina beställningar och bokade tider."
            : "Få översikt över dina beställningar, bokade tider och sparade fordon."}
        </p>

        <form className="auth-form" onSubmit={submit}>
          {mode === "signup" && (
            <label className="auth-field">
              <span>Namn</span>
              <input type="text" required value={form.name} onChange={e => setForm({...form, name:e.target.value})} placeholder="För- och efternamn" autoComplete="name"/>
            </label>
          )}
          <label className="auth-field">
            <span>E-post</span>
            <input type="email" required value={form.email} onChange={e => setForm({...form, email:e.target.value})} placeholder="namn@exempel.se" autoComplete="email"/>
          </label>
          {mode === "signup" && (
            <label className="auth-field">
              <span>Telefon (frivilligt)</span>
              <input type="tel" value={form.phone} onChange={e => setForm({...form, phone:e.target.value})} placeholder="070 123 45 67" autoComplete="tel"/>
            </label>
          )}
          <label className="auth-field">
            <span>Lösenord</span>
            <input type="password" required minLength={6} value={form.password} onChange={e => setForm({...form, password:e.target.value})} placeholder={mode === "signup" ? "Minst 6 tecken" : "Ditt lösenord"} autoComplete={mode === "login" ? "current-password" : "new-password"}/>
          </label>

          {err && <div className="auth-err">{err}</div>}

          <button type="submit" className="auth-submit" disabled={loading}>
            {loading ? "Skickar…" : (mode === "login" ? "Logga in" : "Skapa konto")} <AuthIconArrow size={14}/>
          </button>

          <p className="auth-foot">
            {mode === "login"
              ? <>Inget konto? <button type="button" className="lk" onClick={() => setMode("signup")}>Skapa ett här</button></>
              : <>Har du redan konto? <button type="button" className="lk" onClick={() => setMode("login")}>Logga in</button></>
            }
          </p>
        </form>
      </div>
    </div>
  );
}

/* ─────────────────────────────────────────────
   Search Overlay — full-page search
   ───────────────────────────────────────────── */
const SEARCH_INDEX = [
  { kind:"page", title:"Däck", desc:"Vinter, sommar och helår", href:"dack.html" },
  { kind:"page", title:"Fälg", desc:"Aluminium, stål och premium", href:"falg.html" },
  { kind:"page", title:"Kompletta hjul", desc:"Däck och fälg monterade", href:"kompletta-hjul.html" },
  { kind:"page", title:"DC Wheels", desc:"Vår egen fälgkollektion", href:"dc-wheels.html" },
  { kind:"page", title:"Däckhotell", desc:"Vi förvarar dina däck", href:"dackhotell.html" },
  { kind:"page", title:"Däckskifte", desc:"Boka skifte och balansering", href:"tjanst-dackskifte.html" },
  { kind:"page", title:"Hjulinställning", desc:"4-hjulsmätning med Hunter", href:"tjanst-hjulinstallning.html" },
  { kind:"page", title:"Fälgrenovering", desc:"Lagning, omlackering, polering", href:"tjanst-falgrenovering.html" },
  { kind:"page", title:"Punktering", desc:"Vi hjälper dig direkt", href:"tjanst-punktering.html" },
  { kind:"page", title:"Däcklagning", desc:"Säker och godkänd lagning", href:"tjanst-lagning.html" },
  { kind:"page", title:"Däckväljaren", desc:"Hitta rätt däck via regnummer", href:"dackvalj.html" },
  { kind:"page", title:"Om oss", desc:"Däck Centrum i Helsingborg AB", href:"om-oss.html" },
  { kind:"page", title:"Kontakta oss", desc:"Muskötgatan 2, Helsingborg", href:"kontakta-oss.html" },
  { kind:"page", title:"FAQ", desc:"Vanliga frågor och svar", href:"faq.html" },
  { kind:"page", title:"Lediga jobb", desc:"Bli en del av teamet", href:"lediga-jobb.html" },
  { kind:"page", title:"Återförsäljare", desc:"Sälj DC Wheels", href:"aterforsaljare.html" },
  { kind:"page", title:"Mitt konto", desc:"Beställningar, info och bokningar", href:"mitt-konto.html" },

  { kind:"product", title:"Michelin Pilot Sport 5", desc:"225/45 R18 95Y XL · Sommardäck", href:"dack.html" },
  { kind:"product", title:"Continental WinterContact TS 870 P", desc:"235/40 R19 96V XL · Vinterdäck", href:"dack.html" },
  { kind:"product", title:"Bridgestone Turanza 6", desc:"205/55 R16 91V · Sommardäck", href:"dack.html" },
  { kind:"product", title:"Goodyear Vector 4Seasons Gen-3", desc:"215/55 R17 98W XL · Helår", href:"dack.html" },
  { kind:"product", title:"Pirelli P Zero", desc:"245/40 R19 98Y XL · Sommardäck", href:"dack.html" },
  { kind:"product", title:"DC Wheels R-serie 19\"", desc:"Satin Black · 5x108 ET45", href:"dc-wheels.html" },
  { kind:"product", title:"DC Wheels Forged-1 20\"", desc:"Brushed Bronze · 5x112 ET40", href:"dc-wheels.html" },
];

function SearchOverlay({ open, onClose }) {
  const [q, setQ] = React.useState("");
  const inputRef = React.useRef(null);
  React.useEffect(() => {
    if (open) {
      setQ("");
      setTimeout(() => inputRef.current?.focus(), 30);
      document.body.style.overflow = "hidden";
    } else {
      document.body.style.overflow = "";
    }
    const onKey = (e) => { if (e.key === "Escape") onClose?.(); };
    if (open) document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, [open, onClose]);

  const filtered = React.useMemo(() => {
    const s = q.trim().toLowerCase();
    if (!s) return null;
    return SEARCH_INDEX.filter(it =>
      (it.title + " " + it.desc).toLowerCase().includes(s)
    ).slice(0, 12);
  }, [q]);

  if (!open) return null;
  const popular = ["Vinterdäck", "DC Wheels", "Däckhotell", "Hjulinställning", "Däckskifte"];

  return (
    <div className="search-overlay" onClick={(e) => { if (e.target.classList.contains("search-overlay")) onClose?.(); }}>
      <div className="search-panel" role="dialog" aria-modal="true" aria-label="Sök">
        <div className="search-row">
          <span className="search-row-icon"><AuthIconSearch size={20}/></span>
          <input ref={inputRef} type="search" value={q} onChange={e => setQ(e.target.value)}
                 placeholder="Sök däck, fälg, tjänster…" className="search-input"/>
          <button className="search-close" onClick={onClose} aria-label="Stäng sök">
            <span className="kbd">Esc</span>
          </button>
        </div>

        <div className="search-body">
          {!filtered && (
            <>
              <div className="search-section-h">Populära sökningar</div>
              <div className="search-chips">
                {popular.map(p => (
                  <button key={p} className="search-chip" onClick={() => setQ(p)}>{p}</button>
                ))}
              </div>
              <div className="search-section-h" style={{marginTop:32}}>Genvägar</div>
              <div className="search-shortcuts">
                <a href="dackvalj.html" className="search-shortcut"><strong>Däckväljaren</strong><span>Hitta rätt däck via regnummer</span></a>
                <a href="dc-wheels.html" className="search-shortcut"><strong>DC Wheels</strong><span>Vår egen fälgkollektion</span></a>
                <a href="dackhotell.html" className="search-shortcut"><strong>Däckhotell</strong><span>Vi förvarar dina däck</span></a>
                <a href="kontakta-oss.html" className="search-shortcut"><strong>Boka tid</strong><span>Verkstad i Helsingborg</span></a>
              </div>
            </>
          )}
          {filtered && filtered.length === 0 && (
            <div className="search-empty">
              <p>Inga träffar för "<b>{q}</b>".</p>
              <p style={{marginTop:8, color:"var(--ink-mute)"}}>Pröva ett annat ord eller bläddra i menyn ovan.</p>
            </div>
          )}
          {filtered && filtered.length > 0 && (
            <ul className="search-results">
              {filtered.map((r, i) => (
                <li key={i}>
                  <a href={r.href} onClick={onClose}>
                    <span className={"search-kind k-" + r.kind}>{r.kind === "product" ? "Produkt" : "Sida"}</span>
                    <span className="search-title">{r.title}</span>
                    <span className="search-desc">{r.desc}</span>
                    <span className="search-arrow"><AuthIconArrow size={14}/></span>
                  </a>
                </li>
              ))}
            </ul>
          )}
        </div>
      </div>
    </div>
  );
}

/* ─────────────────────────────────────────────
   User menu (when logged in)
   ───────────────────────────────────────────── */
function UserMenu({ user, onClose }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const onDoc = (e) => {
      if (ref.current && !ref.current.contains(e.target)) onClose?.();
    };
    setTimeout(() => document.addEventListener("mousedown", onDoc), 0);
    return () => document.removeEventListener("mousedown", onDoc);
  }, [onClose]);
  const initials = (user.name || user.email || "DC").split(/\s+/).filter(Boolean).map(s => s[0]).slice(0,2).join("").toUpperCase();
  return (
    <div className="user-menu" ref={ref}>
      <div className="user-menu-head">
        <span className="user-avatar">{initials}</span>
        <div>
          <div className="nm">{user.name || "Konto"}</div>
          <div className="em">{user.email}</div>
        </div>
      </div>
      <a href="mitt-konto.html" className="user-menu-item">Mitt konto <AuthIconArrow size={12}/></a>
      <a href="mitt-konto.html#orders" className="user-menu-item">Beställningar <AuthIconArrow size={12}/></a>
      <a href="mitt-konto.html#bookings" className="user-menu-item">Bokade tider <AuthIconArrow size={12}/></a>
      <button className="user-menu-item logout" onClick={() => { window.DCAuth.logout(); onClose?.(); }}>Logga ut</button>
    </div>
  );
}

/* ─────────────────────────────────────────────
   AuthControls — exposed for header wiring
   Manages search + auth modal state and listens
   for window-level events from the header buttons.
   ───────────────────────────────────────────── */
function AuthControls() {
  const user = useAuth();
  const [searchOpen, setSearchOpen] = React.useState(false);
  const [authMode, setAuthMode] = React.useState(null); // null | "login" | "signup"
  const [userMenu, setUserMenu] = React.useState(false);

  React.useEffect(() => {
    const openSearch = () => setSearchOpen(true);
    const openAuth = (e) => {
      const m = e?.detail?.mode;
      // if logged in, treat as menu toggle
      if (window.DCAuth.isLoggedIn()) {
        setUserMenu(v => !v);
      } else {
        setAuthMode(m === "signup" ? "signup" : "login");
      }
    };
    window.addEventListener("dc:search:open", openSearch);
    window.addEventListener("dc:auth:open", openAuth);
    return () => {
      window.removeEventListener("dc:search:open", openSearch);
      window.removeEventListener("dc:auth:open", openAuth);
    };
  }, []);

  return (
    <>
      <SearchOverlay open={searchOpen} onClose={() => setSearchOpen(false)}/>
      <AuthModal open={!!authMode} mode={authMode} onClose={() => setAuthMode(null)}
                 onSuccess={() => setAuthMode(null)}/>
      {userMenu && user && <UserMenu user={user} onClose={() => setUserMenu(false)}/>}
    </>
  );
}

/* mount once globally */
function ensureAuthControlsMounted() {
  if (window.__dcAuthMounted) return;
  window.__dcAuthMounted = true;
  const host = document.createElement("div");
  host.id = "dc-auth-host";
  document.body.appendChild(host);
  ReactDOM.createRoot(host).render(<AuthControls/>);
}
if (typeof document !== "undefined") {
  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", ensureAuthControlsMounted);
  } else {
    ensureAuthControlsMounted();
  }
}

window.DCAuthUI = { AuthModal, SearchOverlay, useAuth };