import React, { useCallback, useEffect, useMemo, useState } from "react";
import {
  Settings as SettingsIcon,
  Bot,
  FolderOpen,
  Info,
  Check,
  AlertTriangle,
  X,
  XCircle,
  Loader2,
  Wifi,
  WifiOff,
  KeyRound,
  Key,
  Command,
  RefreshCw,
  Keyboard,
  ChevronRight,
  Search,
  RotateCcw,
  Zap,
  ClipboardList,
  Clock,
} from "lucide-react";
import { AgentConfigStatus } from "../../types/agentSettings";
import { AgentSettingsForm } from "./AgentSettingsForm";
import { NewsFeedSettingsCard } from "./NewsFeedSettingsCard";
import { SecEdgarSettingsCard } from "./SecEdgarSettingsCard";
import { ToastContainer, type Toast, type ToastType } from "./Toast";

type SettingsSectionId = "general" | "ai" | "workspace" | "about";

interface SettingsPageProps {
  status: AgentConfigStatus | null;
  onRefreshStatus: () => Promise<AgentConfigStatus>;
  onStatusChange: (status: AgentConfigStatus) => void;
  onBackToTerminal: () => void;
}

interface SettingsSection {
  id: SettingsSectionId;
  label: string;
  description: string;
  icon: React.ReactNode;
}

const sections: SettingsSection[] = [
  {
    id: "general",
    label: "General",
    description: "Configuration hub and runtime overview",
    icon: <SettingsIcon className="h-5 w-5" />,
  },
  {
    id: "ai",
    label: "AI & Models",
    description: "Remote provider, model routing, and credentials",
    icon: <Bot className="h-5 w-5" />,
  },
  {
    id: "workspace",
    label: "Workspace",
    description: "Shell, tabs, and terminal behavior",
    icon: <FolderOpen className="h-5 w-5" />,
  },
  {
    id: "about",
    label: "About",
    description: "Product details and settings conventions",
    icon: <Info className="h-5 w-5" />,
  },
];

const statusBadgeClassName = (active: boolean) =>
  active
    ? "border-[#1d4c7d] bg-[#0f1f31] text-[#8dc3ff]"
    : "border-[#3d3420] bg-[#1d170c] text-[#e7bb62]";

