import { Link, Outlet, useMatchRoute } from "@tanstack/react-router";
import { useSources, type Source } from "@executor/react";
import { cn } from "../lib/utils";
import { IconPlus } from "./icons";
import { LoadableBlock } from "./loadable";
import { SourceFavicon } from "./source-favicon";

// ── Status dot color ─────────────────────────────────────────────────────

const statusColor: Record<string, string> = {
  connected: "bg-primary",
  probing: "bg-amber-400",
  draft: "bg-muted-foreground/30",
  auth_required: "bg-amber-500",
  error: "bg-destructive",
};

type AppMetaEnv = {
  readonly VITE_APP_VERSION: string;
  readonly VITE_GITHUB_URL: string;
};

const { VITE_APP_VERSION, VITE_GITHUB_URL } = (import.meta as ImportMeta & {
  readonly env: AppMetaEnv;
}).env;

// ── AppShell ─────────────────────────────────────────────────────────────
export function AppShell() {
  const sources = useSources();
  const matchRoute = useMatchRoute();
  const isHome = matchRoute({ to: "/" });
  const isSecrets = matchRoute({ to: "/secrets" });
  return (
    <div className="flex h-screen overflow-hidden">
      {/* Sidebar */}
      <aside className="flex w-52 shrink-0 flex-col border-r border-sidebar-border bg-sidebar lg:w-56">
        {/* Brand */}
        <div className="flex h-12 shrink-0 items-center border-b border-sidebar-border px-4">
          <Link to="/" className="flex items-center gap-1.5">
            <span className="font-display text-base tracking-tight text-foreground">
              executor
            </span>
            <span className="rounded bg-primary/15 px-1.5 py-0.5 text-[10px] font-medium text-primary">
              v3
            </span>
          </Link>
        </div>

        {/* Main nav */}
        <nav className="flex flex-1 flex-col p-2 overflow-y-auto">
          <NavItem to="/" label="Dashboard" active={!!isHome} />
          <NavItem to="/secrets" label="Secrets" active={!!isSecrets} />

          {/* Sources */}
          <div className="mt-5 mb-1 px-2.5 text-[10px] font-medium uppercase tracking-widest text-muted-foreground/50">
            <div className="flex items-center justify-between gap-2">
              <span>Sources</span>
              <Link
                to="/sources/add"
                className="inline-flex items-center gap-1 rounded-md px-1.5 py-1 text-[10px] font-medium normal-case tracking-normal text-primary transition-colors hover:bg-sidebar-active hover:text-foreground"
              >
                <IconPlus className="size-3" />
                Add
              </Link>
            </div>
          </div>
          <LoadableBlock loadable={sources} loading="Loading...">
            {(items) =>
              items.length === 0 ? (
                <div className="px-2.5 py-2 text-[11px] leading-relaxed text-muted-foreground/40">
                  No sources yet
                </div>
              ) : (
                <div className="flex flex-col gap-px">
                  {items.map((source) => (
                    <SourceItem key={source.id} source={source} matchRoute={matchRoute} />
                  ))}
                </div>
              )
            }
          </LoadableBlock>
        </nav>

        {/* Footer */}
        <div className="shrink-0 border-t border-sidebar-border px-4 py-2.5">
          <div className="flex flex-col items-start gap-1 text-[10px] leading-none">
            <span className="text-muted-foreground/35">v{VITE_APP_VERSION}</span>
            <a
              href={VITE_GITHUB_URL}
              target="_blank"
              rel="noreferrer"
              className="text-muted-foreground/50 transition-colors hover:text-foreground"
            >
              Star on GitHub
            </a>
          </div>
        </div>
      </aside>

      {/* Main content */}
      <main className="flex flex-1 flex-col min-w-0 overflow-hidden">
        <Outlet />
      </main>
    </div>
  );
}

// ── SourceItem ───────────────────────────────────────────────────────────

function SourceItem(props: {
  source: Source;
  matchRoute: ReturnType<typeof useMatchRoute>;
}) {
  const { source, matchRoute } = props;
  const active = matchRoute({
    to: "/sources/$sourceId",
    params: { sourceId: source.id },
    fuzzy: true,
  });

  return (
    <Link
      to="/sources/$sourceId"
      params={{ sourceId: source.id }}
      search={{ tab: "model" }}
      className={cn(
        "group flex items-center gap-2 rounded-md px-2.5 py-1.5 text-[13px] transition-colors",
        active
          ? "bg-sidebar-active text-foreground font-medium"
          : "text-sidebar-foreground hover:bg-sidebar-active/60 hover:text-foreground",
      )}
    >
      <div className="flex size-3 shrink-0 items-center justify-center text-muted-foreground/50">
        <SourceFavicon endpoint={source.endpoint} kind={source.kind} className="size-3" />
      </div>
      <span className="flex-1 truncate">{source.name}</span>
      <span
        className={cn("size-1.5 shrink-0 rounded-full", statusColor[source.status] ?? "bg-muted-foreground/30")}
        title={source.status}
      />
    </Link>
  );
}

// ── NavItem ──────────────────────────────────────────────────────────────

function NavItem(props: { to: string; label: string; active: boolean }) {
  return (
    <Link
      to={props.to}
      className={cn(
        "flex items-center gap-2.5 rounded-md px-2.5 py-1.5 text-[13px] transition-colors",
        props.active
          ? "bg-sidebar-active text-foreground font-medium"
          : "text-sidebar-foreground hover:bg-sidebar-active/60 hover:text-foreground",
      )}
    >
      {props.label}
    </Link>
  );
}