AI Chat Dashboard

"use client";

import {
  useCallback,
  useEffect,
  useMemo,
  useRef,
  useState,
  useSyncExternalStore,
  type ReactNode,
} from "react";
import * as Select from "@radix-ui/react-select";
import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
import { LiquidMetal } from "@paper-design/shaders-react";
import {
  ArrowUp,
  BookOpen,
  Check,
  CaretDown,
  Copy,
  DotsThreeVertical,
  FileText,
  Folder,
  Translate,
  SignOut,
  List,
  ChatText,
  Moon,
  SidebarSimple,
  Plus,
  MagnifyingGlass,
  Gear,
  ThumbsDown,
  ThumbsUp,
  Lightning,
} from "@phosphor-icons/react";
import { cn } from "@/lib/cn";

type Theme = "dark" | "light";
type Attachment =
  | { type: "image"; url: string; alt?: string }
  | { type: "pdf"; name: string };
type ChatMessage = {
  id: string;
  role: "user" | "assistant";
  content: string;
  attachments?: Attachment[];
};
type ChatMeta = { id: string; label: string; project: string };
type ChatSection = { title: string; items: ChatMeta[] };

const CHAT_SECTIONS: ChatSection[] = [
  {
    title: "Pinned",
    items: [
      { id: "research-analysis", label: "Research & Analysis", project: "Design help" },
      { id: "web-search", label: "Web Search", project: "Design help" },
      { id: "knowledge-base", label: "Knowledge Base", project: "Library" },
    ],
  },
  {
    title: "Recents",
    items: [
      { id: "user-research", label: "User research analysis", project: "Research" },
      { id: "competitive-recent", label: "Competitive analysis", project: "Research" },
      { id: "meeting-notes", label: "Meeting notes", project: "Product notes" },
    ],
  },
  {
    title: "Yesterday",
    items: [
      { id: "market-trends", label: "Market trends analysis", project: "Design help" },
      { id: "usability-testing", label: "Usability testing results", project: "Research" },
      { id: "competitive-yesterday", label: "Competitive analysis", project: "Research" },
      { id: "feature-prioritization", label: "Feature prioritization", project: "Product notes" },
      { id: "user-feedback", label: "User feedback", project: "Research" },
    ],
  },
];

const CHAT_MESSAGES: Record<string, ChatMessage[]> = {
  "market-trends": [
    { id: "m1", role: "user", content: "Hey, I have a question for you." },
    { id: "m2", role: "assistant", content: "Of course, I'm listening, how can I help you?" },
    {
      id: "m3",
      role: "user",
      content: "What's the difference between serif and sans-serif fonts?",
      attachments: [{ type: "image", url: "abstract-stack", alt: "Abstract stacked forms" }],
    },
    {
      id: "m4",
      role: "assistant",
      content:
        "Serif fonts have strokes (Times New Roman); sans-serif are clean (Arial). Serif feels traditional for print, sans-serif modern for screens.",
    },
    {
      id: "m5",
      role: "user",
      content: "What's the difference between serif and sans-serif fonts?",
      attachments: [{ type: "pdf", name: "license-agreement.pdf" }],
    },
  ],
  "research-analysis": [
    {
      id: "r1",
      role: "assistant",
      content: "Your research board is ready. I grouped open questions by audience, effort, and confidence.",
    },
    { id: "r2", role: "user", content: "Prioritize anything that affects the onboarding flow." },
  ],
  "web-search": [
    {
      id: "w1",
      role: "assistant",
      content: "I found several references and saved the most relevant ones for visual language and typography systems.",
    },
  ],
  "knowledge-base": [
    {
      id: "k1",
      role: "assistant",
      content: "The knowledge base contains brand guidelines, product principles, and current component notes.",
    },
  ],
};

const FALLBACK_MESSAGES: ChatMessage[] = [
  { id: "fallback-1", role: "user", content: "Open the latest notes for this chat." },
  {
    id: "fallback-2",
    role: "assistant",
    content: "Here is the saved chat history. I can continue from the last summary, compare the key points, or turn this into next steps.",
  },
  { id: "fallback-3", role: "user", content: "Summarize the action items and risks." },
];

function findChatMeta(id: string) {
  return CHAT_SECTIONS.flatMap((section) => section.items).find((item) => item.id === id);
}

function useIsDesktopViewport() {
  const subscribe = useCallback(() => () => {}, []);
  const getSnapshot = useCallback(() => window.matchMedia("(min-width: 1024px)").matches, []);
  const getServerSnapshot = useCallback(() => true, []);
  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
}

/* ═══════════════════════════════════════════════
   Brand mark
   ═══════════════════════════════════════════════ */

