"use client";

import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import { api } from "@/lib/api";
import { LiveProvider, useLive } from "@/lib/events";
import { fmtGB } from "@/lib/format";
import { Dot } from "./ui";

const NAV = [
  { href: "/", label: "Dashboard", icon: "◫" },
  { href: "/models", label: "Models", icon: "▤" },
  { href: "/playground", label: "Playground", icon: "▷" },
  { href: "/downloads", label: "Downloads", icon: "⇩" },
  { href: "/harvester", label: "Harvester", icon: "✦" },
  { href: "/keys", label: "API Keys", icon: "⚿" },
  { href: "/system", label: "System", icon: "◉" },
  { href: "/settings", label: "Settings", icon: "⚙" },
  { href: "/docs", label: "API Docs", icon: "❯" },
];

type AuthState = { checked: boolean; authenticated: boolean; needsSetup: boolean; email?: string };

export function Shell({ children }: { children: React.ReactNode }) {
  const path = usePathname();
  const router = useRouter();
  const [auth, setAuth] = useState<AuthState>({ checked: false, authenticated: false, needsSetup: false });
  const isLogin = path === "/login";

  useEffect(() => {
    let alive = true;
    api.get<{ needs_setup: boolean; authenticated: boolean; principal: { name: string } | null }>("/api/auth/status")
      .then((s) => {
        if (!alive) return;
        setAuth({ checked: true, authenticated: s.authenticated, needsSetup: s.needs_setup, email: s.principal?.name });
        if (!s.authenticated && !isLogin) router.replace(`/login?next=${encodeURIComponent(path)}`);
        if (s.authenticated && isLogin) router.replace("/");
      })
      .catch(() => alive && setAuth({ checked: true, authenticated: false, needsSetup: false }));
    return () => { alive = false; };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [path]);

  if (isLogin) return <LiveProvider enabled={false}>{children}</LiveProvider>;
  if (!auth.checked || !auth.authenticated) {
    return <div className="min-h-screen grid place-items-center text-ink-3 text-sm">Loading…</div>;
  }
  return (
    <LiveProvider enabled>
      <div className="min-h-screen md:grid md:grid-cols-[232px_1fr]">
        <Sidebar path={path} email={auth.email} />
        <main className="min-w-0 px-4 py-5 md:px-8 md:py-7 pb-24 md:pb-8 max-w-[1400px]">{children}</main>
        <MobileNav path={path} />
      </div>
    </LiveProvider>
  );
}

function Sidebar({ path, email }: { path: string; email?: string }) {
  const live = useLive();
  const router = useRouter();
  const cur = live.manager?.loaded.find((w) => w.status === "ready");
  const loading = live.manager && Object.values(live.manager.progress).length > 0;
  return (
    <aside className="hidden md:flex flex-col border-r border-border bg-surface/60 sticky top-0 h-screen">
      <div className="px-5 pt-5 pb-4 flex items-center gap-2.5">
        <div className="h-7 w-7 rounded-lg bg-accent grid place-items-center text-white font-bold text-sm">λ</div>
        <div>
          <div className="font-semibold tracking-tight leading-none">LLM API</div>
          <div className="text-[11px] text-ink-3 mt-0.5">private inference</div>
        </div>
      </div>
      <nav className="px-3 flex flex-col gap-0.5">
        {NAV.map((n) => {
          const active = n.href === "/" ? path === "/" : path.startsWith(n.href);
          return (
            <Link key={n.href} href={n.href}
              className={`flex items-center gap-2.5 px-2.5 py-1.5 rounded-lg text-[13px] transition-colors ${active ? "bg-surface-3 text-ink" : "text-ink-2 hover:bg-surface-2 hover:text-ink"}`}>
              <span className="w-4 text-center text-ink-3">{n.icon}</span>{n.label}
            </Link>
          );
        })}
      </nav>
      <div className="mt-auto px-4 pb-4 flex flex-col gap-3">
        <div className="card p-3 text-xs">
          <div className="flex items-center justify-between mb-1.5">
            <span className="label">Current model</span>
            <span className={`flex items-center gap-1 text-[11px] ${live.connected ? "text-good" : "text-ink-3"}`}><Dot className={live.connected ? "bg-good" : "bg-ink-3"} />{live.connected ? "live" : "offline"}</span>
          </div>
          {cur ? (
            <>
              <div className="font-medium truncate" title={cur.model_id}>{cur.model_id}</div>
              <div className="text-ink-3 mt-0.5 num">{fmtGB(cur.measured_gb || cur.estimate_gb)} · {cur.runtime} · ctx {Math.round(cur.context / 1024)}K</div>
            </>
          ) : loading ? (
            <div className="text-accent pulse">Loading model…</div>
          ) : (
            <div className="text-ink-3">No model loaded</div>
          )}
          {live.metrics && (
            <div className="mt-2 text-ink-3 num">RAM {live.metrics.mem_used_gb.toFixed(1)} / {live.metrics.mem_total_gb.toFixed(0)} GB · GPU {live.metrics.gpu_percent ?? "—"}%</div>
          )}
        </div>
        <div className="flex items-center justify-between text-xs text-ink-3 px-1">
          <span className="truncate" title={email}>{email}</span>
          <button className="btn btn-ghost btn-sm" onClick={async () => { await api.post("/api/auth/logout"); router.replace("/login"); }}>Sign out</button>
        </div>
      </div>
    </aside>
  );
}

function MobileNav({ path }: { path: string }) {
  const items = NAV.slice(0, 5);
  return (
    <nav className="md:hidden fixed bottom-0 inset-x-0 z-40 bg-surface/95 backdrop-blur border-t border-border grid grid-cols-6 pb-[env(safe-area-inset-bottom)]">
      {items.map((n) => {
        const active = n.href === "/" ? path === "/" : path.startsWith(n.href);
        return (
          <Link key={n.href} href={n.href} className={`flex flex-col items-center gap-0.5 py-2 text-[10px] ${active ? "text-ink" : "text-ink-3"}`}>
            <span className="text-base leading-none">{n.icon}</span>{n.label}
          </Link>
        );
      })}
      <MoreMenu path={path} />
    </nav>
  );
}

function MoreMenu({ path }: { path: string }) {
  const [open, setOpen] = useState(false);
  const rest = NAV.slice(5);
  const active = rest.some((n) => path.startsWith(n.href));
  return (
    <>
      <button onClick={() => setOpen((o) => !o)} className={`flex flex-col items-center gap-0.5 py-2 text-[10px] ${active ? "text-ink" : "text-ink-3"}`}>
        <span className="text-base leading-none">⋯</span>More
      </button>
      {open && (
        <div className="fixed inset-0 z-50 bg-black/50" onClick={() => setOpen(false)}>
          <div className="absolute bottom-0 inset-x-0 card rounded-b-none p-2 pb-[calc(env(safe-area-inset-bottom)+8px)]" onClick={(e) => e.stopPropagation()}>
            {rest.map((n) => (
              <Link key={n.href} href={n.href} onClick={() => setOpen(false)} className="flex items-center gap-3 px-3 py-3 text-sm rounded-lg hover:bg-surface-2">
                <span className="w-5 text-center text-ink-3">{n.icon}</span>{n.label}
              </Link>
            ))}
            <button className="flex items-center gap-3 px-3 py-3 text-sm rounded-lg hover:bg-surface-2 w-full text-left text-ink-2"
              onClick={async () => { await api.post("/api/auth/logout"); location.href = "/login"; }}>
              <span className="w-5 text-center text-ink-3">⏻</span>Sign out
            </button>
          </div>
        </div>
      )}
    </>
  );
}