
import React, { useState, useMemo } from 'react';
import { Helmet } from 'react-helmet';
import { useNavigate } from 'react-router-dom';
import { Ticket, Clock, CheckCircle, Activity, AlertTriangle } from 'lucide-react';
import KpiCard from '@/components/KpiCard';
import ChartCard from '@/components/ChartCard';
import KPIBar from '@/components/KPIBar';
import { mockStats, mockTickets, calculateKPIs } from '@/data/mockData';

const SupportDashboardPage = () => {
  const navigate = useNavigate();
  const [period, setPeriod] = useState('month');

  const kpis = useMemo(() => {
    const stats = calculateKPIs(mockTickets, period, { dateField: 'openDate', amountField: 'id' });
    const resolved = stats.items.filter(t => t.status === 'resolved');

    // Dashboard specific high-level KPIs
    return [
      { title: 'Tickets Ouverts', value: stats.filteredCount, change: '-2', trend: 'up', icon: Ticket, onClick: () => navigate('/tickets') },
      { title: 'SLA Respecté', value: '94%', change: '+1.5%', trend: 'up', icon: CheckCircle },
      { title: 'Temps Réponse', value: '1.5h', change: '-15m', trend: 'up', icon: Clock },
      { title: 'Satisfaction', value: '4.8/5', change: '+0.1', trend: 'up', icon: Activity },
      { title: 'Critiques', value: stats.items.filter(t => t.priority === 'critical').length, change: '', trend: 'neutral', icon: AlertTriangle },
    ];
  }, [period]);

  return (
    <>
      <Helmet>
        <title>Tableau de bord SAV - Bijou ERP</title>
      </Helmet>

      <div className="space-y-6">
        <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Pilotage SAV</h1>

        <KPIBar kpis={kpis} period={period} onPeriodChange={setPeriod} />

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          <ChartCard
            title="Tickets par Priorité"
            type="bar"
            data={mockStats.ticketPriority}
          />
          <ChartCard
            title="État du Parc"
            type="donut"
            data={mockStats.ticketStatus}
          />
          <div className="lg:col-span-2 bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-800 rounded-2xl p-6">
            <h3 className="text-lg font-semibold mb-4">Tickets Critiques (SLA &lt; 2h)</h3>
            <div className="space-y-3">
              <div className="flex justify-between items-center p-3 bg-red-50 dark:bg-red-900/20 rounded-xl border border-red-100">
                <div className="flex items-center gap-3">
                  <span className="w-2 h-2 bg-red-500 rounded-full animate-pulse" />
                  <span className="font-medium text-red-700 dark:text-red-400">TKT-1006 • Erreur 500 API</span>
                </div>
                <span className="text-sm font-bold text-red-600">15 min restantes</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default SupportDashboardPage;
