import { Card, CardHeader, CardContent, CardTitle, CardDescription } from "@/components/ui/card"
import { Phone } from "lucide-react"
import { useTranslations } from "next-intl"
import { useGetAICallDuration, useGetAIAppointmentsCount } from "@/lib/react-query/hooks/analytics"

export function AIActivity({ className = "" }: { className?: string }) {
  const td = useTranslations('dashboard')
  const { data: callDurationData, isLoading: isLoadingCalls } = useGetAICallDuration()
  const { data: appointmentsCountData, isLoading: isLoadingAppointments } = useGetAIAppointmentsCount()

  const isLoading = isLoadingCalls || isLoadingAppointments

  const analytics = {
    totalCalls: callDurationData?.totalCalls || 0,
    aiAppointmentsCount: appointmentsCountData?.aiAppointmentsCount || 0,
    avgCallDurationMinutes: callDurationData?.avgCallDurationMinutes || 0,
    totalDurationMinutes: callDurationData?.totalDurationMinutes || 0
  }

  const formatDuration = (minutes: number) => {
    return `${Math.round(minutes)}m`
  }

  return (
    <Card className={`bg-white rounded-xl shadow-sm ${className} gap-2`}>
      <CardHeader className="flex flex-row items-center justify-between pb-2">
        <div>
          <CardTitle className="font-medium text-primary-blue">{td('aiActivity.title')}</CardTitle>
          <CardDescription className="text-xs text-muted-foreground">{td('aiActivity.description')}</CardDescription>
        </div>
      </CardHeader>
      <CardContent className="pt-0">
        {isLoading ? (
          <div className="flex items-center justify-center py-8">
            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-blue"></div>
          </div>
        ) : (
          <>
            <div className="flex items-center justify-between border rounded-lg px-4 py-3 mb-4">
              <div className="flex items-center gap-2">
                <div className="p-2 rounded-md bg-blue-100/30">
                  <Phone className="w-5 h-5 text-gradient-start" />
                </div>
                <div>
                  <p className="font-semibold text-gradient-start text-sm">{td('aiActivity.callsHandled')}</p>
                  {/* <p className="text-xs text-gray-500">{td('aiActivity.today')}</p> */}
                </div>
              </div>
              <div className="text-2xl font-bold text-gradient-start">{analytics.totalCalls}</div>
            </div>
            {/* Stats row */}
            <div className="grid grid-cols-2 lg:grid-cols-3 gap-2">
              <div className="bg-green-100/80 rounded-lg px-3 py-2 text-xs">
                <p className="font-semibold text-green-700">{td('aiActivity.aiAppointments')}</p>
                <p className="text-lg font-semibold text-black">{analytics.aiAppointmentsCount}</p>
              </div>
              <div className="bg-orange-100/80 rounded-lg px-3 py-2 text-xs">
                <p className="font-semibold text-orange-700">{td('aiActivity.totalDuration')}</p>
                <p className="text-lg font-semibold text-black">{formatDuration(analytics.totalDurationMinutes)}</p>
              </div>
              <div className="bg-blue-100/80 rounded-lg px-3 py-2 text-xs col-span-2 lg:col-span-1">
                <p className="font-semibold text-blue-700">{td('aiActivity.avgPerCall')}</p>
                <p className="text-lg font-semibold text-black">{formatDuration(analytics.avgCallDurationMinutes)}</p>
              </div>
            </div>
          </>
        )}
      </CardContent>
    </Card>
  )
}