function BrandMark({ className }: { className?: string }) {
  return (
    <span className={cn("inline-flex shrink-0", className)}>
      <svg viewBox="0 0 423 423" fill="none" aria-label="Select Codes" className="size-full">
        <path d="M213.736 65.7742L380.756 163.314V259.078C380.756 261.224 379.61 263.207 377.751 264.278L210.698 360.5L44.9872 264.281C43.138 263.207 42 261.231 42 259.092V163.314L207.666 65.7848C209.538 64.6827 211.86 64.6786 213.736 65.7742Z" fill="#FBB628" />
        <path d="M42 163.314L210.698 261.267M42 163.314L207.666 65.7848C209.538 64.6827 211.86 64.6786 213.736 65.7742L380.756 163.314M42 163.314V259.092C42 261.231 43.138 263.207 44.9872 264.281L210.698 360.5M210.698 261.267L380.756 163.314M210.698 261.267V360.5M380.756 163.314V259.078C380.756 261.224 379.61 263.207 377.751 264.278L210.698 360.5" stroke="black" strokeWidth="6" strokeLinejoin="round" strokeLinecap="round" />
        <path d="M214.696 92.1044L313 149.514V167.413C313 169.958 311.641 172.309 309.435 173.579L211.092 230.225L113.543 173.583C111.35 172.31 110 169.965 110 167.429V149.514L207.496 92.117C209.717 90.8097 212.471 90.8049 214.696 92.1044Z" fill="#FD7E41" />
        <path d="M110 149.514L211.092 208.213M110 149.514L207.496 92.117C209.717 90.8097 212.471 90.8049 214.696 92.1044L313 149.514M110 149.514V167.429C110 169.965 111.35 172.31 113.543 173.583L211.092 230.225M211.092 208.213L313 149.514M211.092 208.213V230.225M313 149.514V167.413C313 169.958 311.641 172.309 309.435 173.579L211.092 230.225" stroke="black" strokeWidth="7.1166" strokeLinejoin="round" strokeLinecap="round" />
        <path d="M156.626 134.212L177.466 146.293V150.762L156.626 162.678L135.952 150.762V146.293L156.626 134.212Z" fill="#FF6B35" />
        <path d="M135.952 146.293L156.626 158.21M135.952 146.293L156.626 134.212L177.466 146.293M135.952 146.293V150.762L156.626 162.678M156.626 158.21L177.466 146.293M156.626 158.21V162.678M177.466 146.293V150.762L156.626 162.678" stroke="black" strokeWidth="2.3722" strokeLinejoin="round" strokeLinecap="round" />
        <path d="M197.082 111.418L218.518 123.5V127.969L184.31 147.259L163.046 135.343V130.874L197.082 111.418Z" fill="white" />
        <path d="M163.046 130.874L184.31 142.79M163.046 130.874L197.082 111.418L218.518 123.5M163.046 130.874V135.343L184.31 147.259M184.31 142.79L218.518 123.5M184.31 142.79V147.259M218.518 123.5V127.969L184.31 147.259" stroke="black" strokeWidth="2.3722" strokeLinejoin="round" strokeLinecap="round" />
        <path d="M225.673 127L246.514 139.082V143.55L225.673 155.466L205 143.55V139.082L225.673 127Z" fill="white" />
        <path d="M205 139.082L225.673 150.998M205 139.082L225.673 127L246.514 139.082M205 139.082V143.55L225.673 155.466M225.673 150.998L246.514 139.082M225.673 150.998V155.466M246.514 139.082V143.55L225.673 155.466" stroke="black" strokeWidth="2.3722" strokeLinejoin="round" strokeLinecap="round" />
        <line x1="230.327" y1="250.699" x2="210.327" y2="288.699" stroke="black" strokeWidth="3" strokeLinecap="round" />
        <path d="M247 239L209.74 309.793" stroke="black" strokeWidth="3" strokeLinecap="round" />
        <path d="M380.26 223L351.383 277.865" stroke="black" strokeWidth="3" strokeLinecap="round" />
        <path d="M381.904 243L367 271.317" stroke="black" strokeWidth="3" strokeLinecap="round" />
        <path d="M264.26 230L211.165 330.881" stroke="black" strokeWidth="3" strokeLinecap="round" />
        <path d="M379.89 197L330.986 289.916" stroke="black" strokeWidth="3" strokeLinecap="round" />
        <path d="M283.834 218L209.315 359.587" stroke="black" strokeWidth="3" strokeLinecap="round" />
        <path d="M302.327 207.832L228.47 348.16M321.747 196.69L247.89 337.018M341.151 186.475L267.294 326.803M362.95 173.881L289.093 314.21M381.5 166.758L309.5 303" stroke="black" strokeWidth="3" strokeLinecap="round" />
        <path d="M197.036 143L218.472 155.082V159.55L184.264 178.84L163 166.924V162.456L197.036 143Z" fill="white" />
        <path d="M163 162.456L184.264 174.372M163 162.456L197.036 143L218.472 155.082M163 162.456V166.924L184.264 178.84M184.264 174.372L218.472 155.082M184.264 174.372V178.84M218.472 155.082V159.55L184.264 178.84" stroke="black" strokeWidth="2.3722" strokeLinejoin="round" strokeLinecap="round" />
      </svg>
    </span>
  );
}

/* ═══════════════════════════════════════════════
   Small primitives
   ═══════════════════════════════════════════════ */

function IconButton({
  ariaLabel,
  size = "md",
  tone = "quiet",
  theme = "dark",
  className,
  children,
  ...props
}: {
  ariaLabel: string;
  size?: "sm" | "md" | "lg";
  tone?: "quiet" | "soft" | "green";
  theme?: Theme;
  className?: string;
  children: ReactNode;
} & React.ButtonHTMLAttributes<HTMLButtonElement>) {
  const dark = theme === "dark";
  return (
    <button
      type="button"
      aria-label={ariaLabel}
      className={cn(
        "inline-flex shrink-0 items-center justify-center rounded-[10px] outline-none transition duration-200 active:scale-[0.97]",
        "focus-visible:ring-2 focus-visible:ring-emerald-400/30",
        size === "sm" && "size-7",
        size === "md" && "size-9",
        size === "lg" && "size-11",
        dark && tone === "quiet" && "text-neutral-500 hover:bg-neutral-900 hover:text-neutral-200",
        dark && tone === "soft" && "bg-neutral-900 text-neutral-400 hover:bg-neutral-800 hover:text-neutral-200",
        dark && tone === "green" && "bg-emerald-400/10 text-emerald-300 hover:bg-emerald-400/15",
        !dark && tone === "quiet" && "text-neutral-400 hover:bg-neutral-100 hover:text-neutral-700",
        !dark && tone === "soft" && "bg-neutral-100 text-neutral-500 hover:bg-neutral-200 hover:text-neutral-700",
        !dark && tone === "green" && "bg-emerald-50 text-emerald-600 hover:bg-emerald-100",
        className
      )}
      {...props}
    >
      {children}
    </button>
  );
}

function Badge({ tone = "neutral", theme = "dark", className }: { tone?: "neutral" | "green"; theme?: Theme; className?: string }) {
  const dark = theme === "dark";
  return (
    <span
      className={cn(
        "inline-flex h-5 shrink-0 items-center rounded-[8px] px-2 text-[11px] font-semibold leading-none",
        dark && tone === "green" && "bg-emerald-400/10 text-emerald-300 ring-1 ring-inset ring-emerald-400/20",
        dark && tone === "neutral" && "bg-neutral-900 text-neutral-400 ring-1 ring-inset ring-neutral-800",
        !dark && tone === "green" && "bg-emerald-100 text-emerald-700 ring-1 ring-inset ring-emerald-200",
        !dark && tone === "neutral" && "bg-neutral-100 text-neutral-500 ring-1 ring-inset ring-neutral-200",
        className
      )}
    >
      Pro
    </span>
  );
}

