import { useState, useEffect, useCallback } from 'react'
import { motion } from 'framer-motion'
import { Link } from 'react-router-dom'
import {
  BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend,
  PieChart, Pie, Cell,
} from 'recharts'
import {
  Zap,
  RefreshCw,
  ArrowLeft,
  TrendingUp,
  TrendingDown,
  DollarSign,
  Receipt,
  PiggyBank,
  Activity,
  LayoutDashboard,
} from 'lucide-react'

interface FinancialData {
  vendas_mes: number
  vendas_ano: number
  despesas_mes: number
  despesas_ano: number
  lucro_mes: number
  lucro_ano: number
  categorias: { name: string; value: number }[]
  evolucao: { mes: string; receita: number; despesa: number }[]
}

const containerVariants = {
  hidden: { opacity: 0 },
  show: { opacity: 1, transition: { staggerChildren: 0.05 } }
}

const itemVariants = {
  hidden: { opacity: 0, y: 20 },
  show: { opacity: 1, y: 0 }
}

const PIE_COLORS = [
  '#10b981', '#8b5cf6', '#f59e0b', '#3b82f6', '#ef4444',
  '#06b6d4', '#ec4899', '#84cc16', '#f97316', '#6366f1',
  '#14b8a6', '#e879f9', '#a3e635', '#fb923c', '#818cf8',
]

const formatEUR = (v: number) => `${v.toLocaleString('pt-PT', { minimumFractionDigits: 0, maximumFractionDigits: 0 })}€`

const formatMesLabel = (mes: string) => {
  const [, m] = mes.split('-')
  const nomes = ['', 'Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez']
  return nomes[parseInt(m)] || mes
}

const StatCard = ({ label, value, icon: Icon, color, sub }: {
  label: string; value: string; icon: React.ElementType; color: string; sub?: string
}) => (
  <motion.div variants={itemVariants} className="glass-card p-6">
    <div className="flex items-center justify-between mb-3">
      <span className="text-sm text-zinc-400">{label}</span>
      <div className={`w-10 h-10 rounded-xl ${color} flex items-center justify-center`}>
        <Icon className="w-5 h-5 text-white" />
      </div>
    </div>
    <div className="text-3xl font-bold text-white">{value}</div>
    {sub && <div className="text-xs text-zinc-500 mt-1">{sub}</div>}
  </motion.div>
)

const CustomTooltip = ({ active, payload, label }: any) => {
  if (!active || !payload?.length) return null
  return (
    <div className="bg-zinc-900 border border-white/10 rounded-xl px-4 py-3 shadow-xl">
      <p className="text-sm font-medium text-white mb-1">{label}</p>
      {payload.map((p: any, i: number) => (
        <p key={i} className="text-xs" style={{ color: p.color }}>
          {p.name}: {formatEUR(p.value)}
        </p>
      ))}
    </div>
  )
}

