'use client'

import { useState, useEffect } from 'react'
import {
  XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Area, AreaChart, BarChart, Bar, Line,
} from 'recharts'
import { formatCurrency } from '@/lib/utils'
import { Users, FileText, TrendingUp, Euro, AlertCircle, FileSignature, Server } from 'lucide-react'

interface DashboardStats {
  yearlyCA: number
  monthlyRecurringRevenue: number
  monthlyRecurringCost: number
  monthlyMargin: number
  monthlyMarginPercent: number
  invoicedThisMonth: number
  costThisMonth: number
  salesCostThisMonth: number
  marginThisMonth: number
  activeContracts: number
  activeClients: number
  prospectsCount: number
  unpaidRevenue: number
  pendingProposalCount: number
  pendingProposalMonthly: number
  pausedCount: number
  pausedMonthly: number
  projectedMonthlyRecurring: number
  projectedOneTimeSetup: number
  projectedTotal: number
  serverMonthlyCost: number
  totalServerCostShared: number
  totalServerCostSharedRounded: number
  totalProposalValue: number
  topQuotes: { id: string; name: string; clientName: string; totalValue: number; status: string }[]
  topClients: { id: string; name: string; monthlyRecurring: number; oneTimeTotal: number; invoiceTotal: number; totalRevenue: number; contractCount: number }[]
}

interface ChartDataPoint {
  month: string
  monthLabel: string
  recurringRevenue: number
  recurringCost: number
  oneTimeRevenue: number
  oneTimeCost: number
  invoiceRevenue: number
  newClients: number
  revenue: number
  cost: number
  margin: number
}