function Avatar({ theme = "dark", className }: { theme?: Theme; className?: string }) {
  const dark = theme === "dark";
  return (
    <div
      className={cn(
        "flex size-8 shrink-0 select-none items-center justify-center rounded-full text-sm font-medium",
        dark ? "bg-neutral-800 text-neutral-100" : "bg-neutral-200 text-neutral-950",
        className
      )}
    >
      AM
    </div>
  );
}

function ThemeToggleSwitch({ checked }: { checked: boolean }) {
  return (
    <span
      aria-hidden="true"
      className={cn(
        "relative inline-flex h-5 w-9 shrink-0 items-center rounded-full p-0.5 transition duration-200",
        checked ? "bg-emerald-500" : "bg-neutral-700"
      )}
    >
      <span
        className={cn(
          "grid size-4 place-items-center rounded-full bg-white transition duration-200",
          checked ? "translate-x-4" : "translate-x-0"
        )}
      >
        <span className={cn("size-1.5 rounded-full", checked ? "bg-emerald-500" : "bg-neutral-400")} />
      </span>
    </span>
  );
}

/* ═══════════════════════════════════════════════
   Select (project / conversation / tools / model)
   ═══════════════════════════════════════════════ */

function AppSelect({
  ariaLabel,
  defaultValue,
  options,
  size = "medium",
  variant = "compact",
  theme = "dark",
  className,
}: {
  ariaLabel: string;
  defaultValue: string;
  options: { value: string; label: string }[];
  size?: "xsmall" | "small" | "medium";
  variant?: "compact" | "inline";
  theme?: Theme;
  className?: string;
}) {
  const dark = theme === "dark";
  return (
    <Select.Root defaultValue={defaultValue}>
      <Select.Trigger
        aria-label={ariaLabel}
        className={cn(
          "group inline-flex min-w-0 items-center text-left outline-none transition duration-200",
          "focus-visible:ring-2 focus-visible:ring-emerald-400/30",
          variant === "compact" && size === "medium" && "h-10 gap-1 rounded-xl pl-3 pr-2.5 text-sm",
          variant === "compact" && size === "small" && "h-9 gap-1 rounded-xl pl-3 pr-2 text-sm",
          variant === "compact" && size === "xsmall" && "h-8 gap-0.5 rounded-xl pl-2.5 pr-1.5 text-xs",
          variant === "inline" && "h-5 min-h-5 w-auto gap-0 rounded-none bg-transparent p-0 text-sm font-normal",
          dark && variant === "compact" && "bg-neutral-900 font-medium text-neutral-200 ring-1 ring-inset ring-neutral-800 hover:bg-neutral-800",
          !dark && variant === "compact" && "bg-neutral-100 font-medium text-neutral-700 ring-1 ring-inset ring-neutral-200 hover:bg-neutral-200",
          dark && variant === "inline" && "text-neutral-300 hover:text-neutral-100",
          !dark && variant === "inline" && "text-neutral-500 hover:text-neutral-900",
          className
        )}
      >
        <Select.Value />
        <Select.Icon asChild>
          <CaretDown
            weight="regular"
            className={cn(
              "shrink-0 transition duration-200 group-data-[state=open]:rotate-180",
              size === "xsmall" && variant === "compact" ? "size-4" : "size-5",
              dark ? "text-neutral-500 group-hover:text-neutral-300" : "text-neutral-400 group-hover:text-neutral-700",
              variant === "inline" && "ml-0.5 size-5"
            )}
          />
        </Select.Icon>
      </Select.Trigger>
      <Select.Portal>
        <Select.Content
          position="popper"
          sideOffset={8}
          collisionPadding={8}
          className={cn(
            "z-50 min-w-[var(--radix-select-trigger-width)] overflow-hidden rounded-2xl border shadow-2xl",
            dark ? "border-neutral-800 bg-neutral-950 shadow-black/40" : "border-neutral-200 bg-white shadow-neutral-950/10"
          )}
        >
          <Select.Viewport className="max-h-56 p-2">
            {options.map((option) => (
              <Select.Item
                key={option.value}
                value={option.value}
                className={cn(
                  "group relative flex cursor-pointer select-none items-center rounded-lg p-2 font-medium outline-none transition",
                  size === "xsmall" ? "gap-1.5 pr-[34px] text-xs" : "gap-2 pr-8 text-sm",
                  dark ? "text-neutral-200 data-[highlighted]:bg-neutral-900" : "text-neutral-700 data-[highlighted]:bg-neutral-100"
                )}
              >
                <Select.ItemText>{option.label}</Select.ItemText>
                <Select.ItemIndicator asChild>
                  <Check weight="regular" className="absolute right-2 top-1/2 size-4 -translate-y-1/2 text-emerald-300" />
                </Select.ItemIndicator>
              </Select.Item>
            ))}
          </Select.Viewport>
        </Select.Content>
      </Select.Portal>
    </Select.Root>
  );
}

/* ═══════════════════════════════════════════════
   Account menu
   ═══════════════════════════════════════════════ */

function AccountMenuItem({ icon, label, theme = "dark" }: { icon: ReactNode; label: string; theme?: Theme }) {
  const dark = theme === "dark";
  return (
    <DropdownMenu.Item
      className={cn(
        "flex h-10 cursor-pointer select-none items-center gap-2 rounded-lg px-3 text-sm font-medium outline-none transition",
        dark ? "text-neutral-100 data-[highlighted]:bg-neutral-900" : "text-neutral-900 data-[highlighted]:bg-neutral-100"
      )}
    >
      <span className={cn("mr-1 flex size-5 shrink-0 items-center justify-center", dark ? "text-neutral-400" : "text-neutral-500")}>
        {icon}
      </span>
      {label}
    </DropdownMenu.Item>
  );
}

