"use client";

import * as React from "react";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { PageHeader } from "@exxatdesignux/ui/components/ui/page-header";
import { SidebarNavLabel } from "@/components/ui/sidebar";
import { Tip } from "@/components/ui/tip";
import { UtilityBarDenseContent } from "@/components/design-system/utility-bar-previews";
import { useAltKeyLabel, useModKeyLabel } from "@/hooks/use-mod-key-label";
import { cn } from "@/lib/utils";

interface NavItem {
  label: string;
  icon: string;
  active?: boolean;
  badge?: string;
}

const PRIMARY_ITEMS: NavItem[] = [
  { label: "Dashboard", icon: "fa-grid-2" },
  {
    label: "Placements",
    icon: "fa-briefcase-medical",
    active: true,
    badge: "12",
  },
  { label: "Students", icon: "fa-user-graduate" },
  { label: "Compliance", icon: "fa-shield-check" },
];

function ExpandedNavRow({ item }: { item: NavItem }) {
  return (
    <Button
      type="button"
      variant="ghost"
      aria-current={item.active ? "page" : undefined}
      className={cn(
        "min-h-8 h-auto w-full justify-start gap-2 px-2 py-1.5 font-normal",
        item.active &&
          "bg-accent text-accent-foreground ring-1 ring-foreground/15 hc:bg-foreground hc:text-background",
      )}
    >
      <i
        className={cn(
          item.active ? "fa-solid" : "fa-light",
          item.icon,
          "w-4 shrink-0",
        )}
        aria-hidden="true"
      />
      <SidebarNavLabel>{item.label}</SidebarNavLabel>
      {item.badge ? (
        <Badge variant="count" className="ms-auto">
          {item.badge}
        </Badge>
      ) : null}
    </Button>
  );
}

function IconRailRow({ item }: { item: NavItem }) {
  return (
    <Tip label={item.label} side="right">
      <Button
        type="button"
        variant="ghost"
        size="icon-sm"
        aria-label={item.label}
        aria-current={item.active ? "page" : undefined}
        className={cn(
          item.active &&
            "bg-accent text-accent-foreground ring-1 ring-foreground/15",
        )}
      >
        <i
          className={cn(item.active ? "fa-solid" : "fa-light", item.icon)}
          aria-hidden="true"
        />
      </Button>
    </Tip>
  );
}

function SidebarFrame({
  children,
  className,
  label,
}: {
  children: React.ReactNode;
  className?: string;
  label: string;
}) {
  return (
    <nav
      aria-label={label}
      inert
      className={cn(
        "flex min-h-64 flex-col gap-2 rounded-lg border border-sidebar-border bg-sidebar p-2 text-sidebar-foreground",
        className,
      )}
    >
      {children}
    </nav>
  );
}

export function SidebarExpandedPreview() {
  return (
    <SidebarFrame label="Expanded sidebar preview" className="w-64">
      <div className="flex h-9 items-center gap-2 px-2 text-sm font-semibold">
        <span
          className="size-6 rounded-md bg-brand-tint ring-1 ring-brand"
          aria-hidden="true"
        />
        Exxat Prism
      </div>
      <p className="px-2 pt-2 text-xs font-medium text-sidebar-section-label">
        Program
      </p>
      <div className="flex flex-col gap-1">
        {PRIMARY_ITEMS.map((item) => (
          <ExpandedNavRow key={item.label} item={item} />
        ))}
      </div>
      <div className="mt-auto border-t border-sidebar-border pt-2">
        <ExpandedNavRow item={{ label: "Settings", icon: "fa-gear" }} />
      </div>
    </SidebarFrame>
  );
}

export function SidebarCollapsedPreview() {
  return (
    <SidebarFrame
      label="Collapsed sidebar preview"
      className="w-14 items-center"
    >
      <span
        className="mb-2 size-7 rounded-md bg-brand-tint ring-1 ring-brand"
        aria-hidden="true"
      />
      {PRIMARY_ITEMS.map((item) => (
        <IconRailRow key={item.label} item={item} />
      ))}
      <div className="mt-auto border-t border-sidebar-border pt-2">
        <IconRailRow item={{ label: "Settings", icon: "fa-gear" }} />
      </div>
    </SidebarFrame>
  );
}

