"use client";

import * as React from "react";

import {
  PageHeader,
  type PageHeaderActionItem,
} from "@exxatdesignux/ui/components/ui/page-header";
import { Button } from "@/components/ui/button";
import { Shortcut } from "@/components/ui/dropdown-menu";
import { Kbd } from "@/components/ui/kbd";
import { useAltKeyLabel, useModKeyLabel } from "@/hooks/use-mod-key-label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

function secondaryHeaderActions(
  onSelect: (label: string) => void,
): PageHeaderActionItem[] {
  return [
    {
      id: "import",
      label: "Import",
      icon: "fa-file-import",
      variant: "outline",
      onSelect: () => onSelect("Import selected"),
    },
    {
      id: "export",
      label: "Export",
      icon: "fa-arrow-up-from-bracket",
      variant: "outline",
      onSelect: () => onSelect("Export selected"),
    },
    {
      id: "settings",
      label: "Page settings",
      icon: "fa-gear",
      placement: "overflow",
      onSelect: () => onSelect("Page settings selected"),
    },
  ];
}

export function PageHeaderDefaultPreview() {
  return (
    <PageHeader
      headingLevel="h2"
      title="Records"
      subtitle="24 records · Updated today"
    />
  );
}

export function PageHeaderResponsiveActionsPreview() {
  const [width, setWidth] = React.useState<"wide" | "medium" | "narrow">(
    "wide",
  );
  const [status, setStatus] = React.useState("");
  const mod = useModKeyLabel();
  const alt = useAltKeyLabel();
  const actions: PageHeaderActionItem[] = [
    {
      id: "new",
      label: "New record",
      icon: "fa-plus",
      variant: "default",
      shortcut: `${mod}${alt}N`,
      onSelect: () => setStatus("New record selected"),
    },
    ...secondaryHeaderActions(setStatus),
  ];

  return (
    <div className="flex w-full flex-col gap-3">
      <div
        role="group"
        aria-label="Preview width"
        className="flex flex-wrap gap-2"
      >
        {(["wide", "medium", "narrow"] as const).map((value) => (
          <Button
            key={value}
            type="button"
            size="sm"
            variant={width === value ? "secondary" : "outline"}
            aria-pressed={width === value}
            onClick={() => setWidth(value)}
          >
            {value.charAt(0).toUpperCase() + value.slice(1)}
          </Button>
        ))}
      </div>
      <div
        className={`w-full overflow-hidden border border-border bg-background transition-[max-width] ${
          width === "wide"
            ? "max-w-none"
            : width === "medium"
              ? "max-w-[600px]"
              : "max-w-[480px]"
        }`}
      >
        <PageHeader
          headingLevel="h2"
          title="Records"
          subtitle="24 records · Updated today"
          actionItems={actions}
        />
      </div>
      <p role="status" className="min-h-5 text-sm text-muted-foreground">
        {status}
      </p>
    </div>
  );
}

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

  return (
    <div>
      <PageHeader
        headingLevel="h2"
        title="Shared workspace"
        variant="collaboration"
        accessInfo="Editors can modify"
        collaborators={[
          { id: "alex", name: "Alex Chen", initials: "AC", access: "owner" },
          {
            id: "morgan",
            name: "Morgan Rivera",
            initials: "MR",
            access: "editor",
          },
          {
            id: "priya",
            name: "Priya Lakshmi",
            initials: "PL",
            access: "viewer",
          },
          {
            id: "jordan",
            name: "Jordan Taylor",
            initials: "JT",
            access: "commenter",
          },
        ]}
        onCollaboratorsOpen={() => setStatus("Collaborators opened")}
        actionItems={[
          {
            id: "invite",
            label: "Invite people",
            icon: "fa-user-plus",
            variant: "default",
            shortcut: `${mod}${alt}I`,
            onSelect: () => setStatus("Invite people selected"),
          },
        ]}
      />
      <p role="status" className="min-h-5 text-sm text-muted-foreground">
        {status}
      </p>
    </div>
  );
}

export function PageHeaderCustomActionsPreview() {
  const [scope, setScope] = React.useState("all");
  const [status, setStatus] = React.useState("");
  const mod = useModKeyLabel();
  const alt = useAltKeyLabel();
  const addShortcut = `${mod}${alt}D`;

  const addRecord = () => setStatus("Add record selected");

  return (
    <div>
      <PageHeader
        headingLevel="h2"
        title="Records"
        subtitle="24 records"
        actions={
          <>
            <Select value={scope} onValueChange={setScope}>
              <SelectTrigger
                size="sm"
                aria-label="View records for"
                className="w-36"
              >
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">All records</SelectItem>
                <SelectItem value="at-risk">Needs review</SelectItem>
              </SelectContent>
            </Select>
            <Button type="button" size="sm" onClick={addRecord}>
              Add record
              <Kbd variant="bare">{addShortcut}</Kbd>
            </Button>
            <Shortcut keys={addShortcut} onInvoke={addRecord} />
          </>
        }
      />
      <p role="status" className="min-h-5 text-sm text-muted-foreground">
        {status}
      </p>
    </div>
  );
}