'use client';

/**
 * Interactive API Widget - Final Variant (Redesigned)
 *
 * Minimized layout inspired by Variant C with Final variant design system:
 * - No inline API key input (uses DocsApiKeyInput component)
 * - Clean header with method badge, endpoint, and expand button
 * - Full-width code snippet area
 * - Compact footer with API key anchor link and Try It button
 * - Expanded view opens full-screen modal with code + response side-by-side
 */

import { useState, useEffect } from 'react';

interface InteractiveAPIWidgetFinalProps {
  endpoint: string;
  method: 'GET' | 'POST' | 'PUT' | 'DELETE';
  description: string;
  parameters?: Array<{
    name: string;
    type: string;
    required: boolean;
    description: string;
    defaultValue?: string;
  }>;
}

type Language = 'curl' | 'javascript' | 'python' | 'go';

const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3000';
const API_KEY_STORAGE = 'banatie_docs_api_key';

const getMethodColor = (method: string): string => {
  switch (method) {
    case 'GET':
      return 'from-cyan-500 to-cyan-600';
    case 'POST':
      return 'from-purple-500 to-purple-600';
    case 'PUT':
      return 'from-amber-500 to-amber-600';
    case 'DELETE':
      return 'from-red-500 to-red-600';
    default:
      return 'from-purple-500 to-cyan-500';
  }
};