function AccountMenu({ compact = false, setTheme, theme }: { compact?: boolean; setTheme: (theme: Theme) => void; theme: Theme }) {
  const dark = theme === "dark";
  return (
    <DropdownMenu.Root>
      <DropdownMenu.Trigger asChild>
        <button
          aria-label="Open account menu"
          className={cn(
            "outline-none transition focus-visible:ring-2 focus-visible:ring-emerald-400/30",
            compact ? "flex size-9 items-center justify-center rounded-full" : "flex w-full items-center gap-3 rounded-lg p-1.5 pr-2 text-left",
            dark ? "hover:bg-neutral-900" : "hover:bg-neutral-100"
          )}
        >
          <Avatar theme={theme} className="text-sm" />
          {!compact && (
            <>
              <div className="min-w-0 flex-1">
                <div className="flex min-w-0 items-center gap-2">
                  <span className={cn("truncate text-sm font-medium leading-tight", dark ? "text-neutral-100" : "text-neutral-950")}>
                    Alex Morgan
                  </span>
                  <Badge tone="green" theme={theme} className="h-5 rounded-md px-1.5 text-[10px] uppercase" />
                </div>
                <p className={cn("mt-0.5 truncate text-sm font-normal leading-tight", dark ? "text-neutral-500" : "text-neutral-400")}>
                  alex.morgan@gmail.com
                </p>
              </div>
              <CaretDown weight="regular" className={cn("size-[18px] shrink-0", dark ? "text-neutral-600" : "text-neutral-500")} />
            </>
          )}
        </button>
      </DropdownMenu.Trigger>
      <DropdownMenu.Portal>
        <DropdownMenu.Content
          align={compact ? "start" : "end"}
          side={compact ? "right" : "top"}
          sideOffset={compact ? 14 : 12}
          className={cn("z-50 w-[320px] max-w-[calc(100vw-24px)] gap-0 rounded-2xl p-2", dark ? "bg-[#171717]" : "bg-white")}
        >
          <div className="flex items-center gap-3 p-2">
            <Avatar theme={theme} className="size-10 text-base" />
            <div className="min-w-0 flex-1">
              <div className="flex min-w-0 items-center gap-2">
                <div className={cn("truncate text-sm font-semibold leading-tight", dark ? "text-neutral-50" : "text-neutral-950")}>
                  Alex Morgan
                </div>
                <Badge tone="green" theme={theme} className="h-5 rounded-md px-1.5 text-[10px] uppercase" />
              </div>
              <div className={cn("mt-1 truncate text-xs font-medium leading-tight", dark ? "text-neutral-500" : "text-neutral-400")}>
                alex.morgan@gmail.com
              </div>
            </div>
          </div>
          <DropdownMenu.Separator className={cn("mx-1 my-1.5 h-px", dark ? "bg-neutral-800" : "bg-neutral-200")} />
          <DropdownMenu.Item
            className={cn(
              "flex h-10 cursor-pointer select-none items-center gap-2 rounded-lg px-3 text-sm font-medium outline-none transition",
              dark ? "text-neutral-100 data-[highlighted]:bg-neutral-900" : "text-neutral-900 data-[highlighted]:bg-neutral-100"
            )}
            onSelect={(event) => {
              event.preventDefault();
              setTheme(dark ? "light" : "dark");
            }}
          >
            <span className={cn("mr-1 flex size-5 shrink-0 items-center justify-center", dark ? "text-neutral-400" : "text-neutral-500")}>
              <Moon weight="regular" className="size-4" />
            </span>
            Dark Mode
            <span className="flex-1" />
            <ThemeToggleSwitch checked={dark} />
          </DropdownMenu.Item>
          <DropdownMenu.Separator className={cn("mx-1 my-1.5 h-px", dark ? "bg-neutral-800" : "bg-neutral-200")} />
          <DropdownMenu.Group>
            <AccountMenuItem icon={<Gear weight="regular" className="size-4" />} label="Settings" theme={theme} />
            <AccountMenuItem icon={<Translate weight="regular" className="size-4" />} label="Language" theme={theme} />
            <AccountMenuItem icon={<ChatText weight="regular" className="size-4" />} label="Need help?" theme={theme} />
          </DropdownMenu.Group>
          <DropdownMenu.Separator className={cn("mx-1 my-1.5 h-px", dark ? "bg-neutral-800" : "bg-neutral-200")} />
          <DropdownMenu.Group>
            <DropdownMenu.Item
              className={cn(
                "flex h-10 cursor-pointer select-none items-center gap-2 rounded-lg px-3 text-sm font-medium outline-none transition",
                dark ? "text-red-400 data-[highlighted]:bg-red-400/10" : "text-red-600 data-[highlighted]:bg-red-50"
              )}
            >
              <span className={cn("mr-1 flex size-5 shrink-0 items-center justify-center", dark ? "text-red-400" : "text-red-600")}>
                <SignOut weight="regular" className="size-4" />
              </span>
              Log out
            </DropdownMenu.Item>
          </DropdownMenu.Group>
          <div className={cn("px-3 pb-2 pt-1.5 text-xs font-medium", dark ? "text-neutral-500" : "text-neutral-400")}>
            v1.5.69 · Terms & Conditions
          </div>
        </DropdownMenu.Content>
      </DropdownMenu.Portal>
    </DropdownMenu.Root>
  );
}

/* ═══════════════════════════════════════════════
   Sidebar
   ═══════════════════════════════════════════════ */

function SidebarSection({ title, theme, children }: { title: string; theme: Theme; children: ReactNode }) {
  return (
    <section className="mb-4">
      <p className={cn("mb-1 px-1.5 text-xs font-medium leading-5", theme === "dark" ? "text-neutral-500" : "text-neutral-400")}>
        {title}
      </p>
      <div className="space-y-1">{children}</div>
    </section>
  );
}

