0pt/components/portal-shell.tsx

"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { useEffect, useState } from "react";
import { useT } from "@/components/locale-provider";

export type NavItem = { label: { en: string; sv: string }; href: string };

const CUSTOMER_NAV: NavItem[] = [
  { label: { en: "Overview", sv: "Översikt" }, href: "/portal" },
  { label: { en: "Subscriptions", sv: "Prenumerationer" }, href: "/portal/subscriptions" },
  { label: { en: "Files", sv: "Filer" }, href: "/portal/files" },
  { label: { en: "Integrations", sv: "Integrationer" }, href: "/portal/integrationer" },
  { label: { en: "Settings", sv: "Inställningar" }, href: "/portal/settings" },
];

const ADMIN_NAV: NavItem[] = [
  { label: { en: "Overview", sv: "Översikt" }, href: "/admin" },
  { label: { en: "Sources", sv: "Källor" }, href: "/admin/sources" },
  { label: { en: "Jobs", sv: "Jobb" }, href: "/admin/jobs" },
  { label: { en: "Tools", sv: "Verktyg" }, href: "/admin/verktyg" },
  { label: { en: "Customers", sv: "Kunder" }, href: "/admin/customers" },
];

export function PortalShell({
  variant,
  title,
  children,
}: {
  variant: "customer" | "admin";
  title: string;
  children: React.ReactNode;
}) {
  const t = useT();
  const pathname = usePathname();
  const nav = variant === "admin" ? ADMIN_NAV : CUSTOMER_NAV;
  const [email, setEmail] = useState<string | null>(null);

  useEffect(() => {
    fetch("/api/auth/me")
      .then((r) => r.json())
      .then((d) => setEmail(d?.user?.email ?? null))
      .catch(() => {});
  }, []);

  async function logout() {
    await fetch("/api/auth/logout", { method: "POST" }).catch(() => {});
    setEmail(null);
  }

  return (
    <div className="min-h-screen bg-background text-foreground">
      {/* top bar */}
      <div className="sticky top-0 z-40 flex h-16 items-center justify-between border-b border-border bg-background px-6">
        <Link href="/" className="flex items-center gap-2">
          <span className="text-lg font-semibold tracking-[-0.04em]">0pt</span>
          <span className="inline-block h-1 w-1" style={{ backgroundColor: "var(--accent-red)" }} />
          <span className="font-mono text-[10px] uppercase tracking-[0.18em] text-muted-foreground">
            {variant === "admin" ? "admin" : "portal"}
          </span>
        </Link>
        <div className="flex items-center gap-4">
          {email ? (
            <>
              <span className="font-mono text-[11px] text-muted-foreground">{email}</span>
              <button onClick={logout} className="font-mono text-[11px] uppercase tracking-[0.1em] text-muted-foreground hover:text-foreground">
                {t({ en: "Log out", sv: "Logga ut" })}
              </button>
            </>
          ) : (
            <Link href="/portal/settings" className="font-mono text-[11px] uppercase tracking-[0.1em] text-muted-foreground hover:text-foreground">
              {t({ en: "Log in", sv: "Logga in" })}
            </Link>
          )}
        </div>
      </div>

      <div className="mx-auto flex max-w-[80rem] flex-col gap-0 md:flex-row">
        {/* sidebar */}
        <aside className="shrink-0 border-b border-border md:w-56 md:border-b-0 md:border-r">
          <nav className="flex flex-row gap-0 overflow-x-auto p-2 md:flex-col md:p-4">
            {nav.map((n) => {
              const active = pathname === n.href;
              return (
                <Link
                  key={n.href}
                  href={n.href}
                  aria-current={active ? "page" : undefined}
                  className="border-l-2 px-4 py-2.5 font-mono text-[11px] uppercase tracking-[0.1em] transition-colors"
                  style={{
                    borderColor: active ? "var(--accent-red)" : "transparent",
                    color: active ? "var(--foreground)" : "var(--muted-foreground)",
                  }}
                >
                  {t(n.label)}
                </Link>
              );
            })}
            {variant === "customer" ? (
              <Link href="/bestall" className="mt-2 bg-foreground px-4 py-2.5 text-center font-mono text-[11px] uppercase tracking-[0.1em] text-background hover:bg-[var(--accent-red)]">
                {t({ en: "New order", sv: "Ny beställning" })}
              </Link>
            ) : (
              <Link href="/portal" className="mt-2 border border-border px-4 py-2.5 text-center font-mono text-[11px] uppercase tracking-[0.1em] text-muted-foreground hover:text-foreground">
                {t({ en: "← Customer view", sv: "← Kundvy" })}
              </Link>
            )}
          </nav>
        </aside>

        {/* content */}
        <main id="main-content" className="min-w-0 flex-1 px-6 py-10">
          <h1 className="text-3xl font-medium tracking-[-0.03em] md:text-4xl">{title}</h1>
          <div className="mt-8">{children}</div>
        </main>
      </div>
    </div>
  );
}

export function StatusPill({ status }: { status: string }) {
  const color =
    status === "delivered" || status === "accepted" ? "var(--prov-3)"
      : status === "in_production" || status === "review" ? "var(--accent-red)"
      : "var(--muted-foreground)";
  return (
    <span className="inline-flex items-center gap-1.5 font-mono text-[10.5px] uppercase tracking-[0.08em]">
      <span className="inline-block h-2 w-2" style={{ backgroundColor: color }} />
      {status}
    </span>
  );
}