import React from 'react';
import { 
  BarChart, 
  Bar, 
  XAxis, 
  YAxis, 
  CartesianGrid, 
  Tooltip, 
  ResponsiveContainer, 
  AreaChart, 
  Area,
  PieChart,
  Pie,
  Cell,
  Legend
} from 'recharts';
import { 
  FileText, 
  Download, 
  Filter, 
  TrendingUp, 
  TrendingDown, 
  Target,
  BarChart3,
  Calendar
} from 'lucide-react';
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';

const COLORS = ['#10b981', '#3b82f6', '#f59e0b', '#8b5cf6', '#ec4899'];

const data = [
  { name: 'Jan', receita: 45000, despesa: 32000, meta: 40000 },
  { name: 'Fev', receita: 52000, despesa: 35000, meta: 40000 },
  { name: 'Mar', receita: 48000, despesa: 38000, meta: 40000 },
  { name: 'Abr', receita: 61000, despesa: 42000, meta: 45000 },
  { name: 'Mai', receita: 55000, despesa: 44000, meta: 45000 },
  { name: 'Jun', receita: 67000, despesa: 40000, meta: 50000 },
];

const categoryData = [
  { name: 'Operacional', value: 45 },
  { name: 'Marketing', value: 20 },
  { name: 'RH', value: 25 },
  { name: 'Infra', value: 10 },
];

