'use client'

import { useState } from 'react'
import { useTranslations } from 'next-intl'
import { Button } from '@/components/ui/button'
import { Label } from '@/components/ui/label'
import { LoadingSpinner } from '@/components/ui/loading-spinner'
import {
  Play,
  Settings,
  Zap,
  Copy,
  Download,
  AlertCircle,
  CheckCircle,
  Clock,
  DollarSign
} from 'lucide-react'

interface TestResult {
  testRun: {
    id: string
    input: string
    output: string | null
    success: boolean
    error: string | null
    createdAt: string
  }
  result: {
    success: boolean
    output: string | null
    error: string | null
  }
  cost: number
  model: string
  timestamp: string
}

interface PromptDebuggerProps {
  promptId: string
  userId: string
  content: string
  onTestComplete?: (result: TestResult) => void
}

const AI_MODELS = [
  { id: 'gpt-3.5-turbo', name: 'GPT-3.5 Turbo', provider: 'OpenAI', cost: '$0.001/1K tokens' },
  { id: 'gpt-4', name: 'GPT-4', provider: 'OpenAI', cost: '$0.03/1K tokens' },
  { id: 'gpt-4-turbo', name: 'GPT-4 Turbo', provider: 'OpenAI', cost: '$0.01/1K tokens' },
  { id: 'claude-3-sonnet', name: 'Claude 3 Sonnet', provider: 'Anthropic', cost: '$0.003/1K tokens' },
  { id: 'claude-3-haiku', name: 'Claude 3 Haiku', provider: 'Anthropic', cost: '$0.00025/1K tokens' }
]