export default function Financial() {
  const [data, setData] = useState<FinancialData | null>(null)
  const [loading, setLoading] = useState(true)
  const [refreshing, setRefreshing] = useState(false)

  const fetchData = useCallback(async () => {
    setRefreshing(true)
    try {
      const response = await fetch('/api/financial')
      if (!response.ok) throw new Error('Failed')
      const json = await response.json()
      setData(json)
    } catch {
      console.error('Failed to fetch financial data')
    } finally {
      setLoading(false)
      setRefreshing(false)
    }
  }, [])

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

  if (loading) {
    return (
      <div className="min-h-screen bg-mesh flex items-center justify-center">
        <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="text-center">
          <DollarSign className="w-12 h-12 text-brand-400 mx-auto mb-4 animate-pulse" />
          <p className="text-zinc-400">A carregar dados financeiros...</p>
        </motion.div>
      </div>
    )
  }

  if (!data) return null

  const lucroColor = data.lucro_ano >= 0 ? 'text-emerald-400 bg-emerald-500/20' : 'text-red-400 bg-red-500/20'
  const lucroLabel = data.lucro_ano >= 0 ? 'Lucro' : 'Prejuizo'

  // Format evolution data for chart
  const chartData = data.evolucao.map(e => ({
    mes: formatMesLabel(e.mes),
    Receita: e.receita,
    Despesa: e.despesa,
  }))

  return (
    <div className="min-h-screen bg-mesh">
      <div className="bg-grid min-h-screen">
        {/* Header */}
        <header className="sticky top-0 z-50 border-b border-white/5 bg-[#0a0a0f]/90 backdrop-blur-2xl">
          <div className="max-w-[1600px] mx-auto px-6 lg:px-8 py-4">
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-4">
                <motion.div
                  whileHover={{ scale: 1.05 }}
                  className="w-11 h-11 rounded-xl bg-gradient-to-br from-brand-500 to-violet-600 flex items-center justify-center shadow-lg shadow-brand-500/30"
                >
                  <Zap className="w-6 h-6 text-white" />
                </motion.div>
                <div>
                  <h1 className="text-xl font-bold text-white tracking-tight">Financeiro</h1>
                  <p className="text-xs text-zinc-500">Vendas e Despesas {new Date().getFullYear()}</p>
                </div>
              </div>

              <div className="flex items-center gap-4">
                <span className={`px-4 py-2 rounded-full text-sm font-semibold ${lucroColor}`}>
                  {lucroLabel}: {formatEUR(Math.abs(data.lucro_ano))}
                </span>
                <motion.button
                  whileHover={{ scale: 1.05 }}
                  whileTap={{ scale: 0.95 }}
                  onClick={fetchData}
                  disabled={refreshing}
                  className="p-2.5 rounded-xl bg-white/5 hover:bg-white/10 border border-white/10 transition-all"
                >
                  <RefreshCw className={`w-5 h-5 text-zinc-400 ${refreshing ? 'animate-spin' : ''}`} />
                </motion.button>
                <Link
                  to="/monitor"
                  className="hidden md:flex items-center gap-2 px-4 py-2 rounded-xl bg-white/5 hover:bg-white/10 text-zinc-400 hover:text-white transition-all text-sm"
                >
                  <Activity className="w-4 h-4" />
                  Monitor
                </Link>
                <Link
                  to="/"
                  className="flex items-center gap-2 px-4 py-2 rounded-xl bg-white/5 hover:bg-white/10 text-zinc-400 hover:text-white transition-all text-sm"
                >
                  <ArrowLeft className="w-4 h-4" />
                  <span className="hidden md:inline">Dashboard</span>
                </Link>
              </div>
            </div>
          </div>
        </header>

        {/* Main Content */}
        <main className="max-w-[1600px] mx-auto px-6 lg:px-8 py-8">
          <motion.div variants={containerVariants} initial="hidden" animate="show">
            {/* Summary Cards */}
            <div className="grid grid-cols-2 lg:grid-cols-4 gap-5 mb-8">
              <StatCard
                label="Vendas Mes"
                value={formatEUR(data.vendas_mes)}
                icon={TrendingUp}
                color="bg-emerald-500/20"
                sub={`Acumulado: ${formatEUR(data.vendas_ano)}`}
              />
              <StatCard
                label="Vendas Ano"
                value={formatEUR(data.vendas_ano)}
                icon={DollarSign}
                color="bg-emerald-600/20"
              />
              <StatCard
                label="Despesas Mes"
                value={formatEUR(data.despesas_mes)}
                icon={Receipt}
                color="bg-red-500/20"
                sub={`Acumulado: ${formatEUR(data.despesas_ano)}`}
              />
              <StatCard
                label="Despesas Ano"
                value={formatEUR(data.despesas_ano)}
                icon={TrendingDown}
                color="bg-red-600/20"
              />
            </div>

            {/* Lucro cards */}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-5 mb-8">
              <motion.div variants={itemVariants} className="glass-card p-6">
                <div className="flex items-center gap-3 mb-2">
                  <PiggyBank className={`w-6 h-6 ${data.lucro_mes >= 0 ? 'text-emerald-400' : 'text-red-400'}`} />
                  <span className="text-sm text-zinc-400">Resultado Mensal</span>
                </div>
                <div className={`text-4xl font-bold ${data.lucro_mes >= 0 ? 'text-emerald-400' : 'text-red-400'}`}>
                  {data.lucro_mes >= 0 ? '+' : ''}{formatEUR(data.lucro_mes)}
                </div>
              </motion.div>
              <motion.div variants={itemVariants} className="glass-card p-6">
                <div className="flex items-center gap-3 mb-2">
                  <PiggyBank className={`w-6 h-6 ${data.lucro_ano >= 0 ? 'text-emerald-400' : 'text-red-400'}`} />
                  <span className="text-sm text-zinc-400">Resultado Anual</span>
                </div>
                <div className={`text-4xl font-bold ${data.lucro_ano >= 0 ? 'text-emerald-400' : 'text-red-400'}`}>
                  {data.lucro_ano >= 0 ? '+' : ''}{formatEUR(data.lucro_ano)}
                </div>
              </motion.div>
            </div>

            {/* Charts */}
            <div className="grid grid-cols-1 lg:grid-cols-3 gap-5">
              {/* Bar Chart - Monthly Evolution */}
              <motion.div variants={itemVariants} className="glass-card p-6 lg:col-span-2">
                <h3 className="text-sm font-semibold text-white mb-6 uppercase tracking-wide flex items-center gap-2">
                  <LayoutDashboard className="w-4 h-4 text-brand-400" />
                  Evolucao Mensal
                </h3>
                <div className="h-[340px]">
                  <ResponsiveContainer width="100%" height="100%">
                    <BarChart data={chartData} margin={{ top: 5, right: 10, left: 0, bottom: 5 }}>
                      <CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.05)" />
                      <XAxis dataKey="mes" tick={{ fill: '#71717a', fontSize: 12 }} axisLine={{ stroke: 'rgba(255,255,255,0.1)' }} />
                      <YAxis tick={{ fill: '#71717a', fontSize: 12 }} axisLine={{ stroke: 'rgba(255,255,255,0.1)' }} tickFormatter={(v) => `${v}€`} />
                      <Tooltip content={<CustomTooltip />} />
                      <Legend wrapperStyle={{ fontSize: 12, color: '#a1a1aa' }} />
                      <Bar dataKey="Receita" fill="#10b981" radius={[4, 4, 0, 0]} />
                      <Bar dataKey="Despesa" fill="#ef4444" radius={[4, 4, 0, 0]} />
                    </BarChart>
                  </ResponsiveContainer>
                </div>
              </motion.div>

              {/* Pie Chart - Expense Distribution */}
              <motion.div variants={itemVariants} className="glass-card p-6">
                <h3 className="text-sm font-semibold text-white mb-6 uppercase tracking-wide flex items-center gap-2">
                  <Receipt className="w-4 h-4 text-brand-400" />
                  Despesas por Categoria
                </h3>
                <div className="h-[240px]">
                  <ResponsiveContainer width="100%" height="100%">
                    <PieChart>
                      <Pie
                        data={data.categorias.slice(0, 10)}
                        cx="50%"
                        cy="50%"
                        innerRadius={50}
                        outerRadius={90}
                        dataKey="value"
                        stroke="none"
                      >
                        {data.categorias.slice(0, 10).map((_, i) => (
                          <Cell key={i} fill={PIE_COLORS[i % PIE_COLORS.length]} />
                        ))}
                      </Pie>
                      <Tooltip
                        formatter={(value: number | undefined) => formatEUR(value || 0)}
                        contentStyle={{ background: '#18181b', border: '1px solid rgba(255,255,255,0.1)', borderRadius: 12, fontSize: 12 }}
                        itemStyle={{ color: '#e4e4e7' }}
                      />
                    </PieChart>
                  </ResponsiveContainer>
                </div>
                {/* Legend */}
                <div className="space-y-1.5 mt-2 max-h-[160px] overflow-y-auto scrollbar-thin">
                  {data.categorias.slice(0, 10).map((cat, i) => (
                    <div key={i} className="flex items-center justify-between text-xs">
                      <div className="flex items-center gap-2 min-w-0">
                        <div className="w-2.5 h-2.5 rounded-full flex-shrink-0" style={{ background: PIE_COLORS[i % PIE_COLORS.length] }} />
                        <span className="text-zinc-400 truncate">{cat.name}</span>
                      </div>
                      <span className="text-white font-medium ml-2">{formatEUR(cat.value)}</span>
                    </div>
                  ))}
                </div>
              </motion.div>
            </div>
          </motion.div>
        </main>
      </div>
    </div>
  )
}