"use client"

import { Bell } from "lucide-react"
import { Button } from "@/components/ui/button"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover"
import { Badge } from "@/components/ui/badge"
import { cn } from "@/lib/utils"
import type { NotificationItem } from "@/lib/notifications"
import { useI18n } from "@/contexts/I18nContext"

interface NotificationBellProps {
  count: number
  items: NotificationItem[]
  onItemClick?: (item: NotificationItem) => void
  className?: string
}

export function NotificationBell({ count, items, onItemClick, className }: NotificationBellProps) {
  const { t } = useI18n()

  const formatDate = (date: Date) => {
    return new Date(date).toLocaleDateString("pt-BR")
  }

  const getDaysUntil = (date: Date) => {
    const today = new Date()
    today.setHours(0, 0, 0, 0)
    const targetDate = new Date(date)
    targetDate.setHours(0, 0, 0, 0)
    const diffTime = targetDate.getTime() - today.getTime()
    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
    return diffDays
  }

  const getUrgencyColor = (days: number) => {
    if (days < 0) return "text-red-600 dark:text-red-400"
    if (days <= 7) return "text-orange-600 dark:text-orange-400"
    if (days <= 30) return "text-yellow-600 dark:text-yellow-400"
    return "text-blue-600 dark:text-blue-400"
  }

  const getUrgencyLabel = (days: number) => {
    if (days < 0) return t("notifications.expired")
    if (days === 0) return t("notifications.today")
    if (days === 1) return t("notifications.tomorrow")
    return t("notifications.inDays").replace("{days}", days.toString())
  }

  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button
          variant="ghost"
          size="icon"
          className={cn("relative", className)}
        >
          <Bell className="h-5 w-5" />
          {count > 0 && (
            <Badge
              variant="destructive"
              className="absolute -top-1 -right-1 h-5 w-5 flex items-center justify-center p-0 text-xs"
            >
              {count > 99 ? "99+" : count}
            </Badge>
          )}
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-80 p-0" align="end">
        <div className="p-4 border-b">
          <h3 className="font-semibold text-sm">{t("notifications.title")}</h3>
          <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
            {count === 0
              ? t("notifications.none")
              : `${count} ${count === 1 ? t("notifications.item") : t("notifications.items")}`}
          </p>
        </div>
        {count > 0 ? (
          <div className="max-h-96 overflow-y-auto">
            {items.map((item) => {
              const days = getDaysUntil(item.data)
              return (
                <div
                  key={item.id}
                  className="p-3 border-b last:border-b-0 hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer transition-colors"
                  onClick={() => onItemClick?.(item)}
                >
                  <div className="flex items-start justify-between gap-2">
                    <div className="flex-1 min-w-0">
                      <p className="text-sm font-medium dark:text-white truncate">
                        {item.titulo}
                      </p>
                      <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
                        {item.equipamento
                          ? item.equipamento.matricula || item.equipamento.parque || "N/A"
                          : t("pages.noEquipment")}
                        {" • "}
                        {item.equipamento?.modelo || ""}
                      </p>
                      <div className="flex items-center gap-2 mt-1">
                        <span className={cn("text-xs font-medium", getUrgencyColor(days))}>
                          {getUrgencyLabel(days)}
                        </span>
                        <span className="text-xs text-gray-400">
                          {formatDate(item.data)}
                        </span>
                      </div>
                    </div>
                    <Badge variant="outline" className="text-xs">
                      {item.tipo === "documento" ? t("notifications.document") : t("notifications.event")}
                    </Badge>
                  </div>
                </div>
              )
            })}
          </div>
        ) : (
          <div className="p-8 text-center text-gray-500 dark:text-gray-400 text-sm">
            {t("notifications.noNotifications")}
          </div>
        )}
      </PopoverContent>
    </Popover>
  )
}