import { useState, useEffect } from 'react'
import { motion } from 'framer-motion'
import {
  AlertTriangle,
  CheckCircle2,
  Clock,
  TrendingUp,
  Zap,
  RefreshCw,
  AlertCircle,
} from 'lucide-react'

interface Evaluation {
  id: number
  source: string
  entity_id: string
  result_real: string
  result_nominal: string
  confidence: number
  evaluated_at: number
  category: string
  judge_method: string
}

interface DivergenceStats {
  total_divergences: number
  by_category: Record<string, number>
  by_judge: Record<string, number>
  recent_24h: number
  high_confidence: number
}

interface DivergenceData {
  divergences: Evaluation[]
  stats: DivergenceStats
  generated_at: string
}

const containerVariants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: { staggerChildren: 0.1 },
  },
}

const itemVariants = {
  hidden: { opacity: 0, y: 20 },
  visible: {
    opacity: 1,
    y: 0,
    transition: { duration: 0.4 },
  },
}

const StatusBadge = ({ status }: { status: string }) => {
  const styles: Record<string, { bg: string; text: string; icon: React.ReactNode }> = {
    'automation-liveness': {
      bg: 'bg-red-500/10',
      text: 'text-red-400',
      icon: <AlertTriangle className="w-4 h-4" />,
    },
    'automation-failure': {
      bg: 'bg-orange-500/10',
      text: 'text-orange-400',
      icon: <AlertCircle className="w-4 h-4" />,
    },
  }

  const style = styles[status] || styles['automation-failure']

  return (
    <div className={`flex items-center gap-2 px-3 py-1 rounded-full ${style.bg} text-sm ${style.text}`}>
      {style.icon}
      {status.replace('-', ' ')}
    </div>
  )
}

const StatCard = ({
  label,
  value,
  icon: Icon,
  color = 'text-blue-400',
}: {
  label: string
  value: number | string
  icon: React.ElementType
  color?: string
}) => (
  <motion.div
    variants={itemVariants}
    className="glass-card p-4 rounded-xl flex items-center gap-4"
  >
    <div className={`${color} p-3 rounded-lg bg-white/5`}>
      <Icon className="w-6 h-6" />
    </div>
    <div>
      <p className="text-sm text-white/60">{label}</p>
      <p className="text-2xl font-bold text-white">{value}</p>
    </div>
  </motion.div>
)

const DivergenceRow = ({ div }: { div: Evaluation }) => {
  const timestamp = new Date(div.evaluated_at * 1000).toLocaleString('pt-PT')
  const confidenceColor = div.confidence >= 0.95 ? 'bg-green-500' : div.confidence >= 0.9 ? 'bg-yellow-500' : 'bg-orange-500'

  return (
    <motion.tr
      variants={itemVariants}
      className="border-b border-white/10 hover:bg-white/[0.03] transition-colors"
    >
      <td className="px-4 py-3 text-sm text-white/80 font-mono">{div.id}</td>
      <td className="px-4 py-3 text-sm">
        <code className="bg-white/5 px-2 py-1 rounded text-white/90">{div.entity_id}</code>
      </td>
      <td className="px-4 py-3 text-sm">
        <StatusBadge status={div.category} />
      </td>
      <td className="px-4 py-3 text-sm">
        <span className="text-red-400">{div.result_real}</span>
      </td>
      <td className="px-4 py-3 text-sm text-white/60">{div.result_nominal}</td>
      <td className="px-4 py-3 text-sm">
        <div className="flex items-center gap-2">
          <div className={`w-2 h-2 rounded-full ${confidenceColor}`} />
          <span className="text-white/80">{(div.confidence * 100).toFixed(0)}%</span>
        </div>
      </td>
      <td className="px-4 py-3 text-xs text-white/40">{timestamp}</td>
    </motion.tr>
  )
}

