import React from 'react';
import { motion } from 'framer-motion';
import { CreditCard, Calendar, ArrowUpRight, ArrowDownRight, TrendingUp, Activity } from 'lucide-react';
import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
import { useOutletContext, Link } from 'react-router-dom';

export const Dashboard = () => {
  const { stats, realChartData, invoices, demos } = useOutletContext<any>();

  return (
    <motion.div
      key="dashboard"
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: -20 }}
      className="space-y-8"
    >
      {/* Stat Cards */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
        {stats.map((stat: any, i: number) => (
          <div key={i} className="bg-white dark:bg-slate-900 p-6 rounded-3xl border border-slate-100 dark:border-slate-800 shadow-sm">
            <div className="flex items-center justify-between mb-4">
              <div className="w-12 h-12 bg-slate-50 dark:bg-slate-800 rounded-2xl flex items-center justify-center">
                <stat.icon className="w-6 h-6 text-blue-600" />
              </div>
              <div className={`flex items-center gap-1 text-xs font-bold ${stat.positive ? 'text-green-500' : 'text-red-500'}`}>
                {stat.positive ? <ArrowUpRight className="w-3 h-3" /> : <ArrowDownRight className="w-3 h-3" />}
                {stat.change}
              </div>
            </div>
            <div>
              <p className="text-xs font-bold text-slate-400 border border-slate-400 tracking-widest uppercase mb-1 px-2 w-fit">
                {stat.label}
              </p>
              <h3 className="text-2xl font-black text-slate-900 dark:text-white">{stat.value}</h3>
            </div>
          </div>
        ))}
      </div>

      {/* Charts Section */}
      <div className="grid lg:grid-cols-3 gap-8">
        <div className="lg:col-span-2 bg-white dark:bg-slate-900 p-8 rounded-[3rem] border border-slate-100 dark:border-slate-800 shadow-sm">
          <div className="flex items-center justify-between mb-8">
            <h3 className="text-xl font-black text-slate-900 dark:text-white">Performance des Revenus</h3>
            <div className="flex items-center gap-2 text-xs font-bold text-slate-400">
              <span className="w-3 h-3 bg-blue-600 rounded-full"></span> Revenus (€)
            </div>
          </div>
          <div className="h-[300px]">
            <ResponsiveContainer width="100%" height="100%">
              <AreaChart data={realChartData}>
                <defs>
                  <linearGradient id="colorRev" x1="0" y1="0" x2="0" y2="1">
                    <stop offset="5%" stopColor="#2563eb" stopOpacity={0.3}/>
                    <stop offset="95%" stopColor="#2563eb" stopOpacity={0}/>
                  </linearGradient>
                </defs>
                <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#e2e8f0" />
                <XAxis dataKey="name" axisLine={false} tickLine={false} tick={{ fontSize: 12, fontWeight: 600, fill: '#94a3b8' }} />
                <YAxis axisLine={false} tickLine={false} tick={{ fontSize: 12, fontWeight: 600, fill: '#94a3b8' }} />
                <Tooltip />
                <Area type="monotone" dataKey="revenue" stroke="#2563eb" fillOpacity={1} fill="url(#colorRev)" strokeWidth={4} />
              </AreaChart>
            </ResponsiveContainer>
          </div>
        </div>

        <div className="bg-slate-900 rounded-[3rem] p-8 text-white flex flex-col justify-between">
          <div>
            <div className="flex items-center gap-3 mb-4">
              <div className="w-10 h-10 bg-blue-500/20 rounded-xl flex items-center justify-center">
                <Activity className="w-5 h-5 text-blue-400" />
              </div>
              <h3 className="text-xl font-black tracking-tight">Actions Requises</h3>
            </div>
            <p className="text-slate-400 text-sm font-medium leading-relaxed">
              Voici un aperçu des éléments qui nécessitent votre attention aujourd'hui.
            </p>
          </div>
          
          <div className="mt-8 space-y-3">
            <div className="flex justify-between items-center bg-slate-800/50 p-4 rounded-2xl border border-slate-700/50">
              <span className="text-sm font-bold text-slate-300">Démos en attente</span>
              <span className="text-2xl font-black text-blue-400">{demos?.filter((d: any) => !d.status || d.status === 'pending').length || 0}</span>
            </div>
            <div className="flex justify-between items-center bg-slate-800/50 p-4 rounded-2xl border border-slate-700/50">
              <span className="text-sm font-bold text-slate-300">Factures impayées</span>
              <span className="text-2xl font-black text-rose-400">{invoices?.filter((i: any) => i.status !== 'paid').length || 0}</span>
            </div>
          </div>

          <Link to="/admin/demos" className="mt-8 w-full py-4 bg-blue-600 text-white rounded-2xl font-black flex items-center justify-center gap-2 hover:bg-blue-500 transition-colors shadow-lg shadow-blue-500/25">
            Gérer les demandes <ArrowUpRight className="w-5 h-5" />
          </Link>
        </div>
      </div>

      {/* Recent Activity Mini-lists */}
      <div className="grid md:grid-cols-2 gap-8">
        <div className="bg-white dark:bg-slate-900 p-8 rounded-[2.5rem] border border-slate-100 dark:border-slate-800 shadow-sm">
          <h3 className="text-lg font-black text-slate-900 dark:text-white mb-6">Derniers Factures</h3>
          <div className="space-y-4">
            {invoices?.slice(0, 5).map((invoice: any) => (
              <div key={invoice.id} className="flex items-center justify-between p-4 bg-slate-50 dark:bg-slate-800/50 rounded-2xl border border-slate-100 dark:border-slate-800">
                <div className="flex items-center gap-4">
                  <div className="w-10 h-10 bg-blue-100 dark:bg-blue-900/30 rounded-xl flex items-center justify-center">
                    <CreditCard className="w-5 h-5 text-blue-600" />
                  </div>
                  <div>
                    <p className="font-bold text-slate-900 dark:text-white text-sm">{invoice.id || 'N/A'}</p>
                    <p className="text-xs font-medium text-slate-500">{invoice.status} • {invoice.amount}€</p>
                  </div>
                </div>
                <div className="text-right">
                  <p className="text-xs font-bold text-green-500 uppercase">Paid</p>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div className="bg-white dark:bg-slate-900 p-8 rounded-[2.5rem] border border-slate-100 dark:border-slate-800 shadow-sm">
          <h3 className="text-lg font-black text-slate-900 dark:text-white mb-6">Démos en Attente</h3>
          <div className="space-y-4">
            {demos.filter((d: any) => !d.status || d.status === 'pending').slice(0, 5).map((demo: any) => (
              <div key={demo.id} className="flex items-center justify-between p-4 bg-slate-50 dark:bg-slate-800/50 rounded-2xl border border-slate-100 dark:border-slate-800">
                <div className="flex items-center gap-4">
                  <div className="w-10 h-10 bg-orange-100 dark:bg-orange-900/30 rounded-xl flex items-center justify-center">
                    <Calendar className="w-5 h-5 text-orange-600" />
                  </div>
                  <div>
                    <p className="font-bold text-slate-900 dark:text-white text-sm">{demo.companyName}</p>
                    <p className="text-xs font-medium text-slate-500">{demo.plan}</p>
                  </div>
                </div>
                <Link 
                  to="/admin/demos"
                  aria-label="Voir la démo"
                  className="p-2 text-slate-400 hover:text-blue-600 transition-colors"
                >
                  <ArrowUpRight className="w-5 h-5" />
                </Link>
              </div>
            ))}
          </div>
        </div>
      </div>
    </motion.div>
  );
};