'use client';

import { useState } from 'react';

/**
 * Production-ready code examples widget.
 *
 * Core Principle: All code snippets are designed to be COPY-PASTE-AND-RUN ready.
 * Users should be able to copy the code, replace the placeholder folder path,
 * and execute it immediately on their machine with minimal edits.
 *
 * Pattern Used:
 * - Navigate to folder (with placeholder path: /your/images/folder)
 * - Use actual filename from selected/uploaded file
 * - Clear comments showing what to replace
 *
 * @example
 * // User has file at: /home/user/Downloads/sunset.jpg
 * // Code shows: cd /your/images/folder; curl ... -F "file=@sunset.jpg"
 * // User replaces: /your/images/folder → /home/user/Downloads
 * // Result: Works immediately after one simple edit!
 */

type CodeTab = 'curl' | 'fetch' | 'rest';

interface CodeExamplesWidgetProps {
  codeExamples: {
    curl: string;
    fetch: string;
    rest: string;
  };
  onCopy: (text: string) => void;
  defaultTab?: CodeTab;
}

export const CodeExamplesWidget = ({
  codeExamples,
  onCopy,
  defaultTab = 'curl',
}: CodeExamplesWidgetProps) => {
  const [activeTab, setActiveTab] = useState<CodeTab>(defaultTab);

  const getCodeForTab = () => {
    switch (activeTab) {
      case 'curl':
        return codeExamples.curl;
      case 'fetch':
        return codeExamples.fetch;
      case 'rest':
        return codeExamples.rest;
    }
  };

  return (
    <div className="bg-slate-950/50 rounded-xl border border-slate-700 overflow-hidden">
      <div className="flex items-center gap-2 bg-slate-900/50 px-4 py-2 border-b border-slate-700">
        <div className="flex gap-1.5">
          <div className="w-3 h-3 rounded-full bg-red-500/50"></div>
          <div className="w-3 h-3 rounded-full bg-yellow-500/50"></div>
          <div className="w-3 h-3 rounded-full bg-green-500/50"></div>
        </div>
        <div className="flex-1 flex gap-2 ml-4">
          <TabButton
            active={activeTab === 'curl'}
            onClick={() => setActiveTab('curl')}
            label="cURL"
          />
          <TabButton
            active={activeTab === 'fetch'}
            onClick={() => setActiveTab('fetch')}
            label="JS Fetch"
          />
          <TabButton
            active={activeTab === 'rest'}
            onClick={() => setActiveTab('rest')}
            label="REST"
          />
        </div>
        <button
          onClick={() => onCopy(getCodeForTab())}
          className="px-3 py-1 text-xs bg-amber-600/20 hover:bg-amber-600/30 text-amber-400 rounded transition-colors"
          aria-label="Copy code"
        >
          Copy
        </button>
      </div>
      <pre className="p-4 text-xs md:text-sm text-gray-300 overflow-x-auto">
        <code>{getCodeForTab()}</code>
      </pre>
    </div>
  );
};

const TabButton = ({
  active,
  onClick,
  label,
}: {
  active: boolean;
  onClick: () => void;
  label: string;
}) => {
  return (
    <button
      onClick={onClick}
      className={`px-3 py-1 text-xs rounded transition-colors ${
        active ? 'bg-slate-700 text-white' : 'text-gray-400 hover:text-white'
      }`}
      aria-pressed={active}
    >
      {label}
    </button>
  );
};
