'use client'

import React, { useState } from 'react'

interface BannerResult {
  banner_detected: boolean
  banner_provider: string
  banner_text: string
  banner_checks?: {
    violations: { code: string; text: string; severity: string }[]
    passes: { code: string; text: string }[]
  }
  phases?: {
    before_consent: { cookies: number; scripts: number; violations: string[] }
    after_reject: { cookies: number; scripts: number; violations: string[] }
    after_accept: { cookies: number; scripts: number; violations: string[] }
  }
}

export function BannerCheckTab() {
  const [url, setUrl] = useState('')
  const [loading, setLoading] = useState(false)
  const [progress, setProgress] = useState('')
  const [error, setError] = useState<string | null>(null)
  const [result, setResult] = useState<BannerResult | null>(null)

  const handleScan = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!url.trim()) return

    setLoading(true)
    setError(null)
    setResult(null)
    setProgress('Cookie-Banner wird analysiert...')

    try {
      const res = await fetch('/api/sdk/v1/agent/banner-check', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ url: url.trim() }),
      })
      if (!res.ok) throw new Error(`Fehler: ${res.status}`)
      const data = await res.json()

      if (data.scan_id) {
        // Async polling
        let attempts = 0
        while (attempts < 60) {
          await new Promise(r => setTimeout(r, 3000))
          const poll = await fetch(`/api/sdk/v1/agent/banner-check?scan_id=${data.scan_id}`)
          if (!poll.ok) { attempts++; continue }
          const pollData = await poll.json()
          if (pollData.progress) setProgress(pollData.progress)
          if (pollData.status === 'completed' && pollData.result) {
            setResult(pollData.result)
            break
          }
          if (pollData.status === 'failed') throw new Error(pollData.error || 'Scan fehlgeschlagen')
          attempts++
        }
      } else {
        setResult(data)
      }
    } catch (e) {
      setError(e instanceof Error ? e.message : 'Unbekannter Fehler')
    } finally {
      setLoading(false)
      setProgress('')
    }
  }

  const violations = result?.banner_checks?.violations || []
  const passes = result?.banner_checks?.passes || []
  const total = violations.length + passes.length

  return (
    <div className="space-y-4">
      <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
        <h3 className="text-sm font-semibold text-blue-900">Cookie-Banner Compliance Check</h3>
        <p className="text-xs text-blue-700 mt-1">
          Playwright-basierter 3-Phasen-Test: Vor Interaktion, nach Ablehnen, nach Akzeptieren.
          Prueft Dark Patterns, Pre-Consent-Cookies, Farbkontrast, Klick-Paritaet und 20+ weitere Kriterien.
        </p>
      </div>

      <form onSubmit={handleScan} className="flex gap-3">
        <input
          type="url" value={url} onChange={e => setUrl(e.target.value)}
          placeholder="https://www.example.com/"
          className="flex-1 px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent text-sm"
          disabled={loading} required
        />
        <button type="submit" disabled={loading || !url.trim()}
          className="px-6 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50 transition-colors flex items-center gap-2 text-sm font-medium">
          {loading ? (
            <><svg className="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24">
              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
            </svg>Pruefe...</>
          ) : 'Banner pruefen'}
        </button>
      </form>

      {progress && (
        <div className="bg-purple-50 border border-purple-200 rounded-lg p-4 text-sm text-purple-700 flex items-center gap-3">
          <svg className="animate-spin w-5 h-5 text-purple-500 shrink-0" fill="none" viewBox="0 0 24 24">
            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
          </svg>
          {progress}
        </div>
      )}

      {error && (
        <div className="bg-red-50 border border-red-200 rounded-lg p-4 text-sm text-red-700">{error}</div>
      )}

      {result && (
        <div className="bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden">
          {/* Header */}
          <div className="px-6 py-4 bg-gray-50 border-b border-gray-200">
            <div className="flex items-center justify-between">
              <div>
                <div className="flex items-center gap-3">
                  <span className={`text-2xl`}>
                    {result.banner_detected ? '🛡️' : '⚠️'}
                  </span>
                  <div>
                    <h3 className="text-sm font-semibold text-gray-900">
                      {result.banner_detected
                        ? `Banner erkannt: ${result.banner_provider || 'Unbekannter Anbieter'}`
                        : 'Kein Cookie-Banner erkannt'}
                    </h3>
                    {total > 0 && (
                      <p className="text-xs text-gray-500 mt-0.5">
                        {passes.length}/{total} Pruefungen bestanden
                      </p>
                    )}
                  </div>
                </div>
              </div>
              {total > 0 && (
                <div className="flex items-center gap-2">
                  <div className="w-24 h-2 bg-gray-200 rounded-full overflow-hidden">
                    <div
                      className={`h-full rounded-full ${violations.length === 0 ? 'bg-green-500' : violations.length <= 3 ? 'bg-yellow-500' : 'bg-red-500'}`}
                      style={{ width: `${Math.round(passes.length / total * 100)}%` }}
                    />
                  </div>
                  <span className={`text-xs font-medium ${violations.length === 0 ? 'text-green-700' : 'text-red-700'}`}>
                    {Math.round(passes.length / total * 100)}%
                  </span>
                </div>
              )}
            </div>
          </div>

          {/* 3-Phase Summary */}
          {result.phases && (
            <div className="px-6 py-3 border-b border-gray-100 grid grid-cols-3 gap-4">
              {[
                { label: 'Vor Consent', data: result.phases.before_consent, icon: '🔒' },
                { label: 'Nach Ablehnen', data: result.phases.after_reject, icon: '🚫' },
                { label: 'Nach Akzeptieren', data: result.phases.after_accept, icon: '✅' },
              ].map(phase => (
                <div key={phase.label} className="text-center">
                  <div className="text-lg">{phase.icon}</div>
                  <div className="text-xs font-medium text-gray-700">{phase.label}</div>
                  <div className="text-xs text-gray-500 mt-1">
                    {phase.data.cookies} Cookies, {phase.data.scripts} Scripts
                  </div>
                  {phase.data.violations.length > 0 && (
                    <div className="text-xs text-red-600 font-medium">
                      {phase.data.violations.length} Verstoesse
                    </div>
                  )}
                </div>
              ))}
            </div>
          )}

          {/* Violations */}
          {violations.length > 0 && (
            <div className="px-6 py-4">
              <h4 className="text-xs font-semibold text-red-700 uppercase tracking-wide mb-2">
                Verstoesse ({violations.length})
              </h4>
              <div className="space-y-2">
                {violations.map((v, i) => (
                  <div key={i} className="flex items-start gap-2">
                    <svg className="w-4 h-4 text-red-500 mt-0.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                    </svg>
                    <div>
                      <div className="text-sm text-red-700">{v.text}</div>
                      <div className="text-xs text-gray-400 mt-0.5">{v.code} | {v.severity}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}

          {/* Passes */}
          {passes.length > 0 && (
            <div className="px-6 py-4 border-t border-gray-100">
              <h4 className="text-xs font-semibold text-green-700 uppercase tracking-wide mb-2">
                Bestanden ({passes.length})
              </h4>
              <div className="space-y-1">
                {passes.map((p, i) => (
                  <div key={i} className="flex items-start gap-2">
                    <svg className="w-4 h-4 text-green-500 mt-0.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                    </svg>
                    <div className="text-sm text-gray-600">{p.text}</div>
                  </div>
                ))}
              </div>
            </div>
          )}

          {!result.banner_detected && violations.length === 0 && passes.length === 0 && (
            <div className="px-6 py-4 text-sm text-gray-500">
              Kein Cookie-Banner auf dieser Seite gefunden. Falls Cookies gesetzt werden, ist ein Banner nach §25 TDDDG Pflicht.
            </div>
          )}
        </div>
      )}
    </div>
  )
}