export default function StackObserver() {
  const [data, setData] = useState<DivergenceData | null>(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [lastUpdate, setLastUpdate] = useState<Date | null>(null)

  const fetchData = async () => {
    try {
      setLoading(true)
      setError(null)
      const response = await fetch('/api/stack-observer')
      if (!response.ok) throw new Error(`API error: ${response.status}`)
      const result = await response.json() as DivergenceData
      setData(result)
      setLastUpdate(new Date())
    } catch (err: unknown) {
      const message = err instanceof Error ? err.message : 'Failed to fetch divergences'
      setError(message)
      console.error('Stack Observer error:', err)
    } finally {
      setLoading(false)
    }
  }

  useEffect(() => {
    fetchData()
    // Refresh every 30 seconds
    const interval = setInterval(fetchData, 30000)
    return () => clearInterval(interval)
  }, [])

  const refreshTime = lastUpdate
    ? lastUpdate.toLocaleTimeString('pt-PT', { hour: '2-digit', minute: '2-digit', second: '2-digit' })
    : 'nunca'

  return (
    <motion.div
      variants={containerVariants}
      initial="hidden"
      animate="visible"
      className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 p-6"
    >
      {/* Header */}
      <motion.div variants={itemVariants} className="mb-8">
        <div className="flex items-center justify-between mb-6">
          <div className="flex items-center gap-3">
            <div className="p-3 rounded-lg bg-red-500/10">
              <Zap className="w-6 h-6 text-red-400" />
            </div>
            <div>
              <h1 className="text-3xl font-bold text-white">Stack Observer</h1>
              <p className="text-white/60">Monitorização de divergências de automações</p>
            </div>
          </div>
          <button
            onClick={fetchData}
            disabled={loading}
            className="flex items-center gap-2 px-4 py-2 bg-white/10 hover:bg-white/20 rounded-lg transition-colors disabled:opacity-50"
          >
            <RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
            Actualizar
          </button>
        </div>
        <p className="text-sm text-white/40">
          Última actualização: {refreshTime} • Auto-refresh a cada 30s
        </p>
      </motion.div>

      {error && (
        <motion.div
          variants={itemVariants}
          className="mb-6 p-4 bg-red-500/10 border border-red-500/20 rounded-lg text-red-400 flex items-center gap-3"
        >
          <AlertCircle className="w-5 h-5 flex-shrink-0" />
          {error}
        </motion.div>
      )}

      {loading && !data ? (
        <motion.div variants={itemVariants} className="text-center py-12">
          <div className="inline-block">
            <div className="animate-spin">
              <Zap className="w-8 h-8 text-blue-400" />
            </div>
          </div>
          <p className="mt-4 text-white/60">Carregando divergências...</p>
        </motion.div>
      ) : data ? (
        <>
          {/* Stats Grid */}
          <motion.div variants={containerVariants} className="grid grid-cols-1 md:grid-cols-5 gap-4 mb-8">
            <StatCard
              label="Total Divergências"
              value={data.stats.total_divergences}
              icon={AlertTriangle}
              color="text-red-400"
            />
            <StatCard
              label="Últimas 24h"
              value={data.stats.recent_24h}
              icon={TrendingUp}
              color="text-orange-400"
            />
            <StatCard
              label="Alta Confiança (>90%)"
              value={data.stats.high_confidence}
              icon={CheckCircle2}
              color="text-yellow-400"
            />
            <StatCard
              label="Por Método"
              value={Object.keys(data.stats.by_judge).length}
              icon={Zap}
              color="text-blue-400"
            />
            <StatCard
              label="Por Categoria"
              value={Object.keys(data.stats.by_category).length}
              icon={Clock}
              color="text-purple-400"
            />
          </motion.div>

          {/* Divergences Table */}
          <motion.div variants={itemVariants} className="glass-card rounded-lg overflow-hidden">
            <div className="px-6 py-4 border-b border-white/10">
              <h2 className="text-xl font-bold text-white">Divergências Detectadas</h2>
            </div>

            {data.divergences.length === 0 ? (
              <div className="px-6 py-12 text-center">
                <CheckCircle2 className="w-12 h-12 text-green-400 mx-auto mb-4 opacity-60" />
                <p className="text-white/60">Nenhuma divergência detectada</p>
              </div>
            ) : (
              <div className="overflow-x-auto">
                <table className="w-full">
                  <thead className="bg-white/5 border-b border-white/10">
                    <tr>
                      <th className="px-4 py-3 text-left text-xs font-semibold text-white/60">ID</th>
                      <th className="px-4 py-3 text-left text-xs font-semibold text-white/60">Entidade</th>
                      <th className="px-4 py-3 text-left text-xs font-semibold text-white/60">Categoria</th>
                      <th className="px-4 py-3 text-left text-xs font-semibold text-white/60">Resultado Real</th>
                      <th className="px-4 py-3 text-left text-xs font-semibold text-white/60">Resultado Nominal</th>
                      <th className="px-4 py-3 text-left text-xs font-semibold text-white/60">Confiança</th>
                      <th className="px-4 py-3 text-left text-xs font-semibold text-white/60">Timestamp</th>
                    </tr>
                  </thead>
                  <tbody>
                    <motion.td
                      variants={containerVariants}
                      initial="hidden"
                      animate="visible"
                    >
                      {data.divergences.slice(0, 20).map((div) => (
                        <DivergenceRow key={div.id} div={div} />
                      ))}
                    </motion.td>
                  </tbody>
                </table>
              </div>
            )}

            {data.divergences.length > 20 && (
              <div className="px-6 py-3 bg-white/5 border-t border-white/10 text-xs text-white/40">
                Mostrando 20 de {data.divergences.length} divergências
              </div>
            )}
          </motion.div>
        </>
      ) : null}
    </motion.div>
  )
}