'use client'

import { startTransition, useEffect, useRef, useState } from 'react'
import { ArrowRightLeft, Copy, Sparkles, StopCircle, Check } from './icons'
import { Button } from './ui/button'
import { Textarea } from './ui/textarea'
import { Card } from './ui/card'
import { cn } from '../lib/utils'
import LanguageSelect from './LanguageSelect'
import {
  AUTO_LANGUAGE,
  COMMON_LANGUAGE_OPTIONS,
  getLanguageName,
  LANGUAGE_OPTIONS,
} from '@/lib/languages'

const API_BASE = process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:8030'

const STYLES = [
  { value: 'literal', name: '直译', description: '保留原文结构' },
  { value: 'fluent', name: '意译', description: '自然流畅' },
  { value: 'casual', name: '口语', description: '轻松对话' },
]

function formatDuration(ms: number): string {
  const totalSeconds = Math.max(0, ms) / 1000
  if (totalSeconds < 60) return `${totalSeconds.toFixed(1)}s`
  const minutes = Math.floor(totalSeconds / 60)
  const seconds = Math.floor(totalSeconds % 60)
  return `${minutes}m ${seconds}s`
}

export default function TranslatorForm() {
  const [sourceText, setSourceText] = useState('')
  const [translation, setTranslation] = useState('')
  const [sourceLang, setSourceLang] = useState('auto')
  const [targetLang, setTargetLang] = useState('zh')
  const [style, setStyle] = useState('literal')
  const [isLoading, setIsLoading] = useState(false)
  const [error, setError] = useState('')
  const [copied, setCopied] = useState(false)
  const [progress, setProgress] = useState(0)
  const [elapsedMs, setElapsedMs] = useState(0)
  const [lastDurationMs, setLastDurationMs] = useState<number | null>(null)
  const [lastOutcome, setLastOutcome] = useState<'success' | 'aborted' | 'error' | null>(null)
  const abortRef = useRef<AbortController | null>(null)
  const startTimeRef = useRef<number | null>(null)
  const progressTimerRef = useRef<number | null>(null)
  const runIdRef = useRef(0)
  const translationBufferRef = useRef('')
  const flushRafRef = useRef<number | null>(null)

  const canClear = Boolean(sourceText || translation || error || lastOutcome || isLoading)

  useEffect(() => {
    return () => {
      abortRef.current?.abort()
      if (flushRafRef.current != null) {
        window.cancelAnimationFrame(flushRafRef.current)
        flushRafRef.current = null
      }
    }
  }, [])

  useEffect(() => {
    if (!isLoading) return

    const start = startTimeRef.current ?? performance.now()

    progressTimerRef.current = window.setInterval(() => {
      setElapsedMs(performance.now() - start)
      setProgress((prev) => {
        if (prev >= 90) return prev
        const base = prev < 20 ? 7 : prev < 50 ? 3 : 1
        const jitter = Math.random() * 1.5
        return Math.min(90, prev + base + jitter)
      })
    }, 200)

    return () => {
      if (progressTimerRef.current) window.clearInterval(progressTimerRef.current)
      progressTimerRef.current = null
    }
  }, [isLoading])

  const handleTranslate = async () => {
    if (!sourceText.trim()) return

    const runId = ++runIdRef.current
    let outcome: 'success' | 'aborted' | 'error' = 'success'

    if (abortRef.current) {
      abortRef.current.abort()
    }

    abortRef.current = new AbortController()
    setIsLoading(true)
    setError('')
    setTranslation('')
    setCopied(false)
    setLastDurationMs(null)
    setLastOutcome(null)
    setProgress(5)
    setElapsedMs(0)
    startTimeRef.current = performance.now()
    translationBufferRef.current = ''
    if (flushRafRef.current != null) {
      window.cancelAnimationFrame(flushRafRef.current)
      flushRafRef.current = null
    }

    try {
      const res = await fetch(`${API_BASE}/api/v1/translate/stream`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          source_text: sourceText,
          source_lang: sourceLang,
          source_lang_name: getLanguageName(sourceLang),
          target_lang: targetLang,
          target_lang_name: getLanguageName(targetLang),
          style,
        }),
        signal: abortRef.current.signal,
      })

      if (!res.ok) {
        throw new Error('翻译请求失败')
      }

      const reader = res.body?.getReader()
      const decoder = new TextDecoder()
      let buffer = ''

      const scheduleFlush = () => {
        if (flushRafRef.current != null) return
        flushRafRef.current = window.requestAnimationFrame(() => {
          flushRafRef.current = null
          if (runIdRef.current !== runId) return
          const next = translationBufferRef.current
          startTransition(() => setTranslation(next))
        })
      }

      while (reader) {
        const { value, done } = await reader.read()
        if (done) break

        buffer += decoder.decode(value, { stream: true })
        const parts = buffer.split('\n\n')
        buffer = parts.pop() ?? ''

        for (const p of parts) {
          const lines = p.split('\n')
          const dataLine = lines.find(l => l.startsWith('data:'))
          if (dataLine) {
            const data = JSON.parse(dataLine.slice(5).trim())
            if (data.delta) {
              translationBufferRef.current += data.delta
              scheduleFlush()
            }
          }
        }
      }

      if (runIdRef.current === runId) {
        if (flushRafRef.current != null) {
          window.cancelAnimationFrame(flushRafRef.current)
          flushRafRef.current = null
        }
        const next = translationBufferRef.current
        startTransition(() => setTranslation(next))
      }

      if (runIdRef.current === runId) setProgress(100)
    } catch (err: any) {
      if (err.name === 'AbortError') {
        outcome = 'aborted'
      } else {
        outcome = 'error'
        if (runIdRef.current === runId) setError(err.message || '翻译失败')
      }
    } finally {
      if (runIdRef.current !== runId) return

      const startedAt = startTimeRef.current
      if (startedAt != null) {
        const duration = performance.now() - startedAt
        setElapsedMs(duration)
        setLastDurationMs(duration)
      }
      setLastOutcome(outcome)
      startTimeRef.current = null
      abortRef.current = null
      setIsLoading(false)
    }
  }

  const handleStop = () => {
    if (abortRef.current) {
      abortRef.current.abort()
      setIsLoading(false)
    }
  }

  const handleClear = () => {
    runIdRef.current += 1
    abortRef.current?.abort()
    abortRef.current = null
    startTimeRef.current = null
    if (flushRafRef.current != null) {
      window.cancelAnimationFrame(flushRafRef.current)
      flushRafRef.current = null
    }
    translationBufferRef.current = ''
    setIsLoading(false)
    setSourceText('')
    setTranslation('')
    setError('')
    setCopied(false)
    setProgress(0)
    setElapsedMs(0)
    setLastDurationMs(null)
    setLastOutcome(null)
  }

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

  const handleSwapLanguages = () => {
    if (sourceLang === 'auto') return
    setSourceLang(targetLang)
    setTargetLang(sourceLang)
    setSourceText(translation)
    setTranslation(sourceText)
  }

  return (
    <div className="w-full max-w-5xl mx-auto space-y-6 animate-in fade-in-0 slide-in-from-bottom-2 duration-500 motion-reduce:animate-none">
      {/* Controls Bar */}
      <Card className="p-4 bg-background/50 backdrop-blur-sm border-muted hover:shadow-md">
        <div className="space-y-3">
          <div className="flex flex-col md:flex-row gap-4 justify-between items-center">
            <div className="flex items-center gap-2 w-full md:w-auto">
              <div className="w-[140px]">
                <LanguageSelect
                  value={sourceLang}
                  onValueChange={setSourceLang}
                  options={LANGUAGE_OPTIONS}
                  commonOptions={[AUTO_LANGUAGE, ...COMMON_LANGUAGE_OPTIONS]}
                  placeholder="源语言"
                  allowAuto
                  autoOption={AUTO_LANGUAGE}
                />
              </div>

              <Button
                variant="ghost"
                size="icon"
                onClick={handleSwapLanguages}
                className="shrink-0"
                disabled={sourceLang === 'auto'}
              >
                <ArrowRightLeft className="h-4 w-4" />
              </Button>

              <div className="w-[140px]">
                <LanguageSelect
                  value={targetLang}
                  onValueChange={setTargetLang}
                  options={LANGUAGE_OPTIONS}
                  commonOptions={COMMON_LANGUAGE_OPTIONS}
                  placeholder="目标语言"
                />
              </div>
            </div>

            <div className="flex items-center gap-2 w-full md:w-auto overflow-x-auto pb-2 md:pb-0">
              {STYLES.map((s) => (
                <Button
                  key={s.value}
                  variant={style === s.value ? "secondary" : "ghost"}
                  size="sm"
                  onClick={() => setStyle(s.value)}
                  className="whitespace-nowrap"
                >
                  {s.name}
                </Button>
              ))}
            </div>

            <div className="flex items-center gap-2 ml-auto">
              <Button variant="outline" size="sm" onClick={handleClear} disabled={!canClear}>
                清空
              </Button>
              {isLoading ? (
                <Button onClick={handleStop} variant="destructive" size="sm">
                  <StopCircle className="mr-2 h-4 w-4" />
                  停止
                </Button>
              ) : (
                <Button
                  onClick={handleTranslate}
                  disabled={!sourceText.trim()}
                  className="bg-primary hover:bg-primary/90 text-white shadow-lg shadow-primary/20"
                >
                  <Sparkles className="mr-2 h-4 w-4" />
                  翻译
                </Button>
              )}
            </div>
          </div>

          {(isLoading || lastOutcome != null) && (
            <div className="w-full space-y-1.5">
              <div className="flex items-center justify-between text-xs text-muted-foreground">
                <span>
                  {isLoading
                    ? '翻译中…'
                    : lastOutcome === 'aborted'
                      ? '已停止'
                      : lastOutcome === 'error'
                        ? '翻译失败'
                        : '翻译完成'}
                </span>
                <span>{formatDuration(isLoading ? elapsedMs : (lastDurationMs ?? 0))}</span>
              </div>
              <div className="h-2 w-full overflow-hidden rounded-full bg-muted">
                <div
                  className="h-full bg-primary transition-all duration-300"
                  style={{ width: `${isLoading ? progress : lastOutcome === 'success' ? 100 : progress}%` }}
                />
              </div>
            </div>
          )}
        </div>
      </Card>

      {/* Main Input/Output Area */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 h-[500px]">
        {/* Source Text */}
        <Card className="relative p-0 overflow-hidden border-muted hover:shadow-md focus-within:ring-2 focus-within:ring-primary/20 transition-shadow">
          <Textarea
            value={sourceText}
            onChange={(e) => setSourceText(e.target.value)}
            placeholder="在此输入要翻译的文本..."
            className="w-full h-full min-h-[400px] p-6 text-lg border-0 focus-visible:ring-0 resize-none bg-transparent"
          />
          <div className="absolute bottom-4 right-4 text-xs text-muted-foreground">
            {sourceText.length} 字
          </div>
        </Card>

        {/* Translation Result */}
        <Card className="relative p-0 overflow-hidden border-muted bg-muted/30 hover:shadow-md focus-within:ring-2 focus-within:ring-primary/10 transition-shadow">
          <Textarea
            value={translation}
            readOnly
            placeholder="翻译结果..."
            className="w-full h-full min-h-[400px] p-6 text-lg border-0 focus-visible:ring-0 resize-none bg-transparent cursor-default"
          />

          {translation && (
            <div className="absolute bottom-4 right-4 flex gap-2">
              <Button
                variant="secondary"
                size="icon"
                className="h-8 w-8 shadow-sm"
                onClick={handleCopy}
              >
                {copied ? <Check className="h-4 w-4 text-green-500" /> : <Copy className="h-4 w-4" />}
              </Button>
            </div>
          )}

          {error && (
            <div className="absolute bottom-4 left-4 right-14 p-2 bg-red-100 dark:bg-red-900/30 text-red-600 text-sm rounded border border-red-200 dark:border-red-900">
              {error}
            </div>
          )}
        </Card>
      </div>
    </div>
  )
}