function SidebarNavItem({
  label,
  active = false,
  plain = false,
  theme,
  onClick,
}: {
  label: string;
  active?: boolean;
  plain?: boolean;
  theme: Theme;
  onClick?: () => void;
}) {
  const dark = theme === "dark";
  return (
    <button
      type="button"
      onClick={onClick}
      aria-current={active ? "page" : undefined}
      className={cn(
        "flex w-full items-center justify-between rounded-lg p-1.5 pr-2 text-left text-sm font-medium transition active:scale-[0.98]",
        dark && (active ? "bg-neutral-900 text-neutral-100" : "text-neutral-400 hover:bg-neutral-900 hover:text-neutral-100"),
        !dark && (active ? "bg-neutral-100 text-neutral-700" : "text-neutral-600 hover:bg-neutral-100 hover:text-neutral-950")
      )}
    >
      <span className="flex min-w-0 items-center gap-2">
        {!plain && (
          <span className={cn("shrink-0", dark ? "text-neutral-600" : "text-neutral-400")}>
            <ChatText weight="regular" className="size-5" />
          </span>
        )}
        <span className="min-w-0 truncate">{label}</span>
      </span>
    </button>
  );
}

function SidebarPlainRow({ icon, label, theme }: { icon: ReactNode; label: string; theme: Theme }) {
  const dark = theme === "dark";
  return (
    <button
      type="button"
      className={cn(
        "flex w-full items-center justify-between rounded-lg p-1.5 pr-2 text-left text-sm font-medium transition active:scale-[0.98]",
        dark ? "text-neutral-400 hover:bg-neutral-900 hover:text-neutral-100" : "text-neutral-600 hover:bg-neutral-100 hover:text-neutral-950"
      )}
    >
      <span className="flex items-center gap-2">
        <span className={cn("shrink-0", dark ? "text-neutral-600" : "text-neutral-400")}>{icon}</span>
        {label}
      </span>
    </button>
  );
}

function SidebarRailButton({
  ariaLabel,
  isActive = false,
  onClick,
  theme,
  children,
}: {
  ariaLabel: string;
  isActive?: boolean;
  onClick?: () => void;
  theme: Theme;
  children: ReactNode;
}) {
  const dark = theme === "dark";
  return (
    <button
      aria-label={ariaLabel}
      className={cn(
        "flex size-10 items-center justify-center rounded-full outline-none transition duration-200 active:scale-[0.97] focus-visible:ring-2 focus-visible:ring-emerald-400/30",
        isActive && (dark ? "text-emerald-300" : "text-emerald-600"),
        !isActive && (dark ? "text-neutral-500 hover:bg-neutral-900 hover:text-neutral-200" : "text-neutral-400 hover:bg-neutral-100 hover:text-neutral-600")
      )}
      onClick={onClick}
      type="button"
    >
      {children}
    </button>
  );
}

function Sidebar({
  activeChatId,
  open,
  onNewChat,
  onSelectChat,
  onToggleOpen,
  setTheme,
  theme,
}: {
  activeChatId: string;
  open: boolean;
  onNewChat: () => void;
  onSelectChat: (id: string) => void;
  onToggleOpen: () => void;
  setTheme: (theme: Theme) => void;
  theme: Theme;
}) {
  const dark = theme === "dark";

  if (!open) {
    return (
      <aside
        className={cn(
          "group/sidebar hidden h-full w-[72px] shrink-0 flex-col justify-between overflow-hidden py-5 transition-[width,background-color] duration-300 ease-out lg:flex",
          dark ? "bg-neutral-950" : "bg-white"
        )}
      >
        <div className="flex flex-col items-center">
          <button
            aria-label="Toggle sidebar"
            className="relative grid size-8 place-items-center rounded-lg outline-none transition focus-visible:ring-2 focus-visible:ring-emerald-400/30"
            onClick={onToggleOpen}
            type="button"
          >
            <BrandMark className="absolute size-8 opacity-100 transition duration-200 group-hover/sidebar:scale-90 group-hover/sidebar:opacity-0" />
            <SidebarSimple
              weight="regular"
              className="absolute size-5 text-neutral-400 opacity-0 transition duration-200 group-hover/sidebar:scale-100 group-hover/sidebar:opacity-100"
            />
          </button>
          <div className={cn("mt-5 h-px w-8", dark ? "bg-neutral-800" : "bg-neutral-200")} />
          <div className="mt-8 flex flex-col items-center gap-6">
            <SidebarRailButton ariaLabel="New chat" isActive={activeChatId === "new"} theme={theme} onClick={onNewChat}>
              <Plus weight="regular" className="size-6" />
            </SidebarRailButton>
            <SidebarRailButton ariaLabel="Projects" theme={theme}>
              <Folder weight="regular" className="size-6" />
            </SidebarRailButton>
            <SidebarRailButton ariaLabel="Library" theme={theme}>
              <BookOpen weight="regular" className="size-6" />
            </SidebarRailButton>
            <SidebarRailButton ariaLabel="Search" theme={theme}>
              <MagnifyingGlass weight="regular" className="size-6" />
            </SidebarRailButton>
          </div>
        </div>
        <div className="flex flex-col items-center">
          <div className={cn("mb-5 h-px w-8", dark ? "bg-neutral-800" : "bg-neutral-200")} />
          <AccountMenu compact setTheme={setTheme} theme={theme} />
        </div>
      </aside>
    );
  }

  return (
    <aside
      className={cn(
        "absolute inset-y-0 left-0 z-40 flex h-full w-[272px] shrink-0 flex-col overflow-hidden transition-[transform,width,background-color] duration-300 ease-out lg:relative lg:z-auto",
        dark ? "bg-neutral-950" : "bg-white"
      )}
    >
      <div
        className={cn(
          "sticky top-0 z-10 pt-5 after:absolute after:bottom-0 after:left-5 after:right-5 after:h-px",
          dark ? "bg-neutral-950 after:bg-neutral-800" : "bg-white after:bg-neutral-200"
        )}
      >
        <div className="flex items-center justify-between px-5 pb-4 lg:px-3.5">
          <BrandMark className="size-8" />
          <IconButton ariaLabel="Close sidebar" size="sm" theme={theme} className="size-8" onClick={onToggleOpen}>
            <SidebarSimple weight="regular" className="size-5" />
          </IconButton>
        </div>
        <div className="px-3.5 pb-3.5 pt-4">
          <label
            className={cn(
              "flex h-9 cursor-text items-center gap-2 rounded-[10px] px-2 ring-1 ring-inset transition focus-within:ring-2 focus-within:ring-emerald-400/40",
              dark ? "bg-neutral-900 ring-neutral-800 hover:bg-neutral-900" : "bg-neutral-100 ring-transparent hover:bg-neutral-100"
            )}
          >
            <MagnifyingGlass weight="regular" className={cn("size-5 shrink-0", dark ? "text-neutral-500" : "text-neutral-400")} />
            <input
              type="text"
              placeholder="Search..."
              aria-label="Search chats"
              className={cn(
                "min-w-0 flex-1 bg-transparent text-sm font-medium leading-none outline-none",
                dark ? "text-neutral-200 placeholder:text-neutral-500" : "text-neutral-700 placeholder:text-neutral-400"
              )}
            />
          </label>
        </div>
        <div className="space-y-1 px-3.5 pb-4">
          <button
            type="button"
            className={cn(
              "flex w-full items-center justify-between rounded-lg p-1.5 pr-2 text-left text-sm font-medium text-emerald-300 transition active:scale-[0.98]",
              dark ? "hover:bg-emerald-400/10" : "hover:bg-emerald-50"
            )}
            onClick={onNewChat}
          >
            <span className="flex items-center gap-2">
              <Plus weight="regular" className={cn("size-5 rounded-full", dark ? "text-emerald-300" : "text-emerald-600")} />
              New chat
            </span>
          </button>
          <SidebarPlainRow icon={<Folder weight="regular" className="size-5" />} label="Projects" theme={theme} />
          <SidebarPlainRow icon={<BookOpen weight="regular" className="size-5" />} label="Library" theme={theme} />
        </div>
      </div>
      <div className="flex-1 overflow-x-hidden overflow-y-auto px-3.5 pt-4">
        {CHAT_SECTIONS.map((section) => (
          <SidebarSection key={section.title} title={section.title} theme={theme}>
            {section.items.map((item) => (
              <SidebarNavItem
                key={item.id}
                active={activeChatId === item.id}
                label={item.label}
                plain={section.title !== "Pinned"}
                theme={theme}
                onClick={() => onSelectChat(item.id)}
              />
            ))}
          </SidebarSection>
        ))}
      </div>
      <div className="px-3.5 pb-5 pt-4">
        <AccountMenu setTheme={setTheme} theme={theme} />
      </div>
    </aside>
  );
}

