import Link from "next/link";
import Image from "next/image";
import { Suspense, type ReactNode } from "react";
import { ROLES, ROUTES } from "@/lib/constants";
import { env } from "@/lib/env";
import { getLocalDb } from "@/lib/local-db";
import { getRegionCodes, getRegionLabels } from "@/lib/regions";
import type { ViewerContext } from "@/lib/types";
import { signOutAction } from "@/app/(app)/actions";
import { SidebarNav } from "@/components/layout/sidebar-nav";
import { AdminScopeBar } from "@/components/layout/admin-scope-bar";
import { AdminSidebarBrand } from "@/components/layout/admin-sidebar-brand";
import { FormSubmitButton } from "@/components/ui/form-submit-button";
import { release } from "@/lib/release";

function toDateOnly(value: string | null | undefined) {
  if (!value) return "";
  const date = new Date(value);
  if (Number.isNaN(date.getTime())) return "";
  return date.toISOString().slice(0, 10);
}

function formatRangeDate(value: string) {
  if (!value) return "";
  return new Intl.DateTimeFormat("en-GB", { day: "2-digit", month: "short", year: "numeric" }).format(
    new Date(`${value}T00:00:00Z`),
  );
}

async function getSidebarDateWindow() {
  const db = await getLocalDb();
  let earliest = "";
  let latest = "";

  for (const row of db.raw_email_events) {
    const dateOnly = toDateOnly(row.sent_date || row.created_at);
    if (!dateOnly) continue;
    if (!earliest || dateOnly < earliest) earliest = dateOnly;
    if (!latest || dateOnly > latest) latest = dateOnly;
  }

  return earliest && latest ? { earliest, latest } : null;
}

export async function AppShell({
  children,
  viewer,
}: {
  children: ReactNode;
  viewer: ViewerContext;
}) {
  const shared = [
    { href: ROUTES.dashboard, label: "VAE Dashboard" },
    ...(release.clmEnabled ? [{ href: ROUTES.clmDashboard, label: "CLM Dashboard" }] : []),
    { href: ROUTES.metadata, label: "Data Library" },
  ];

  const navItems =
    viewer.role === ROLES.admin
      ? [
          ...shared.slice(0, release.clmEnabled ? 2 : 1),
          ...(release.importsEnabled ? [{ href: ROUTES.upload, label: "New Data Import" }] : []),
          ...shared.slice(release.clmEnabled ? 2 : 1),
          { href: ROUTES.adminAuditLog, label: "Audit Log" },
        ]
      : shared;
  const regionLabels = getRegionLabels(viewer.allowedCountries);
  const regionCodes = getRegionCodes();
  const primaryRegionCode = regionLabels[0]?.split(":")[0] ?? "";
  const sidebarDateWindow = await getSidebarDateWindow();
  const heading =
    viewer.role === ROLES.affiliate && primaryRegionCode
      ? `${primaryRegionCode} Dashboard`
      : "All Dashboards";
  const hideSubHeading = primaryRegionCode === "OPEL";
  const subHeading =
    viewer.role === ROLES.affiliate && regionLabels.length > 0
      ? regionLabels[0]
      : "Global Otsuka performance";

  return (
    <div className="min-h-screen">
      <div className="min-h-screen lg:relative">
        <aside className="flex flex-col border-r border-[#25589a] bg-[linear-gradient(180deg,#2C6BB6_0%,#255ea3_65%,#214f89_100%)] p-6 text-white shadow-[inset_0_1px_0_rgba(255,255,255,0.2),0_22px_45px_-28px_rgba(8,28,56,0.85)] lg:fixed lg:inset-y-0 lg:left-0 lg:z-40 lg:h-auto lg:w-[330px] lg:overflow-hidden lg:rounded-r-[28px]">
          <div>
            <Link href={ROUTES.dashboard} className="block">
              {viewer.role === ROLES.admin ? (
                <Suspense
                  fallback={
                    <>
                      <h1 className="mt-3 text-5xl font-black leading-[0.95] tracking-tight text-white">
                        {heading}
                      </h1>
                      {hideSubHeading ? null : (
                        <p className="mt-2 text-sm font-semibold uppercase tracking-[0.14em] text-[#F7993A]">
                          {subHeading}
                        </p>
                      )}
                    </>
                  }
                >
                  <AdminSidebarBrand scopes={regionCodes} />
                </Suspense>
              ) : (
                <>
                  <h1 className="mt-3 text-5xl font-black leading-[0.95] tracking-tight text-white">
                    {heading}
                  </h1>
                  {hideSubHeading ? null : (
                    <p className="mt-2 text-sm font-semibold uppercase tracking-[0.14em] text-[#F7993A]">
                      {subHeading}
                    </p>
                  )}
                </>
              )}
            </Link>
            <div className="mt-8 px-1">
              <Suspense
                fallback={
                  <nav className="space-y-2">
                    {navItems.map((item) => (
                      <Link
                        key={item.href}
                        href={item.href}
                        className="group block rounded-2xl px-4 py-3 text-sm font-medium text-blue-100/95 transition duration-200 hover:bg-white/10 hover:text-white"
                      >
                        <span className="flex items-center gap-2.5">
                          <span className="h-2.5 w-2.5 rounded-full bg-[#F7993A] opacity-80 group-hover:opacity-100" />
                          {item.label}
                        </span>
                      </Link>
                    ))}
                  </nav>
                }
              >
                <SidebarNav items={navItems} />
              </Suspense>
            </div>
          </div>

          <div className="mt-auto pt-10">
            <form action={signOutAction}>
              <FormSubmitButton
                idleLabel="Log out"
                pendingLabel="Logging out..."
                variant="secondary"
                className="w-full rounded-2xl border-white/20 bg-white/8 text-sm font-semibold text-white/80 shadow-none transition hover:bg-white/16 hover:text-white"
              />
            </form>

            {sidebarDateWindow ? (
              <div className="mt-5">
                <p className="whitespace-nowrap text-sm text-white">
                  Data range: <span className="font-semibold">{formatRangeDate(sidebarDateWindow.earliest)}</span> to{" "}
                  <span className="font-semibold">{formatRangeDate(sidebarDateWindow.latest)}</span>
                </p>
              </div>
            ) : null}

            <div className="pt-8">
              <Image
                src="/brand/otsuka-white_766.png"
                alt="Otsuka"
                width={220}
                height={113}
                className="h-auto w-full max-w-[232px]"
                priority
              />
            </div>
          </div>
        </aside>

        <main className="min-h-screen min-w-0 px-3 pt-3 pb-0 sm:px-4 sm:pt-4 sm:pb-0 lg:ml-[330px] lg:px-6 lg:pt-6 lg:pb-0">
          <div className="mx-auto flex min-h-full w-full max-w-[1650px] flex-col space-y-4">
            {viewer.role === ROLES.admin ? (
              <Suspense
                fallback={
                  <div className="rounded-2xl border border-slate-900/20 bg-[linear-gradient(180deg,#0f172a_0%,#111e36_100%)] px-3 py-2 text-sm text-blue-100">
                    Loading admin scope...
                  </div>
                }
              >
                <AdminScopeBar scopes={regionCodes} />
              </Suspense>
            ) : null}
            {children}
          </div>
        </main>
      </div>
    </div>
  );
}