/**
 * Dashboard Home Page
 *
 * Main dashboard with CSV Booking KPIs and carrier analytics
 */

'use client';

import { useQuery } from '@tanstack/react-query';
import { dashboardApi } from '@/lib/api';
import Link from 'next/link';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import {
  Package,
  PackageCheck,
  PackageX,
  Clock,
  Weight,
  TrendingUp,
  Plus,
  ArrowRight,
} from 'lucide-react';

export default function DashboardPage() {
  // Fetch CSV booking KPIs
  const { data: csvKpis, isLoading: csvKpisLoading } = useQuery({
    queryKey: ['dashboard', 'csv-booking-kpis'],
    queryFn: () => dashboardApi.getCsvBookingKPIs(),
  });

  // Fetch top carriers
  const { data: topCarriers, isLoading: carriersLoading } = useQuery({
    queryKey: ['dashboard', 'top-carriers'],
    queryFn: () => dashboardApi.getTopCarriers(),
  });

  return (
    <div className="space-y-8 p-8">
      {/* Header Section */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-4xl font-bold tracking-tight">Dashboard</h1>
          <p className="text-muted-foreground mt-2">
            Suivez vos bookings et vos performances
          </p>
        </div>

        {/* CTA Button */}
        <Link href="/dashboard/bookings/new">
          <Button size="lg" className="gap-2">
            <Plus className="h-5 w-5" />
            Nouveau Booking
          </Button>
        </Link>
      </div>

      {/* KPI Cards Grid */}
      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
        {/* Bookings Acceptés */}
        <Card className="hover:shadow-lg transition-shadow">
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Bookings Acceptés</CardTitle>
            <PackageCheck className="h-5 w-5 text-green-600" />
          </CardHeader>
          <CardContent>
            {csvKpisLoading ? (
              <div className="h-8 w-20 bg-gray-200 animate-pulse rounded" />
            ) : (
              <>
                <div className="text-3xl font-bold">{csvKpis?.totalAccepted || 0}</div>
                <p className="text-xs text-muted-foreground mt-2">
                  +{csvKpis?.acceptedThisMonth || 0} ce mois
                </p>
              </>
            )}
          </CardContent>
        </Card>

        {/* Bookings Refusés */}
        <Card className="hover:shadow-lg transition-shadow">
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Bookings Refusés</CardTitle>
            <PackageX className="h-5 w-5 text-red-600" />
          </CardHeader>
          <CardContent>
            {csvKpisLoading ? (
              <div className="h-8 w-20 bg-gray-200 animate-pulse rounded" />
            ) : (
              <>
                <div className="text-3xl font-bold">{csvKpis?.totalRejected || 0}</div>
                <p className="text-xs text-muted-foreground mt-2">
                  +{csvKpis?.rejectedThisMonth || 0} ce mois
                </p>
              </>
            )}
          </CardContent>
        </Card>

        {/* Bookings En Attente */}
        <Card className="hover:shadow-lg transition-shadow">
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">En Attente</CardTitle>
            <Clock className="h-5 w-5 text-yellow-600" />
          </CardHeader>
          <CardContent>
            {csvKpisLoading ? (
              <div className="h-8 w-20 bg-gray-200 animate-pulse rounded" />
            ) : (
              <>
                <div className="text-3xl font-bold">{csvKpis?.totalPending || 0}</div>
                <p className="text-xs text-muted-foreground mt-2">
                  {csvKpis?.acceptanceRate.toFixed(1)}% taux d'acceptation
                </p>
              </>
            )}
          </CardContent>
        </Card>

        {/* Poids Total Accepté */}
        <Card className="hover:shadow-lg transition-shadow">
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Poids Total Accepté</CardTitle>
            <Weight className="h-5 w-5 text-blue-600" />
          </CardHeader>
          <CardContent>
            {csvKpisLoading ? (
              <div className="h-8 w-20 bg-gray-200 animate-pulse rounded" />
            ) : (
              <>
                <div className="text-3xl font-bold">
                  {(csvKpis?.totalWeightAcceptedKG || 0).toLocaleString()}
                </div>
                <p className="text-xs text-muted-foreground mt-2">
                  KG ({(csvKpis?.totalVolumeAcceptedCBM || 0).toFixed(2)} CBM)
                </p>
              </>
            )}
          </CardContent>
        </Card>
      </div>

      {/* Stats Overview Card */}
      <Card>
        <CardHeader>
          <CardTitle>Vue d'ensemble</CardTitle>
          <CardDescription>Statistiques globales de vos bookings</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid gap-6 md:grid-cols-3">
            <div className="flex items-center space-x-4">
              <div className="flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
                <TrendingUp className="h-6 w-6 text-green-600" />
              </div>
              <div>
                <p className="text-sm font-medium text-muted-foreground">Taux d'acceptation</p>
                <p className="text-2xl font-bold">
                  {csvKpisLoading ? '--' : `${csvKpis?.acceptanceRate.toFixed(1)}%`}
                </p>
              </div>
            </div>

            <div className="flex items-center space-x-4">
              <div className="flex h-12 w-12 items-center justify-center rounded-full bg-blue-100">
                <Package className="h-6 w-6 text-blue-600" />
              </div>
              <div>
                <p className="text-sm font-medium text-muted-foreground">Total bookings</p>
                <p className="text-2xl font-bold">
                  {csvKpisLoading
                    ? '--'
                    : (csvKpis?.totalAccepted || 0) +
                      (csvKpis?.totalRejected || 0) +
                      (csvKpis?.totalPending || 0)}
                </p>
              </div>
            </div>

            <div className="flex items-center space-x-4">
              <div className="flex h-12 w-12 items-center justify-center rounded-full bg-purple-100">
                <Weight className="h-6 w-6 text-purple-600" />
              </div>
              <div>
                <p className="text-sm font-medium text-muted-foreground">Volume total accepté</p>
                <p className="text-2xl font-bold">
                  {csvKpisLoading ? '--' : `${(csvKpis?.totalVolumeAcceptedCBM || 0).toFixed(1)}`}
                  <span className="text-sm font-normal text-muted-foreground ml-1">CBM</span>
                </p>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Top Carriers Section */}
      <Card>
        <CardHeader>
          <div className="flex items-center justify-between">
            <div>
              <CardTitle>Meilleures Compagnies</CardTitle>
              <CardDescription>Top 5 des transporteurs avec qui vous avez le plus booké</CardDescription>
            </div>
            <Link href="/dashboard/bookings">
              <Button variant="ghost" size="sm" className="gap-2">
                Voir tous
                <ArrowRight className="h-4 w-4" />
              </Button>
            </Link>
          </div>
        </CardHeader>
        <CardContent>
          {carriersLoading ? (
            <div className="space-y-4">
              {Array.from({ length: 5 }).map((_, i) => (
                <div key={i} className="h-20 bg-gray-100 animate-pulse rounded" />
              ))}
            </div>
          ) : topCarriers && topCarriers.length > 0 ? (
            <div className="space-y-4">
              {topCarriers.map((carrier, index) => (
                <div
                  key={carrier.carrierName}
                  className="flex items-center justify-between p-4 border rounded-lg hover:bg-accent/50 transition-colors"
                >
                  <div className="flex items-center space-x-4">
                    <div className="flex h-10 w-10 items-center justify-center rounded-full bg-primary/10 font-bold text-primary">
                      #{index + 1}
                    </div>
                    <div>
                      <h3 className="font-semibold">{carrier.carrierName}</h3>
                      <p className="text-sm text-muted-foreground">
                        {carrier.totalBookings} bookings • {carrier.totalWeightKG.toLocaleString()} KG
                      </p>
                    </div>
                  </div>

                  <div className="flex items-center space-x-4">
                    <div className="text-right">
                      <div className="flex items-center gap-2">
                        <Badge variant="secondary" className="bg-green-100 text-green-800">
                          {carrier.acceptedBookings} acceptés
                        </Badge>
                        {carrier.rejectedBookings > 0 && (
                          <Badge variant="secondary" className="bg-red-100 text-red-800">
                            {carrier.rejectedBookings} refusés
                          </Badge>
                        )}
                      </div>
                      <p className="text-sm text-muted-foreground mt-1">
                        Taux: {carrier.acceptanceRate.toFixed(0)}% • Moy:{' '}
                        ${carrier.avgPriceUSD.toFixed(0)}
                      </p>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          ) : (
            <div className="text-center py-12">
              <Package className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
              <h3 className="text-lg font-medium text-gray-900 mb-2">Aucun booking pour l'instant</h3>
              <p className="text-muted-foreground mb-6">
                Créez votre premier booking pour voir vos statistiques
              </p>
              <Link href="/dashboard/bookings/new">
                <Button>
                  <Plus className="mr-2 h-4 w-4" />
                  Créer un booking
                </Button>
              </Link>
            </div>
          )}
        </CardContent>
      </Card>

      {/* Quick Actions */}
      <div className="grid gap-4 md:grid-cols-3">
        <Link href="/dashboard/search">
          <Card className="hover:shadow-lg transition-all hover:-translate-y-1 cursor-pointer">
            <CardContent className="flex items-center space-x-4 p-6">
              <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-blue-100">
                <svg
                  className="h-6 w-6 text-blue-600"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
                  />
                </svg>
              </div>
              <div>
                <h3 className="font-semibold">Rechercher des tarifs</h3>
                <p className="text-sm text-muted-foreground">Trouver les meilleurs prix</p>
              </div>
            </CardContent>
          </Card>
        </Link>

        <Link href="/dashboard/bookings">
          <Card className="hover:shadow-lg transition-all hover:-translate-y-1 cursor-pointer">
            <CardContent className="flex items-center space-x-4 p-6">
              <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-purple-100">
                <Package className="h-6 w-6 text-purple-600" />
              </div>
              <div>
                <h3 className="font-semibold">Mes Bookings</h3>
                <p className="text-sm text-muted-foreground">Voir tous mes envois</p>
              </div>
            </CardContent>
          </Card>
        </Link>

        <Link href="/dashboard/settings/organization">
          <Card className="hover:shadow-lg transition-all hover:-translate-y-1 cursor-pointer">
            <CardContent className="flex items-center space-x-4 p-6">
              <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-gray-100">
                <svg
                  className="h-6 w-6 text-gray-600"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
                  />
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
                  />
                </svg>
              </div>
              <div>
                <h3 className="font-semibold">Paramètres</h3>
                <p className="text-sm text-muted-foreground">Configuration du compte</p>
              </div>
            </CardContent>
          </Card>
        </Link>
      </div>
    </div>
  );
}