/* ═══════════════════════════════════════════════
   Messages
   ═══════════════════════════════════════════════ */

function MessageActionButton({ icon, label, theme }: { icon: ReactNode; label: string; theme: Theme }) {
  const dark = theme === "dark";
  return (
    <button
      type="button"
      aria-label={label}
      className={cn(
        "rounded-md p-1.5 transition-[color,background-color,scale] active:scale-[0.97]",
        dark ? "text-neutral-600 hover:bg-neutral-900 hover:text-neutral-200" : "text-neutral-400 hover:bg-neutral-100 hover:text-neutral-600"
      )}
    >
      {icon}
    </button>
  );
}

function AssistantMessage({ content, theme }: { content: string; theme: Theme }) {
  const dark = theme === "dark";
  return (
    <div className="flex max-w-[58%] flex-col gap-2.5">
      <p className={cn("text-sm leading-relaxed", dark ? "text-neutral-200" : "text-neutral-900")}>{content}</p>
      <div className="flex items-center gap-0.5">
        <MessageActionButton icon={<Copy weight="regular" className="h-3.5 w-3.5" />} label="Copy" theme={theme} />
        <MessageActionButton icon={<ThumbsUp weight="regular" className="h-3.5 w-3.5" />} label="Good response" theme={theme} />
        <MessageActionButton icon={<ThumbsDown weight="regular" className="h-3.5 w-3.5" />} label="Bad response" theme={theme} />
      </div>
    </div>
  );
}

function AttachmentPreview({ attachment, theme }: { attachment: Attachment; theme: Theme }) {
  const dark = theme === "dark";
  if (attachment.type === "image") {
    if (attachment.url === "abstract-stack") {
      return (
        <div
          role="img"
          aria-label={attachment.alt ?? "Attachment"}
          className="relative h-44 w-44 overflow-hidden rounded-2xl bg-[radial-gradient(circle_at_78%_74%,#fb9d73,transparent_30%),radial-gradient(circle_at_20%_72%,#93f2ea,transparent_34%),linear-gradient(135deg,#b8c8d0,#f4d1bf)]"
        >
          <div className="absolute left-7 top-14 h-14 w-24 rotate-[18deg] rounded-[50%] bg-cyan-200/80 blur-[1px] shadow-[0_18px_22px_rgba(21,94,117,0.22)]" />
          <div className="absolute left-9 top-8 h-20 w-28 rotate-[12deg] rounded-[50%] bg-gradient-to-br from-neutral-100/80 to-orange-200/70 shadow-[0_16px_28px_rgba(15,23,42,0.2)]" />
          <div className="absolute left-12 top-9 h-16 w-20 rotate-[38deg] rounded-[50%] bg-gradient-to-br from-slate-200 to-cyan-100 shadow-[0_18px_18px_rgba(14,116,144,0.18)]" />
          <div className="absolute bottom-9 left-9 h-9 w-16 rotate-[16deg] rounded-[50%] bg-sky-500/40" />
          <div className="absolute bottom-8 right-11 size-8 rounded-full bg-slate-500/40" />
          <div className="absolute right-12 top-24 size-2 rounded-full bg-slate-500/70" />
          <div className="absolute left-8 top-12 size-2 rounded-full bg-cyan-500/60" />
        </div>
      );
    }
    return <img src={attachment.url} alt={attachment.alt ?? "Attachment"} className="h-44 w-44 rounded-2xl object-cover" />;
  }
  return (
    <div
      className={cn(
        "flex min-w-[210px] items-center gap-3 rounded-2xl px-4 py-3 ring-1 ring-inset",
        dark ? "bg-neutral-950 ring-neutral-800" : "bg-white ring-neutral-200"
      )}
    >
      <div className={cn("flex size-9 shrink-0 items-center justify-center rounded-full", dark ? "bg-neutral-900 text-neutral-500" : "bg-neutral-100 text-neutral-500")}>
        <FileText weight="regular" className="size-4" />
      </div>
      <div className="min-w-0 flex-1">
        <p className={cn("truncate text-sm font-medium leading-tight", dark ? "text-neutral-100" : "text-neutral-900")}>{attachment.name}</p>
        <p className="mt-0.5 text-xs leading-none text-neutral-500">PDF</p>
      </div>
    </div>
  );
}