export const SettingsPage: React.FC<SettingsPageProps> = ({
  status,
  onRefreshStatus,
  onStatusChange,
  onBackToTerminal,
}) => {
  const [activeSection, setActiveSection] =
    useState<SettingsSectionId>("general");
  const [isRefreshing, setIsRefreshing] = useState(false);
  const [refreshError, setRefreshError] = useState<string | null>(null);
  const [toasts, setToasts] = useState<Toast[]>([]);
  const [searchQuery, setSearchQuery] = useState("");
  const [showKeyboardShortcuts, setShowKeyboardShortcuts] = useState(false);

  // Add toast notification
  const addToast = useCallback(
    (type: ToastType, message: string, duration?: number) => {
      const id = Math.random().toString(36).substring(2, 9);
      const newToast: Toast = { id, type, message, duration };
      setToasts((prev) => [...prev, newToast]);
    },
    [],
  );

  // Dismiss toast
  const dismissToast = useCallback((id: string) => {
    setToasts((prev) => prev.filter((toast) => toast.id !== id));
  }, []);

  // Filter sections based on search
  const filteredSections = useMemo(() => {
    if (!searchQuery.trim()) return sections;
    const query = searchQuery.toLowerCase();
    return sections.filter(
      (section) =>
        section.label.toLowerCase().includes(query) ||
        section.description.toLowerCase().includes(query),
    );
  }, [searchQuery]);

  const statusSummary = useMemo(
    () => [
      {
        label: "Settings health",
        value: status?.configured ? "Ready" : "Needs attention",
        icon: status?.configured ? (
          <Check className="h-4 w-4" />
        ) : (
          <AlertTriangle className="h-4 w-4" />
        ),
      },
      {
        label: "Remote provider",
        value: status?.remoteEnabled ? "Enabled" : "Disabled",
        icon: status?.remoteEnabled ? (
          <Wifi className="h-4 w-4" />
        ) : (
          <WifiOff className="h-4 w-4" />
        ),
      },
      {
        label: "API key",
        value: status?.hasRemoteApiKey ? "Stored" : "Missing",
        icon: status?.hasRemoteApiKey ? (
          <KeyRound className="h-4 w-4" />
        ) : (
          <Key className="h-4 w-4" />
        ),
      },
    ],
    [status],
  );

  const handleRefresh = async () => {
    setIsRefreshing(true);
    setRefreshError(null);

    try {
      const nextStatus = await onRefreshStatus();
      onStatusChange(nextStatus);
      addToast("success", "Settings status refreshed");
    } catch (error) {
      const errorMessage =
        error instanceof Error
          ? error.message
          : "Failed to refresh settings status";
      setRefreshError(errorMessage);
      addToast("error", errorMessage);
    } finally {
      setIsRefreshing(false);
    }
  };

  // Keyboard shortcuts
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      const activeElement = document.activeElement as HTMLElement | null;
      const isEditingField =
        activeElement?.tagName === "INPUT" ||
        activeElement?.tagName === "TEXTAREA" ||
        activeElement?.isContentEditable === true;

      // Cmd/Ctrl + S to save (prevent default)
      if ((e.metaKey || e.ctrlKey) && e.key === "s") {
        e.preventDefault();
        // Trigger save in the active form
        const saveButton = document.querySelector(
          '[aria-describedby="save-hint"]',
        ) as HTMLButtonElement;
        if (saveButton && !saveButton.disabled) {
          saveButton.click();
        }
      }

      // Cmd/Ctrl + K to focus search
      if ((e.metaKey || e.ctrlKey) && e.key === "k") {
        e.preventDefault();
        document.getElementById("settings-search")?.focus();
      }

      if (isEditingField) {
        return;
      }

      // ? to show shortcuts
      if (e.key === "?" && !e.shiftKey && !e.metaKey && !e.ctrlKey) {
        setShowKeyboardShortcuts((prev) => !prev);
      }

      // Escape to close shortcuts modal
      if (e.key === "Escape") {
        setShowKeyboardShortcuts(false);
      }

      // Number keys to navigate sections
      if (["1", "2", "3", "4"].includes(e.key)) {
        const sectionIndex = parseInt(e.key) - 1;
        if (filteredSections[sectionIndex]) {
          setActiveSection(
            filteredSections[sectionIndex].id as SettingsSectionId,
          );
        }
      }
    };

    document.addEventListener("keydown", handleKeyDown);
    return () => document.removeEventListener("keydown", handleKeyDown);
  }, [filteredSections]);

  const renderContent = () => {
    if (activeSection === "general") {
      return (
        <div className="space-y-8">
          <section>
            <h2 className="text-sm font-mono font-semibold text-[#e0e0e0] mb-3">
              Settings are centralized here
            </h2>
            <p className="max-w-2xl text-sm font-mono leading-7 text-[#888888]">
              This page is the dedicated control surface for MosaicIQ
              configuration. New settings categories should be added as submenu
              entries here instead of modal dialogs or one-off controls
              elsewhere in the shell.
            </p>
          </section>

          <section>
            <div className="flex items-center gap-3 border-b border-[#1a1a1a] pb-3 mb-4">
              <div className="h-px flex-1 bg-[#1a1a1a]" />
              <span className="text-xs font-mono text-[#666666] uppercase tracking-wider">
                Status Overview
              </span>
              <div className="h-px flex-1 bg-[#1a1a1a]" />
            </div>
            <div className="grid gap-6 sm:grid-cols-3">
              {statusSummary.map((item) => (
                <div key={item.label} className="space-y-1">
                  <div className="flex items-center gap-2 text-[#666666]">
                    <span className="text-sm">{item.icon}</span>
                    <span className="text-xs font-mono uppercase tracking-wide">
                      {item.label}
                    </span>
                  </div>
                  <div className="text-sm font-mono text-[#e0e0e0]">
                    {item.value}
                  </div>
                </div>
              ))}
            </div>
          </section>

          <section>
            <h2 className="text-sm font-mono font-semibold text-[#e0e0e0] mb-4">
              Settings roadmap
            </h2>
            <div className="space-y-4">
              <div className="flex gap-4 p-4 border-l-2 border-[#1a1a1a] hover:border-[#58a6ff] transition-colors">
                <span className="text-[#666666] mt-0.5">
                  <Bot className="h-5 w-5" />
                </span>
                <div className="flex-1">
                  <h3 className="text-sm font-mono text-[#e0e0e0] mb-1">
                    AI & Models
                  </h3>
                  <p className="text-sm font-mono leading-6 text-[#888888]">
                    Active now. Provider routing, default models, and credential
                    storage are managed in this section.
                  </p>
                </div>
              </div>
              <div className="flex gap-4 p-4 border-l-2 border-[#1a1a1a] hover:border-[#58a6ff] transition-colors">
                <span className="text-[#666666] mt-0.5">
                  <FolderOpen className="h-5 w-5" />
                </span>
                <div className="flex-1">
                  <h3 className="text-sm font-mono text-[#e0e0e0] mb-1">
                    Workspace
                  </h3>
                  <p className="text-sm font-mono leading-6 text-[#888888]">
                    Reserved for terminal defaults, tab naming conventions, and
                    shell preferences as those controls are added.
                  </p>
                </div>
              </div>
            </div>
          </section>

          <SecEdgarSettingsCard
            status={status}
            onStatusChange={onStatusChange}
          />
          <NewsFeedSettingsCard />
        </div>
      );
    }

    if (activeSection === "ai") {
      return (
        <AgentSettingsForm status={status} onStatusChange={onStatusChange} />
      );
    }

    if (activeSection === "workspace") {
      return (
        <section>
          <h2 className="text-sm font-mono font-semibold text-[#e0e0e0] mb-3">
            Workspace settings
          </h2>
          <p className="max-w-2xl text-sm font-mono leading-7 text-[#888888] mb-6">
            This submenu is in place for shell-wide controls such as sidebar
            defaults, startup behavior, and terminal preferences. Future
            workspace configuration should be added here rather than inside the
            terminal view.
          </p>

          <div className="space-y-4">
            <div className="flex gap-4 p-4 border-l-2 border-[#1a1a1a] hover:border-[#58a6ff] transition-colors">
              <span className="text-[#666666] mt-0.5">
                <Zap className="h-5 w-5" />
              </span>
              <div className="flex-1">
                <h3 className="text-sm font-mono text-[#e0e0e0] mb-1">
                  Planned controls
                </h3>
                <p className="text-sm font-mono leading-6 text-[#888888]">
                  Default workspace names, sidebar visibility at launch,
                  terminal input behavior, and session retention rules.
                </p>
              </div>
            </div>

            <div className="flex gap-4 p-4 border-l-2 border-[#1a1a1a] hover:border-[#58a6ff] transition-colors">
              <span className="text-[#666666] mt-0.5">
                <ClipboardList className="h-5 w-5" />
              </span>
              <div className="flex-1">
                <h3 className="text-sm font-mono text-[#e0e0e0] mb-1">
                  Implementation note
                </h3>
                <p className="text-sm font-mono leading-6 text-[#888888]">
                  Keep future settings grouped by submenu and avoid
                  reintroducing feature-specific controls in headers, toolbars,
                  or modal overlays.
                </p>
              </div>
            </div>
          </div>

          <div className="mt-8 p-4 border-l-2 border-[#3d3420] bg-[#1d170c]/30">
            <div className="flex items-center gap-3">
              <Clock className="h-5 w-5 text-[#e7bb62]" aria-hidden="true" />
              <div>
                <p className="text-sm font-mono text-[#e7bb62]">Coming soon</p>
                <p className="mt-1 text-xs font-mono text-[#b8933f]">
                  Workspace settings will be available in a future update
                </p>
              </div>
            </div>
          </div>
        </section>
      );
    }

    return (
      <section>
        <h2 className="text-sm font-mono font-semibold text-[#e0e0e0] mb-3">
          About this settings page
        </h2>
        <div className="space-y-4 text-sm font-mono leading-7 text-[#888888]">
          <p>
            The settings page is designed as a durable home for configuration
            instead of scattering controls across the product shell.
          </p>
          <p>
            Each submenu is a stable category. Future settings work should add
            to these categories or introduce a new submenu here when the
            information architecture truly expands.
          </p>
          <p>
            Current shell shortcut: use the bottom-left cog or press{" "}
            <kbd className="mx-1 px-1.5 py-0.5 text-xs text-[#e0e0e0] bg-[#1a1a1a] rounded">
              <Command className="inline h-3 w-3" /> + ,
            </kbd>{" "}
            to open settings.
          </p>
        </div>

        {/* Keyboard shortcuts help */}
        <div className="mt-6 pt-6 border-t border-[#1a1a1a]">
          <div className="mb-4 flex items-center justify-between">
            <h3 className="text-sm font-mono font-semibold text-[#e0e0e0]">
              Keyboard shortcuts
            </h3>
            <button
              type="button"
              onClick={() => setShowKeyboardShortcuts(true)}
              className="px-3 py-1.5 text-xs font-mono text-[#888888] border border-[#2a2a2a] hover:border-[#58a6ff] hover:text-[#58a6ff] transition-colors rounded"
            >
              View all
            </button>
          </div>
          <div className="grid gap-3 sm:grid-cols-2">
            <div className="flex items-center justify-between text-xs font-mono">
              <span className="text-[#888888]">Save settings</span>
              <kbd className="flex items-center gap-1 px-2 py-0.5 text-[#e0e0e0] bg-[#1a1a1a] rounded">
                <Command className="h-3 w-3" />S
              </kbd>
            </div>
            <div className="flex items-center justify-between text-xs font-mono">
              <span className="text-[#888888]">Search settings</span>
              <kbd className="flex items-center gap-1 px-2 py-0.5 text-[#e0e0e0] bg-[#1a1a1a] rounded">
                <Command className="h-3 w-3" />K
              </kbd>
            </div>
            <div className="flex items-center justify-between text-xs font-mono">
              <span className="text-[#888888]">Show shortcuts</span>
              <kbd className="px-2 py-0.5 text-[#e0e0e0] bg-[#1a1a1a] rounded">
                ?
              </kbd>
            </div>
            <div className="flex items-center justify-between text-xs font-mono">
              <span className="text-[#888888]">Navigate sections</span>
              <kbd className="px-2 py-0.5 text-[#e0e0e0] bg-[#1a1a1a] rounded">
                1-4
              </kbd>
            </div>
          </div>
        </div>
      </section>
    );
  };

  const currentSectionLabel = sections.find(
    (section) => section.id === activeSection,
  )?.label;

  return (
    <div className="flex h-full flex-col bg-[#0a0a0a]">
      {/* Header */}
      <header className="flex items-center justify-between border-b border-[#1a1a1a] px-6 py-4">
        <div>
          <h1 className="text-lg font-mono font-semibold text-[#e0e0e0]">
            Settings
          </h1>
          <p className="mt-1 text-xs font-mono text-[#888888]">
            Centralized configuration for MosaicIQ
          </p>
        </div>
        <div className="flex items-center gap-3">
          <button
            type="button"
            onClick={() => setShowKeyboardShortcuts(true)}
            className="rounded border border-[#2a2a2a] bg-[#111111] p-2 text-[#888888] transition-colors hover:border-[#58a6ff] hover:text-[#58a6ff]"
            aria-label="View keyboard shortcuts"
          >
            <Keyboard className="h-4 w-4" />
          </button>
          <button
            type="button"
            onClick={handleRefresh}
            disabled={isRefreshing}
            className="flex items-center gap-2 rounded border border-[#2a2a2a] bg-[#111111] px-3 py-2 text-xs font-mono text-[#e0e0e0] transition-colors hover:border-[#58a6ff] hover:text-[#58a6ff] disabled:cursor-not-allowed disabled:opacity-50"
          >
            {isRefreshing ? (
              <>
                <Loader2 className="h-3.5 w-3.5 animate-spin" />
                Refreshing...
              </>
            ) : (
              <>
                <RefreshCw className="h-3.5 w-3.5" />
                Refresh status
              </>
            )}
          </button>
          <button
            type="button"
            onClick={onBackToTerminal}
            className="rounded border border-[#2a2a2a] bg-[#111111] px-3 py-2 text-xs font-mono text-[#e0e0e0] transition-colors hover:border-[#58a6ff] hover:text-[#58a6ff]"
          >
            Back to terminal
          </button>
        </div>
      </header>

      {/* Main content */}
      <div className="flex min-h-0 flex-1 flex-col lg:flex-row">
        {/* Sidebar */}
        <aside className="border-b border-[#1a1a1a] bg-[#0d0d0d] lg:w-[280px] lg:border-b-0 lg:border-r">
          {/* Search */}
          <div className="border-b border-[#1a1a1a] px-4 py-3">
            <div className="relative group">
              <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[#666666] group-focus-within:text-[#58a6ff] transition-colors" />
              <input
                id="settings-search"
                type="text"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                placeholder="Search settings... (⌘K)"
                className="w-full border-l-2 border-[#1a1a1a] bg-transparent px-3 py-2 pl-9 text-sm font-mono text-[#e0e0e0] outline-none transition-all focus:border-l-[#58a6ff] focus:bg-[#0a0a0a]"
              />
            </div>
            {searchQuery && filteredSections.length === 0 && (
              <div className="mt-3 flex items-center gap-2 px-1">
                <div className="h-px flex-1 bg-[#2a2a2a]" />
                <span className="text-xs font-mono text-[#666666]">
                  No results
                </span>
                <div className="h-px flex-1 bg-[#2a2a2a]" />
              </div>
            )}
          </div>

          {/* Navigation */}
          <nav
            className="flex gap-1 overflow-x-auto px-4 py-3 lg:flex-col lg:gap-0.5 lg:overflow-visible"
            role="navigation"
            aria-label="Settings sections"
          >
            {filteredSections.map((section, index) => {
              const isActive = activeSection === section.id;
              return (
                <button
                  key={section.id}
                  type="button"
                  onClick={() => setActiveSection(section.id)}
                  className={`min-w-[180px] flex items-center gap-3 px-3 py-2.5 text-left transition-all lg:min-w-0 ${
                    isActive
                      ? "bg-[#1a1a1a] text-[#e0e0e0]"
                      : "text-[#888888] hover:bg-[#111111] hover:text-[#e0e0e0]"
                  }`}
                  aria-current={isActive ? "page" : undefined}
                >
                  <span
                    className={`transition-colors ${isActive ? "text-[#e0e0e0]" : "text-[#666666]"}`}
                  >
                    {section.icon}
                  </span>
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center justify-between gap-2">
                      <span className="text-xs font-mono truncate">
                        {section.label}
                      </span>
                      <kbd className="text-[10px] text-[#444444] font-mono">
                        {index + 1}
                      </kbd>
                    </div>
                    <div className="mt-0.5 text-[11px] font-mono leading-tight truncate opacity-70">
                      {section.description}
                    </div>
                  </div>
                </button>
              );
            })}
          </nav>
        </aside>

        {/* Content area */}
        <main
          className="min-h-0 flex-1 overflow-y-auto px-4 py-4 lg:px-8 lg:py-6"
          id="main-content"
        >
          {/* Breadcrumbs */}
          <nav
            className="mb-6 flex items-center gap-2 text-xs font-mono"
            aria-label="Breadcrumb"
          >
            <span className="text-[#888888]">Settings</span>
            <ChevronRight
              className="h-4 w-4 text-[#666666]"
              aria-hidden="true"
            />
            <span className="text-[#e0e0e0]">{currentSectionLabel}</span>
          </nav>

          {/* Status badges */}
          <div className="mb-6 flex flex-wrap items-center gap-4">
            <div
              className={`flex items-center gap-2 px-3 py-1.5 text-[11px] font-mono border-l-2 ${statusBadgeClassName(
                Boolean(status?.configured),
              )}`}
            >
              {status?.configured ? (
                <>
                  <Check className="h-3.5 w-3.5" />
                  Configured
                </>
              ) : (
                <>
                  <AlertTriangle className="h-3.5 w-3.5" />
                  Needs configuration
                </>
              )}
            </div>
            <div className="flex items-center gap-2 px-3 py-1.5 text-[11px] font-mono text-[#888888] border-l-2 border-[#2a2a2a]">
              <span className="w-1.5 h-1.5 rounded-full bg-[#666666]" />
              <span>Active section: {currentSectionLabel}</span>
            </div>
          </div>

          {/* Refresh error */}
          {refreshError ? (
            <div
              className="mb-6 p-4 border-l-2 border-[#5c2b2b] bg-[#211313]/30 text-sm font-mono text-[#ffb4b4]"
              role="alert"
            >
              <div className="flex items-start gap-3">
                <XCircle className="h-5 w-5 mt-0.5" aria-hidden="true" />
                <div className="flex-1">{refreshError}</div>
                <button
                  type="button"
                  onClick={() => setRefreshError(null)}
                  className="text-[#ffb4b4] opacity-60 transition-opacity hover:opacity-100"
                  aria-label="Dismiss error"
                >
                  <X className="h-4 w-4" />
                </button>
              </div>
            </div>
          ) : null}

          {/* Content */}
          {renderContent()}
        </main>
      </div>

      {/* Toast container */}
      <ToastContainer toasts={toasts} onDismiss={dismissToast} />

      {/* Keyboard shortcuts modal */}
      {showKeyboardShortcuts && (
        <div
          className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4"
          onClick={() => setShowKeyboardShortcuts(false)}
          role="dialog"
          aria-modal="true"
          aria-labelledby="shortcuts-title"
        >
          <div
            className="w-full max-w-md rounded-lg border border-[#2a2a2a] bg-[#111111] p-6 shadow-2xl"
            onClick={(e) => e.stopPropagation()}
          >
            <div className="mb-5 flex items-center justify-between">
              <h2
                id="shortcuts-title"
                className="text-base font-mono font-semibold text-[#e0e0e0]"
              >
                Keyboard Shortcuts
              </h2>
              <button
                type="button"
                onClick={() => setShowKeyboardShortcuts(false)}
                className="text-[#888888] transition-colors hover:text-[#e0e0e0]"
                aria-label="Close keyboard shortcuts"
              >
                <X className="h-5 w-5" />
              </button>
            </div>
            <div className="space-y-3">
              <div className="flex items-center justify-between border-b border-[#1a1a1a] pb-3">
                <span className="text-sm font-mono text-[#e0e0e0]">
                  Save settings
                </span>
                <kbd className="flex items-center gap-1 rounded border border-[#2a2a2a] bg-[#0d0d0d] px-2 py-1 text-xs text-[#e0e0e0]">
                  <Command className="h-3 w-3" /> /{" "}
                  <RotateCcw className="h-3 w-3" /> + S
                </kbd>
              </div>
              <div className="flex items-center justify-between border-b border-[#1a1a1a] pb-3">
                <span className="text-sm font-mono text-[#e0e0e0]">
                  Search settings
                </span>
                <kbd className="flex items-center gap-1 rounded border border-[#2a2a2a] bg-[#0d0d0d] px-2 py-1 text-xs text-[#e0e0e0]">
                  <Command className="h-3 w-3" /> /{" "}
                  <RotateCcw className="h-3 w-3" /> + K
                </kbd>
              </div>
              <div className="flex items-center justify-between border-b border-[#1a1a1a] pb-3">
                <span className="text-sm font-mono text-[#e0e0e0]">
                  Toggle shortcuts help
                </span>
                <kbd className="rounded border border-[#2a2a2a] bg-[#0d0d0d] px-2 py-1 text-xs text-[#e0e0e0]">
                  ?
                </kbd>
              </div>
              <div className="flex items-center justify-between border-b border-[#1a1a1a] pb-3">
                <span className="text-sm font-mono text-[#e0e0e0]">
                  Navigate to section
                </span>
                <div className="flex gap-1">
                  <kbd className="rounded border border-[#2a2a2a] bg-[#0d0d0d] px-2 py-1 text-xs text-[#e0e0e0]">
                    1
                  </kbd>
                  <kbd className="rounded border border-[#2a2a2a] bg-[#0d0d0d] px-2 py-1 text-xs text-[#e0e0e0]">
                    2
                  </kbd>
                  <kbd className="rounded border border-[#2a2a2a] bg-[#0d0d0d] px-2 py-1 text-xs text-[#e0e0e0]">
                    3
                  </kbd>
                  <kbd className="rounded border border-[#2a2a2a] bg-[#0d0d0d] px-2 py-1 text-xs text-[#e0e0e0]">
                    4
                  </kbd>
                </div>
              </div>
              <div className="flex items-center justify-between">
                <span className="text-sm font-mono text-[#e0e0e0]">
                  Close modal
                </span>
                <kbd className="rounded border border-[#2a2a2a] bg-[#0d0d0d] px-2 py-1 text-xs text-[#e0e0e0]">
                  Esc
                </kbd>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Skip link for accessibility */}
      <a
        href="#main-content"
        className="sr-only focus:not-sr-only focus:absolute focus:left-4 focus:top-4 focus:z-50 focus:rounded focus:border-[#58a6ff] focus:bg-[#111111] focus:px-3 focus:py-2 focus:text-sm focus:font-mono focus:text-[#58a6ff]"
      >
        Skip to main content
      </a>
    </div>
  );
};
