'use client'

import { useState } from 'react'

interface GrammarCorrection {
  hasErrors: boolean
  originalText: string
  correctedText: string | null
  corrections: Array<{
    position: { start: number; end: number }
    errorType: string
    original: string
    corrected: string
    reason: string
    severity: 'high' | 'medium' | 'low'
  }>
  confidenceScore: number
}

interface GrammarCorrectionPanelProps {
  correction: GrammarCorrection
  onAcceptCorrection: () => void
  onRejectCorrection: () => void
  onManualEdit?: (text: string) => void
}

export function GrammarCorrectionPanel({
  correction,
  onAcceptCorrection,
  onRejectCorrection,
  onManualEdit
}: GrammarCorrectionPanelProps) {
  const [isExpanded, setIsExpanded] = useState(true)

  if (!correction.hasErrors) {
    return (
      <div className="bg-green-50 border border-green-200 rounded-lg p-4 mb-6">
        <div className="flex items-center gap-2">
          <div className="text-green-600 text-lg">✅</div>
          <div>
            <div className="font-medium text-green-800">語法檢查：無錯誤</div>
            <div className="text-sm text-green-700">
              您的句子語法正確，可以直接進行學習分析！
            </div>
          </div>
        </div>
      </div>
    )
  }

  const renderHighlightedText = (text: string, corrections: typeof correction.corrections) => {
    if (corrections.length === 0) return text

    let result: React.ReactNode[] = []
    let lastIndex = 0

    corrections.forEach((corr, index) => {
      // 添加錯誤前的正常文字
      if (corr.position.start > lastIndex) {
        result.push(
          <span key={`normal-${index}`}>
            {text.slice(lastIndex, corr.position.start)}
          </span>
        )
      }

      // 添加錯誤文字（紅色標記）
      result.push(
        <span
          key={`error-${index}`}
          className="relative bg-red-100 border-b-2 border-red-400 px-1 rounded"
          title={`錯誤：${corr.reason}`}
        >
          {corr.original}
          <span className="absolute -top-1 -right-1 text-xs text-red-600">❌</span>
        </span>
      )

      lastIndex = corr.position.end
    })

    // 添加最後剩餘的正常文字
    if (lastIndex < text.length) {
      result.push(
        <span key="final">
          {text.slice(lastIndex)}
        </span>
      )
    }

    return <>{result}</>
  }

  const renderCorrectedText = (text: string, corrections: typeof correction.corrections) => {
    if (corrections.length === 0 || !text) return text

    let result: React.ReactNode[] = []
    let lastIndex = 0
    let offset = 0 // 修正後文字長度變化的偏移量

    corrections.forEach((corr, index) => {
      const adjustedStart = corr.position.start + offset
      const originalLength = corr.original.length
      const correctedLength = corr.corrected.length

      // 添加修正前的正常文字
      if (adjustedStart > lastIndex) {
        result.push(
          <span key={`normal-${index}`}>
            {text.slice(lastIndex, adjustedStart)}
          </span>
        )
      }

      // 添加修正後的文字（綠色標記）
      result.push(
        <span
          key={`corrected-${index}`}
          className="relative bg-green-100 border-b-2 border-green-400 px-1 rounded font-medium"
          title={`修正：${corr.reason}`}
        >
          {corr.corrected}
          <span className="absolute -top-1 -right-1 text-xs text-green-600">✅</span>
        </span>
      )

      lastIndex = adjustedStart + correctedLength
      offset += (correctedLength - originalLength)
    })

    // 添加最後剩餘的正常文字
    if (lastIndex < text.length) {
      result.push(
        <span key="final">
          {text.slice(lastIndex)}
        </span>
      )
    }

    return <>{result}</>
  }

  const getSeverityColor = (severity: string) => {
    switch (severity) {
      case 'high':
        return 'bg-red-100 text-red-700 border-red-300'
      case 'medium':
        return 'bg-yellow-100 text-yellow-700 border-yellow-300'
      case 'low':
        return 'bg-blue-100 text-blue-700 border-blue-300'
      default:
        return 'bg-gray-100 text-gray-700 border-gray-300'
    }
  }

  return (
    <div className="bg-white border border-red-200 rounded-lg shadow-sm mb-6">
      {/* 標題區 */}
      <div className="bg-red-50 px-6 py-4 border-b border-red-200 rounded-t-lg">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="text-red-600 text-xl">❌</div>
            <div>
              <h3 className="font-semibold text-red-800">
                語法檢查：發現 {correction.corrections.length} 個錯誤
              </h3>
              <div className="text-sm text-red-700">
                建議修正後再進行學習，以確保學習內容的正確性
              </div>
            </div>
          </div>
          <button
            onClick={() => setIsExpanded(!isExpanded)}
            className="text-red-600 hover:text-red-800"
          >
            {isExpanded ? '收起' : '展開'}
          </button>
        </div>
      </div>

      {isExpanded && (
        <div className="p-6 space-y-6">
          {/* 原始句子 */}
          <div>
            <h4 className="font-medium text-gray-800 mb-2">📝 用戶輸入：</h4>
            <div className="p-4 bg-gray-50 rounded-lg border border-gray-200">
              <div className="text-lg leading-relaxed">
                {renderHighlightedText(correction.originalText, correction.corrections)}
              </div>
            </div>
          </div>

          {/* 修正建議 */}
          <div className="bg-green-50 border border-green-200 rounded-lg p-4">
            <h4 className="font-medium text-green-800 mb-3 flex items-center gap-2">
              <span className="text-lg">🔧</span>
              建議修正：
            </h4>

            <div className="p-4 bg-white rounded-lg border border-green-300 mb-4">
              <div className="text-lg leading-relaxed">
                {correction.correctedText && renderCorrectedText(correction.correctedText, correction.corrections)}
              </div>
            </div>

            {/* 修正說明列表 */}
            <div className="space-y-3">
              <h5 className="font-medium text-green-800">📋 修正說明：</h5>
              {correction.corrections.map((corr, index) => (
                <div
                  key={index}
                  className={`p-3 rounded-lg border ${getSeverityColor(corr.severity)}`}
                >
                  <div className="flex items-start gap-3">
                    <div className="flex-shrink-0 w-6 h-6 rounded-full bg-white flex items-center justify-center text-sm font-bold">
                      {index + 1}
                    </div>
                    <div className="flex-1">
                      <div className="font-medium mb-1">
                        "{corr.original}" → "{corr.corrected}"
                      </div>
                      <div className="text-sm">
                        {corr.reason}
                      </div>
                      <div className="text-xs mt-1 opacity-75">
                        錯誤類型：{corr.errorType} | 嚴重程度：{corr.severity}
                      </div>
                    </div>
                  </div>
                </div>
              ))}
            </div>

            {/* 信心度 */}
            <div className="mt-4 text-sm text-green-700">
              🎯 修正信心度：{(correction.confidenceScore * 100).toFixed(1)}%
            </div>
          </div>

          {/* 操作按鈕 */}
          <div className="flex gap-4">
            <button
              onClick={onAcceptCorrection}
              className="flex-1 bg-green-600 text-white py-3 px-4 rounded-lg font-medium hover:bg-green-700 transition-colors flex items-center justify-center gap-2"
            >
              <span className="text-lg">✅</span>
              使用修正版本
            </button>
            <button
              onClick={onRejectCorrection}
              className="flex-1 bg-gray-200 text-gray-700 py-3 px-4 rounded-lg font-medium hover:bg-gray-300 transition-colors flex items-center justify-center gap-2"
            >
              <span className="text-lg">❌</span>
              保持原始版本
            </button>
          </div>

          {/* 學習提醒 */}
          <div className="bg-blue-50 border border-blue-200 rounded-lg p-3">
            <div className="flex items-start gap-2">
              <div className="text-blue-600 text-lg">💡</div>
              <div className="text-sm text-blue-800">
                <strong>學習建議：</strong>
                建議使用修正版本進行學習，這樣可以確保您學到正確的英語表達方式。
                所有後續的詞彙分析都將基於修正後的句子進行。
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}