"use client"
import { Card, CardHeader, CardContent, CardTitle, CardDescription } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { useGetNotifications } from "@/lib/react-query/hooks/reminders"
import { Loader2 } from "lucide-react"
import { formatDistanceToNow } from "date-fns"
import { useTranslations } from "next-intl"

const logs = [
  {
    title: "AI Call - Booked",
    desc: "Emma Dubois - Sat 10:30",
    time: "2 min ago"
  },
  {
    title: "Reminders Sent",
    desc: "12 SMS reminders for tomorrow",
    time: "9 min ago"
  },
  {
    title: "Appt. Changed",
    desc: "Emma Dubois - Moved to 16:00",
    time: "1 hr ago"
  },
  {
    title: "AI Call - Booked",
    desc: "Emma Dubois - Sat 10:30",
    time: "2 min ago"
  },
  {
    title: "Campaign ended",
    desc: "Weekend promo - 67% open rate",
    time: "6 hr ago"
  }
]

export function ActivityLog({ className = "" }: { className?: string }) {
  const td = useTranslations('dashboard')
  const { data: notifications, isLoading } = useGetNotifications()

  // Map notifications to activity log format
  const activityLogs = notifications?.map((notification) => ({
    title: notification.title,
    desc: notification.message,
    time: notification.createdAt ? formatDistanceToNow(new Date(notification.createdAt), { addSuffix: true }).replace('about ', '') : "Recently"
  })) || []

  // Fallback to sample logs if no notifications data
  const displayLogs = activityLogs.length > 0 ? activityLogs : logs

  return (
    <Card className={`bg-white rounded-xl shadow-sm ${className} gap-2`}>
      <CardHeader className="pb-2">
        <CardTitle className="font-medium text-primary-blue">{td('activityLog.title')}</CardTitle>
        <CardDescription className="text-xs text-muted-foreground">
          {td('activityLog.description')}
        </CardDescription>
      </CardHeader>
      <CardContent className="pt-0 h-80 overflow-y-auto">
        {isLoading ? (
          <div className="flex items-center justify-center py-8">
            <Loader2 className="w-6 h-6 animate-spin text-blue-500" />
            <span className="ml-2 text-gray-600">Loading notifications...</span>
          </div>
        ) : (
          <ul className="flex flex-col gap-3">
            {displayLogs.map((log, idx) => (
              <li key={idx} className="flex items-center justify-between bg-white border rounded-lg p-3">
                <div className="flex flex-col">
                  <span className="block font-medium text-primary-blue text-sm">{log.title}</span>
                  <p className="text-xs text-gray-500 mb-1">{log.desc}</p>
                </div>
                <Badge className="bg-gray-100 text-gray-500 text-xs font-normal rounded-md px-2 py-1 ml-2 whitespace-nowrap shadow-none">
                  {log.time}
                </Badge>
              </li>
            ))}
          </ul>
        )}
      </CardContent>
    </Card>
  )
}