export function PromptDebugger({ 
  promptId, 
  userId, 
  content, 
  onTestComplete 
}: PromptDebuggerProps) {
  const t = useTranslations('studio')
  const [selectedModel, setSelectedModel] = useState('gpt-3.5-turbo')
  const [temperature, setTemperature] = useState(0.7)
  const [maxTokens, setMaxTokens] = useState(1000)
  const [isRunning, setIsRunning] = useState(false)
  const [testResult, setTestResult] = useState<TestResult | null>(null)
  const [showSettings, setShowSettings] = useState(false)

  const handleRunTest = async () => {
    if (!content.trim() || isRunning) return

    setIsRunning(true)
    setTestResult(null)

    try {
      const response = await fetch(`/api/prompts/${promptId}/test`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          content,
          model: selectedModel,
          temperature,
          maxTokens,
          userId
        })
      })

      if (response.ok) {
        const result = await response.json()
        setTestResult(result)
        onTestComplete?.(result)
      } else {
        const error = await response.json()
        setTestResult({
          testRun: {
            id: '',
            input: content,
            output: null,
            success: false,
            error: error.error || 'Test failed',
            createdAt: new Date().toISOString()
          },
          result: {
            success: false,
            output: null,
            error: error.error || 'Test failed'
          },
          cost: 0,
          model: selectedModel,
          timestamp: new Date().toISOString()
        })
      }
    } catch (error) {
      console.error('Error running test:', error)
      setTestResult({
        testRun: {
          id: '',
          input: content,
          output: null,
          success: false,
          error: 'Network error occurred',
          createdAt: new Date().toISOString()
        },
        result: {
          success: false,
          output: null,
          error: 'Network error occurred'
        },
        cost: 0,
        model: selectedModel,
        timestamp: new Date().toISOString()
      })
    } finally {
      setIsRunning(false)
    }
  }

  const copyToClipboard = (text: string) => {
    navigator.clipboard.writeText(text)
  }

  const downloadResult = () => {
    if (!testResult) return

    const data = {
      prompt: content,
      model: testResult.model,
      timestamp: testResult.timestamp,
      result: testResult.result,
      cost: testResult.cost
    }

    const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' })
    const url = URL.createObjectURL(blob)
    const a = document.createElement('a')
    a.href = url
    a.download = `prompt-test-${Date.now()}.json`
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
    URL.revokeObjectURL(url)
  }

  const selectedModelInfo = AI_MODELS.find(m => m.id === selectedModel)

  return (
    <div className="space-y-6">
      {/* Controls */}
      <div className="bg-card rounded-lg border border-border p-4">
        <div className="flex items-center justify-between mb-4">
          <h3 className="font-semibold text-foreground">{t('runTest')}</h3>
          <Button
            variant="outline"
            size="sm"
            onClick={() => setShowSettings(!showSettings)}
            className="flex items-center space-x-1"
          >
            <Settings className="h-4 w-4" />
            <span>Settings</span>
          </Button>
        </div>

        {/* Model Selection */}
        <div className="space-y-4">
          <div>
            <Label className="text-sm font-medium">AI Model</Label>
            <select
              value={selectedModel}
              onChange={(e) => setSelectedModel(e.target.value)}
              className="mt-1 w-full bg-background border border-input rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-ring"
            >
              {AI_MODELS.map(model => (
                <option key={model.id} value={model.id}>
                  {model.name} ({model.provider}) - {model.cost}
                </option>
              ))}
            </select>
          </div>

          {/* Advanced Settings */}
          {showSettings && (
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 pt-4 border-t border-border">
              <div>
                <Label className="text-sm font-medium">
                  Temperature: {temperature}
                </Label>
                <input
                  type="range"
                  min="0"
                  max="2"
                  step="0.1"
                  value={temperature}
                  onChange={(e) => setTemperature(parseFloat(e.target.value))}
                  className="mt-1 w-full"
                />
                <p className="text-xs text-muted-foreground mt-1">
                  Controls randomness (0 = deterministic, 2 = very random)
                </p>
              </div>

              <div>
                <Label className="text-sm font-medium">Max Tokens</Label>
                <input
                  type="number"
                  min="1"
                  max="4000"
                  value={maxTokens}
                  onChange={(e) => setMaxTokens(parseInt(e.target.value))}
                  className="mt-1 w-full bg-background border border-input rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-ring"
                />
                <p className="text-xs text-muted-foreground mt-1">
                  Maximum response length
                </p>
              </div>
            </div>
          )}

          {/* Run Button */}
          <div className="flex items-center justify-between pt-4">
            <div className="text-sm text-muted-foreground">
              {selectedModelInfo && (
                <span>Using {selectedModelInfo.name} • {selectedModelInfo.cost}</span>
              )}
            </div>
            
            <Button
              onClick={handleRunTest}
              disabled={isRunning || !content.trim()}
              className="flex items-center space-x-2"
            >
              {isRunning ? (
                <LoadingSpinner size="sm" />
              ) : (
                <Play className="h-4 w-4" />
              )}
              <span>{isRunning ? 'Running...' : t('runTest')}</span>
            </Button>
          </div>
        </div>
      </div>

      {/* Results */}
      <div className="bg-card rounded-lg border border-border">
        <div className="p-4 border-b border-border">
          <div className="flex items-center justify-between">
            <h3 className="font-semibold text-foreground">{t('testResults')}</h3>
            {testResult && (
              <div className="flex items-center space-x-2">
                <Button
                  variant="outline"
                  size="sm"
                  onClick={() => testResult.result.output && copyToClipboard(testResult.result.output)}
                  disabled={!testResult.result.output}
                  className="h-7"
                >
                  <Copy className="h-3 w-3 mr-1" />
                  Copy
                </Button>
                <Button
                  variant="outline"
                  size="sm"
                  onClick={downloadResult}
                  className="h-7"
                >
                  <Download className="h-3 w-3 mr-1" />
                  Export
                </Button>
              </div>
            )}
          </div>
        </div>

        <div className="p-4">
          {isRunning ? (
            <div className="flex items-center justify-center py-12">
              <div className="text-center">
                <LoadingSpinner size="lg" />
                <p className="mt-4 text-muted-foreground">Running prompt test...</p>
                <p className="text-xs text-muted-foreground mt-2">
                  Testing with {selectedModelInfo?.name}
                </p>
              </div>
            </div>
          ) : testResult ? (
            <div className="space-y-4">
              {/* Status */}
              <div className="flex items-center justify-between">
                <div className="flex items-center space-x-2">
                  {testResult.result.success ? (
                    <CheckCircle className="h-5 w-5 text-green-500" />
                  ) : (
                    <AlertCircle className="h-5 w-5 text-red-500" />
                  )}
                  <span className={`font-medium ${
                    testResult.result.success ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'
                  }`}>
                    {testResult.result.success ? 'Test Successful' : 'Test Failed'}
                  </span>
                </div>

                <div className="flex items-center space-x-4 text-sm text-muted-foreground">
                  <div className="flex items-center space-x-1">
                    <Clock className="h-3 w-3" />
                    <span>{new Date(testResult.timestamp).toLocaleTimeString()}</span>
                  </div>
                  <div className="flex items-center space-x-1">
                    <DollarSign className="h-3 w-3" />
                    <span>${testResult.cost.toFixed(6)}</span>
                  </div>
                </div>
              </div>

              {/* Output */}
              <div className="bg-muted rounded-lg p-4">
                {testResult.result.success && testResult.result.output ? (
                  <pre className="text-sm text-foreground whitespace-pre-wrap leading-relaxed">
                    {testResult.result.output}
                  </pre>
                ) : (
                  <div className="text-red-600 dark:text-red-400">
                    <p className="font-medium">Error:</p>
                    <p className="text-sm mt-1">{testResult.result.error}</p>
                  </div>
                )}
              </div>
            </div>
          ) : (
            <div className="flex items-center justify-center py-12 text-center">
              <div>
                <Zap className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
                <p className="text-muted-foreground mb-2">
                  {t('clickRunTestToSee')}
                </p>
                <p className="text-xs text-muted-foreground">
                  Test your prompt with AI models to see the output
                </p>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  )
}
