"use client"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader } from "@/components/ui/card"
import { AlertTriangle, CheckCircle, CircleCheckBig, Loader2 } from "lucide-react"
import { useGetNotifications, useMarkNotificationAsRead } from "@/lib/react-query/hooks/reminders"
import type { Notification } from "@/types/reminders"
import { useTranslations } from "next-intl"
import { useRouter } from "next/navigation"

interface NotificationsListProps {
  notifications?: Notification[]
  type?: string
  onMarkAllAsRead?: () => void
  isMarkingAllAsRead?: boolean
}

export function NotificationsList({ notifications, type, onMarkAllAsRead, isMarkingAllAsRead }: NotificationsListProps) {
  const { data: apiNotifications, isLoading, error } = useGetNotifications(type)
  const markAsReadMutation = useMarkNotificationAsRead()
  const t = useTranslations('notifications.list')
  const router = useRouter()

  const displayNotifications = notifications || apiNotifications || []

  const handleNotificationClick = (notification: Notification) => {
    if (!notification.read) {
      markAsReadMutation.mutate(notification._id)
    }

    if (notification.clientId) {
      router.push(`/dashboard/customers/${notification.clientId}/appointments`)
    }
  }

  if (isLoading) {
    return (
      <Card className="gap-2">
        <CardContent className="flex justify-center items-center py-8">
          <Loader2 className="w-6 h-6 animate-spin text-blue-500" />
          <span className="ml-2 text-gray-600">{t('loading')}</span>
        </CardContent>
      </Card>
    )
  }

  if (error) {
    return (
      <Card className="gap-2">
        <CardContent className="flex justify-center items-center py-8">
          <AlertTriangle className="w-6 h-6 text-red-500" />
          <span className="ml-2 text-red-500">{t('error')}</span>
        </CardContent>
      </Card>
    )
  }

  if (displayNotifications.length === 0) {
    return (
      <Card className="gap-2">
        <CardContent className="flex justify-center items-center py-8">
          <CheckCircle className="w-6 h-6 text-green-500" />
          <span className="ml-2 text-gray-600">{t('empty')}</span>
        </CardContent>
      </Card>
    )
  }
  return (
    <Card className="gap-2">
      <CardHeader>
        <div className="flex justify-end gap-3">
          <Button
            className="bg-primary-gradient rounded-sm"
            onClick={onMarkAllAsRead}
            disabled={!onMarkAllAsRead || isMarkingAllAsRead}
          >
            <CircleCheckBig />
            {isMarkingAllAsRead ? t('marking') : t('markAllAsRead')}
          </Button>
          <Button variant="outline" className="text-gradient-start bg-white border-blue-950 rounded-sm">
            {t('clearAll')}
          </Button>
        </div>
      </CardHeader>
      <CardContent>
        <div className="divide-y divide-gray-100 space-y-4 max-h-[560px] overflow-y-auto">
          {displayNotifications.map(notification => (
            <div
              key={notification._id}
              onClick={() => handleNotificationClick(notification)}
              className={`p-4 rounded-lg border border-gray-200 border-l-4 border-l-blue-900 flex justify-between items-center transition-colors cursor-pointer ${notification.read
                ? "bg-blue-100/40 hover:bg-blue-200/50"
                : "bg-white hover:bg-gray-50"
                }`}
            >
              <div className="flex items-center gap-3">
                <div className="flex-1 min-w-0">
                  <div className="flex items-center justify-between">
                    <h4 className={`text-base font-medium ${!notification.read ? "text-blue-950/80" : "text-gray-700"}`}>
                      {notification.title}
                    </h4>
                  </div>
                  <p className="text-sm text-gray-500 mt-1">{notification.message}</p>
                  <p>
                    <time className="text-xs text-gray-400">{new Date(notification.scheduledAt).toLocaleString()}</time>
                  </p>
                </div>
              </div>
              <div className="flex items-center gap-4">
                {!notification.read && <div className="w-2 h-2 bg-blue-500 rounded-full"></div>}
                <></>
              </div>
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  )
}