export const InteractiveAPIWidgetFinal = ({
  endpoint,
  method,
  description,
  parameters = [],
}: InteractiveAPIWidgetFinalProps) => {
  const [language, setLanguage] = useState<Language>('curl');
  const [apiKey, setApiKey] = useState('');
  const [isExecuting, setIsExecuting] = useState(false);
  const [response, setResponse] = useState<any>(null);
  const [error, setError] = useState<string | null>(null);
  const [isExpanded, setIsExpanded] = useState(false);
  const [paramValues, setParamValues] = useState<Record<string, string>>({});

  // Load API key from localStorage and listen for changes
  useEffect(() => {
    const loadApiKey = () => {
      const stored = localStorage.getItem(API_KEY_STORAGE);
      if (stored) setApiKey(stored);
    };

    loadApiKey();

    // Listen for API key changes from DocsApiKeyInput
    const handleApiKeyChange = (e: CustomEvent) => {
      setApiKey(e.detail);
    };

    window.addEventListener('apiKeyChanged', handleApiKeyChange as EventListener);

    // Initialize parameter defaults
    const defaults: Record<string, string> = {
      prompt: 'a futuristic city at sunset',
      filename: 'demo',
      aspectRatio: '16:9',
    };

    parameters.forEach((param) => {
      if (param.defaultValue) {
        defaults[param.name] = param.defaultValue;
      }
    });

    setParamValues(defaults);

    return () => {
      window.removeEventListener('apiKeyChanged', handleApiKeyChange as EventListener);
    };
  }, [parameters]);

  // Generate code examples
  const generateCode = (): string => {
    const url = `${API_BASE_URL}${endpoint}`;

    switch (language) {
      case 'curl':
        return `curl -X ${method} "${url}" \\
  -H "X-API-Key: ${apiKey || 'YOUR_API_KEY'}" \\
  -H "Content-Type: application/json" \\
  -d '{
    "prompt": "a futuristic city at sunset",
    "filename": "city",
    "aspectRatio": "16:9"
  }'`;

      case 'javascript':
        return `const response = await fetch('${url}', {
  method: '${method}',
  headers: {
    'X-API-Key': '${apiKey || 'YOUR_API_KEY'}',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    prompt: 'a futuristic city at sunset',
    filename: 'city',
    aspectRatio: '16:9'
  })
});

const data = await response.json();
console.log(data);`;

      case 'python':
        return `import requests

url = '${url}'
headers = {
    'X-API-Key': '${apiKey || 'YOUR_API_KEY'}',
    'Content-Type': 'application/json'
}
data = {
    'prompt': 'a futuristic city at sunset',
    'filename': 'city',
    'aspectRatio': '16:9'
}

response = requests.${method.toLowerCase()}(url, headers=headers, json=data)
print(response.json())`;

      case 'go':
        return `package main

import (
    "bytes"
    "encoding/json"
    "net/http"
)

func main() {
    url := "${url}"
    data := map[string]interface{}{
        "prompt": "a futuristic city at sunset",
        "filename": "city",
        "aspectRatio": "16:9",
    }

    jsonData, _ := json.Marshal(data)
    req, _ := http.NewRequest("${method}", url, bytes.NewBuffer(jsonData))
    req.Header.Set("X-API-Key", "${apiKey || 'YOUR_API_KEY'}")
    req.Header.Set("Content-Type", "application/json")

    client := &http.Client{}
    resp, _ := client.Do(req)
    defer resp.Body.Close()
}`;

      default:
        return '';
    }
  };

  // Execute API request
  const executeRequest = async () => {
    if (!apiKey) {
      setError('Please enter your API key in the top-right corner');
      return;
    }

    setIsExecuting(true);
    setError(null);
    setResponse(null);

    try {
      const body = {
        prompt: paramValues.prompt || 'a futuristic city at sunset',
        filename: paramValues.filename || 'demo',
        aspectRatio: paramValues.aspectRatio || '16:9',
      };

      console.log('🔵 API Request:', {
        url: `${API_BASE_URL}${endpoint}`,
        method,
        headers: { 'X-API-Key': apiKey.substring(0, 10) + '...' },
        body,
      });

      const res = await fetch(`${API_BASE_URL}${endpoint}`, {
        method,
        headers: {
          'X-API-Key': apiKey,
          'Content-Type': 'application/json',
        },
        body: method !== 'GET' ? JSON.stringify(body) : undefined,
      });

      console.log('🟢 Response Status:', res.status, res.statusText);

      if (!res.ok) {
        let errorMessage = `HTTP ${res.status}: ${res.statusText}`;
        try {
          const errorData = await res.json();
          errorMessage = errorData.message || errorData.error || errorMessage;
        } catch {
          // Response is not JSON
        }
        throw new Error(errorMessage);
      }

      const data = await res.json();
      console.log('✅ Response Data:', data);
      setResponse(data);
    } catch (err) {
      console.error('❌ API Error:', err);
      const errorMsg = err instanceof Error ? err.message : 'Failed to execute request';
      setError(`Request failed: ${errorMsg}`);
    } finally {
      setIsExecuting(false);
    }
  };

  // Copy code to clipboard
  const copyCode = () => {
    navigator.clipboard.writeText(generateCode());
  };

  // Expand API key input in navigation
  const expandApiKey = () => {
    window.dispatchEvent(new CustomEvent('expandApiKeyInput'));
  };

  const isSuccess = response && response.success === true;

  return (
    <>
      {/* Minimized Widget */}
      <div className="my-8 bg-slate-900/50 backdrop-blur-sm border border-purple-500/30 rounded-2xl overflow-hidden shadow-xl">
        {/* Header */}
        <div className="flex items-center justify-between bg-slate-950/80 px-6 py-4 border-b border-purple-500/30">
          <div className="flex items-center gap-3">
            <div className={`px-3 py-1.5 rounded-lg bg-gradient-to-r ${getMethodColor(method)} text-white text-sm font-bold shadow-lg`}>
              {method}
            </div>
            <code className="text-sm text-gray-400">{endpoint}</code>
          </div>
          <button
            onClick={() => setIsExpanded(true)}
            className="px-4 py-2 bg-cyan-600/20 hover:bg-cyan-600/30 text-cyan-400 rounded-lg transition-all text-sm font-semibold border border-cyan-500/40 hover:border-cyan-500/60"
          >
            ⛶ Expand
          </button>
        </div>

        {/* Code Section - Full Width */}
        <div className="p-6">
          {/* Language Tabs */}
          <div className="flex items-center gap-2 mb-4">
            {(['curl', 'javascript', 'python', 'go'] as Language[]).map((lang, idx) => {
              const colors = ['purple', 'cyan', 'amber', 'purple'];
              const color = colors[idx];
              return (
                <button
                  key={lang}
                  onClick={() => setLanguage(lang)}
                  className={`px-4 py-2 text-sm rounded-xl font-semibold transition-all border ${
                    language === lang
                      ? color === 'purple'
                        ? 'bg-purple-500/30 text-white border-purple-500/60 shadow-lg shadow-purple-500/20'
                        : color === 'cyan'
                        ? 'bg-cyan-500/30 text-white border-cyan-500/60 shadow-lg shadow-cyan-500/20'
                        : 'bg-amber-500/30 text-white border-amber-500/60 shadow-lg shadow-amber-500/20'
                      : 'bg-slate-800/30 text-gray-400 border-slate-700 hover:border-slate-600 hover:text-white'
                  }`}
                >
                  {lang === 'javascript' ? 'JS' : lang.toUpperCase()}
                </button>
              );
            })}
          </div>

          {/* Code Display */}
          <div className="border border-cyan-500/30 rounded-xl overflow-hidden shadow-lg">
            <div className="flex items-center justify-between bg-slate-950/80 px-4 py-3 border-b border-cyan-500/20">
              <span className="text-xs text-cyan-400 font-semibold">Code Example</span>
              <button
                onClick={copyCode}
                className="px-3 py-1.5 text-xs bg-purple-600/30 hover:bg-purple-600/50 text-purple-300 rounded-lg transition-all font-semibold"
              >
                📋 Copy
              </button>
            </div>
            <div className="p-4 bg-slate-950/50 max-h-80 overflow-auto">
              <pre className="text-sm text-gray-300 leading-relaxed">
                <code>{generateCode()}</code>
              </pre>
            </div>
          </div>
        </div>

        {/* Footer */}
        <div className="grid grid-cols-2 gap-4 px-6 pb-6">
          <button
            onClick={expandApiKey}
            className="flex items-center gap-2 px-4 py-2.5 bg-slate-800/50 hover:bg-slate-800 border border-slate-700 rounded-lg text-gray-400 hover:text-white text-sm transition-colors"
          >
            <span>🔑</span>
            <span>{apiKey ? 'API Key Set' : 'Enter API Key'}</span>
          </button>
          <button
            onClick={executeRequest}
            disabled={!apiKey || isExecuting}
            className="px-4 py-2.5 rounded-lg bg-gradient-to-r from-purple-600 to-cyan-600 text-white text-sm font-semibold hover:from-purple-500 hover:to-cyan-500 transition-all disabled:opacity-50 disabled:cursor-not-allowed shadow-lg hover:shadow-purple-500/30"
          >
            {isExecuting ? '⚡ Executing...' : '⚡ Try It'}
          </button>
        </div>

        {/* Inline Response (if any) */}
        {(response || error) && (
          <div className="border-t border-purple-500/30 p-6 bg-slate-950/50">
            <h4 className="text-sm font-semibold text-white mb-3 flex items-center gap-2">
              <span>📦</span>
              Response
            </h4>
            {error ? (
              <div className="p-4 bg-red-500/10 border border-red-500/40 rounded-xl text-red-400 text-sm shadow-lg shadow-red-500/10">
                <div className="flex items-start gap-2">
                  <span>⚠️</span>
                  <div>
                    <p className="font-semibold mb-1">Error</p>
                    <p className="text-xs">{error}</p>
                  </div>
                </div>
              </div>
            ) : (
              <div className={`p-4 rounded-xl border ${
                isSuccess
                  ? 'bg-green-500/5 border-green-500/40 shadow-lg shadow-green-500/10'
                  : 'bg-slate-800/50 border-slate-700'
              }`}>
                {isSuccess && (
                  <div className="flex items-center gap-2 mb-3">
                    <span className="px-2 py-1 text-xs bg-green-500/20 text-green-400 rounded-full border border-green-500/40">
                      ✓ 200 Success
                    </span>
                  </div>
                )}
                <pre className="text-xs text-gray-300 overflow-x-auto max-h-60">
                  <code>{JSON.stringify(response, null, 2)}</code>
                </pre>
              </div>
            )}
          </div>
        )}
      </div>

      {/* Expanded Modal */}
      {isExpanded && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm">
          <div className="relative w-[90vw] h-[85vh] bg-slate-900 border border-purple-500/30 rounded-2xl shadow-2xl overflow-hidden flex flex-col">
            {/* Modal Header */}
            <div className="flex items-center justify-between bg-slate-950/80 px-6 py-4 border-b border-purple-500/30">
              <div className="flex items-center gap-3">
                <div className={`px-3 py-1.5 rounded-lg bg-gradient-to-r ${getMethodColor(method)} text-white text-sm font-bold shadow-lg`}>
                  {method}
                </div>
                <code className="text-sm text-gray-400">{endpoint}</code>
              </div>
              <button
                onClick={() => setIsExpanded(false)}
                className="px-4 py-2 bg-slate-800 hover:bg-slate-700 text-gray-400 hover:text-white rounded-lg transition-all text-sm font-semibold"
              >
                ✕ Close
              </button>
            </div>

            {/* Two-Panel Layout */}
            <div className="grid grid-cols-2 gap-6 p-6 flex-1 overflow-hidden">
              {/* Left: Code */}
              <div className="flex flex-col overflow-hidden">
                <div className="flex items-center gap-2 mb-4">
                  {(['curl', 'javascript', 'python', 'go'] as Language[]).map((lang, idx) => {
                    const colors = ['purple', 'cyan', 'amber', 'purple'];
                    const color = colors[idx];
                    return (
                      <button
                        key={lang}
                        onClick={() => setLanguage(lang)}
                        className={`px-4 py-2 text-sm rounded-xl font-semibold transition-all border ${
                          language === lang
                            ? color === 'purple'
                              ? 'bg-purple-500/30 text-white border-purple-500/60 shadow-lg shadow-purple-500/20'
                              : color === 'cyan'
                              ? 'bg-cyan-500/30 text-white border-cyan-500/60 shadow-lg shadow-cyan-500/20'
                              : 'bg-amber-500/30 text-white border-amber-500/60 shadow-lg shadow-amber-500/20'
                            : 'bg-slate-800/30 text-gray-400 border-slate-700 hover:border-slate-600 hover:text-white'
                        }`}
                      >
                        {lang === 'javascript' ? 'JS' : lang.toUpperCase()}
                      </button>
                    );
                  })}
                </div>

                <div className="border border-cyan-500/30 rounded-xl overflow-hidden shadow-lg flex-1 flex flex-col">
                  <div className="flex items-center justify-between bg-slate-950/80 px-4 py-3 border-b border-cyan-500/20">
                    <span className="text-xs text-cyan-400 font-semibold">Code Example</span>
                    <button
                      onClick={copyCode}
                      className="px-3 py-1.5 text-xs bg-purple-600/30 hover:bg-purple-600/50 text-purple-300 rounded-lg transition-all font-semibold"
                    >
                      📋 Copy
                    </button>
                  </div>
                  <div className="p-4 bg-slate-950/50 overflow-auto flex-1">
                    <pre className="text-base text-gray-300 leading-relaxed">
                      <code>{generateCode()}</code>
                    </pre>
                  </div>
                </div>
              </div>

              {/* Right: Response */}
              <div className="flex flex-col overflow-hidden">
                <h4 className="text-sm font-semibold text-white mb-4 flex items-center gap-2">
                  <span>📦</span>
                  Response
                </h4>

                <div className="border border-purple-500/30 rounded-xl overflow-hidden shadow-lg flex-1 flex flex-col">
                  <div className="bg-slate-950/80 px-4 py-3 border-b border-purple-500/20">
                    {response && (
                      <span
                        className={`inline-flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs font-bold ${
                          response.success
                            ? 'bg-green-500/20 text-green-400 border border-green-500/40 shadow-lg shadow-green-500/10'
                            : 'bg-red-500/20 text-red-400 border border-red-500/40 shadow-lg shadow-red-500/10'
                        }`}
                      >
                        {response.success ? '✓ Success' : '✕ Error'}
                      </span>
                    )}
                  </div>
                  <div className="p-4 bg-slate-950/50 overflow-auto flex-1">
                    {error ? (
                      <div className="p-4 bg-red-500/10 border border-red-500/40 rounded-xl text-red-400 text-sm shadow-lg shadow-red-500/10">
                        <div className="flex items-start gap-2">
                          <span className="text-xl">⚠️</span>
                          <div>
                            <p className="font-semibold mb-1">Error</p>
                            <p className="text-xs">{error}</p>
                          </div>
                        </div>
                      </div>
                    ) : response ? (
                      <pre className="text-sm text-gray-300 leading-relaxed">
                        <code>{JSON.stringify(response, null, 2)}</code>
                      </pre>
                    ) : (
                      <div className="flex items-center justify-center h-full">
                        <div className="text-center">
                          <p className="text-4xl mb-3">🚀</p>
                          <p className="text-sm text-gray-500">
                            Click <strong className="text-purple-400">"Try It"</strong> below to see the response
                          </p>
                        </div>
                      </div>
                    )}
                  </div>
                </div>

                {/* Try It Button in Expanded View */}
                <button
                  onClick={executeRequest}
                  disabled={!apiKey || isExecuting}
                  className="mt-4 px-6 py-3 rounded-xl bg-gradient-to-r from-purple-600 to-cyan-600 text-white text-base font-bold hover:from-purple-500 hover:to-cyan-500 transition-all disabled:opacity-50 disabled:cursor-not-allowed shadow-2xl hover:shadow-purple-500/50"
                >
                  {isExecuting ? '⚡ Executing...' : '⚡ Try It Now'}
                </button>
              </div>
            </div>

            {/* Footer hint */}
            <div className="px-6 pb-4 text-center">
              <p className="text-xs text-gray-500">{description}</p>
            </div>
          </div>
        </div>
      )}
    </>
  );
};