/* global React, ReactDOM */
const { useState, useEffect, useRef, useMemo } = React;
const { Dashboard, BarDetail, CountScreen } = window.LagerScreens1;
const { OrdersScreen, ReturnScreen } = window.LagerScreens2;
const { CreditNotesScreen, DiscrepanciesScreen, SettingsScreen } = window.LagerScreens3;
const { Ico, festivalDay } = window.LagerUI;
const { LoginScreen, LoadingScreen } = window.LagerAuth;
const D = window.LAGER_DATA;
if (!D.labels) {
  D.labels = { unit: 'Bar', units: 'Barer', orgName: 'Festegnen 2026', isRestaurant: false };
}

const IS_DEV = window.location.hostname === "localhost" ||
               window.location.hostname === "127.0.0.1" ||
               new URLSearchParams(window.location.search).has("dev");

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "device": "desktop",
  "theme": "light",
  "empty": false,
  "role": "admin"
}/*EDITMODE-END*/;

const NAV = [
  { id: "dashboard", label: "Overblik",       icon: "dash"  },
  { id: "bar",       label: "Bar-detalje",    icon: "bar"   },
  { id: "count",     label: "Optælling",      icon: "count" },
  { id: "orders",    label: "Bestilling",     icon: "order", badge: D.orderRequests.length },
  { id: "return",    label: "Retur",          icon: "retur" },
  { id: "credit",    label: "Kreditnotaer",   icon: "doc",   badge: D.creditNotes.length },
  { id: "discrep",   label: "Afvigelser",     icon: "warn",  badgeTone: "warn", badge: D.creditNotes.reduce((s,c)=>s+c.lines.filter(l=>!l.ok).length,0) },
  { id: "settings",  label: "Indstillinger",  icon: "set"   },
];

const MOBILE_TABS = ["dashboard", "count", "orders", "credit", "settings"];

function SearchBox({ go }) {
  const [q, setQ] = useState("");
  const [open, setOpen] = useState(false);
  const [sel, setSel] = useState(0);
  const inputRef = useRef(null);

  useEffect(() => {
    const handler = (e) => {
      if ((e.metaKey || e.ctrlKey) && e.key === "k") { e.preventDefault(); inputRef.current?.focus(); setOpen(true); }
      if (e.key === "Escape") { setOpen(false); setQ(""); inputRef.current?.blur(); }
    };
    window.addEventListener("keydown", handler);
    return () => window.removeEventListener("keydown", handler);
  }, []);

  const results = useMemo(() => {
    if (!q.trim()) return [];
    const lq = q.toLowerCase();
    const items = [];
    D.bars.forEach(b => {
      if (b.name.toLowerCase().includes(lq) || b.location.toLowerCase().includes(lq) || b.responsible.toLowerCase().includes(lq))
        items.push({ type: "Bar", label: b.name, sub: b.location, action: () => go("bar", b.id) });
    });
    D.products.forEach(p => {
      if (p.name.toLowerCase().includes(lq) || p.cat.toLowerCase().includes(lq) || p.supplier.toLowerCase().includes(lq))
        items.push({ type: "Vare", label: p.name, sub: `${p.cat} · ${p.supplier}`, action: () => go("bar") });
    });
    D.creditNotes.forEach(c => {
      if (c.supplier.toLowerCase().includes(lq) || c.id.toLowerCase().includes(lq))
        items.push({ type: "Kreditnota", label: c.supplier, sub: c.id, action: () => go("credit") });
    });
    NAV.forEach(n => {
      if (n.label.toLowerCase().includes(lq))
        items.push({ type: "Side", label: n.label, sub: "", action: () => go(n.id) });
    });
    return items.slice(0, 8);
  }, [q]);

  const pick = (item) => { item.action(); setQ(""); setOpen(false); inputRef.current?.blur(); };

  return (
    <div style={{position:"relative"}}>
      <Ico.search style={{width:14,height:14,position:"absolute",left:9,top:8,color:"var(--text-faint)",pointerEvents:"none"}}/>
      <input ref={inputRef} className="input" placeholder="Søg… (⌘K)" value={q}
             style={{paddingLeft:28,width:220}}
             onChange={e => { setQ(e.target.value); setOpen(true); setSel(0); }}
             onFocus={() => setOpen(true)}
             onBlur={() => setTimeout(() => setOpen(false), 150)}
             onKeyDown={e => {
               if (e.key === "ArrowDown") { e.preventDefault(); setSel(s => Math.min(s+1, results.length-1)); }
               if (e.key === "ArrowUp")   { e.preventDefault(); setSel(s => Math.max(s-1, 0)); }
               if (e.key === "Enter" && results[sel]) pick(results[sel]);
             }}/>
      {open && results.length > 0 && (
        <div style={{position:"absolute",top:"calc(100% + 4px)",right:0,width:320,background:"var(--bg-card)",border:"1px solid var(--border)",borderRadius:"var(--radius)",boxShadow:"var(--shadow-lg)",zIndex:100,overflow:"hidden"}}>
          {results.map((r, i) => (
            <button key={i} onMouseDown={() => pick(r)}
                    style={{display:"flex",alignItems:"center",gap:10,width:"100%",textAlign:"left",padding:"8px 12px",border:0,cursor:"pointer",background:i===sel?"var(--bg-hover)":"transparent",borderBottom:i<results.length-1?"1px solid var(--border)":"none"}}>
              <span style={{fontSize:10,fontWeight:600,letterSpacing:"0.05em",textTransform:"uppercase",color:"var(--text-muted)",background:"var(--bg-sunken)",padding:"2px 5px",borderRadius:3,whiteSpace:"nowrap",minWidth:64,textAlign:"center"}}>{r.type}</span>
              <div style={{flex:1,minWidth:0}}>
                <div style={{fontSize:13,fontWeight:500,color:"var(--text)"}}>{r.label}</div>
                {r.sub && <div style={{fontSize:11,color:"var(--text-muted)"}}>{r.sub}</div>}
              </div>
              <Ico.arrow style={{width:12,height:12,color:"var(--text-faint)",flexShrink:0}}/>
            </button>
          ))}
        </div>
      )}
    </div>
  );
}

