'use client';

import { Shell } from '@/components/Shell';
import { KpiCard } from '@/components/dashboard/KpiCard';
import { NextPublications } from '@/components/dashboard/NextPublications';
import { PerfChart } from '@/components/dashboard/PerfChart';
import { RecentContents } from '@/components/dashboard/RecentContents';
import { SuggestedTopics } from '@/components/dashboard/SuggestedTopics';
import { TokensWidget } from '@/components/dashboard/TokensWidget';
import { CURRENT_CLIENT, KPIS, formatNumber } from '@/lib/mock-data';
import { motion } from 'framer-motion';
import { BarChart2, CheckCircle, Eye, FileText, Sparkles } from 'lucide-react';
import Link from 'next/link';

const DATE_FR = new Date(2026, 3, 21).toLocaleDateString('fr-FR', {
  weekday: 'long',
  day: 'numeric',
  month: 'long',
  year: 'numeric',
});

const KPIS_CONFIG = [
  {
    label: 'Contenus générés',
    value: String(KPIS.contentsGenerated),
    delta: `+${KPIS.contentsGeneratedDelta} ce mois`,
    deltaPositive: true,
    icon: <FileText className="w-5 h-5" />,
  },
  {
    label: 'Taux de validation',
    value: `${Math.round(KPIS.validatedRate * 100)}%`,
    delta: `+${Math.round(KPIS.validatedRateDelta * 100)} pts`,
    deltaPositive: true,
    icon: <CheckCircle className="w-5 h-5" />,
  },
  {
    label: 'Score SEO moyen',
    value: String(KPIS.avgSeoScore),
    delta: `+${KPIS.avgSeoScoreDelta} pts`,
    deltaPositive: true,
    icon: <BarChart2 className="w-5 h-5" />,
  },
  {
    label: 'Impressions 30 j',
    value: formatNumber(KPIS.impressions30d),
    delta: `+${Math.round(KPIS.impressions30dDelta * 100)}%`,
    deltaPositive: true,
    icon: <Eye className="w-5 h-5" />,
  },
];

export default function DashboardPage() {
  return (
    <Shell>
      <div className="max-w-7xl mx-auto space-y-8">
        {/* Hero greeting */}
        <motion.div
          initial={{ opacity: 0, y: 12 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.4, ease: 'easeOut' }}
          className="flex flex-col sm:flex-row sm:items-center justify-between gap-4"
        >
          <div>
            <h1 className="text-2xl font-semibold tracking-tight">Bonjour, Adam</h1>
            <p className="text-[13px] text-text-dim mt-1 capitalize">{DATE_FR}</p>
            <p className="text-[12px] text-text-dimmer mt-0.5">
              {CURRENT_CLIENT.name} — {CURRENT_CLIENT.industry}
            </p>
          </div>

          <Link
            href="/atelier"
            className="group inline-flex items-center gap-2 px-4 py-2.5 rounded-xl text-[13px] font-medium text-white bg-gradient-to-r from-accent to-cyan-500 hover:from-accent hover:to-cyan-400 transition-all hover:scale-105 shadow-lg shadow-accent/20 self-start sm:self-auto"
          >
            <Sparkles className="w-4 h-4" />
            Générer un nouveau contenu
          </Link>
        </motion.div>

        {/* KPI grid */}
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
          {KPIS_CONFIG.map((kpi, i) => (
            <KpiCard key={kpi.label} {...kpi} index={i} />
          ))}
        </div>

        {/* Perf chart + Tokens */}
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
          <div className="lg:col-span-2">
            <PerfChart />
          </div>
          <div>
            <TokensWidget />
          </div>
        </div>

        {/* Recent contents + Next publications */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
          <RecentContents />
          <NextPublications />
        </div>

        {/* Suggested topics */}
        <SuggestedTopics />
      </div>
    </Shell>
  );
}