export function SidebarDrillInPreview() {
  return (
    <SidebarFrame label="Settings drill-in preview" className="w-72">
      <Button type="button" variant="ghost" size="sm" className="justify-start">
        <i className="fa-light fa-arrow-left" aria-hidden="true" />
        Main navigation
      </Button>
      <h3 className="px-2 pt-2 text-sm font-semibold text-foreground">
        Settings
      </h3>
      <div className="flex flex-col gap-1">
        <ExpandedNavRow item={{ label: "Profile", icon: "fa-user" }} />
        <ExpandedNavRow
          item={{ label: "Appearance", icon: "fa-palette", active: true }}
        />
        <ExpandedNavRow item={{ label: "Products", icon: "fa-grid-2" }} />
        <ExpandedNavRow
          item={{ label: "Access and roles", icon: "fa-user-shield" }}
        />
      </div>
      <p className="mt-auto px-2 text-xs text-muted-foreground">
        Escape or Command plus left bracket returns to main navigation.
      </p>
    </SidebarFrame>
  );
}

export function SidebarSecondaryPanelPreview() {
  const [scope, setScope] = React.useState("all");
  const scopes = [
    { id: "all", label: "All questions" },
    { id: "favorites", label: "Favorites" },
    { id: "clinical", label: "Clinical skills" },
  ];

  return (
    <div className="flex min-h-64 overflow-hidden rounded-lg border border-border bg-surface-1">
      <div className="hidden w-14 shrink-0 flex-col items-center gap-1 border-e border-sidebar-border bg-sidebar p-2 sm:flex">
        {PRIMARY_ITEMS.slice(0, 3).map((item) => (
          <IconRailRow key={item.label} item={item} />
        ))}
      </div>
      <nav
        aria-label="Question bank scopes"
        className="w-48 shrink-0 border-e border-border bg-[var(--secondary-panel-bg)] p-2"
      >
        <h3 className="px-2 py-2 text-sm font-semibold">Question bank</h3>
        {scopes.map((item) => (
          <Button
            key={item.id}
            type="button"
            variant="ghost"
            size="sm"
            aria-current={scope === item.id ? "page" : undefined}
            className={cn(
              "mb-1 h-auto min-h-8 w-full justify-start whitespace-normal text-start",
              scope === item.id && "bg-accent text-accent-foreground",
            )}
            onClick={() => setScope(item.id)}
          >
            {item.label}
          </Button>
        ))}
      </nav>
      <div className="flex min-w-0 flex-1 items-center justify-center p-4 text-sm text-muted-foreground">
        Content scoped to {scopes.find((item) => item.id === scope)?.label}
      </div>
    </div>
  );
}

export function SidebarMobilePreview() {
  return (
    <div className="relative h-72 max-w-sm overflow-hidden rounded-lg border border-border bg-surface-1">
      <div className="absolute inset-0 bg-foreground/15" aria-hidden="true" />
      <SidebarFrame
        label="Mobile navigation preview"
        className="absolute inset-y-0 start-0 z-10 w-64 rounded-none border-y-0 border-s-0 shadow-lg"
      >
        <div className="flex items-center justify-between gap-2 px-2">
          <span className="text-sm font-semibold">Exxat Prism</span>
          <Tip label="Close navigation" side="right">
            <Button
              type="button"
              variant="ghost"
              size="icon-sm"
              aria-label="Close navigation"
            >
              <i className="fa-light fa-xmark" aria-hidden="true" />
            </Button>
          </Tip>
        </div>
        {PRIMARY_ITEMS.map((item) => (
          <ExpandedNavRow key={item.label} item={item} />
        ))}
      </SidebarFrame>
    </div>
  );
}

export function AppShellPreview() {
  const [status, setStatus] = React.useState("");
  const mod = useModKeyLabel();
  const alt = useAltKeyLabel();

  return (
    <div className="overflow-hidden rounded-lg border border-border bg-surface-1">
      <nav
        aria-label="Global utilities preview"
        inert
        className="flex min-h-11 min-w-0 items-center gap-1 overflow-hidden border-b border-sidebar-border bg-sidebar px-2"
      >
        <UtilityBarDenseContent />
      </nav>
      <div className="flex min-h-72">
        <div
          inert
          className="hidden w-48 shrink-0 border-e border-sidebar-border bg-sidebar p-2 sm:block"
        >
          <div className="flex flex-col gap-1">
            {PRIMARY_ITEMS.map((item) => (
              <ExpandedNavRow key={item.label} item={item} />
            ))}
          </div>
        </div>
        <div className="min-w-0 flex-1">
          <PageHeader
            headingLevel="h2"
            title="Placements"
            subtitle="247 placements · Updated today"
            actionItems={[
              {
                id: "new",
                label: "New placement",
                icon: "fa-plus",
                variant: "default",
                shortcut: `${mod}${alt}P`,
                onSelect: () => setStatus("New placement selected"),
              },
            ]}
          />
          <div className="mx-4 min-h-36 rounded-lg border border-border bg-card p-4 text-sm text-muted-foreground lg:mx-6">
            Page content owns one scroll column. Shell chrome stays outside the
            content surface.
            <p role="status" className="mt-2 min-h-5 text-foreground">
              {status}
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}