'use client'

import { useState, useEffect, useCallback } from 'react'

interface Variant {
  id: string
  variant_name: string
  variant_key: string
  traffic_percent: number
  is_control: boolean
  banner_title: string | null
  banner_description: string | null
  position: string | null
  primary_color: string | null
  is_active: boolean
}

interface VariantStat {
  variant_id: string
  variant_key: string
  variant_name: string
  traffic_percent: number
  is_control: boolean
  total: number
  accepted: number
  opt_in_rate: number
  is_winner?: boolean
  significance?: number
}

const API = '/api/sdk/v1/compliance/banner/ab'

export function ABTestPanel({ siteConfigId }: { siteConfigId?: string }) {
  const [variants, setVariants] = useState<Variant[]>([])
  const [stats, setStats] = useState<VariantStat[]>([])
  const [loading, setLoading] = useState(true)
  const [showCreate, setShowCreate] = useState(false)
  const [newVariant, setNewVariant] = useState({ variant_name: '', variant_key: 'B', traffic_percent: 50, banner_title: '', primary_color: '' })

  const scid = siteConfigId || ''

  const loadData = useCallback(async () => {
    if (!scid) { setLoading(false); return }
    setLoading(true)
    try {
      const [v, s] = await Promise.all([
        fetch(`${API}/${scid}/variants`).then(r => r.ok ? r.json() : []),
        fetch(`${API}/${scid}/stats`).then(r => r.ok ? r.json() : []),
      ])
      setVariants(v)
      setStats(s)
    } catch { /* ignore */ }
    setLoading(false)
  }, [scid])

  useEffect(() => { loadData() }, [loadData])

  const handleCreate = async () => {
    if (!scid || !newVariant.variant_name) return
    await fetch(`${API}/${scid}/variants`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(newVariant),
    })
    setShowCreate(false)
    setNewVariant({ variant_name: '', variant_key: 'B', traffic_percent: 50, banner_title: '', primary_color: '' })
    loadData()
  }

  const handleDelete = async (id: string) => {
    await fetch(`${API}/variants/${id}`, { method: 'DELETE' })
    loadData()
  }

  const handleTrafficChange = async (id: string, pct: number) => {
    await fetch(`${API}/variants/${id}`, {
      method: 'PUT',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ traffic_percent: pct }),
    })
    loadData()
  }

  if (!scid) {
    return <div className="text-center py-8 text-gray-400">Bitte waehlen Sie zuerst eine Site aus.</div>
  }

  if (loading) return <div className="text-center py-8 text-gray-400">Lade A/B-Test...</div>

  const maxRate = Math.max(...stats.map(s => s.opt_in_rate), 1)

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h3 className="font-semibold text-gray-900">A/B-Test Varianten</h3>
          <p className="text-xs text-gray-500 mt-1">Testen Sie verschiedene Banner-Konfigurationen um die Opt-In-Rate zu optimieren.</p>
        </div>
        <button onClick={() => setShowCreate(!showCreate)}
          className="px-4 py-2 text-sm bg-purple-600 text-white rounded-lg hover:bg-purple-700">
          + Variante erstellen
        </button>
      </div>

      {/* Create Form */}
      {showCreate && (
        <div className="bg-gray-50 border border-gray-200 rounded-xl p-4 space-y-3">
          <div className="grid grid-cols-2 gap-3">
            <input value={newVariant.variant_name} onChange={e => setNewVariant({ ...newVariant, variant_name: e.target.value })}
              placeholder="Name (z.B. Variante B)" className="px-3 py-2 text-sm border border-gray-200 rounded-lg" />
            <input value={newVariant.variant_key} onChange={e => setNewVariant({ ...newVariant, variant_key: e.target.value })}
              placeholder="Key (z.B. B)" className="px-3 py-2 text-sm border border-gray-200 rounded-lg" />
            <input value={newVariant.banner_title} onChange={e => setNewVariant({ ...newVariant, banner_title: e.target.value })}
              placeholder="Banner-Titel (Override)" className="px-3 py-2 text-sm border border-gray-200 rounded-lg" />
            <input value={newVariant.primary_color} onChange={e => setNewVariant({ ...newVariant, primary_color: e.target.value })}
              placeholder="Farbe (z.B. #22c55e)" type="color" className="px-3 py-2 h-10 text-sm border border-gray-200 rounded-lg" />
          </div>
          <div className="flex items-center gap-3">
            <label className="text-sm text-gray-600">Traffic:</label>
            <input type="range" min={5} max={95} value={newVariant.traffic_percent}
              onChange={e => setNewVariant({ ...newVariant, traffic_percent: parseInt(e.target.value) })}
              className="flex-1" />
            <span className="text-sm font-medium w-12 text-right">{newVariant.traffic_percent}%</span>
          </div>
          <div className="flex gap-2">
            <button onClick={handleCreate} className="px-4 py-2 text-sm bg-purple-600 text-white rounded-lg hover:bg-purple-700">Erstellen</button>
            <button onClick={() => setShowCreate(false)} className="px-4 py-2 text-sm text-gray-500 hover:bg-gray-100 rounded-lg">Abbrechen</button>
          </div>
        </div>
      )}

      {/* Variants + Stats */}
      {variants.length === 0 ? (
        <div className="text-center py-12 bg-white border border-gray-200 rounded-xl">
          <p className="text-gray-400">Kein A/B-Test aktiv.</p>
          <p className="text-xs text-gray-400 mt-1">Erstellen Sie mindestens 2 Varianten um einen Test zu starten.</p>
        </div>
      ) : (
        <div className="space-y-4">
          {/* Comparison Chart */}
          {stats.length > 0 && (
            <div className="bg-white border border-gray-200 rounded-xl p-6">
              <h4 className="font-medium text-gray-900 mb-4">Opt-In-Rate Vergleich</h4>
              <div className="space-y-3">
                {stats.map(s => (
                  <div key={s.variant_key} className="flex items-center gap-4">
                    <div className="w-24 text-sm text-gray-700 truncate">
                      {s.variant_name}
                      {s.is_control && <span className="ml-1 text-[10px] text-gray-400">(Kontrolle)</span>}
                    </div>
                    <div className="flex-1 h-8 bg-gray-100 rounded-lg overflow-hidden relative">
                      <div className={`h-full rounded-lg transition-all ${s.is_winner ? 'bg-green-500' : s.is_control ? 'bg-gray-400' : 'bg-purple-500'}`}
                        style={{ width: `${(s.opt_in_rate / maxRate) * 100}%` }} />
                      <span className="absolute inset-0 flex items-center px-3 text-xs font-medium text-gray-900">
                        {s.opt_in_rate}% ({s.accepted}/{s.total})
                      </span>
                    </div>
                    {s.is_winner && (
                      <span className="px-2 py-0.5 text-[10px] font-medium bg-green-100 text-green-700 rounded-full">
                        Gewinner ({s.significance}%)
                      </span>
                    )}
                  </div>
                ))}
              </div>
            </div>
          )}

          {/* Variant Cards */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            {variants.map(v => (
              <div key={v.id} className={`bg-white border rounded-xl p-4 ${v.is_control ? 'border-gray-300' : 'border-purple-200'}`}>
                <div className="flex items-center justify-between mb-3">
                  <div className="flex items-center gap-2">
                    <span className="font-medium text-sm text-gray-900">{v.variant_name}</span>
                    <span className="px-1.5 py-0.5 text-[10px] bg-gray-100 text-gray-600 rounded">{v.variant_key}</span>
                    {v.is_control && <span className="px-1.5 py-0.5 text-[10px] bg-blue-50 text-blue-600 rounded">Kontrolle</span>}
                  </div>
                  <button onClick={() => handleDelete(v.id)} className="text-xs text-red-500 hover:text-red-700">Loeschen</button>
                </div>
                <div className="flex items-center gap-3 mb-2">
                  <label className="text-xs text-gray-500">Traffic:</label>
                  <input type="range" min={5} max={95} value={v.traffic_percent}
                    onChange={e => handleTrafficChange(v.id, parseInt(e.target.value))}
                    className="flex-1 h-1" />
                  <span className="text-xs font-medium w-8 text-right">{v.traffic_percent}%</span>
                </div>
                {v.banner_title && <div className="text-xs text-gray-500">Titel: {v.banner_title}</div>}
                {v.primary_color && (
                  <div className="flex items-center gap-1 mt-1">
                    <div className="w-3 h-3 rounded-full border" style={{ backgroundColor: v.primary_color }} />
                    <span className="text-xs text-gray-500">{v.primary_color}</span>
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  )
}