import * as React from "react";
import { redirect } from "next/navigation";
import { ArrowLeft, Eye } from "lucide-react";
import { stopImpersonation } from "@/lib/guards";
import { panelTexts } from "@/lib/i18n/panel";
import type { PanelUser } from "@/lib/panel-nav";
import { PanelSidebar } from "@/components/panel/sidebar";
import { PanelHeader } from "@/components/panel/header";

export type { PanelUser };

function ImpersonationBanner({ username }: { username: string }) {
  async function returnToAdmin() {
    "use server";
    await stopImpersonation();
    redirect("/admin");
  }

  return (
    <div className="flex flex-wrap items-center gap-x-3 gap-y-1.5 border-b border-amber-500/40 bg-amber-400/20 px-3 py-2 text-sm text-amber-950 sm:px-6 dark:bg-amber-500/15 dark:text-amber-200">
      <span className="flex items-center gap-2 font-medium">
        <Eye className="size-4 shrink-0" />
        {panelTexts.impersonation.viewingAs}{" "}
        <strong className="font-mono font-semibold">{username}</strong>
      </span>
      <span className="hidden text-xs text-amber-900/70 md:inline dark:text-amber-200/60">
        {panelTexts.impersonation.hint}
      </span>
      <form action={returnToAdmin} className="ml-auto">
        <button
          type="submit"
          className="inline-flex items-center gap-1.5 rounded-lg border border-amber-600/40 bg-amber-500/25 px-2.5 py-1 text-xs font-semibold transition-colors hover:bg-amber-500/40 focus-visible:ring-2 focus-visible:ring-amber-600/50 focus-visible:outline-none dark:border-amber-400/30"
        >
          <ArrowLeft className="size-3.5" />
          {panelTexts.impersonation.returnToAdmin}
        </button>
      </form>
    </div>
  );
}

/**
 * Full client-panel chrome: fixed navy sidebar, sticky header, impersonation banner.
 * Consumed by app/(panel)/layout.tsx and by the session branch of `/` and `/services`.
 */
export function PanelShell({
  user,
  children,
}: {
  user: PanelUser;
  children: React.ReactNode;
}) {
  return (
    <div className="min-h-screen bg-background">
      <a
        href="#panel-content"
        className="sr-only focus:not-sr-only focus:fixed focus:top-3 focus:left-3 focus:z-50 focus:rounded-lg focus:bg-blue-600 focus:px-3 focus:py-2 focus:text-sm focus:font-medium focus:text-white"
      >
        {panelTexts.header.skipToContent}
      </a>

      <PanelSidebar />

      <div className="flex min-h-screen flex-col lg:pl-64">
        <div className="sticky top-0 z-30">
          {user.impersonated ? <ImpersonationBanner username={user.username} /> : null}
          <PanelHeader user={user} />
        </div>

        <main id="panel-content" className="flex-1">
          <div className="mx-auto w-full max-w-screen-2xl p-4 sm:p-6">{children}</div>
        </main>
      </div>
    </div>
  );
}

export default PanelShell;