"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { useFilters } from "@/components/shell/filter-context";
import { GROUP_LABELS } from "@/lib/fleet/labels";
import type { SiteId, VehicleGroup } from "@/lib/fleet/types";

const NAV = [
  { href: "/", label: "Überblick" },
  { href: "/fahrzeuge", label: "Fahrzeuge" },
  { href: "/uebergabe", label: "Übergabe" },
  { href: "/laden", label: "Laden" },
  { href: "/abend-check", label: "Abend-Check" },
] as const;

const SITES: { id: SiteId | "all"; label: string }[] = [
  { id: "all", label: "Alle Standorte" },
  { id: "muc-nord", label: "München Nord" },
  { id: "muc-sued", label: "München Süd" },
];

const GROUPS: { id: VehicleGroup | "all"; label: string }[] = [
  { id: "all", label: "Alle Gruppen" },
  ...(Object.entries(GROUP_LABELS) as [VehicleGroup, string][]).map(
    ([id, label]) => ({ id, label }),
  ),
];

export function AppShell({ children }: { children: React.ReactNode }) {
  const pathname = usePathname();
  const { siteId, group, setSiteId, setGroup } = useFilters();

  return (
    <div className="min-h-full bg-[var(--surface)] text-[var(--ink)]">
      <header className="border-b border-[var(--line)] bg-[var(--panel)]">
        <div className="mx-auto flex max-w-7xl flex-col gap-4 px-4 py-4 sm:px-6">
          <div className="flex flex-wrap items-end justify-between gap-3">
            <div>
              <p className="font-[family-name:var(--font-display)] text-2xl tracking-tight text-[var(--ink)] sm:text-3xl">
                Verwaltungshub
              </p>
              <p className="mt-0.5 text-sm text-[var(--muted)]">
                Volvo Fleet Dashboard · Mehrstandort Autohaus
              </p>
            </div>
            <span className="rounded-sm border border-[var(--accent)]/40 bg-[var(--accent-soft)] px-2.5 py-1 text-xs font-medium uppercase tracking-wide text-[var(--accent-ink)]">
              Mockdaten
            </span>
          </div>

          <nav className="flex flex-wrap gap-1 border-t border-[var(--line)] pt-3">
            {NAV.map((item) => {
              const active =
                item.href === "/"
                  ? pathname === "/"
                  : pathname.startsWith(item.href);
              return (
                <Link
                  key={item.href}
                  href={item.href}
                  className={`rounded-sm px-3 py-1.5 text-sm transition ${
                    active
                      ? "bg-[var(--ink)] text-white"
                      : "text-[var(--muted)] hover:bg-[var(--surface)] hover:text-[var(--ink)]"
                  }`}
                >
                  {item.label}
                </Link>
              );
            })}
          </nav>

          <div className="flex flex-wrap gap-4">
            <label className="flex flex-col gap-1 text-xs text-[var(--muted)]">
              Standort
              <select
                value={siteId}
                onChange={(e) => setSiteId(e.target.value as SiteId | "all")}
                className="min-w-[10rem] rounded-sm border border-[var(--line)] bg-white px-2 py-1.5 text-sm text-[var(--ink)]"
              >
                {SITES.map((s) => (
                  <option key={s.id} value={s.id}>
                    {s.label}
                  </option>
                ))}
              </select>
            </label>
            <div className="flex flex-col gap-1">
              <span className="text-xs text-[var(--muted)]">Fahrzeuggruppe</span>
              <div className="flex flex-wrap gap-1">
                {GROUPS.map((g) => (
                  <button
                    key={g.id}
                    type="button"
                    onClick={() => setGroup(g.id)}
                    className={`rounded-sm px-2.5 py-1 text-xs transition ${
                      group === g.id
                        ? "bg-[var(--navy)] text-white"
                        : "border border-[var(--line)] bg-white text-[var(--muted)] hover:border-[var(--navy)]/40"
                    }`}
                  >
                    {g.label}
                  </button>
                ))}
              </div>
            </div>
          </div>
        </div>
      </header>
      <main className="mx-auto max-w-7xl px-4 py-6 sm:px-6">{children}</main>
    </div>
  );
}