function UserMessage({ content, attachments, theme }: { content: string; attachments?: Attachment[]; theme: Theme }) {
  const dark = theme === "dark";
  return (
    <div className="flex max-w-[75%] flex-col items-end gap-2">
      {attachments?.map((attachment, index) => <AttachmentPreview key={index} attachment={attachment} theme={theme} />)}
      {content && (
        <div className={cn("rounded-2xl px-4 py-2.5", dark ? "bg-neutral-900 ring-1 ring-inset ring-neutral-800" : "bg-neutral-100")}>
          <p className={cn("text-sm leading-relaxed", dark ? "text-neutral-100" : "text-neutral-900")}>{content}</p>
        </div>
      )}
    </div>
  );
}

function MessageList({ messages, theme }: { messages: ChatMessage[]; theme: Theme }) {
  return (
    <div className="relative z-10 flex min-h-0 flex-1 flex-col-reverse overflow-y-auto pt-16">
      <div className="mx-auto flex min-h-full w-full max-w-[700px] flex-col justify-end space-y-7 px-2 py-4">
        {messages.map((message) =>
          message.role === "assistant" ? (
            <AssistantMessage key={message.id} content={message.content} theme={theme} />
          ) : (
            <div key={message.id} className="flex justify-end">
              <UserMessage content={message.content} attachments={message.attachments} theme={theme} />
            </div>
          )
        )}
      </div>
    </div>
  );
}

/* ═══════════════════════════════════════════════
   Composer
   ═══════════════════════════════════════════════ */

function SendButtonGlow() {
  return (
    <div className="pointer-events-none absolute -inset-[3px] overflow-hidden rounded-full">
      <LiquidMetal
        width="100%"
        height="100%"
        colorBack="#00000000"
        colorTint="#fbbf24"
        shape="circle"
        repetition={2}
        softness={0.4}
        shiftRed={0.55}
        shiftBlue={0.12}
        distortion={0.15}
        contour={0.3}
        angle={90}
        speed={0.6}
        scale={1}
        fit="cover"
        className="absolute inset-0"
      />
    </div>
  );
}

function Composer({ theme }: { theme: Theme }) {
  const [value, setValue] = useState("");
  const textareaRef = useRef<HTMLTextAreaElement>(null);
  const dark = theme === "dark";
  const hasText = value.trim().length > 0;

  const autoGrow = () => {
    const el = textareaRef.current;
    if (!el) return;
    el.style.height = "auto";
    el.style.height = `${el.scrollHeight}px`;
  };

  return (
    <div className="z-20 flex flex-col items-center px-2 lg:p-1">
      <div
        className={cn(
          "mb-4 w-full rounded-2xl p-px ring-1 ring-inset lg:w-[700px] lg:rounded-[20px]",
          dark ? "bg-neutral-900 ring-neutral-800" : "bg-neutral-100 ring-neutral-200"
        )}
      >
        <div
          className={cn(
            "flex items-center gap-1 px-2.5 py-2 text-xs font-medium leading-none lg:px-3 lg:py-2.5",
            dark ? "text-neutral-500" : "text-neutral-400"
          )}
        >
          <Lightning weight="regular" className="size-4" />
          <span>Access premium models &amp; features</span>
          <span className={dark ? "text-neutral-700" : "text-neutral-300"}>·</span>
          <button
            type="button"
            className={cn("font-medium transition", dark ? "text-neutral-300 hover:text-neutral-100" : "text-neutral-700 hover:text-neutral-950")}
          >
            Upgrade
          </button>
        </div>
        <div
          className={cn(
            "flex cursor-text flex-col gap-2 rounded-[15px] p-2.5 pt-0 transition-all duration-200 lg:rounded-[19px] lg:p-3 lg:pt-0",
            dark ? "bg-[#111415] shadow-[0_18px_50px_rgba(0,0,0,0.35)] ring-1 ring-inset ring-white/[0.04]" : "bg-white shadow-[0_8px_20px_rgba(0,0,0,0.08)]"
          )}
        >
          <textarea
            ref={textareaRef}
            value={value}
            onChange={(event) => setValue(event.target.value)}
            onInput={autoGrow}
            onKeyDown={(event) => {
              if (event.key === "Enter" && !event.shiftKey) {
                event.preventDefault();
                setValue("");
                if (textareaRef.current) textareaRef.current.style.height = "auto";
              }
            }}
            placeholder="How can I help you today?"
            rows={1}
            className={cn(
              "max-h-40 min-h-6 w-full resize-none overflow-y-auto border-0 bg-transparent pt-2.5 pl-1 text-[14px] leading-5 tracking-normal outline-none focus:border-0 focus:ring-0 lg:pt-3.5 lg:pb-6 lg:text-[15px] lg:leading-6",
              dark ? "text-neutral-100 placeholder:text-neutral-500" : "text-neutral-800 placeholder:text-neutral-400"
            )}
          />
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-2">
              <AppSelect
                ariaLabel="Tools"
                defaultValue="generate-image"
                size="xsmall"
                theme={theme}
                options={[
                  { value: "generate-image", label: "Generate image" },
                  { value: "upload", label: "Upload image or file" },
                  { value: "deep-research", label: "Deep research" },
                  { value: "agent-mode", label: "Agent mode" },
                  { value: "study", label: "Study and learn" },
                ]}
                className="hidden max-w-[190px] lg:inline-flex"
              />
            </div>
            <div className="flex items-center gap-2">
              <AppSelect
                ariaLabel="Model"
                defaultValue="gpt-4"
                size="medium"
                theme={theme}
                options={[
                  { value: "gpt-4", label: "GPT-4" },
                  { value: "gpt-4o", label: "GPT-4o" },
                  { value: "o3-mini", label: "o3-mini" },
                ]}
              />
              <div className="relative size-10 shrink-0">
                <SendButtonGlow />
                <IconButton
                  ariaLabel="Send message"
                  tone={hasText ? "quiet" : "soft"}
                  theme={theme}
                  className={cn("relative size-10 rounded-full", hasText && "bg-emerald-300 text-white hover:bg-emerald-200 hover:text-white")}
                >
                  <ArrowUp weight="regular" className="size-5" />
                </IconButton>
              </div>
            </div>
          </div>
        </div>
      </div>
      <p className={cn("text-center text-xs font-normal leading-none lg:w-[700px]", dark ? "text-neutral-600" : "text-neutral-400")}>
        AI can make mistakes - please double-check
      </p>
    </div>
  );
}

