"use client"

import * as React from "react"

import type { ComponentDocSpec } from "@/lib/design-system/component-doc-types"
import {
  ContextMenuPreview,
  DropdownMenuIconPreview,
  DropdownMenuPreview,
  DropdownMenuRichPreview,
  PopoverPreview,
  TextSelectionToolbarPreview,
  TipPreview,
} from "@/components/design-system/overlay-previews"
import { CommandPreview } from "@/components/design-system/data-display-previews"

function ex(
  section: Omit<ComponentDocSpec["sections"][number], "children" | "description">,
  children: React.ReactNode,
  description?: string,
) {
  return { ...section, description, children }
}

const overlayGuidelines: ComponentDocSpec["guidelines"] = {
  do: [
    "Prefer Tip over raw Tooltip in product code.",
    "Use DropdownMenu for click-triggered actions (row overflow, view options).",
    "Use ContextMenu for right-click actions on a surface or row.",
    "Use Popover for lightweight contextual panels, not blocking dialogs.",
  ],
  dont: [
    "Do not use Vaul drawers. Sheet / FloatingSheetPanel only.",
    "Do not use toast for overlay feedback (exxat-no-toast).",
    "Do not use Select for action menus. Select is for choosing a value.",
  ],
}

export const popoverComponentDoc: ComponentDocSpec = {
  slug: "popover",
  summary: "Popover and HoverCard surfaces. Lightweight contextual panels.",
  sections: [ex({ id: "default", title: "Popover" }, <PopoverPreview />)],
  guidelines: overlayGuidelines,
  relatedSlugs: ["dialog", "tip", "hover-card", "dropdown-menu"],
}

export const dropdownMenuComponentDoc: ComponentDocSpec = {
  slug: "dropdown-menu",
  summary:
    "Click menus, right-click contextual menus, and text-selection toolbars for inline actions.",
  sections: [
    ex(
      { id: "default", title: "Dropdown menu" },
      <DropdownMenuPreview />,
      "Toolbar / overflow actions with icons, shortcuts, and destructive item.",
    ),
    ex(
      { id: "rich", title: "Checkboxes, radios, and submenu" },
      <DropdownMenuRichPreview />,
      "View options pattern: toggles, density radio, nested Share submenu.",
    ),
    ex(
      { id: "icon", title: "Icon trigger" },
      <DropdownMenuIconPreview />,
      "Hub row overflow (ellipsis). Pair with Tip or aria-label.",
    ),
    ex(
      { id: "context-menu", title: "Context menu (right-click)" },
      <ContextMenuPreview />,
      "Right-click the dashed surface. Groups, shortcuts, checkbox, radio, submenu.",
    ),
    ex(
      { id: "selection-toolbar", title: "Text selection toolbar" },
      <TextSelectionToolbarPreview />,
      "Select text, then Ask Leo. Opens Leo Assist Bar scoped to the selection. Canonical example: Leo → Leo Assist Bar.",
    ),
  ],
  anatomy: [
    { part: "DropdownMenu", description: "Click-triggered action menu." },
    { part: "ContextMenu", description: "Right-click menu on a surface.", slug: "context-menu" },
    { part: "Selection toolbar", description: "Portaled bar on text selection; Ask Leo opens Leo Assist Bar." },
    { part: "MenuItem / CheckboxItem / RadioItem", description: "Actions and selectable options." },
    { part: "Sub / SubTrigger / SubContent", description: "Nested menus." },
  ],
  guidelines: {
    ...overlayGuidelines,
    do: [
      ...overlayGuidelines.do,
      "For selected field text, use a selection toolbar; Ask Leo should open Leo Assist Bar, not only the shell panel.",
    ],
  },
  relatedSlugs: ["select", "popover", "command", "button", "tip", "leo-assist-bar"],
  extraImports: [
    { label: "ContextMenu", path: "@exxatdesignux/ui/context-menu" },
  ],
}

export const commandComponentDoc: ComponentDocSpec = {
  slug: "command",
  summary: "⌘K palette list primitive. Composed in CommandMenu for global search.",
  sections: [
    ex({ id: "default", title: "Command list" }, <CommandPreview />, "See command-menu-pattern.md for shell wiring."),
  ],
  ux: { patternDoc: "apps/web/docs/command-menu-pattern.md" },
  relatedSlugs: ["dialog", "dropdown-menu"],
}

export const tipComponentDoc: ComponentDocSpec = {
  slug: "tip",
  summary: "Product tooltip wrapper with DS delay. Default for icon-only controls.",
  sections: [ex({ id: "default", title: "Tip on icon button" }, <TipPreview />)],
  guidelines: {
    do: ["Wrap every icon-only control in Tip or aria-label.", "Use side=right on secondary nav rows."],
    dont: ["Do not import Tooltip directly in product surfaces."],
  },
  relatedSlugs: ["button", "popover"],
}