"use client"
import { Card, CardHeader, CardContent, CardTitle, CardDescription } from "@/components/ui/card"
import { AgendaItem } from "./AgendaItem"
import { useGetAgenda } from "@/lib/react-query/hooks/analytics"
import { Skeleton } from "@/components/ui/skeleton"
import { Calendar, Clock } from "lucide-react"
import { format } from "date-fns"
import { useTranslations, useFormatter } from "next-intl"

function LoadingAgenda() {
  const td = useTranslations('dashboard')
  return (
    <Card className="bg-white rounded-xl shadow-sm gap-2">
      <CardHeader>
        <CardTitle className="font-medium text-primary-blue">{td('agenda.title')}</CardTitle>
        <CardDescription className="text-xs text-muted-foreground">{td('agenda.description')}</CardDescription>
      </CardHeader>
      <CardContent className="flex flex-col gap-3">
        {Array.from({ length: 4 }).map((_, i) => (
          <div key={i} className="flex items-stretch rounded-xl border border-gray-200 p-3">
            <div className="flex flex-col items-center justify-center w-16 min-w-16 gap-1">
              <Skeleton className="w-6 h-6 rounded" />
              <Skeleton className="w-8 h-3 rounded" />
            </div>
            <div className="w-px bg-gray-200 mx-2 my-2" />
            <div className="flex flex-col justify-center flex-1 gap-2">
              <Skeleton className="h-4 w-24 rounded" />
              <Skeleton className="h-3 w-20 rounded" />
            </div>
          </div>
        ))}
      </CardContent>
    </Card>
  )
}

function EmptyAgendaState() {
  const td = useTranslations('dashboard')
  return (
    <Card className="bg-white rounded-xl shadow-sm gap-2">
      <CardHeader>
        <CardTitle className="font-medium text-primary-blue">{td('agenda.title')}</CardTitle>
        <CardDescription className="text-xs text-muted-foreground">{td('agenda.description')}</CardDescription>
      </CardHeader>
      <CardContent>
        <div className="flex flex-col items-center justify-center py-8 text-center">
          <div className="w-16 h-16 bg-blue-50 rounded-full flex items-center justify-center mb-4">
            <Calendar className="w-8 h-8 text-gradient-start" />
          </div>
          <h3 className="text-lg font-semibold text-gray-900 mb-2">{td('agenda.noAppointments')}</h3>
          <p className="text-sm text-gray-500 mb-4 max-w-xs">
            Your schedule is clear for today. Take some time to relax or plan for tomorrow!
          </p>
          <div className="flex items-center gap-2 text-xs text-gray-400">
            <Clock className="w-4 h-4" />
            <span>All caught up!</span>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}

export function AgendaCard() {
  const td = useTranslations('dashboard')
  const formatter = useFormatter()
  const { data: agendaData, isLoading, error } = useGetAgenda()

  if (isLoading) {
    return <LoadingAgenda />
  }

  if (error) {
    return (
      <Card className="bg-white rounded-xl shadow-sm gap-2">
        <CardHeader>
          <CardTitle className="font-medium text-primary-blue">{td('agenda.title')}</CardTitle>
          <CardDescription className="text-xs text-muted-foreground">{td('agenda.description')}</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="text-center py-4 text-gray-500">
            Failed to load agenda data
          </div>
        </CardContent>
      </Card>
    )
  }

  // Handle object structure
  const appointments = agendaData?.appointments || []
  const numberOfAppointments = agendaData?.numberOfAppointments || 0
  const expectedRevenue = agendaData?.expectedRevenue || 0

  // Get today's date for filtering
  const today = new Date()
  const todayString = format(today, "yyyy-MM-dd")

  // Filter appointments for today and sort by start time
  const todayAppointments = appointments
    ?.filter(appointment => {
      const appointmentDate = new Date(appointment.start).toISOString().split('T')[0]
      return appointmentDate === todayString
    })
    ?.sort((a, b) => new Date(a.start).getTime() - new Date(b.start).getTime())
    ?.slice(0, 4) // Show only first 4 appointments

  if (!todayAppointments || todayAppointments.length === 0) {
    return <EmptyAgendaState />
  }

  return (
    <Card className="bg-white rounded-xl shadow-sm gap-2">
      <CardHeader className="pb-2">
        <div className="flex flex-row items-center justify-between">
          <div className="space-y-1">
            <CardTitle className="font-medium text-primary-blue">{td('agenda.title')}</CardTitle>
            <CardDescription className="text-xs text-muted-foreground">{td('agenda.description')}</CardDescription>
          </div>
        </div>

        {/* Stats Row */}
        <div className="flex items-center gap-4 mt-4 pt-4 border-t border-gray-100">
          <div className="flex flex-col">
            <span className="text-[10px] uppercase tracking-wider text-gray-500 font-medium">Appointments</span>
            <span className="text-lg font-bold text-gray-900">{numberOfAppointments}</span>
          </div>
          <div className="w-px h-8 bg-gray-200"></div>
          <div className="flex flex-col">
            <span className="text-[10px] uppercase tracking-wider text-gray-500 font-medium">Daily Revenue</span>
            <span className="text-lg font-bold text-green-600">
              {formatter.number(expectedRevenue, { style: 'currency', currency: 'EUR' })}
            </span>
          </div>
        </div>
      </CardHeader>

      <CardContent className="flex flex-col gap-3 h-[340px] overflow-y-auto">
        {todayAppointments.map((appointment, i) => (
          <AgendaItem
            key={appointment._id}
            time={appointment.start}
            name={appointment.stylistName}
            service={appointment.serviceName}
            active={i === 0} // Mark first appointment as active
          />
        ))}
      </CardContent>
    </Card>
  )
}