/* ═══════════════════════════════════════════════
   Dashboard
   ═══════════════════════════════════════════════ */

function Dashboard() {
  const [theme, setTheme] = useState<Theme>("dark");
  const [activeChatId, setActiveChatId] = useState("new");
  const isDesktop = useIsDesktopViewport();
  const [sidebarOpen, setSidebarOpen] = useState(true);

  useEffect(() => {
    setSidebarOpen(isDesktop);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const activeChatMeta = useMemo(() => findChatMeta(activeChatId), [activeChatId]);
  const messages = activeChatId === "new" ? [] : CHAT_MESSAGES[activeChatId] ?? FALLBACK_MESSAGES;
  const isNewChat = activeChatId === "new";
  const dark = theme === "dark";

  const selectChat = (id: string) => {
    setActiveChatId(id);
    if (window.matchMedia("(max-width: 1023px)").matches) setSidebarOpen(false);
  };
  const newChat = () => {
    setActiveChatId("new");
    if (window.matchMedia("(max-width: 1023px)").matches) setSidebarOpen(false);
  };

  return (
    <div
      className={cn(
        "relative flex h-dvh w-full overflow-hidden font-sans lg:h-screen",
        dark ? "bg-neutral-950 text-neutral-100" : "bg-white text-neutral-950"
      )}
    >
      <Sidebar
        activeChatId={activeChatId}
        open={sidebarOpen}
        onNewChat={newChat}
        onSelectChat={selectChat}
        onToggleOpen={() => setSidebarOpen((v) => !v)}
        setTheme={setTheme}
        theme={theme}
      />
      <main className="w-full min-w-0 flex-1">
        <div className="flex h-full flex-col lg:p-1.5 lg:pl-0">
          <div
            className={cn(
              "relative flex h-full flex-col justify-end overflow-hidden pb-4 lg:rounded-3xl lg:border lg:py-4 lg:pl-5 lg:pr-4",
              dark ? "bg-[#0d0f10] lg:border-neutral-800" : "bg-white lg:border-neutral-200"
            )}
          >
            <div
              className={cn(
                "pointer-events-none absolute inset-0",
                dark && isNewChat && "bg-[radial-gradient(circle_at_50%_44%,rgba(16,185,129,0.07),transparent_32%),linear-gradient(180deg,rgba(255,255,255,0.025),transparent_42%)]",
                !dark && isNewChat && "bg-[radial-gradient(circle_at_50%_44%,rgba(16,185,129,0.04),transparent_32%)]"
              )}
            />
            <header className="absolute left-5 top-4 z-20 flex w-[calc(100%-32px)] items-center justify-between">
              <div className="flex min-w-0 items-center gap-2">
                {!sidebarOpen && (
                  <IconButton ariaLabel="Open sidebar" size="sm" theme={theme} className="size-7 rounded-md lg:hidden" onClick={() => setSidebarOpen(true)}>
                    <List weight="regular" className="size-5" />
                  </IconButton>
                )}
                <AppSelect
                  ariaLabel="Project"
                  defaultValue="design-help"
                  theme={theme}
                  variant="inline"
                  options={[
                    { value: "design-help", label: activeChatMeta?.project ?? "Design help" },
                    { value: "research", label: "Research" },
                    { value: "product", label: "Product notes" },
                  ]}
                />
                <span className={dark ? "text-sm text-neutral-600" : "text-sm text-neutral-300"}>/</span>
                <AppSelect
                  ariaLabel="Conversation"
                  defaultValue="current"
                  theme={theme}
                  variant="inline"
                  options={[
                    { value: "current", label: isNewChat ? "New chat" : activeChatMeta?.label ?? "Typography discussion" },
                    { value: "typography", label: "Typography discussion" },
                    { value: "systems", label: "Design systems" },
                    { value: "contrast", label: "Contrast review" },
                  ]}
                  className={dark ? "text-neutral-400" : "text-neutral-600"}
                />
              </div>
              <IconButton ariaLabel="More options" size="sm" theme={theme} className="size-7 rounded-md">
                <DotsThreeVertical weight="regular" className="size-5" />
              </IconButton>
            </header>
            {isNewChat ? (
              <section className="absolute left-1/2 top-1/2 flex w-full max-w-[700px] -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-center px-4">
                <BrandMark className="mb-5 size-8" />
                <h1 className={cn("mb-1 text-lg font-medium leading-snug tracking-normal", dark ? "text-neutral-100" : "text-neutral-950")}>
                  Hello Alex
                </h1>
                <p className={cn("text-center text-sm font-medium leading-none tracking-normal", dark ? "text-neutral-500" : "text-neutral-400")}>
                  What can I help you with today?
                </p>
              </section>
            ) : (
              <MessageList messages={messages} theme={theme} />
            )}
            <Composer theme={theme} />
          </div>
        </div>
      </main>
    </div>
  );
}

/* ═══════════════════════════════════════════════
   Demo
   ═══════════════════════════════════════════════ */

export default function AiChatDashboardDemo() {
  return (
    <div className="h-dvh w-full">
      <Dashboard />
    </div>
  );
}