function App({ profile, onLogout }) {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [route, setRoute] = useState({ screen: "dashboard", barId: D.bars[0].id, countType: "evening" });
  const [countState, setCountState] = useState(() =>
    Object.fromEntries(D.bars.map(b => [b.id, { evening: null, final: null }]))
  );
  const [notesList, setNotesList] = useState(() => D.creditNotes);

  useEffect(() => {
    document.documentElement.dataset.theme = t.theme;
  }, [t.theme]);

  const go = (screen, barId, countType) => setRoute(r => ({
    screen,
    barId: barId || r.barId,
    countType: countType !== undefined ? countType : r.countType,
  }));

  const screenEl = (() => {
    const screen = route.screen;
    if (t.empty && screen === "dashboard") return <Dashboard go={go} empty />;
    switch (screen) {
      case "dashboard": return <Dashboard go={go} countState={countState}/>;
      case "bar":       return <BarDetail barId={route.barId} go={go} countState={countState}/>;
      case "count":     return <CountScreen barId={route.barId} countType={route.countType ?? "evening"} go={go} role={t.role} countState={countState} setCountState={setCountState}/>;
      case "orders":    return <OrdersScreen go={go} countState={countState}/>;
      case "return":    return <ReturnScreen go={go} barId={route.barId} countState={countState}/>;
      case "credit":    return <CreditNotesScreen go={go} notesList={notesList} setNotesList={setNotesList}/>;
      case "discrep":   return <DiscrepanciesScreen go={go} notesList={notesList} setNotesList={setNotesList}/>;
      case "settings":  return <SettingsScreen profile={profile}/>;
      default: return <Dashboard go={go}/>;
    }
  })();

  const crumbs = {
    dashboard: "Overblik",
    bar: `${D.labels.unit}-detalje`,
    count: "Optælling",
    orders: "Bestillinger dag 2",
    return: "Endelig retur",
    credit: "Kreditnotaer",
    discrep: "Afvigelser",
    settings: "Indstillinger",
  };

  return (
    <div className="app" data-device={t.device} data-screen-label={`Lager · ${crumbs[route.screen]}`}>
      <aside className="sidebar">
        <div className="brand">
          <div className="brand-mark"/>
          <div>
            <div className="brand-text">Lager</div>
            <div className="brand-sub">{D.labels.orgName}</div>
          </div>
        </div>

        <div className="nav-section">Drift</div>
        {NAV.slice(0, 5).map(n => {
          const IconC = Ico[n.icon];
          const label = n.id === 'bar' ? `${D.labels.unit}-detalje` : n.label;
          return (
            <button key={n.id} className="nav-item"
                    aria-current={route.screen === n.id ? "true" : undefined}
                    onClick={() => go(n.id)}>
              <IconC className="nav-icon"/>
              {label}
              {n.badge ? <span className={"nav-badge " + (n.badgeTone || "")}>{n.badge}</span> : null}
            </button>
          );
        })}

        <div className="nav-section">Afregning</div>
        {NAV.slice(5, 7).map(n => {
          const IconC = Ico[n.icon];
          return (
            <button key={n.id} className="nav-item"
                    aria-current={route.screen === n.id ? "true" : undefined}
                    onClick={() => go(n.id)}>
              <IconC className="nav-icon"/>
              {n.label}
              {n.badge ? <span className={"nav-badge " + (n.badgeTone || "")}>{n.badge}</span> : null}
            </button>
          );
        })}

        <div className="nav-section">System</div>
        {NAV.slice(7).map(n => {
          const IconC = Ico[n.icon];
          return (
            <button key={n.id} className="nav-item"
                    aria-current={route.screen === n.id ? "true" : undefined}
                    onClick={() => go(n.id)}>
              <IconC className="nav-icon"/>
              {n.label}
            </button>
          );
        })}

        <div className="sidebar-footer">
          <div className="avatar">{(profile?.name?.[0] ?? D.currentUser.initials[0]).toUpperCase()}</div>
          <div style={{flex:1, minWidth:0}}>
            <div style={{color:"var(--text)", fontWeight:500, fontSize:12.5}}>{profile?.name ?? D.currentUser.name}</div>
            <div>{D.currentUser.role}</div>
          </div>
          <button className="btn" data-size="sm" data-variant="ghost" onClick={onLogout} style={{flexShrink:0}}>Log ud</button>
        </div>
      </aside>

      <main className="main">
        <div className="topbar">
          <div className="crumb">{D.labels.orgName} / <b>{crumbs[route.screen]}</b></div>
          {!D.labels.isRestaurant && (() => { const fd = festivalDay(); return <span className="day-chip"><span className="day-num">{fd.num}</span> Dag {fd.num} af {fd.total} · {fd.name}</span>; })()}
          <span className="topbar-spacer"/>
          <SearchBox go={go}/>
        </div>

        {["bar","count","return"].includes(route.screen) && (
          <div className="dept-tabs" role="tablist" aria-label="Afdelinger">
            {D.bars.map(b => {
              const r = window.LagerUI.barRollup(b.id);
              const tone = r.empty ? "danger" : r.low ? "warn" : "";
              return (
                <button key={b.id} className="dept-tab"
                        aria-current={route.barId === b.id ? "true" : undefined}
                        onClick={() => setRoute(s => ({ ...s, barId: b.id }))}>
                  <span className={"bar-status " + tone}/>
                  {b.name}
                  <span className="dept-tab-count">{r.total}</span>
                </button>
              );
            })}
          </div>
        )}

        {screenEl}
      </main>

      <nav className="tabbar">
        {MOBILE_TABS.map(id => {
          const n = NAV.find(x => x.id === id);
          const IconC = Ico[n.icon];
          return (
            <button key={id} className="tabbar-item"
                    aria-current={route.screen === id ? "true" : undefined}
                    onClick={() => go(id)}>
              <span className="tabbar-icon"><IconC style={{width:18, height:18}}/></span>
              {n.label}
            </button>
          );
        })}
      </nav>

      {IS_DEV && (
        <TweaksPanel title="Lager · Tweaks">
          <TweakSection label="Enhed"/>
          <TweakRadio label="Layout" value={t.device}
                      options={[{value:"desktop",label:"Desktop"},{value:"mobile",label:"Mobil"}]}
                      onChange={(v)=>setTweak("device", v)}/>
          <TweakSection label="Tema"/>
          <TweakRadio label="Farver" value={t.theme}
                      options={[{value:"light",label:"Lys"},{value:"dark",label:"Mørk"},{value:"color",label:"Farve"}]}
                      onChange={(v)=>setTweak("theme", v)}/>
          <TweakSection label="Data"/>
          <TweakToggle label="Tom tilstand" value={t.empty} onChange={(v)=>setTweak("empty", v)}/>
        </TweaksPanel>
      )}
    </div>
  );
}