export function DashboardContent({ onViewChange }: { onViewChange?: (view: string) => void }) {
  const [stats, setStats] = useState<DashboardStats | null>(null)
  const [chartData, setChartData] = useState<ChartDataPoint[]>([])
  const [loading, setLoading] = useState(true)

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

  const fetchDashboard = async () => {
    try {
      const res = await fetch('/api/dashboard')
      if (res.ok) {
        const data = await res.json()
        setStats(data.stats)
        setChartData(data.chartData || [])
      }
    } finally {
      setLoading(false)
    }
  }

  if (loading) {
    return (
      <div className="flex items-center justify-center h-64">
        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-600" />
      </div>
    )
  }

  if (!stats) {
    return (
      <div className="text-center py-12 text-slate-500">
        Erreur lors du chargement des données
      </div>
    )
  }

  const cards = [
    {
      label: 'CA annuel',
      value: formatCurrency(stats.yearlyCA),
      sub: `année ${new Date().getFullYear()}`,
      icon: Euro,
      color: 'text-primary-600 bg-primary-100 dark:bg-primary-900/30',
    },
    {
      label: 'Revenus récurrents/mois',
      value: formatCurrency(stats.monthlyRecurringRevenue),
      sub: `${stats.activeContracts} contrats actifs`,
      icon: Euro,
      color: 'text-green-600 bg-green-100 dark:bg-green-900/30',
    },
    {
      label: 'Coûts récurrents/mois',
      value: formatCurrency(stats.monthlyRecurringCost),
      sub: `Marge: ${formatCurrency(stats.monthlyMargin)} (${stats.monthlyMarginPercent.toFixed(1)}%)`,
      icon: TrendingUp,
      color: 'text-blue-600 bg-blue-100 dark:bg-blue-900/30',
    },
    {
      label: 'Facturé ce mois',
      value: formatCurrency(stats.invoicedThisMonth),
      sub: `Marge: ${formatCurrency(stats.invoicedThisMonth - stats.salesCostThisMonth)}`,
      icon: FileText,
      color: 'text-purple-600 bg-purple-100 dark:bg-purple-900/30',
    },
    {
      label: 'Non payé',
      value: formatCurrency(stats.unpaidRevenue),
      sub: `dont factures impayées incluses`,
      icon: AlertCircle,
      color: 'text-red-600 bg-red-100 dark:bg-red-900/30',
      onClick: () => onViewChange?.('invoices'),
    },
    {
      label: 'Propositions en cours',
      value: stats.pendingProposalCount.toString(),
      sub: `${formatCurrency(stats.pendingProposalMonthly)}/mois`,
      icon: FileSignature,
      color: 'text-purple-600 bg-purple-100 dark:bg-purple-900/30',
    },
    {
      label: 'Total devis en cours',
      value: formatCurrency(stats.totalProposalValue),
      sub: `setup + mensualité`,
      icon: FileText,
      color: 'text-indigo-600 bg-indigo-100 dark:bg-indigo-900/30',
    },
    {
      label: 'Clients actifs',
      value: stats.activeClients.toString(),
      sub: `${stats.prospectsCount} prospects`,
      icon: Users,
      color: 'text-amber-600 bg-amber-100 dark:bg-amber-900/30',
    },
    {
      label: 'Coûts serveurs/mois',
      value: formatCurrency(stats.serverMonthlyCost),
      sub: `Réparti: ${formatCurrency(stats.totalServerCostSharedRounded)}`,
      icon: Server,
      color: 'text-orange-600 bg-orange-100 dark:bg-orange-900/30',
    },
  ]

  return (
    <div className="space-y-6">
      <h2 className="text-2xl font-bold text-slate-900 dark:text-white">Tableau de bord</h2>

      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-4">
        {cards.map((card) => {
          const Tag = card.onClick ? 'button' : 'div'
          return (
            <Tag key={card.label} onClick={card.onClick}
              className={`bg-white dark:bg-slate-800 rounded-xl p-5 border border-slate-200 dark:border-slate-700 text-left ${card.onClick ? 'cursor-pointer hover:shadow-md transition-shadow' : ''}`}>
              <div className="flex items-start justify-between">
                <div>
                  <p className="text-sm text-slate-500 dark:text-slate-400">{card.label}</p>
                  <p className="text-2xl font-bold mt-1 text-slate-900 dark:text-white">{card.value}</p>
                  <p className="text-xs text-slate-400 mt-1">{card.sub}</p>
                </div>
                <div className={`p-2.5 rounded-lg ${card.color}`}>
                  <card.icon className="h-5 w-5" />
                </div>
              </div>
            </Tag>
          )
        })}
      </div>

      <div className="bg-white dark:bg-slate-800 rounded-xl p-5 border border-slate-200 dark:border-slate-700">
        <h3 className="text-sm font-semibold text-slate-500 uppercase mb-3">Projection récurrente</h3>
        <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
          <div>
            <p className="text-xs text-slate-500">Récurrent actuel</p>
            <p className="text-xl font-bold text-green-600">{formatCurrency(stats.monthlyRecurringRevenue)}</p>
          </div>
          <div>
            <p className="text-xs text-slate-500">En proposition</p>
            <p className="text-xl font-bold text-amber-600">{formatCurrency(stats.pendingProposalMonthly)}</p>
            <p className="text-xs text-slate-400">{stats.pendingProposalCount} contrat(s)</p>
          </div>
          <div>
            <p className="text-xs text-slate-500">En pause</p>
            <p className="text-xl font-bold text-blue-600">{formatCurrency(stats.pausedMonthly)}</p>
            <p className="text-xs text-slate-400">{stats.pausedCount} contrat(s)</p>
          </div>
        </div>
        <div className="mt-4 pt-4 border-t border-slate-200 dark:border-slate-700">
          <div className="flex items-center justify-between">
            <p className="text-sm font-medium text-slate-600 dark:text-slate-400">Projection totale</p>
            <p className="text-xl font-bold text-primary-600">{formatCurrency(stats.projectedMonthlyRecurring)}</p>
          </div>
        </div>
      </div>

      <div className="bg-white dark:bg-slate-800 rounded-xl p-5 border border-slate-200 dark:border-slate-700">
        <h3 className="text-lg font-semibold text-slate-900 dark:text-white mb-4">Revenus mensuels</h3>
        <div className="h-72">
          <ResponsiveContainer width="100%" height="100%">
            <AreaChart data={chartData}>
              <defs>
                <linearGradient id="revenueGrad" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="5%" stopColor="#0ea5e9" stopOpacity={0.25} />
                  <stop offset="95%" stopColor="#0ea5e9" stopOpacity={0} />
                </linearGradient>
                <linearGradient id="marginGrad" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="5%" stopColor="#10b981" stopOpacity={0.35} />
                  <stop offset="95%" stopColor="#10b981" stopOpacity={0} />
                </linearGradient>
              </defs>
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis dataKey="month" stroke="#94a3b8" fontSize={12} />
              <YAxis stroke="#94a3b8" fontSize={12} />
              <Tooltip
                contentStyle={{ backgroundColor: '#1e293b', border: 'none', borderRadius: '8px', color: '#f1f5f9' }}
                formatter={(value: number) => formatCurrency(value)}
              />
              <Area type="monotone" dataKey="revenue" stroke="#0ea5e9" fill="url(#revenueGrad)" name="Revenu" strokeWidth={1.5} />
              <Area type="monotone" dataKey="cost" stroke="#ef4444" fill="none" name="Coût" strokeWidth={1.5} strokeDasharray="4 3" />
              <Area type="monotone" dataKey="margin" stroke="#10b981" fill="url(#marginGrad)" name="Net (poche)" strokeWidth={2.5} />
            </AreaChart>
          </ResponsiveContainer>
        </div>
      </div>

      <div className="bg-white dark:bg-slate-800 rounded-xl p-5 border border-slate-200 dark:border-slate-700">
        <h3 className="text-lg font-semibold text-slate-900 dark:text-white mb-4">Nouveaux clients par mois</h3>
        <div className="h-48">
          <ResponsiveContainer width="100%" height="100%">
            <BarChart data={chartData}>
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis dataKey="month" stroke="#94a3b8" fontSize={12} />
              <YAxis stroke="#94a3b8" fontSize={12} allowDecimals={false} />
              <Tooltip
                contentStyle={{ backgroundColor: '#1e293b', border: 'none', borderRadius: '8px', color: '#f1f5f9' }}
                formatter={(value: number) => [value, 'Nouveaux clients']}
              />
              <Bar dataKey="newClients" fill="#f59e0b" name="Nouveaux clients" radius={[4, 4, 0, 0]} />
            </BarChart>
          </ResponsiveContainer>
        </div>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div className="bg-white dark:bg-slate-800 rounded-xl p-5 border border-slate-200 dark:border-slate-700">
          <h3 className="text-lg font-semibold text-slate-900 dark:text-white mb-4">Top Clients</h3>
          <div className="space-y-3">
            {stats.topClients.length === 0 ? (
              <p className="text-slate-500 text-sm">Aucun client pour le moment</p>
            ) : (
              stats.topClients.map((client, i) => (
                <div key={client.id} className="p-3 rounded-lg bg-slate-50 dark:bg-slate-700/50">
                  <div className="flex items-center justify-between mb-1">
                    <div className="flex items-center gap-2">
                      <span className="text-lg font-bold text-slate-400">{i + 1}</span>
                      <p className="font-medium text-slate-900 dark:text-white">{client.name}</p>
                    </div>
                    <span className="font-bold text-green-600 dark:text-green-400">{formatCurrency(client.totalRevenue)}</span>
                  </div>
                  <div className="flex gap-4 text-xs text-slate-500 ml-8">
                    {client.monthlyRecurring > 0 && <span>Récurrent: {formatCurrency(client.monthlyRecurring)}/mois</span>}
                    {client.oneTimeTotal > 0 && <span>Ventes: {formatCurrency(client.oneTimeTotal)}</span>}
                    {client.invoiceTotal > 0 && <span>Facturé: {formatCurrency(client.invoiceTotal)}</span>}
                    <span>{client.contractCount} contrat(s)</span>
                  </div>
                </div>
              ))
            )}
          </div>
        </div>

        <div className="bg-white dark:bg-slate-800 rounded-xl p-5 border border-slate-200 dark:border-slate-700">
          <h3 className="text-lg font-semibold text-slate-900 dark:text-white mb-4">Top Devis</h3>
          <div className="space-y-3">
            {stats.topQuotes.length === 0 ? (
              <p className="text-slate-500 text-sm">Aucun devis pour le moment</p>
            ) : (
              stats.topQuotes.map((q, i) => (
                <div key={q.id} className="flex items-center justify-between p-3 rounded-lg bg-slate-50 dark:bg-slate-700/50">
                  <div className="flex items-center gap-3">
                    <span className="text-lg font-bold text-slate-400 w-6">{i + 1}</span>
                    <div>
                      <p className="font-medium text-slate-900 dark:text-white">{q.name}</p>
                      <p className="text-xs text-slate-500">{q.clientName}</p>
                    </div>
                  </div>
                  <span className="font-semibold text-primary-600 dark:text-primary-400">
                    {formatCurrency(q.totalValue)}
                  </span>
                </div>
              ))
            )}
          </div>
        </div>
      </div>

      <div className="bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 overflow-hidden">
        <div className="px-5 py-4 border-b border-slate-200 dark:border-slate-700">
          <h3 className="text-lg font-semibold text-slate-900 dark:text-white">Détail mensuel</h3>
        </div>
        <div className="overflow-x-auto">
          <table className="w-full">
            <thead>
              <tr className="border-b border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800/50">
                <th className="text-left px-4 py-3 text-xs font-medium text-slate-500 uppercase">Mois</th>
                <th className="text-right px-4 py-3 text-xs font-medium text-slate-500 uppercase">Factures</th>
                <th className="text-right px-4 py-3 text-xs font-medium text-slate-500 uppercase">Ventes</th>
                <th className="text-right px-4 py-3 text-xs font-medium text-slate-500 uppercase">Total</th>
                <th className="text-right px-4 py-3 text-xs font-medium text-slate-500 uppercase">Coût</th>
                <th className="text-right px-4 py-3 text-xs font-medium text-slate-500 uppercase">Nvx clients</th>
                <th className="text-right px-4 py-3 text-xs font-medium text-slate-500 uppercase">Marge</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-slate-200 dark:divide-slate-700">
              {chartData.length === 0 ? (
                <tr><td colSpan={7} className="text-center py-8 text-slate-500">Aucune donnée</td></tr>
              ) : (
                [...chartData].reverse().map((row) => {
                  const totalFacturesVentes = row.invoiceRevenue + row.oneTimeRevenue
                  const marginPct = totalFacturesVentes > 0 ? (row.margin / totalFacturesVentes) * 100 : 0
                  return (
                    <tr key={row.month} className="hover:bg-slate-50 dark:hover:bg-slate-700/50">
                      <td className="px-4 py-3 text-sm font-medium text-slate-900 dark:text-white">{row.monthLabel}</td>
                      <td className="px-4 py-3 text-right text-sm text-purple-600">{formatCurrency(row.invoiceRevenue)}</td>
                      <td className="px-4 py-3 text-right text-sm text-blue-600">{formatCurrency(row.oneTimeRevenue)}</td>
                      <td className="px-4 py-3 text-right text-sm font-semibold text-slate-900 dark:text-white">{formatCurrency(totalFacturesVentes)}</td>
                      <td className="px-4 py-3 text-right text-sm text-red-500">{formatCurrency(row.cost)}</td>
                      <td className="px-4 py-3 text-right text-sm font-medium text-amber-600">{row.newClients}</td>
                      <td className="px-4 py-3 text-right">
                        <span className={`text-sm font-semibold ${row.margin >= 0 ? 'text-green-600' : 'text-red-500'}`}>
                          {formatCurrency(row.margin)}
                          <span className="text-xs ml-1">({marginPct.toFixed(0)}%)</span>
                        </span>
                      </td>
                    </tr>
                  )
                })
              )}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  )
}