"use client";

import * as React from "react";
import {
  Bold,
  CheckSquare,
  ClipboardPaste,
  Code,
  Copy,
  Download,
  Eraser,
  FileCode,
  FileDown,
  FileText,
  Focus,
  Heading1,
  Heading2,
  Image as ImageIcon,
  Italic,
  Link as LinkIcon,
  List,
  ListOrdered,
  ListTree,
  Maximize2,
  Minimize2,
  Printer,
  Quote,
  Search,
  Sigma,
  Smile,
  Sparkles,
  Strikethrough,
  Table as TableIcon,
  Wand2,
  Workflow,
} from "lucide-react";

import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip";

type Action = {
  id: string;
  icon: React.ReactNode;
  label: string;
  shortcut?: string;
  onClick: () => void;
};

type Props = {
  isFullscreen: boolean;
  isFocusMode: boolean;
  onToggleFullscreen: () => void;
  onToggleFocus: () => void;
  onAction: (id: string) => void;
};

export function EditorToolbar({
  isFullscreen,
  isFocusMode,
  onToggleFullscreen,
  onToggleFocus,
  onAction,
}: Props) {
  const formatting: Action[] = [
    { id: "bold", icon: <Bold />, label: "Bold", shortcut: "Ctrl/⌘ + B", onClick: () => onAction("bold") },
    { id: "italic", icon: <Italic />, label: "Italic", shortcut: "Ctrl/⌘ + I", onClick: () => onAction("italic") },
    { id: "strike", icon: <Strikethrough />, label: "Strikethrough", onClick: () => onAction("strike") },
    { id: "code", icon: <Code />, label: "Inline code", shortcut: "Ctrl/⌘ + /", onClick: () => onAction("code") },
  ];
  const blocks: Action[] = [
    { id: "h1", icon: <Heading1 />, label: "Heading 1", onClick: () => onAction("h1") },
    { id: "h2", icon: <Heading2 />, label: "Heading 2", onClick: () => onAction("h2") },
    { id: "quote", icon: <Quote />, label: "Blockquote", onClick: () => onAction("quote") },
    { id: "ul", icon: <List />, label: "Bulleted list", onClick: () => onAction("ul") },
    { id: "ol", icon: <ListOrdered />, label: "Numbered list", onClick: () => onAction("ol") },
    { id: "task", icon: <CheckSquare />, label: "Task list", onClick: () => onAction("task") },
    { id: "link", icon: <LinkIcon />, label: "Insert link", shortcut: "Ctrl/⌘ + K", onClick: () => onAction("link") },
    { id: "image", icon: <ImageIcon />, label: "Insert image", onClick: () => onAction("image") },
    { id: "table", icon: <TableIcon />, label: "Insert table", onClick: () => onAction("table") },
    { id: "math", icon: <Sigma />, label: "Insert math (KaTeX)", onClick: () => onAction("math") },
    { id: "diagram", icon: <Workflow />, label: "Insert diagram (Mermaid)", onClick: () => onAction("diagram") },
    { id: "emoji", icon: <Smile />, label: "Insert emoji shortcode", onClick: () => onAction("emoji") },
  ];
  const tools: Action[] = [
    { id: "format", icon: <Wand2 />, label: "Beautify", shortcut: "Ctrl/⌘ + Shift + F", onClick: () => onAction("format") },
    { id: "find", icon: <Search />, label: "Find & replace", shortcut: "Ctrl/⌘ + F", onClick: () => onAction("find") },
    { id: "toc", icon: <ListTree />, label: "Generate table of contents", onClick: () => onAction("toc") },
    { id: "sample", icon: <Sparkles />, label: "Load sample document", onClick: () => onAction("sample") },
    { id: "paste", icon: <ClipboardPaste />, label: "Paste from clipboard", onClick: () => onAction("paste") },
    { id: "copy", icon: <Copy />, label: "Copy markdown", onClick: () => onAction("copy") },
    { id: "clear", icon: <Eraser />, label: "Clear editor", onClick: () => onAction("clear") },
  ];
  const exports: Action[] = [
    { id: "download-md", icon: <Download />, label: "Download .md", onClick: () => onAction("download-md") },
    { id: "export-html", icon: <FileCode />, label: "Export HTML", onClick: () => onAction("export-html") },
    { id: "export-pdf", icon: <FileDown />, label: "Download PDF", onClick: () => onAction("export-pdf") },
    { id: "print", icon: <Printer />, label: "Print", onClick: () => onAction("print") },
    { id: "import", icon: <FileText />, label: "Import .md", onClick: () => onAction("import") },
  ];

  return (
    <div
      role="toolbar"
      aria-label="Editor toolbar"
      className="no-print flex flex-wrap items-center gap-1 border-b border-border/60 bg-background/80 px-2 py-1.5 backdrop-blur"
    >
      <ToolGroup actions={formatting} />
      <Divider />
      <ToolGroup actions={blocks} />
      <Divider />
      <ToolGroup actions={tools} />
      <Divider />
      <ToolGroup actions={exports} />

      <div className="ml-auto flex items-center gap-1">
        <Tooltip>
          <TooltipTrigger asChild>
            <Button
              variant="ghost"
              size="icon-sm"
              aria-label={isFocusMode ? "Exit focus mode" : "Enter focus mode"}
              aria-pressed={isFocusMode}
              onClick={onToggleFocus}
            >
              <Focus className={isFocusMode ? "text-primary" : undefined} />
            </Button>
          </TooltipTrigger>
          <TooltipContent>
            {isFocusMode ? "Exit focus mode (Ctrl/⌘ + .)" : "Focus mode (Ctrl/⌘ + .)"}
          </TooltipContent>
        </Tooltip>
        <Tooltip>
          <TooltipTrigger asChild>
            <Button
              variant="ghost"
              size="icon-sm"
              aria-label={isFullscreen ? "Exit fullscreen" : "Enter fullscreen"}
              aria-pressed={isFullscreen}
              onClick={onToggleFullscreen}
            >
              {isFullscreen ? <Minimize2 /> : <Maximize2 />}
            </Button>
          </TooltipTrigger>
          <TooltipContent>{isFullscreen ? "Exit fullscreen (F11)" : "Fullscreen (F11)"}</TooltipContent>
        </Tooltip>
      </div>
    </div>
  );
}

function ToolGroup({ actions }: { actions: Action[] }) {
  return (
    <div className="flex items-center gap-0.5">
      {actions.map((action) => (
        <Tooltip key={action.id}>
          <TooltipTrigger asChild>
            <Button
              variant="ghost"
              size="icon-sm"
              aria-label={action.label}
              onClick={action.onClick}
            >
              {action.icon}
            </Button>
          </TooltipTrigger>
          <TooltipContent>
            <span>
              {action.label}
              {action.shortcut ? ` · ${action.shortcut}` : ""}
            </span>
          </TooltipContent>
        </Tooltip>
      ))}
    </div>
  );
}

function Divider() {
  return <Separator orientation="vertical" className="mx-1 h-5" />;
}