function Root() {
  const [session, setSession] = useState(undefined);
  const [profile, setProfile] = useState(null);
  const [countState, setCountState] = useState(() =>
    Object.fromEntries(D.bars.map(b => [b.id, { evening: null, final: null }]))
  );

  const loadOrgData = async (orgId) => {
    const sb = window.supabaseClient;
    const [orgRes, barsRes, productsRes, invRes] = await Promise.all([
      sb.from("organizations").select("*").eq("id", orgId).single(),
      sb.from("bars").select("*").eq("org_id", orgId).order("sort_order"),
      sb.from("products").select("*").eq("org_id", orgId),
      sb.from("inventory").select("*").eq("org_id", orgId),
    ]);
    if (!barsRes.data?.length) return;

    const org = orgRes.data ?? { name: 'Festegnen 2026', unit_type: 'bar' };
    const isRestaurant = org.unit_type === 'restaurant';
    const labels = {
      unit: isRestaurant ? 'Restaurant' : 'Bar',
      units: isRestaurant ? 'Restauranter' : 'Barer',
      orgName: org.name,
      isRestaurant,
    };

    const bars = barsRes.data.map(b => ({
      id: b.id, name: b.name,
      location: b.location || "", responsible: b.responsible || "",
      lastCount: null, status: "live",
    }));
    const products = productsRes.data.map(p => ({
      id: p.id, name: p.name, cat: p.category || "",
      unit: p.unit || "stk", supplier: p.supplier || "",
      price: parseFloat(p.price) || 0, low: p.low_threshold || 10,
    }));
    const stock = {};
    bars.forEach(b => { stock[b.id] = []; });
    invRes.data.forEach(inv => {
      if (stock[inv.bar_id]) stock[inv.bar_id].push({
        pid: inv.product_id,
        in: inv.start_qty, current: inv.current_qty,
        par: inv.par_qty, target: inv.target_qty, trend: 0,
      });
    });
    Object.assign(window.LAGER_DATA, { bars, products, stock, labels });
  };

  const loadProfile = async (uid) => {
    const { data } = await window.supabaseClient.from("profiles").select("*").eq("id", uid).single();
    if (data?.org_id) await loadOrgData(data.org_id);
    setProfile(data ?? null);
  };

  useEffect(() => {
    window.supabaseClient.auth.getSession().then(({ data: { session } }) => {
      setSession(session ?? null);
      if (session) loadProfile(session.user.id);
    });
    const { data: { subscription } } = window.supabaseClient.auth.onAuthStateChange((_e, session) => {
      setSession(session ?? null);
      if (session) loadProfile(session.user.id);
      else setProfile(null);
    });
    return () => subscription.unsubscribe();
  }, []);

  const logout = () => window.supabaseClient.auth.signOut();

  if (session === undefined || (session && !profile)) return <LoadingScreen/>;
  if (!session) return <LoginScreen/>;
  if (profile.role === "bar_manager") {
    return <window.LagerAreaApp profile={profile} onLogout={logout} countState={countState} setCountState={setCountState}/>;
  }
  return <App profile={profile} onLogout={logout}/>;
}

ReactDOM.createRoot(document.getElementById("root")).render(<Root/>);