import React, { useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';
import {
  ArrowLeft,
  Copy,
  Check,
  ChevronDown,
  ChevronRight,
  ExternalLink,
  Key,
  AlertCircle,
} from 'lucide-react';
import { useTestTokensForDocs } from '../hooks/useApiTokens';
import { API_BASE_URL } from '../api/config';

// =============================================================================
// TYPES & CONSTANTS
// =============================================================================

type CodeLanguage = 'curl' | 'python' | 'php' | 'ruby' | 'perl' | 'json' | 'http' | 'javascript' | 'java' | 'go' | 'csharp';

interface LanguageConfig {
  label: string;
  icon: string;
}

const LANGUAGES: Record<CodeLanguage, LanguageConfig> = {
  curl: { label: 'cURL', icon: '>' },
  python: { label: 'Python', icon: 'py' },
  php: { label: 'PHP', icon: 'php' },
  ruby: { label: 'Ruby', icon: 'rb' },
  perl: { label: 'Perl', icon: 'pl' },
  javascript: { label: 'Node.js', icon: 'js' },
  java: { label: 'Java', icon: 'java' },
  go: { label: 'Go', icon: 'go' },
  csharp: { label: '.NET', icon: 'cs' },
  json: { label: 'JSON', icon: '{}' },
  http: { label: 'HTTP', icon: 'H' },
};

// Default test credentials (used when no tokens are available)
const DEFAULT_TEST_API_KEY = 'ss_test_<your_test_token_here>';
const DEFAULT_TEST_WEBHOOK_SECRET = 'whsec_test_abc123def456ghi789jkl012mno345pqr678';
const SANDBOX_URL = 'https://sandbox.smoothschedule.com/v1';

// Multi-language code interface
interface MultiLangCode {
  curl: string;
  python: string;
  php: string;
  ruby: string;
  perl: string;
  javascript: string;
  java: string;
  go: string;
  csharp: string;
}

// =============================================================================
// CONTEXT FOR SHARED LANGUAGE STATE
// =============================================================================

const LanguageContext = React.createContext<{
  activeLanguage: keyof MultiLangCode;
  setActiveLanguage: (lang: keyof MultiLangCode) => void;
}>({
  activeLanguage: 'curl',
  setActiveLanguage: () => {},
});

// =============================================================================
// SYNTAX HIGHLIGHTING
// =============================================================================

const highlightSyntax = (code: string, language: CodeLanguage): React.ReactNode => {
  const patterns: Record<string, Array<{ pattern: RegExp; className: string }>> = {
    json: [
      { pattern: /"([^"\\]|\\.)*"(?=\s*:)/g, className: 'text-purple-400' },
      { pattern: /"([^"\\]|\\.)*"(?!\s*:)/g, className: 'text-green-400' },
      { pattern: /\b(true|false|null)\b/g, className: 'text-orange-400' },
      { pattern: /\b(-?\d+\.?\d*)\b/g, className: 'text-cyan-400' },
    ],
    python: [
      { pattern: /#.*/g, className: 'text-gray-500 italic' },
      { pattern: /\b(import|from|class|def|return|if|else|elif|for|while|try|except|with|as|None|True|False|self|async|await)\b/g, className: 'text-purple-400' },
      { pattern: /('([^'\\]|\\.)*'|"([^"\\]|\\.)*"|f"([^"\\]|\\.)*"|f'([^'\\]|\\.)*')/g, className: 'text-green-400' },
      { pattern: /\b(\d+\.?\d*)\b/g, className: 'text-cyan-400' },
      { pattern: /\b([A-Z][a-zA-Z0-9_]*)\b/g, className: 'text-yellow-400' },
      { pattern: /@\w+/g, className: 'text-pink-400' },
    ],
    php: [
      { pattern: /\/\/.*/g, className: 'text-gray-500 italic' },
      { pattern: /\b(class|function|public|private|protected|return|if|else|elseif|foreach|for|while|new|throw|try|catch|extends|implements|use|namespace|array|string|int|bool|void)\b/g, className: 'text-purple-400' },
      { pattern: /('([^'\\]|\\.)*'|"([^"\\]|\\.)*")/g, className: 'text-green-400' },
      { pattern: /\$[a-zA-Z_][a-zA-Z0-9_]*/g, className: 'text-orange-400' },
      { pattern: /\b(\d+\.?\d*)\b/g, className: 'text-cyan-400' },
      { pattern: /->/g, className: 'text-pink-400' },
    ],
    ruby: [
      { pattern: /#.*/g, className: 'text-gray-500 italic' },
      { pattern: /\b(class|def|end|return|if|else|elsif|unless|while|do|require|module|attr_accessor|attr_reader|attr_writer|private|protected|public|new|nil|true|false|self|yield|raise|begin|rescue)\b/g, className: 'text-purple-400' },
      { pattern: /('([^'\\]|\\.)*'|"([^"\\]|\\.)*")/g, className: 'text-green-400' },
      { pattern: /:[a-zA-Z_][a-zA-Z0-9_]*/g, className: 'text-cyan-400' },
      { pattern: /@[a-zA-Z_][a-zA-Z0-9_]*/g, className: 'text-orange-400' },
      { pattern: /\b(\d+\.?\d*)\b/g, className: 'text-cyan-400' },
    ],
    perl: [
      { pattern: /#.*/g, className: 'text-gray-500 italic' },
      { pattern: /\b(use|my|sub|return|if|else|elsif|unless|while|for|foreach|package|strict|warnings|die|print|say)\b/g, className: 'text-purple-400' },
      { pattern: /('([^'\\]|\\.)*'|"([^"\\]|\\.)*")/g, className: 'text-green-400' },
      { pattern: /\$[a-zA-Z_][a-zA-Z0-9_]*/g, className: 'text-orange-400' },
      { pattern: /@[a-zA-Z_][a-zA-Z0-9_]*/g, className: 'text-yellow-400' },
      { pattern: /%[a-zA-Z_][a-zA-Z0-9_]*/g, className: 'text-pink-400' },
      { pattern: /\b(\d+\.?\d*)\b/g, className: 'text-cyan-400' },
    ],
    curl: [
      { pattern: /\bcurl\b/g, className: 'text-purple-400' },
      { pattern: /-[A-Za-z]+/g, className: 'text-cyan-400' },
      { pattern: /('([^'\\]|\\.)*'|"([^"\\]|\\.)*")/g, className: 'text-green-400' },
      { pattern: /https?:\/\/[^\s"']+/g, className: 'text-yellow-400' },
      { pattern: /\\$/gm, className: 'text-gray-500' },
    ],
    javascript: [
      { pattern: /\/\/.*/g, className: 'text-gray-500 italic' },
      { pattern: /\b(const|let|var|function|class|return|if|else|for|while|async|await|new|this|import|export|from|default|throw|try|catch|extends|require|module)\b/g, className: 'text-purple-400' },
      { pattern: /(`[^`]*`|'([^'\\]|\\.)*'|"([^"\\]|\\.)*")/g, className: 'text-green-400' },
      { pattern: /\b(\d+\.?\d*)\b/g, className: 'text-cyan-400' },
      { pattern: /\b(true|false|null|undefined)\b/g, className: 'text-orange-400' },
    ],
    java: [
      { pattern: /\/\/.*/g, className: 'text-gray-500 italic' },
      { pattern: /\b(public|private|protected|class|interface|extends|implements|static|final|void|return|if|else|for|while|try|catch|throw|throws|new|import|package|this|super)\b/g, className: 'text-purple-400' },
      { pattern: /("([^"\\]|\\.)*")/g, className: 'text-green-400' },
      { pattern: /\b(\d+\.?\d*[LlFfDd]?)\b/g, className: 'text-cyan-400' },
      { pattern: /\b(true|false|null)\b/g, className: 'text-orange-400' },
      { pattern: /\b(String|int|long|double|float|boolean|Integer|Long|Double|Map|List|HashMap|ArrayList|HttpClient|HttpRequest|HttpResponse|URI|JSONObject|JSONArray)\b/g, className: 'text-yellow-400' },
      { pattern: /@\w+/g, className: 'text-pink-400' },
    ],
    go: [
      { pattern: /\/\/.*/g, className: 'text-gray-500 italic' },
      { pattern: /\b(package|import|func|return|if|else|for|range|var|const|type|struct|interface|map|chan|go|defer|select|case|default|break|continue|fallthrough|nil)\b/g, className: 'text-purple-400' },
      { pattern: /(`[^`]*`|"([^"\\]|\\.)*")/g, className: 'text-green-400' },
      { pattern: /\b(\d+\.?\d*)\b/g, className: 'text-cyan-400' },
      { pattern: /\b(true|false|nil)\b/g, className: 'text-orange-400' },
      { pattern: /\b(string|int|int64|float64|bool|error|byte|rune|any)\b/g, className: 'text-yellow-400' },
    ],
    csharp: [
      { pattern: /\/\/.*/g, className: 'text-gray-500 italic' },
      { pattern: /\b(using|namespace|class|public|private|protected|static|async|await|return|if|else|for|foreach|while|try|catch|throw|new|var|void|get|set|this|base)\b/g, className: 'text-purple-400' },
      { pattern: /("([^"\\]|\\.)*"|\$"([^"\\]|\\.)*")/g, className: 'text-green-400' },
      { pattern: /\b(\d+\.?\d*[MmFfDdLl]?)\b/g, className: 'text-cyan-400' },
      { pattern: /\b(true|false|null)\b/g, className: 'text-orange-400' },
      { pattern: /\b(string|int|long|double|float|bool|object|Task|HttpClient|HttpRequestMessage|HttpResponseMessage|StringContent|JsonSerializer|Dictionary|List)\b/g, className: 'text-yellow-400' },
      { pattern: /\[\w+\]/g, className: 'text-pink-400' },
    ],
    http: [
      { pattern: /^(GET|POST|PUT|PATCH|DELETE|HEAD|OPTIONS)\b/gm, className: 'text-purple-400 font-bold' },
      { pattern: /^[A-Za-z-]+(?=:)/gm, className: 'text-cyan-400' },
      { pattern: /Bearer\s+\S+/g, className: 'text-green-400' },
      { pattern: /\b(\d+)\b/g, className: 'text-orange-400' },
    ],
  };

  const langPatterns = patterns[language] || [];

  if (langPatterns.length === 0) {
    return <span>{code}</span>;
  }

  const lines = code.split('\n');

  return (
    <>
      {lines.map((line, lineIndex) => {
        let result: Array<{ text: string; className?: string; start: number }> = [{ text: line, start: 0 }];

        langPatterns.forEach(({ pattern, className }) => {
          const newResult: typeof result = [];

          result.forEach(segment => {
            if (segment.className) {
              newResult.push(segment);
              return;
            }

            const text = segment.text;
            const regex = new RegExp(pattern.source, pattern.flags);
            let lastIndex = 0;
            let match;

            while ((match = regex.exec(text)) !== null) {
              if (match.index > lastIndex) {
                newResult.push({ text: text.slice(lastIndex, match.index), start: segment.start + lastIndex });
              }
              newResult.push({ text: match[0], className, start: segment.start + match.index });
              lastIndex = match.index + match[0].length;

              if (match[0].length === 0) break;
            }

            if (lastIndex < text.length) {
              newResult.push({ text: text.slice(lastIndex), start: segment.start + lastIndex });
            }
          });

          result = newResult.length > 0 ? newResult : result;
        });

        return (
          <React.Fragment key={lineIndex}>
            {result.map((segment, i) => (
              <span key={i} className={segment.className}>{segment.text}</span>
            ))}
            {lineIndex < lines.length - 1 && '\n'}
          </React.Fragment>
        );
      })}
    </>
  );
};

// =============================================================================
// CODE BLOCK COMPONENTS
// =============================================================================

const CodeBlock: React.FC<{ code: string; language?: CodeLanguage; title?: string }> = ({
  code,
  language = 'json',
  title
}) => {
  const [copied, setCopied] = useState(false);

  const handleCopy = () => {
    navigator.clipboard.writeText(code);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  return (
    <div className="rounded-lg overflow-hidden bg-[#0a0a0f] mb-4">
      {title && (
        <div className="px-4 py-2 text-xs text-gray-400 border-b border-gray-800 flex items-center justify-between">
          <span>{title}</span>
          <span className="text-gray-500">{LANGUAGES[language]?.label || language}</span>
        </div>
      )}
      <div className="relative">
        <pre className="p-4 overflow-x-auto text-sm font-mono leading-relaxed text-gray-300">
          <code>{highlightSyntax(code, language)}</code>
        </pre>
        <button
          onClick={handleCopy}
          className="absolute top-2 right-2 p-1.5 rounded bg-gray-800 hover:bg-gray-700 text-gray-400 transition-colors"
          title="Copy to clipboard"
        >
          {copied ? <Check size={14} /> : <Copy size={14} />}
        </button>
      </div>
    </div>
  );
};

const TabbedCodeBlock: React.FC<{
  codes: MultiLangCode;
  title?: string;
}> = ({ codes, title }) => {
  const { activeLanguage, setActiveLanguage } = React.useContext(LanguageContext);
  const [copied, setCopied] = useState(false);

  const handleCopy = () => {
    navigator.clipboard.writeText(codes[activeLanguage]);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  const tabs: Array<keyof MultiLangCode> = ['curl', 'javascript', 'python', 'go', 'java', 'csharp', 'php', 'ruby', 'perl'];

  return (
    <div className="rounded-lg overflow-hidden bg-[#0a0a0f] mb-4">
      {title && (
        <div className="px-4 py-2 text-xs text-gray-400 border-b border-gray-800 bg-gray-900/50">
          {title}
        </div>
      )}
      <div className="flex overflow-x-auto bg-[#12121a] border-b border-gray-800">
        {tabs.map((lang) => (
          <button
            key={lang}
            onClick={() => setActiveLanguage(lang)}
            className={`px-4 py-2.5 text-xs font-medium transition-colors whitespace-nowrap border-b-2 ${
              activeLanguage === lang
                ? 'text-white bg-[#1a1a24] border-purple-500'
                : 'text-gray-400 hover:text-gray-200 border-transparent hover:bg-[#1a1a24]/50'
            }`}
          >
            {LANGUAGES[lang].label}
          </button>
        ))}
      </div>
      <div className="relative">
        <pre className="p-4 overflow-x-auto text-sm font-mono leading-relaxed text-gray-300">
          <code>{highlightSyntax(codes[activeLanguage], activeLanguage)}</code>
        </pre>
        <button
          onClick={handleCopy}
          className="absolute top-2 right-2 p-1.5 rounded bg-gray-800 hover:bg-gray-700 text-gray-400 transition-colors"
          title="Copy to clipboard"
        >
          {copied ? <Check size={14} /> : <Copy size={14} />}
        </button>
      </div>
    </div>
  );
};

// =============================================================================
// SIDEBAR NAVIGATION
// =============================================================================

interface NavSection {
  titleKey: string;
  id: string;
  items?: { titleKey: string; id: string; method?: 'GET' | 'POST' | 'PATCH' | 'DELETE' }[];
}

const navSections: NavSection[] = [
  { titleKey: 'help.api.introduction', id: 'introduction' },
  { titleKey: 'help.api.authentication', id: 'authentication' },
  { titleKey: 'help.api.errors', id: 'errors' },
  { titleKey: 'help.api.rateLimits', id: 'rate-limits' },
  {
    titleKey: 'help.api.business',
    id: 'business',
    items: [
      { titleKey: 'help.api.businessObject', id: 'business-object' },
      { titleKey: 'help.api.retrieveBusiness', id: 'retrieve-business', method: 'GET' },
    ],
  },
  {
    titleKey: 'help.api.services',
    id: 'services',
    items: [
      { titleKey: 'help.api.serviceObject', id: 'service-object' },
      { titleKey: 'help.api.listServices', id: 'list-services', method: 'GET' },
      { titleKey: 'help.api.retrieveService', id: 'retrieve-service', method: 'GET' },
    ],
  },
  {
    titleKey: 'help.api.resources',
    id: 'resources',
    items: [
      { titleKey: 'help.api.resourceObject', id: 'resource-object' },
      { titleKey: 'help.api.listResources', id: 'list-resources', method: 'GET' },
      { titleKey: 'help.api.retrieveResource', id: 'retrieve-resource', method: 'GET' },
    ],
  },
  {
    titleKey: 'help.api.availability',
    id: 'availability',
    items: [
      { titleKey: 'help.api.checkAvailability', id: 'check-availability', method: 'GET' },
    ],
  },
  {
    titleKey: 'help.api.appointments',
    id: 'appointments',
    items: [
      { titleKey: 'help.api.appointmentObject', id: 'appointment-object' },
      { titleKey: 'help.api.createAppointment', id: 'create-appointment', method: 'POST' },
      { titleKey: 'help.api.retrieveAppointment', id: 'retrieve-appointment', method: 'GET' },
      { titleKey: 'help.api.updateAppointment', id: 'update-appointment', method: 'PATCH' },
      { titleKey: 'help.api.cancelAppointment', id: 'cancel-appointment', method: 'DELETE' },
      { titleKey: 'help.api.listAppointments', id: 'list-appointments', method: 'GET' },
    ],
  },
  {
    titleKey: 'help.api.customers',
    id: 'customers',
    items: [
      { titleKey: 'help.api.customerObject', id: 'customer-object' },
      { titleKey: 'help.api.createCustomer', id: 'create-customer', method: 'POST' },
      { titleKey: 'help.api.retrieveCustomer', id: 'retrieve-customer', method: 'GET' },
      { titleKey: 'help.api.updateCustomer', id: 'update-customer', method: 'PATCH' },
      { titleKey: 'help.api.listCustomers', id: 'list-customers', method: 'GET' },
    ],
  },
  {
    titleKey: 'help.api.webhooks',
    id: 'webhooks',
    items: [
      { titleKey: 'help.api.webhookEvents', id: 'webhook-events' },
      { titleKey: 'help.api.createWebhook', id: 'create-webhook', method: 'POST' },
      { titleKey: 'help.api.listWebhooks', id: 'list-webhooks', method: 'GET' },
      { titleKey: 'help.api.deleteWebhook', id: 'delete-webhook', method: 'DELETE' },
      { titleKey: 'help.api.verifySignatures', id: 'verify-signatures' },
    ],
  },
];

const MethodBadge: React.FC<{ method: 'GET' | 'POST' | 'PATCH' | 'DELETE' }> = ({ method }) => {
  const colors = {
    GET: 'text-green-400',
    POST: 'text-blue-400',
    PATCH: 'text-yellow-400',
    DELETE: 'text-red-400',
  };

  return (
    <span className={`text-[10px] font-mono font-bold ${colors[method]}`}>
      {method}
    </span>
  );
};

const Sidebar: React.FC<{
  activeSection: string;
  onSectionClick: (id: string) => void;
  t: (key: string) => string;
}> = ({
  activeSection,
  onSectionClick,
  t,
}) => {
  const [expandedSections, setExpandedSections] = useState<string[]>(['business', 'services', 'appointments']);

  const toggleSection = (id: string) => {
    setExpandedSections(prev =>
      prev.includes(id) ? prev.filter(s => s !== id) : [...prev, id]
    );
  };

  return (
    <nav className="w-64 flex-shrink-0 border-r border-gray-200 dark:border-gray-800 sticky top-[65px] h-[calc(100vh-65px)] overflow-y-auto">
      <div className="p-4 space-y-1">
        {navSections.map(section => (
          <div key={section.id}>
            {section.items ? (
              <>
                <button
                  onClick={() => toggleSection(section.id)}
                  className="w-full flex items-center justify-between px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md"
                >
                  {t(section.titleKey)}
                  {expandedSections.includes(section.id) ? (
                    <ChevronDown size={16} />
                  ) : (
                    <ChevronRight size={16} />
                  )}
                </button>
                {expandedSections.includes(section.id) && (
                  <div className="ml-3 mt-1 space-y-0.5">
                    {section.items.map(item => (
                      <button
                        key={item.id}
                        onClick={() => onSectionClick(item.id)}
                        className={`w-full flex items-center gap-2 px-3 py-1.5 text-sm rounded-md transition-colors ${
                          activeSection === item.id
                            ? 'bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300'
                            : 'text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800'
                        }`}
                      >
                        {item.method && <MethodBadge method={item.method} />}
                        <span className="truncate">{t(item.titleKey)}</span>
                      </button>
                    ))}
                  </div>
                )}
              </>
            ) : (
              <button
                onClick={() => onSectionClick(section.id)}
                className={`w-full flex items-center px-3 py-2 text-sm font-medium rounded-md transition-colors ${
                  activeSection === section.id
                    ? 'bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300'
                    : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800'
                }`}
              >
                {t(section.titleKey)}
              </button>
            )}
          </div>
        ))}
      </div>
    </nav>
  );
};

// =============================================================================
// API SECTION COMPONENT (Stripe-style split pane)
// =============================================================================

interface ApiSectionProps {
  id: string;
  children: React.ReactNode;
}

const ApiSection: React.FC<ApiSectionProps> = ({ id, children }) => {
  return (
    <section id={id} className="py-12 border-b border-gray-200 dark:border-gray-800 last:border-b-0 scroll-mt-24">
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
        {children}
      </div>
    </section>
  );
};

const ApiContent: React.FC<{ children: React.ReactNode }> = ({ children }) => (
  <div className="prose prose-gray dark:prose-invert max-w-none">
    {children}
  </div>
);

const ApiExample: React.FC<{ children: React.ReactNode }> = ({ children }) => (
  <div className="lg:sticky lg:top-[81px] z-10">
    {children}
  </div>
);

// =============================================================================
// ATTRIBUTE TABLE
// =============================================================================

interface Attribute {
  name: string;
  type: string;
  description: string;
  required?: boolean;
}

const AttributeTable: React.FC<{ attributes: Attribute[] }> = ({ attributes }) => (
  <div className="mt-4 space-y-3">
    {attributes.map(attr => (
      <div key={attr.name} className="border-b border-gray-100 dark:border-gray-800 pb-3 last:border-b-0">
        <div className="flex items-center gap-2">
          <code className="text-sm font-mono text-purple-600 dark:text-purple-400">{attr.name}</code>
          <span className="text-xs text-gray-500">{attr.type}</span>
          {attr.required && (
            <span className="text-xs text-red-500 font-medium">required</span>
          )}
        </div>
        <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">{attr.description}</p>
      </div>
    ))}
  </div>
);

// =============================================================================
// MAIN COMPONENT
// =============================================================================

const HelpApiDocs: React.FC = () => {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const [activeSection, setActiveSection] = useState('introduction');
  const [activeLanguage, setActiveLanguage] = useState<keyof MultiLangCode>('curl');
  const [selectedTokenId, setSelectedTokenId] = useState<string | null>(null);

  // Fetch test tokens
  const { data: testTokens, isLoading: tokensLoading, error: tokensError } = useTestTokensForDocs();

  // Get the currently selected token or the first one
  const selectedToken = testTokens?.find(t => t.id === selectedTokenId) || testTokens?.[0];

  // Auto-select first token when tokens load
  useEffect(() => {
    if (testTokens && testTokens.length > 0 && !selectedTokenId) {
      setSelectedTokenId(testTokens[0].id);
    }
  }, [testTokens, selectedTokenId]);

  // Get the API key to use in examples (either from selected token or default)
  const TEST_API_KEY = selectedToken?.key_prefix || DEFAULT_TEST_API_KEY;
  const TEST_WEBHOOK_SECRET = DEFAULT_TEST_WEBHOOK_SECRET;

  const handleSectionClick = (id: string) => {
    setActiveSection(id);
    const element = document.getElementById(id);
    if (element) {
      // Use scrollIntoView with the CSS scroll-mt-24 (96px margin)
      // This respects the scroll-margin-top CSS property we set on sections
      element.scrollIntoView({
        behavior: 'smooth',
        block: 'start'
      });
    }
  };

  // Track active section on scroll
  useEffect(() => {
    const handleScroll = () => {
      const sections = document.querySelectorAll('section[id]');
      let current = 'introduction';
      const headerHeight = 72;
      const threshold = headerHeight + 32; // Header height + some padding

      sections.forEach(section => {
        const rect = section.getBoundingClientRect();
        if (rect.top <= threshold) {
          current = section.id;
        }
      });

      setActiveSection(current);
    };

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  // =============================================================================
  // CODE SNIPPETS
  // =============================================================================

  const getServicesCode: MultiLangCode = {
    curl: `curl ${SANDBOX_URL}/services/ \\
  -H "Authorization: Bearer ${TEST_API_KEY}"`,
    javascript: `const response = await fetch('${SANDBOX_URL}/services/', {
  headers: {
    'Authorization': 'Bearer ${TEST_API_KEY}'
  }
});
const services = await response.json();`,
    python: `import requests

response = requests.get(
    '${SANDBOX_URL}/services/',
    headers={'Authorization': 'Bearer ${TEST_API_KEY}'}
)
services = response.json()`,
    go: `req, _ := http.NewRequest("GET", "${SANDBOX_URL}/services/", nil)
req.Header.Set("Authorization", "Bearer ${TEST_API_KEY}")
resp, _ := http.DefaultClient.Do(req)`,
    java: `HttpRequest request = HttpRequest.newBuilder()
    .uri(URI.create("${SANDBOX_URL}/services/"))
    .header("Authorization", "Bearer ${TEST_API_KEY}")
    .build();
HttpResponse<String> response = client.send(request,
    HttpResponse.BodyHandlers.ofString());`,
    csharp: `var client = new HttpClient();
client.DefaultRequestHeaders.Authorization =
    new AuthenticationHeaderValue("Bearer", "${TEST_API_KEY}");
var response = await client.GetAsync("${SANDBOX_URL}/services/");`,
    php: `$ch = curl_init('${SANDBOX_URL}/services/');
curl_setopt($ch, CURLOPT_HTTPHEADER, [
    'Authorization: Bearer ${TEST_API_KEY}'
]);
$response = curl_exec($ch);`,
    ruby: `response = Net::HTTP.get_response(
  URI('${SANDBOX_URL}/services/'),
  { 'Authorization' => 'Bearer ${TEST_API_KEY}' }
)`,
    perl: `my $ua = LWP::UserAgent->new;
my $response = $ua->get('${SANDBOX_URL}/services/',
    'Authorization' => 'Bearer ${TEST_API_KEY}'
);`,
  };

  const getAvailabilityCode: MultiLangCode = {
    curl: `curl "${SANDBOX_URL}/availability/?service_id=svc_123&date=2025-12-01" \\
  -H "Authorization: Bearer ${TEST_API_KEY}"`,
    javascript: `const response = await fetch(
  '${SANDBOX_URL}/availability/?service_id=svc_123&date=2025-12-01',
  {
    headers: {
      'Authorization': 'Bearer ${TEST_API_KEY}'
    }
  }
);
const availability = await response.json();`,
    python: `import requests

response = requests.get(
    '${SANDBOX_URL}/availability/',
    params={'service_id': 'svc_123', 'date': '2025-12-01'},
    headers={'Authorization': 'Bearer ${TEST_API_KEY}'}
)
availability = response.json()`,
    go: `req, _ := http.NewRequest("GET",
    "${SANDBOX_URL}/availability/?service_id=svc_123&date=2025-12-01", nil)
req.Header.Set("Authorization", "Bearer ${TEST_API_KEY}")
resp, _ := http.DefaultClient.Do(req)`,
    java: `HttpRequest request = HttpRequest.newBuilder()
    .uri(URI.create("${SANDBOX_URL}/availability/?service_id=svc_123&date=2025-12-01"))
    .header("Authorization", "Bearer ${TEST_API_KEY}")
    .build();`,
    csharp: `var response = await client.GetAsync(
    "${SANDBOX_URL}/availability/?service_id=svc_123&date=2025-12-01");`,
    php: `$ch = curl_init('${SANDBOX_URL}/availability/?service_id=svc_123&date=2025-12-01');
curl_setopt($ch, CURLOPT_HTTPHEADER, [
    'Authorization: Bearer ${TEST_API_KEY}'
]);`,
    ruby: `uri = URI('${SANDBOX_URL}/availability/')
uri.query = URI.encode_www_form(service_id: 'svc_123', date: '2025-12-01')
response = Net::HTTP.get_response(uri, { 'Authorization' => 'Bearer ${TEST_API_KEY}' })`,
    perl: `my $response = $ua->get(
    '${SANDBOX_URL}/availability/?service_id=svc_123&date=2025-12-01',
    'Authorization' => 'Bearer ${TEST_API_KEY}'
);`,
  };

  const createAppointmentCode: MultiLangCode = {
    curl: `curl ${SANDBOX_URL}/appointments/ \\
  -H "Authorization: Bearer ${TEST_API_KEY}" \\
  -H "Content-Type: application/json" \\
  -d '{
    "service_id": "svc_123",
    "resource_id": "res_456",
    "start_time": "2025-12-01T10:00:00Z",
    "customer_email": "john@example.com",
    "customer_name": "John Doe"
  }'`,
    javascript: `const response = await fetch('${SANDBOX_URL}/appointments/', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer ${TEST_API_KEY}',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    service_id: 'svc_123',
    resource_id: 'res_456',
    start_time: '2025-12-01T10:00:00Z',
    customer_email: 'john@example.com',
    customer_name: 'John Doe'
  })
});`,
    python: `import requests

response = requests.post(
    '${SANDBOX_URL}/appointments/',
    headers={'Authorization': 'Bearer ${TEST_API_KEY}'},
    json={
        'service_id': 'svc_123',
        'resource_id': 'res_456',
        'start_time': '2025-12-01T10:00:00Z',
        'customer_email': 'john@example.com',
        'customer_name': 'John Doe'
    }
)`,
    go: `body := strings.NewReader(\`{
    "service_id": "svc_123",
    "resource_id": "res_456",
    "start_time": "2025-12-01T10:00:00Z",
    "customer_email": "john@example.com",
    "customer_name": "John Doe"
}\`)
req, _ := http.NewRequest("POST", "${SANDBOX_URL}/appointments/", body)
req.Header.Set("Authorization", "Bearer ${TEST_API_KEY}")
req.Header.Set("Content-Type", "application/json")`,
    java: `String json = """
    {
        "service_id": "svc_123",
        "resource_id": "res_456",
        "start_time": "2025-12-01T10:00:00Z",
        "customer_email": "john@example.com",
        "customer_name": "John Doe"
    }
    """;
HttpRequest request = HttpRequest.newBuilder()
    .uri(URI.create("${SANDBOX_URL}/appointments/"))
    .header("Authorization", "Bearer ${TEST_API_KEY}")
    .header("Content-Type", "application/json")
    .POST(HttpRequest.BodyPublishers.ofString(json))
    .build();`,
    csharp: `var content = new StringContent(
    JsonSerializer.Serialize(new {
        service_id = "svc_123",
        resource_id = "res_456",
        start_time = "2025-12-01T10:00:00Z",
        customer_email = "john@example.com",
        customer_name = "John Doe"
    }),
    Encoding.UTF8,
    "application/json"
);
var response = await client.PostAsync("${SANDBOX_URL}/appointments/", content);`,
    php: `$data = [
    'service_id' => 'svc_123',
    'resource_id' => 'res_456',
    'start_time' => '2025-12-01T10:00:00Z',
    'customer_email' => 'john@example.com',
    'customer_name' => 'John Doe'
];
$ch = curl_init('${SANDBOX_URL}/appointments/');
curl_setopt_array($ch, [
    CURLOPT_POST => true,
    CURLOPT_POSTFIELDS => json_encode($data),
    CURLOPT_HTTPHEADER => [
        'Authorization: Bearer ${TEST_API_KEY}',
        'Content-Type: application/json'
    ]
]);`,
    ruby: `uri = URI('${SANDBOX_URL}/appointments/')
http = Net::HTTP.new(uri.host, uri.port)
http.use_ssl = true
request = Net::HTTP::Post.new(uri)
request['Authorization'] = 'Bearer ${TEST_API_KEY}'
request['Content-Type'] = 'application/json'
request.body = {
  service_id: 'svc_123',
  resource_id: 'res_456',
  start_time: '2025-12-01T10:00:00Z',
  customer_email: 'john@example.com',
  customer_name: 'John Doe'
}.to_json`,
    perl: `my $ua = LWP::UserAgent->new;
my $req = HTTP::Request->new(POST => '${SANDBOX_URL}/appointments/');
$req->header('Authorization' => 'Bearer ${TEST_API_KEY}');
$req->header('Content-Type' => 'application/json');
$req->content(encode_json({
    service_id => 'svc_123',
    resource_id => 'res_456',
    start_time => '2025-12-01T10:00:00Z',
    customer_email => 'john@example.com',
    customer_name => 'John Doe'
}));`,
  };

  const createWebhookCode: MultiLangCode = {
    curl: `curl ${SANDBOX_URL}/webhooks/ \\
  -H "Authorization: Bearer ${TEST_API_KEY}" \\
  -H "Content-Type: application/json" \\
  -d '{
    "url": "https://example.com/webhooks",
    "events": ["appointment.created", "appointment.cancelled"]
  }'`,
    javascript: `const response = await fetch('${SANDBOX_URL}/webhooks/', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer ${TEST_API_KEY}',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    url: 'https://example.com/webhooks',
    events: ['appointment.created', 'appointment.cancelled']
  })
});
// Save the secret from the response - it's only shown once!`,
    python: `response = requests.post(
    '${SANDBOX_URL}/webhooks/',
    headers={'Authorization': 'Bearer ${TEST_API_KEY}'},
    json={
        'url': 'https://example.com/webhooks',
        'events': ['appointment.created', 'appointment.cancelled']
    }
)
# Save the secret from the response - it's only shown once!`,
    go: `body := strings.NewReader(\`{
    "url": "https://example.com/webhooks",
    "events": ["appointment.created", "appointment.cancelled"]
}\`)
req, _ := http.NewRequest("POST", "${SANDBOX_URL}/webhooks/", body)
req.Header.Set("Authorization", "Bearer ${TEST_API_KEY}")
req.Header.Set("Content-Type", "application/json")
// Save the secret from the response - it's only shown once!`,
    java: `String json = """
    {
        "url": "https://example.com/webhooks",
        "events": ["appointment.created", "appointment.cancelled"]
    }
    """;
HttpRequest request = HttpRequest.newBuilder()
    .uri(URI.create("${SANDBOX_URL}/webhooks/"))
    .header("Authorization", "Bearer ${TEST_API_KEY}")
    .POST(HttpRequest.BodyPublishers.ofString(json))
    .build();
// Save the secret from the response - it's only shown once!`,
    csharp: `var content = new StringContent(
    JsonSerializer.Serialize(new {
        url = "https://example.com/webhooks",
        events = new[] { "appointment.created", "appointment.cancelled" }
    }),
    Encoding.UTF8,
    "application/json"
);
var response = await client.PostAsync("${SANDBOX_URL}/webhooks/", content);
// Save the secret from the response - it's only shown once!`,
    php: `$data = [
    'url' => 'https://example.com/webhooks',
    'events' => ['appointment.created', 'appointment.cancelled']
];
$ch = curl_init('${SANDBOX_URL}/webhooks/');
curl_setopt_array($ch, [
    CURLOPT_POST => true,
    CURLOPT_POSTFIELDS => json_encode($data),
    CURLOPT_HTTPHEADER => [
        'Authorization: Bearer ${TEST_API_KEY}',
        'Content-Type: application/json'
    ]
]);
// Save the secret from the response - it's only shown once!`,
    ruby: `request = Net::HTTP::Post.new(URI('${SANDBOX_URL}/webhooks/'))
request['Authorization'] = 'Bearer ${TEST_API_KEY}'
request['Content-Type'] = 'application/json'
request.body = {
  url: 'https://example.com/webhooks',
  events: ['appointment.created', 'appointment.cancelled']
}.to_json
# Save the secret from the response - it's only shown once!`,
    perl: `my $req = HTTP::Request->new(POST => '${SANDBOX_URL}/webhooks/');
$req->header('Authorization' => 'Bearer ${TEST_API_KEY}');
$req->content(encode_json({
    url => 'https://example.com/webhooks',
    events => ['appointment.created', 'appointment.cancelled']
}));
# Save the secret from the response - it's only shown once!`,
  };

  const verifyWebhookCode: MultiLangCode = {
    curl: `# Verify the signature from the X-Webhook-Signature header
# Format: <timestamp>.<signature>
echo -n "<timestamp>.<payload>" | \\
  openssl dgst -sha256 -hmac "${TEST_WEBHOOK_SECRET}"`,
    javascript: `const crypto = require('crypto');

function verifyWebhook(payload, header, secret) {
  const [timestamp, signature] = header.split('.');
  const expected = crypto
    .createHmac('sha256', secret)
    .update(\`\${timestamp}.\${payload}\`)
    .digest('hex');
  return crypto.timingSafeEqual(
    Buffer.from(signature),
    Buffer.from(expected)
  );
}

// In your webhook handler:
const isValid = verifyWebhook(
  req.body,
  req.headers['x-webhook-signature'],
  '${TEST_WEBHOOK_SECRET}'
);`,
    python: `import hmac
import hashlib

def verify_webhook(payload, header, secret):
    timestamp, signature = header.split('.')
    message = f"{timestamp}.{payload}"
    expected = hmac.new(
        secret.encode(),
        message.encode(),
        hashlib.sha256
    ).hexdigest()
    return hmac.compare_digest(expected, signature)

# In your webhook handler:
is_valid = verify_webhook(
    request.body,
    request.headers['X-Webhook-Signature'],
    '${TEST_WEBHOOK_SECRET}'
)`,
    go: `import (
    "crypto/hmac"
    "crypto/sha256"
    "encoding/hex"
    "strings"
)

func verifyWebhook(payload, header, secret string) bool {
    parts := strings.SplitN(header, ".", 2)
    timestamp, signature := parts[0], parts[1]

    mac := hmac.New(sha256.New, []byte(secret))
    mac.Write([]byte(timestamp + "." + payload))
    expected := hex.EncodeToString(mac.Sum(nil))

    return hmac.Equal([]byte(signature), []byte(expected))
}`,
    java: `import javax.crypto.Mac;
import javax.crypto.spec.SecretKeySpec;

public boolean verifyWebhook(String payload, String header, String secret) {
    String[] parts = header.split("\\\\.", 2);
    String timestamp = parts[0];
    String signature = parts[1];

    Mac mac = Mac.getInstance("HmacSHA256");
    mac.init(new SecretKeySpec(secret.getBytes(), "HmacSHA256"));
    String expected = bytesToHex(mac.doFinal((timestamp + "." + payload).getBytes()));

    return MessageDigest.isEqual(signature.getBytes(), expected.getBytes());
}`,
    csharp: `using System.Security.Cryptography;

bool VerifyWebhook(string payload, string header, string secret) {
    var parts = header.Split('.', 2);
    var timestamp = parts[0];
    var signature = parts[1];

    using var hmac = new HMACSHA256(Encoding.UTF8.GetBytes(secret));
    var hash = hmac.ComputeHash(Encoding.UTF8.GetBytes($"{timestamp}.{payload}"));
    var expected = BitConverter.ToString(hash).Replace("-", "").ToLower();

    return CryptographicOperations.FixedTimeEquals(
        Encoding.UTF8.GetBytes(signature),
        Encoding.UTF8.GetBytes(expected)
    );
}`,
    php: `function verifyWebhook($payload, $header, $secret) {
    [$timestamp, $signature] = explode('.', $header, 2);
    $expected = hash_hmac('sha256', "{$timestamp}.{$payload}", $secret);
    return hash_equals($expected, $signature);
}

// In your webhook handler:
$isValid = verifyWebhook(
    file_get_contents('php://input'),
    $_SERVER['HTTP_X_WEBHOOK_SIGNATURE'],
    '${TEST_WEBHOOK_SECRET}'
);`,
    ruby: `require 'openssl'

def verify_webhook(payload, header, secret)
  timestamp, signature = header.split('.', 2)
  expected = OpenSSL::HMAC.hexdigest('sha256', secret, "#{timestamp}.#{payload}")
  Rack::Utils.secure_compare(expected, signature)
end

# In your webhook handler:
is_valid = verify_webhook(
  request.body.read,
  request.env['HTTP_X_WEBHOOK_SIGNATURE'],
  '${TEST_WEBHOOK_SECRET}'
)`,
    perl: `use Digest::SHA qw(hmac_sha256_hex);

sub verify_webhook {
    my ($payload, $header, $secret) = @_;
    my ($timestamp, $signature) = split /\\./, $header, 2;
    my $expected = hmac_sha256_hex("$timestamp.$payload", $secret);
    return $expected eq $signature;
}`,
  };

  const authExampleCode: MultiLangCode = {
    curl: `curl ${SANDBOX_URL}/services/ \\
  -H "Authorization: Bearer ${TEST_API_KEY}"`,
    javascript: `const response = await fetch('${SANDBOX_URL}/services/', {
  headers: {
    'Authorization': 'Bearer ${TEST_API_KEY}'
  }
});`,
    python: `import requests

response = requests.get(
    '${SANDBOX_URL}/services/',
    headers={'Authorization': 'Bearer ${TEST_API_KEY}'}
)`,
    go: `req, _ := http.NewRequest("GET", "${SANDBOX_URL}/services/", nil)
req.Header.Set("Authorization", "Bearer ${TEST_API_KEY}")
resp, _ := http.DefaultClient.Do(req)`,
    java: `HttpRequest request = HttpRequest.newBuilder()
    .uri(URI.create("${SANDBOX_URL}/services/"))
    .header("Authorization", "Bearer ${TEST_API_KEY}")
    .build();`,
    csharp: `var client = new HttpClient();
client.DefaultRequestHeaders.Authorization =
    new AuthenticationHeaderValue("Bearer", "${TEST_API_KEY}");
var response = await client.GetAsync("${SANDBOX_URL}/services/");`,
    php: `$ch = curl_init('${SANDBOX_URL}/services/');
curl_setopt($ch, CURLOPT_HTTPHEADER, [
    'Authorization: Bearer ${TEST_API_KEY}'
]);
$response = curl_exec($ch);`,
    ruby: `uri = URI('${SANDBOX_URL}/services/')
request = Net::HTTP::Get.new(uri)
request['Authorization'] = 'Bearer ${TEST_API_KEY}'
response = Net::HTTP.start(uri.host, uri.port, use_ssl: true) { |http| http.request(request) }`,
    perl: `my $ua = LWP::UserAgent->new;
my $response = $ua->get('${SANDBOX_URL}/services/',
    'Authorization' => 'Bearer ${TEST_API_KEY}'
);`,
  };

  return (
    <LanguageContext.Provider value={{ activeLanguage, setActiveLanguage }}>
      <div className="min-h-screen bg-white dark:bg-gray-900">
        {/* Header */}
        <header className="sticky top-0 z-50 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800">
          <div className="flex items-center justify-between px-6 py-4">
            <div className="flex items-center gap-4">
              <button
                onClick={() => navigate(-1)}
                className="flex items-center gap-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors"
              >
                <ArrowLeft size={20} />
                <span className="text-sm">{t('common.back', 'Back')}</span>
              </button>
              <div className="h-6 w-px bg-gray-200 dark:bg-gray-700" />
              <h1 className="text-lg font-semibold text-gray-900 dark:text-white">
                {t('help.api.title')}
              </h1>
            </div>
            <div className="flex items-center gap-4">
              {/* Test Token Selector */}
              {testTokens && testTokens.length > 0 && (
                <div className="flex items-center gap-2">
                  <Key size={16} className="text-gray-400" />
                  <select
                    value={selectedTokenId || ''}
                    onChange={(e) => setSelectedTokenId(e.target.value)}
                    className="px-3 py-1.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-purple-500 focus:border-transparent"
                  >
                    {testTokens.map((token) => (
                      <option key={token.id} value={token.id}>
                        {token.name} ({token.key_prefix}...)
                      </option>
                    ))}
                  </select>
                </div>
              )}

              <a
                href={`${API_BASE_URL}/v1/docs/`}
                target="_blank"
                rel="noopener noreferrer"
                className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-purple-600 dark:text-purple-400 hover:bg-purple-50 dark:hover:bg-purple-900/20 rounded-lg transition-colors"
              >
                <ExternalLink size={16} />
                {t('help.api.interactiveExplorer')}
              </a>
            </div>
          </div>
        </header>

        {/* No Test Tokens Banner */}
        {!tokensLoading && (!testTokens || testTokens.length === 0) && (
          <div className="mx-6 mt-4 p-4 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg">
            <div className="flex items-start gap-3">
              <AlertCircle size={20} className="text-yellow-600 dark:text-yellow-400 flex-shrink-0 mt-0.5" />
              <div>
                <h3 className="text-sm font-semibold text-yellow-800 dark:text-yellow-200">
                  {t('help.api.noTestTokensFound')}
                </h3>
                <p className="text-sm text-yellow-700 dark:text-yellow-300 mt-1" dangerouslySetInnerHTML={{ __html: t('help.api.noTestTokensMessage') }} />
              </div>
            </div>
          </div>
        )}

        {/* Token Loading Error */}
        {tokensError && (
          <div className="mx-6 mt-4 p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
            <div className="flex items-start gap-3">
              <AlertCircle size={20} className="text-red-600 dark:text-red-400 flex-shrink-0 mt-0.5" />
              <div>
                <h3 className="text-sm font-semibold text-red-800 dark:text-red-200">
                  {t('help.api.errorLoadingTokens')}
                </h3>
                <p className="text-sm text-red-700 dark:text-red-300 mt-1">
                  {t('help.api.errorLoadingTokensMessage')}
                </p>
              </div>
            </div>
          </div>
        )}

        <div className="flex relative">
          {/* Sidebar */}
          <Sidebar activeSection={activeSection} onSectionClick={handleSectionClick} t={t} />

          {/* Main Content */}
          <main className="flex-1 min-w-0 px-8 lg:px-12">
            {/* Introduction */}
            <ApiSection id="introduction">
              <ApiContent>
                <h2 className="text-2xl font-bold text-gray-900 dark:text-white mt-0">
                  {t('help.api.introduction')}
                </h2>
                <p className="text-gray-600 dark:text-gray-300">
                  {t('help.api.introDescription')}
                </p>
                <p className="text-gray-600 dark:text-gray-300">
                  {t('help.api.introTestMode')}
                </p>
                <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
                  {t('help.api.baseUrl')}
                </h3>
                <p className="text-gray-600 dark:text-gray-300">
                  {t('help.api.baseUrlDescription')}
                </p>
              </ApiContent>
              <ApiExample>
                <CodeBlock
                  title={t('help.api.baseUrl')}
                  language="http"
                  code={`https://api.smoothschedule.com/v1/

# Sandbox/Test environment
${SANDBOX_URL}`}
                />
                <div className="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
                  <p className="text-sm text-blue-800 dark:text-blue-200">
                    <strong>{t('help.api.sandboxMode')}</strong> {t('help.api.sandboxModeDescription')}
                  </p>
                </div>
              </ApiExample>
            </ApiSection>

            {/* Authentication */}
            <ApiSection id="authentication">
              <ApiContent>
                <h2 className="text-2xl font-bold text-gray-900 dark:text-white mt-0">
                  {t('help.api.authentication')}
                </h2>
                <p className="text-gray-600 dark:text-gray-300">
                  {t('help.api.authDescription')}
                </p>
                <p className="text-gray-600 dark:text-gray-300">
                  {t('help.api.authBearer')}
                </p>
                <p className="text-gray-600 dark:text-gray-300">
                  {t('help.api.authWarning')}
                </p>
                <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
                  {t('help.api.apiKeyFormat')}
                </h3>
                <ul className="text-gray-600 dark:text-gray-300">
                  <li><code>ss_test_*</code> — {t('help.api.testKey')}</li>
                  <li><code>ss_live_*</code> — {t('help.api.liveKey')}</li>
                </ul>
              </ApiContent>
              <ApiExample>
                <TabbedCodeBlock
                  title={t('help.api.authenticatedRequest')}
                  codes={authExampleCode}
                />
                <div className="p-4 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg border border-yellow-200 dark:border-yellow-800">
                  <p className="text-sm text-yellow-800 dark:text-yellow-200">
                    <strong>{t('help.api.keepKeysSecret')}</strong> {t('help.api.keepKeysSecretDescription')}
                  </p>
                </div>
              </ApiExample>
            </ApiSection>

            {/* Errors */}
            <ApiSection id="errors">
              <ApiContent>
                <h2 className="text-2xl font-bold text-gray-900 dark:text-white mt-0">
                  {t('help.api.errors')}
                </h2>
                <p className="text-gray-600 dark:text-gray-300">
                  {t('help.api.errorsDescription')}
                </p>
                <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
                  {t('help.api.httpStatusCodes')}
                </h3>
                <AttributeTable
                  attributes={[
                    { name: '200 - OK', type: '', description: t('help.api.statusOk') },
                    { name: '201 - Created', type: '', description: t('help.api.statusCreated') },
                    { name: '400 - Bad Request', type: '', description: t('help.api.statusBadRequest') },
                    { name: '401 - Unauthorized', type: '', description: t('help.api.statusUnauthorized') },
                    { name: '403 - Forbidden', type: '', description: t('help.api.statusForbidden') },
                    { name: '404 - Not Found', type: '', description: t('help.api.statusNotFound') },
                    { name: '409 - Conflict', type: '', description: t('help.api.statusConflict') },
                    { name: '429 - Too Many Requests', type: '', description: t('help.api.statusTooManyRequests') },
                    { name: '500 - Server Error', type: '', description: t('help.api.statusServerError') },
                  ]}
                />
              </ApiContent>
              <ApiExample>
                <CodeBlock
                  title={t('help.api.errorResponse')}
                  language="json"
                  code={`{
  "error": {
    "code": "validation_error",
    "message": "Invalid request parameters",
    "details": {
      "start_time": ["This field is required."],
      "service_id": ["Invalid service ID."]
    }
  }
}`}
                />
              </ApiExample>
            </ApiSection>

            {/* Rate Limits */}
            <ApiSection id="rate-limits">
              <ApiContent>
                <h2 className="text-2xl font-bold text-gray-900 dark:text-white mt-0">
                  {t('help.api.rateLimits')}
                </h2>
                <p className="text-gray-600 dark:text-gray-300">
                  {t('help.api.rateLimitsDescription')}
                </p>
                <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
                  {t('help.api.limits')}
                </h3>
                <ul className="text-gray-600 dark:text-gray-300">
                  <li><strong>1,000</strong> {t('help.api.requestsPerHour')}</li>
                  <li><strong>100</strong> {t('help.api.requestsPerMinute')}</li>
                </ul>
                <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
                  {t('help.api.rateLimitHeaders')}
                </h3>
                <p className="text-gray-600 dark:text-gray-300">
                  {t('help.api.rateLimitHeadersDescription')}
                </p>
              </ApiContent>
              <ApiExample>
                <CodeBlock
                  title={t('help.api.rateLimitHeaders')}
                  language="http"
                  code={`X-RateLimit-Limit: 1000
X-RateLimit-Remaining: 847
X-RateLimit-Reset: 1732795200
X-RateLimit-Burst-Limit: 100
X-RateLimit-Burst-Remaining: 95`}
                />
                <CodeBlock
                  title="429 RESPONSE"
                  language="json"
                  code={`{
  "error": {
    "code": "rate_limit_exceeded",
    "message": "Rate limit exceeded",
    "retry_after": 120
  }
}`}
                />
              </ApiExample>
            </ApiSection>

            {/* Business Object */}
            <ApiSection id="business-object">
              <ApiContent>
                <h2 className="text-2xl font-bold text-gray-900 dark:text-white mt-0">
                  {t('help.api.businessObject')}
                </h2>
                <p className="text-gray-600 dark:text-gray-300">
                  {t('help.api.businessObjectDescription')}
                </p>
                <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
                  {t('help.api.attributes')}
                </h3>
                <AttributeTable
                  attributes={[
                    { name: 'id', type: 'string', description: 'Unique identifier for the business.' },
                    { name: 'name', type: 'string', description: 'The business name.' },
                    { name: 'subdomain', type: 'string', description: 'The subdomain for this business.' },
                    { name: 'logo_url', type: 'string', description: 'URL of the business logo.' },
                    { name: 'primary_color', type: 'string', description: 'Primary brand color (hex).' },
                    { name: 'timezone', type: 'string', description: 'Business timezone (IANA format).' },
                    { name: 'cancellation_window_hours', type: 'integer', description: 'Hours before appointment when cancellation is allowed.' },
                  ]}
                />
              </ApiContent>
              <ApiExample>
                <CodeBlock
                  title="THE BUSINESS OBJECT"
                  language="json"
                  code={`{
  "id": "biz_a1b2c3d4e5f6",
  "name": "Acme Salon",
  "subdomain": "acme",
  "logo_url": "https://cdn.smoothschedule.com/logos/acme.png",
  "primary_color": "#3B82F6",
  "secondary_color": "#1E40AF",
  "timezone": "America/New_York",
  "cancellation_window_hours": 24
}`}
                />
              </ApiExample>
            </ApiSection>

            {/* Retrieve Business */}
            <ApiSection id="retrieve-business">
              <ApiContent>
                <h2 className="text-2xl font-bold text-gray-900 dark:text-white mt-0 flex items-center gap-2">
                  <span className="text-xs px-2 py-0.5 rounded bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 font-mono">
                    GET
                  </span>
                  {t('help.api.retrieveBusiness')}
                </h2>
                <p className="text-gray-600 dark:text-gray-300">
                  {t('help.api.retrieveBusinessDescription')}
                </p>
                <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
                  {t('help.api.requiredScope')}
                </h3>
                <p className="text-gray-600 dark:text-gray-300">
                  <code>business:read</code>
                </p>
              </ApiContent>
              <ApiExample>
                <CodeBlock
                  title={t('help.api.endpoint')}
                  language="http"
                  code="GET /v1/business/"
                />
                <TabbedCodeBlock title={t('help.api.request')} codes={getServicesCode} />
              </ApiExample>
            </ApiSection>

            {/* Service Object */}
            <ApiSection id="service-object">
              <ApiContent>
                <h2 className="text-2xl font-bold text-gray-900 dark:text-white mt-0">
                  {t('help.api.serviceObject')}
                </h2>
                <p className="text-gray-600 dark:text-gray-300">
                  {t('help.api.serviceObjectDescription')}
                </p>
                <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
                  {t('help.api.attributes')}
                </h3>
                <AttributeTable
                  attributes={[
                    { name: 'id', type: 'string', description: 'Unique identifier for the service.' },
                    { name: 'name', type: 'string', description: 'The service name.' },
                    { name: 'description', type: 'string', description: 'Service description.' },
                    { name: 'duration', type: 'integer', description: 'Duration in minutes.' },
                    { name: 'price', type: 'string', description: 'Price as a decimal string.' },
                    { name: 'photos', type: 'array', description: 'URLs of service photos.' },
                    { name: 'is_active', type: 'boolean', description: 'Whether the service is active.' },
                  ]}
                />
              </ApiContent>
              <ApiExample>
                <CodeBlock
                  title="THE SERVICE OBJECT"
                  language="json"
                  code={`{
  "id": "svc_a1b2c3d4e5f6",
  "name": "Haircut",
  "description": "Professional haircut with wash and style",
  "duration": 45,
  "price": "35.00",
  "photos": [
    "https://cdn.smoothschedule.com/photos/haircut1.jpg"
  ],
  "is_active": true
}`}
                />
              </ApiExample>
            </ApiSection>

            {/* List Services */}
            <ApiSection id="list-services">
              <ApiContent>
                <h2 className="text-2xl font-bold text-gray-900 dark:text-white mt-0 flex items-center gap-2">
                  <span className="text-xs px-2 py-0.5 rounded bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 font-mono">
                    GET
                  </span>
                  {t('help.api.listServices')}
                </h2>
                <p className="text-gray-600 dark:text-gray-300">
                  {t('help.api.listServicesDescription')}
                </p>
                <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
                  {t('help.api.requiredScope')}
                </h3>
                <p className="text-gray-600 dark:text-gray-300">
                  <code>services:read</code>
                </p>
              </ApiContent>
              <ApiExample>
                <CodeBlock
                  title={t('help.api.endpoint')}
                  language="http"
                  code="GET /v1/services/"
                />
                <TabbedCodeBlock title={t('help.api.request')} codes={getServicesCode} />
                <CodeBlock
                  title={t('help.api.response')}
                  language="json"
                  code={`[
  {
    "id": "svc_a1b2c3d4e5f6",
    "name": "Haircut",
    "description": "Professional haircut with wash and style",
    "duration": 45,
    "price": "35.00",
    "is_active": true
  },
  {
    "id": "svc_b2c3d4e5f6g7",
    "name": "Color Treatment",
    "description": "Full color treatment",
    "duration": 120,
    "price": "150.00",
    "is_active": true
  }
]`}
                />
              </ApiExample>
            </ApiSection>

            {/* Check Availability */}
            <ApiSection id="check-availability">
              <ApiContent>
                <h2 className="text-2xl font-bold text-gray-900 dark:text-white mt-0 flex items-center gap-2">
                  <span className="text-xs px-2 py-0.5 rounded bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 font-mono">
                    GET
                  </span>
                  {t('help.api.checkAvailability')}
                </h2>
                <p className="text-gray-600 dark:text-gray-300">
                  {t('help.api.checkAvailabilityDescription')}
                </p>
                <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
                  {t('help.api.parameters')}
                </h3>
                <AttributeTable
                  attributes={[
                    { name: 'service_id', type: 'string', description: 'The service to check availability for.', required: true },
                    { name: 'date', type: 'string', description: 'Start date in YYYY-MM-DD format.', required: true },
                    { name: 'days', type: 'integer', description: 'Number of days to check (1-30). Default: 7' },
                    { name: 'resource_id', type: 'string', description: 'Filter by specific resource.' },
                  ]}
                />
                <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
                  {t('help.api.requiredScope')}
                </h3>
                <p className="text-gray-600 dark:text-gray-300">
                  <code>availability:read</code>
                </p>
              </ApiContent>
              <ApiExample>
                <CodeBlock
                  title={t('help.api.endpoint')}
                  language="http"
                  code="GET /v1/availability/"
                />
                <TabbedCodeBlock title={t('help.api.request')} codes={getAvailabilityCode} />
                <CodeBlock
                  title={t('help.api.response')}
                  language="json"
                  code={`{
  "service": {
    "id": "svc_a1b2c3d4e5f6",
    "name": "Haircut",
    "duration": 45
  },
  "date_range": {
    "start": "2025-12-01",
    "end": "2025-12-08"
  },
  "slots": [
    {
      "start_time": "2025-12-01T09:00:00Z",
      "end_time": "2025-12-01T09:45:00Z",
      "resource_id": "res_123",
      "resource_name": "Jane Smith"
    },
    {
      "start_time": "2025-12-01T10:00:00Z",
      "end_time": "2025-12-01T10:45:00Z",
      "resource_id": "res_123",
      "resource_name": "Jane Smith"
    }
  ]
}`}
                />
              </ApiExample>
            </ApiSection>

            {/* Create Appointment */}
            <ApiSection id="create-appointment">
              <ApiContent>
                <h2 className="text-2xl font-bold text-gray-900 dark:text-white mt-0 flex items-center gap-2">
                  <span className="text-xs px-2 py-0.5 rounded bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400 font-mono">
                    POST
                  </span>
                  {t('help.api.createAppointment')}
                </h2>
                <p className="text-gray-600 dark:text-gray-300">
                  {t('help.api.createAppointmentDescription')}
                </p>
                <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
                  {t('help.api.parameters')}
                </h3>
                <AttributeTable
                  attributes={[
                    { name: 'service_id', type: 'string', description: 'ID of the service being booked.', required: true },
                    { name: 'resource_id', type: 'string', description: 'ID of the resource (staff/room).', required: true },
                    { name: 'start_time', type: 'string', description: 'ISO 8601 datetime for the appointment start.', required: true },
                    { name: 'customer_email', type: 'string', description: 'Customer email address.', required: true },
                    { name: 'customer_name', type: 'string', description: 'Customer full name.', required: true },
                    { name: 'customer_phone', type: 'string', description: 'Customer phone number.' },
                    { name: 'notes', type: 'string', description: 'Additional notes for the appointment.' },
                  ]}
                />
                <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
                  {t('help.api.requiredScope')}
                </h3>
                <p className="text-gray-600 dark:text-gray-300">
                  <code>bookings:write</code>
                </p>
              </ApiContent>
              <ApiExample>
                <CodeBlock
                  title={t('help.api.endpoint')}
                  language="http"
                  code="POST /v1/appointments/"
                />
                <TabbedCodeBlock title={t('help.api.request')} codes={createAppointmentCode} />
                <CodeBlock
                  title={t('help.api.response')}
                  language="json"
                  code={`{
  "id": "apt_a1b2c3d4e5f6",
  "service": {
    "id": "svc_123",
    "name": "Haircut"
  },
  "resource": {
    "id": "res_456",
    "name": "Jane Smith"
  },
  "customer": {
    "id": "cust_789",
    "name": "John Doe",
    "email": "john@example.com"
  },
  "start_time": "2025-12-01T10:00:00Z",
  "end_time": "2025-12-01T10:45:00Z",
  "status": "scheduled",
  "created_at": "2025-11-28T15:30:00Z"
}`}
                />
              </ApiExample>
            </ApiSection>

            {/* Webhook Events */}
            <ApiSection id="webhook-events">
              <ApiContent>
                <h2 className="text-2xl font-bold text-gray-900 dark:text-white mt-0">
                  {t('help.api.webhookEvents')}
                </h2>
                <p className="text-gray-600 dark:text-gray-300">
                  {t('help.api.webhookEventsDescription')}
                </p>
                <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
                  {t('help.api.eventTypes')}
                </h3>
                <AttributeTable
                  attributes={[
                    { name: 'appointment.created', type: 'event', description: 'Fired when a new appointment is booked.' },
                    { name: 'appointment.updated', type: 'event', description: 'Fired when an appointment is modified.' },
                    { name: 'appointment.cancelled', type: 'event', description: 'Fired when an appointment is cancelled.' },
                    { name: 'appointment.completed', type: 'event', description: 'Fired when an appointment is marked complete.' },
                    { name: 'customer.created', type: 'event', description: 'Fired when a new customer is created.' },
                    { name: 'customer.updated', type: 'event', description: 'Fired when customer info is updated.' },
                  ]}
                />
              </ApiContent>
              <ApiExample>
                <CodeBlock
                  title={t('help.api.webhookPayload')}
                  language="json"
                  code={`{
  "id": "evt_a1b2c3d4e5f6",
  "type": "appointment.created",
  "created_at": "2025-11-28T15:30:00Z",
  "data": {
    "id": "apt_a1b2c3d4e5f6",
    "service": {
      "id": "svc_123",
      "name": "Haircut"
    },
    "customer": {
      "id": "cust_789",
      "name": "John Doe"
    },
    "start_time": "2025-12-01T10:00:00Z",
    "status": "scheduled"
  }
}`}
                />
              </ApiExample>
            </ApiSection>

            {/* Create Webhook */}
            <ApiSection id="create-webhook">
              <ApiContent>
                <h2 className="text-2xl font-bold text-gray-900 dark:text-white mt-0 flex items-center gap-2">
                  <span className="text-xs px-2 py-0.5 rounded bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400 font-mono">
                    POST
                  </span>
                  {t('help.api.createWebhook')}
                </h2>
                <p className="text-gray-600 dark:text-gray-300">
                  {t('help.api.createWebhookDescription')}
                  <strong>{t('help.api.secretOnlyOnce')}</strong>
                  {t('help.api.secretOnlyOnceDescription')}
                </p>
                <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
                  {t('help.api.parameters')}
                </h3>
                <AttributeTable
                  attributes={[
                    { name: 'url', type: 'string', description: 'The HTTPS URL to receive webhook payloads.', required: true },
                    { name: 'events', type: 'array', description: 'List of event types to subscribe to.', required: true },
                    { name: 'description', type: 'string', description: 'Optional description for the webhook.' },
                  ]}
                />
                <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
                  {t('help.api.requiredScope')}
                </h3>
                <p className="text-gray-600 dark:text-gray-300">
                  <code>webhooks:manage</code>
                </p>
              </ApiContent>
              <ApiExample>
                <CodeBlock
                  title={t('help.api.endpoint')}
                  language="http"
                  code="POST /v1/webhooks/"
                />
                <TabbedCodeBlock title={t('help.api.request')} codes={createWebhookCode} />
                <CodeBlock
                  title={t('help.api.response')}
                  language="json"
                  code={`{
  "id": "whk_a1b2c3d4e5f6",
  "url": "https://example.com/webhooks",
  "events": [
    "appointment.created",
    "appointment.cancelled"
  ],
  "secret": "${TEST_WEBHOOK_SECRET}",
  "is_active": true,
  "created_at": "2025-11-28T15:30:00Z"
}`}
                />
                <div className="p-4 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg border border-yellow-200 dark:border-yellow-800">
                  <p className="text-sm text-yellow-800 dark:text-yellow-200">
                    <strong>{t('help.api.saveYourSecret')}</strong> {t('help.api.saveYourSecretDescription')}
                  </p>
                </div>
              </ApiExample>
            </ApiSection>

            {/* Verify Signatures */}
            <ApiSection id="verify-signatures">
              <ApiContent>
                <h2 className="text-2xl font-bold text-gray-900 dark:text-white mt-0">
                  {t('help.api.verifySignatures')}
                </h2>
                <p className="text-gray-600 dark:text-gray-300">
                  {t('help.api.verifySignaturesDescription')}
                </p>
                <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
                  {t('help.api.signatureFormat')}
                </h3>
                <p className="text-gray-600 dark:text-gray-300">
                  {t('help.api.signatureFormatDescription')}
                </p>
                <pre className="bg-gray-100 dark:bg-gray-800 p-3 rounded-lg text-sm overflow-x-auto">
                  <code>&lt;timestamp&gt;.&lt;signature&gt;</code>
                </pre>
                <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
                  {t('help.api.verificationSteps')}
                </h3>
                <ol className="text-gray-600 dark:text-gray-300 list-decimal list-inside space-y-2">
                  <li>{t('help.api.verificationStep1')}</li>
                  <li>{t('help.api.verificationStep2')}</li>
                  <li>{t('help.api.verificationStep3')}</li>
                  <li>{t('help.api.verificationStep4')}</li>
                </ol>
              </ApiContent>
              <ApiExample>
                <CodeBlock
                  title="SIGNATURE HEADER"
                  language="http"
                  code={`X-Webhook-Signature: 1732795200.a1b2c3d4e5f6...`}
                />
                <TabbedCodeBlock title="VERIFICATION" codes={verifyWebhookCode} />
              </ApiExample>
            </ApiSection>

            {/* Footer padding */}
            <div className="h-24" />
          </main>
        </div>
      </div>
    </LanguageContext.Provider>
  );
};

export default HelpApiDocs;