"use client"

import { useState, useEffect } from "react"
import { Calendar, TrendingUp, Clock, Users, Package, AlertCircle } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { formatCurrency } from "@/lib/utils"

type DashboardStats = {
  totalClients: number
  todaySales: number
  productsInStock: number
  lowStockCount: number
  pendingInvoices: number
  salesCount: number
  invoicesCount: number
}

type RecentSale = {
  id: string
  client: string
  seller: string
  amount: number
  time: string
}

type LowStockItem = {
  id: string
  name: string
  sku: string
  quantity: number
}

export default function DashboardClient() {
  const [period, setPeriod] = useState("today")
  const [customRange, setCustomRange] = useState({ from: "", to: "" })
  const [stats, setStats] = useState<DashboardStats | null>(null)
  const [recentSales, setRecentSales] = useState<RecentSale[]>([])
  const [lowStock, setLowStock] = useState<LowStockItem[]>([])
  const [loading, setLoading] = useState(true)

  const getDateRange = () => {
    const now = new Date()
    const today = new Date(now.getFullYear(), now.getMonth(), now.getDate())
    
    switch (period) {
      case "today":
        return { from: today.toISOString(), to: new Date(today.getTime() + 86400000).toISOString() }
      case "yesterday": {
        const yesterday = new Date(today)
        yesterday.setDate(yesterday.getDate() - 1)
        return { from: yesterday.toISOString(), to: today.toISOString() }
      }
      case "thisWeek": {
        const weekStart = new Date(today)
        weekStart.setDate(weekStart.getDate() - weekStart.getDay())
        return { from: weekStart.toISOString(), to: new Date(today.getTime() + 86400000).toISOString() }
      }
      case "custom":
        if (customRange.from && customRange.to) {
          return { 
            from: new Date(customRange.from).toISOString(), 
            to: new Date(new Date(customRange.to).getTime() + 86400000).toISOString() 
          }
        }
        return { from: today.toISOString(), to: new Date(today.getTime() + 86400000).toISOString() }
      default:
        return { from: today.toISOString(), to: new Date(today.getTime() + 86400000).toISOString() }
    }
  }

  const fetchData = async () => {
    setLoading(true)
    const { from, to } = getDateRange()
    
    try {
      const response = await fetch(`/api/dashboard/stats?from=${from}&to=${to}`)
      const data = await response.json()
      setStats(data.stats)
      setRecentSales(data.recentSales || [])
      setLowStock(data.lowStock || [])
    } catch (error) {
      console.error("Error fetching dashboard data:", error)
    } finally {
      setLoading(false)
    }
  }

  useEffect(() => {
    fetchData()
  }, [period, customRange])

  const getPeriodLabel = () => {
    switch (period) {
      case "today": return "Aujourd'hui"
      case "yesterday": return "Hier"
      case "thisWeek": return "Cette semaine"
      case "custom": return "Période personnalisée"
      default: return ""
    }
  }

  return (
    <div className="space-y-8">
      {/* Header */}
      <div className="animate-fade-in">
        <h1 className="text-4xl font-bold text-gradient mb-2">Dashboard</h1>
        <p className="text-slate-500 text-lg">Bienvenue sur OptiCare - Vue d'ensemble de votre activité</p>
      </div>

      {/* Period Selector */}
      <div className="flex flex-wrap items-end gap-4 animate-slide-up">
        <Select value={period} onValueChange={setPeriod}>
          <SelectTrigger className="w-[200px] smooth-transition">
            <SelectValue placeholder="Sélectionner" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="today">Aujourd'hui</SelectItem>
            <SelectItem value="yesterday">Hier</SelectItem>
            <SelectItem value="thisWeek">Cette semaine</SelectItem>
            <SelectItem value="custom">Personnalisé</SelectItem>
          </SelectContent>
        </Select>

        {period === "custom" && (
          <div className="flex items-center gap-2 animate-slide-up">
            <div className="grid gap-1">
              <Label className="text-xs text-muted-foreground font-semibold">Du</Label>
              <Input
                type="date"
                value={customRange.from}
                onChange={(e) => setCustomRange({ ...customRange, from: e.target.value })}
                className="w-[150px] smooth-transition"
              />
            </div>
            <div className="grid gap-1">
              <Label className="text-xs text-muted-foreground font-semibold">Au</Label>
              <Input
                type="date"
                value={customRange.to}
                onChange={(e) => setCustomRange({ ...customRange, to: e.target.value })}
                className="w-[150px] smooth-transition"
              />
            </div>
          </div>
        )}
      </div>

      {/* Stats Cards */}
      <div className="grid gap-5 md:grid-cols-2 lg:grid-cols-4">
        {/* Sales Card */}
        <Card className="stat-card group animate-scale-in" style={{ animationDelay: "0.1s" }}>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-3">
            <CardTitle className="text-sm font-semibold text-slate-700">Ventes</CardTitle>
            <div className="rounded-lg gradient-primary p-2 text-white group-hover:shadow-lg smooth-transition">
              <TrendingUp className="h-5 w-5" />
            </div>
          </CardHeader>
          <CardContent>
            <div className="text-3xl font-bold text-slate-900 mb-1">
              {loading ? (
                <span className="text-slate-300">--</span>
              ) : (
                formatCurrency(stats?.todaySales || 0)
              )}
            </div>
            <p className="text-xs font-medium text-slate-500">
              {stats?.salesCount || 0} facture(s) • {getPeriodLabel()}
            </p>
          </CardContent>
        </Card>

        {/* Pending Invoices Card */}
        <Card className="stat-card group animate-scale-in" style={{ animationDelay: "0.2s" }}>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-3">
            <CardTitle className="text-sm font-semibold text-slate-700">En attente</CardTitle>
            <div className="rounded-lg gradient-secondary p-2 text-white group-hover:shadow-lg smooth-transition">
              <Clock className="h-5 w-5" />
            </div>
          </CardHeader>
          <CardContent>
            <div className="text-3xl font-bold text-slate-900 mb-1">
              {loading ? <span className="text-slate-300">--</span> : stats?.pendingInvoices || 0}
            </div>
            <p className="text-xs font-medium text-slate-500">
              {stats?.invoicesCount || 0} facture(s) impayée(s)
            </p>
          </CardContent>
        </Card>

        {/* Total Clients Card */}
        <Card className="stat-card group animate-scale-in" style={{ animationDelay: "0.3s" }}>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-3">
            <CardTitle className="text-sm font-semibold text-slate-700">Clients</CardTitle>
            <div className="rounded-lg gradient-accent p-2 text-white group-hover:shadow-lg smooth-transition">
              <Users className="h-5 w-5" />
            </div>
          </CardHeader>
          <CardContent>
            <div className="text-3xl font-bold text-slate-900 mb-1">
              {loading ? <span className="text-slate-300">--</span> : stats?.totalClients || 0}
            </div>
            <p className="text-xs font-medium text-slate-500">
              Clients enregistrés
            </p>
          </CardContent>
        </Card>

        {/* Stock Card */}
        <Card className="stat-card group animate-scale-in" style={{ animationDelay: "0.4s" }}>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-3">
            <CardTitle className="text-sm font-semibold text-slate-700">Stock</CardTitle>
            <div className="rounded-lg gradient-danger p-2 text-white group-hover:shadow-lg smooth-transition">
              <Package className="h-5 w-5" />
            </div>
          </CardHeader>
          <CardContent>
            <div className="text-3xl font-bold text-slate-900 mb-1">
              {loading ? <span className="text-slate-300">--</span> : stats?.productsInStock || 0}
            </div>
            <p className="text-xs font-medium text-red-600">
              {stats?.lowStockCount || 0} en rupture
            </p>
          </CardContent>
        </Card>
      </div>

      {/* Recent Sales & Low Stock */}
      <div className="grid gap-5 md:grid-cols-2">
        {/* Recent Sales */}
        <Card className="card-gradient card-hover animate-slide-up" style={{ animationDelay: "0.5s" }}>
          <CardHeader className="pb-4 border-b border-slate-200">
            <CardTitle className="flex items-center gap-2 text-lg">
              <TrendingUp className="h-5 w-5 text-teal-600" />
              Ventes récentes
            </CardTitle>
          </CardHeader>
          <CardContent className="pt-5">
            <div className="space-y-4">
              {loading ? (
                <p className="text-muted-foreground text-sm py-8 text-center">Chargement...</p>
              ) : recentSales.length === 0 ? (
                <p className="text-muted-foreground text-sm py-8 text-center">Aucune vente sur cette période</p>
              ) : (
                recentSales.map((sale, idx) => (
                  <div
                    key={sale.id}
                    className="flex items-center justify-between p-3 rounded-lg hover:bg-slate-50 smooth-transition group"
                    style={{ animationDelay: `${0.5 + idx * 0.1}s` }}
                  >
                    <div className="flex items-center gap-3 flex-1">
                      <div className="h-10 w-10 rounded-full gradient-primary text-white flex items-center justify-center font-semibold flex-shrink-0 group-hover:shadow-md smooth-transition">
                        {sale.client.charAt(0).toUpperCase()}
                      </div>
                      <div className="min-w-0">
                        <p className="text-sm font-semibold text-slate-900 truncate">{sale.client}</p>
                        <div className="flex items-center gap-2">
                          <p className="text-xs text-slate-500">{sale.time}</p>
                          <span className="badge-modern bg-teal-100 text-teal-700 text-[10px] whitespace-nowrap">
                            {sale.seller}
                          </span>
                        </div>
                      </div>
                    </div>
                    <p className="font-semibold text-slate-900 ml-2 whitespace-nowrap text-teal-600">
                      +{formatCurrency(sale.amount)}
                    </p>
                  </div>
                ))
              )}
            </div>
          </CardContent>
        </Card>

        {/* Low Stock Alert */}
        <Card className="card-gradient card-hover animate-slide-up" style={{ animationDelay: "0.6s" }}>
          <CardHeader className="pb-4 border-b border-slate-200">
            <CardTitle className="flex items-center gap-2 text-lg">
              <AlertCircle className="h-5 w-5 text-red-600" />
              Stock faible
            </CardTitle>
          </CardHeader>
          <CardContent className="pt-5">
            <div className="space-y-3">
              {loading ? (
                <p className="text-muted-foreground text-sm py-8 text-center">Chargement...</p>
              ) : lowStock.length === 0 ? (
                <div className="py-8 text-center">
                  <p className="text-sm text-slate-500">✓ Tous les produits sont en stock</p>
                </div>
              ) : (
                lowStock.map((item, idx) => (
                  <div
                    key={item.id}
                    className="flex items-center justify-between p-3 rounded-lg bg-red-50 hover:bg-red-100 smooth-transition"
                    style={{ animationDelay: `${0.6 + idx * 0.1}s` }}
                  >
                    <div className="min-w-0 flex-1">
                      <p className="text-sm font-semibold text-slate-900">{item.name}</p>
                      <p className="text-xs text-slate-500">SKU: {item.sku}</p>
                    </div>
                    <span className="badge-modern bg-red-200 text-red-700 font-bold ml-2 whitespace-nowrap">
                      {item.quantity}
                    </span>
                  </div>
                ))
              )}
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}