export const RelatoriosView = () => {
  return (
    <div className="space-y-8 animate-in fade-in slide-in-from-bottom-6 duration-700 relative">
      {/* Decorative Background Glow */}
      <div className="absolute top-0 right-1/4 w-[500px] h-[500px] bg-blue-500/5 rounded-full blur-[120px] pointer-events-none" />

      {/* Header with Actions */}
      <div className="flex flex-col md:flex-row md:items-center justify-between gap-6 pb-2 relative z-10">
        <div className="flex items-center gap-5">
           <div className="w-14 h-14 rounded-2xl bg-cyan-500/10 flex items-center justify-center border border-cyan-500/20 shadow-[0_0_20px_rgba(6,182,212,0.1)]">
              <BarChart3 className="w-7 h-7 text-cyan-500" />
           </div>
           <div>
              <h2 className="text-2xl font-black tracking-tight text-white uppercase">Relatórios e BI</h2>
              <p className="text-[10px] text-slate-500 font-black uppercase tracking-widest mt-1">Análise de performance e inteligência de dados</p>
           </div>
        </div>
        
        <div className="flex items-center gap-3">
           <Button variant="outline" className="rounded-xl font-black text-[10px] uppercase tracking-widest h-10 border-slate-700 bg-slate-900/50 text-slate-400 hover:text-white transition-all">
              <Filter className="w-3.5 h-3.5 mr-2" /> Personalizar
           </Button>
           <Button className="rounded-xl font-black text-[10px] uppercase tracking-widest h-10 bg-cyan-600 text-white shadow-lg shadow-cyan-500/20 hover:bg-cyan-700 transition-all active:scale-95">
              <Download className="w-3.5 h-3.5 mr-2" /> Exportar PDF
           </Button>
        </div>
      </div>

      {/* Main Analysis Chart */}
      <Card className="bg-[#1e293b] shadow-2xl overflow-hidden border border-slate-800 group relative z-10">
        <CardHeader className="p-8 border-b border-white/5 bg-slate-900/20 flex flex-col md:flex-row items-center justify-between gap-6">
           <div>
              <CardTitle className="text-[10px] font-black text-slate-500 uppercase tracking-[0.3em] mb-2">Visão Comparativa</CardTitle>
              <h3 className="text-xl font-black tracking-tight text-white">Recuperação e Expansão de Receita</h3>
           </div>
           <div className="flex items-center gap-8">
              <div className="flex items-center gap-2">
                 <div className="w-2.5 h-2.5 rounded-full bg-emerald-500" />
                 <span className="text-[10px] font-black text-slate-400 uppercase tracking-widest">Receita</span>
              </div>
              <div className="flex items-center gap-2">
                 <div className="w-2.5 h-2.5 rounded-full bg-rose-500" />
                 <span className="text-[10px] font-black text-slate-400 uppercase tracking-widest">Despesa</span>
              </div>
           </div>
        </CardHeader>
        <CardContent className="h-[450px] p-8 pt-12">
          <ResponsiveContainer width="100%" height="100%">
            <AreaChart data={data}>
              <defs>
                <linearGradient id="colorRec" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="5%" stopColor="#10b981" stopOpacity={0.3}/>
                  <stop offset="95%" stopColor="#10b981" stopOpacity={0}/>
                </linearGradient>
                <linearGradient id="colorDes" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="5%" stopColor="#f43f5e" stopOpacity={0.2}/>
                  <stop offset="95%" stopColor="#f43f5e" stopOpacity={0}/>
                </linearGradient>
              </defs>
              <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#334155" opacity={0.3} />
              <XAxis dataKey="name" axisLine={false} tickLine={false} tick={{fill: '#64748b', fontSize: 10, fontWeight: 'bold'}} dy={10} />
              <YAxis axisLine={false} tickLine={false} tick={{fill: '#64748b', fontSize: 10}} tickFormatter={(val) => `R$ ${val/1000}k`} />
              <Tooltip 
                contentStyle={{ backgroundColor: 'rgba(15, 23, 42, 0.95)', backdropFilter: 'blur(10px)', borderRadius: '16px', border: '1px solid rgba(51, 65, 85, 0.5)', boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.5)' }}
                itemStyle={{ fontSize: '12px', fontWeight: 'bold', color: '#fff' }}
              />
              <Area type="monotone" dataKey="receita" stroke="#10b981" strokeWidth={4} fillOpacity={1} fill="url(#colorRec)" />
              <Area type="monotone" dataKey="despesa" stroke="#f43f5e" strokeWidth={4} fillOpacity={1} fill="url(#colorDes)" />
            </AreaChart>
          </ResponsiveContainer>
        </CardContent>
      </Card>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 pb-20 relative z-10">
          <Card className="lg:col-span-2 bg-[#1e293b] border border-slate-800 shadow-2xl overflow-hidden">
             <CardHeader className="p-6 border-b border-white/5 bg-slate-900/20">
                 <CardTitle className="text-[10px] font-black uppercase tracking-[0.2em] text-slate-500">Distribuição de Custos por Centro de Custo</CardTitle>
             </CardHeader>
             <CardContent className="h-[320px] flex items-center justify-center p-6">
                <ResponsiveContainer width="100%" height="100%">
                   <PieChart>
                      <Pie
                         data={categoryData}
                         cx="50%"
                         cy="50%"
                         innerRadius={75}
                         outerRadius={105}
                         paddingAngle={10}
                         dataKey="value"
                         stroke="none"
                      >
                         {categoryData.map((entry, index) => (
                           <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                         ))}
                      </Pie>
                      <Tooltip 
                        contentStyle={{ backgroundColor: 'rgba(15, 23, 42, 0.95)', borderRadius: '12px', border: '1px solid rgba(51, 65, 85, 0.5)' }}
                        itemStyle={{ fontSize: '12px', color: '#fff' }}
                      />
                      <Legend verticalAlign="middle" align="right" layout="vertical" iconType="circle" formatter={(value) => <span className="text-[10px] font-black uppercase text-slate-400 ml-2">{value}</span>} />
                   </PieChart>
                </ResponsiveContainer>
             </CardContent>
          </Card>

          <div className="space-y-6">
              <Card className="bg-emerald-500/5 border border-emerald-500/20 shadow-none overflow-hidden group">
                  <CardContent className="p-7 flex items-center gap-5">
                      <div className="w-14 h-14 rounded-2xl bg-emerald-500 flex items-center justify-center text-white scale-110 shadow-[0_0_20px_rgba(16,185,129,0.2)]">
                          <Target className="w-7 h-7" />
                      </div>
                      <div>
                          <p className="text-[9px] font-black uppercase tracking-widest text-emerald-500/70">Performance Trimestral</p>
                          <h4 className="text-2xl font-black text-emerald-400">+8.4%</h4>
                          <p className="text-[10px] font-bold text-slate-500 mt-0.5">Acima da meta projetada</p>
                      </div>
                  </CardContent>
              </Card>

               <Card className="bg-cyan-500/5 border border-cyan-500/20 shadow-none overflow-hidden group">
                  <CardContent className="p-7 flex items-center gap-5">
                      <div className="w-14 h-14 rounded-2xl bg-cyan-600 flex items-center justify-center text-white scale-110 shadow-[0_0_20px_rgba(8,145,178,0.2)]">
                          <TrendingUp className="w-7 h-7" />
                      </div>
                      <div>
                          <p className="text-[9px] font-black uppercase tracking-widest text-cyan-500/70">Margem de Lucro Bruto</p>
                          <h4 className="text-2xl font-black text-cyan-400">32.2%</h4>
                          <p className="text-[10px] font-bold text-slate-500 mt-0.5">Crescimento constante YoY</p>
                      </div>
                  </CardContent>
              </Card>

              <div className="bg-slate-900/40 p-5 rounded-2xl border border-dashed border-slate-800 flex items-center justify-between text-slate-600">
                  <span className="text-[10px] font-black uppercase tracking-widest">Snapshot: Hoje, 14:32</span>
                  <Calendar className="w-4 h-4" />
              </div>
          </div>
      </div>
    </div>
  );
};
