import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
import { cn } from "@/lib/utils"
import React from "react"
import { useTranslation } from "react-i18next"

import { Separator } from "./ui/separator"

interface ServiceTrackerProps {
  days: Array<{
    completed: boolean
    date?: Date
    uptime: number
    delay: number
  }>
  className?: string
  title?: string
  uptime?: number
  avgDelay?: number
}

export const ServiceTrackerClient: React.FC<ServiceTrackerProps> = ({ days, className, title, uptime = 100, avgDelay = 0 }) => {
  const { t } = useTranslation()
  const customBackgroundImage = (window.CustomBackgroundImage as string) !== "" ? window.CustomBackgroundImage : undefined

  const getUptimeColor = (uptime: number) => {
    if (uptime >= 99) return "text-emerald-500"
    if (uptime >= 95) return "text-amber-500"
    return "text-rose-500"
  }

  const getDelayColor = (delay: number) => {
    if (delay < 100) return "text-emerald-500"
    if (delay < 300) return "text-amber-500"
    return "text-rose-500"
  }

  const getStatusColor = (uptime: number) => {
    if (uptime >= 99) return "bg-emerald-500"
    if (uptime >= 95) return "bg-amber-500"
    return "bg-rose-500"
  }

  return (
    <div
      className={cn(
        "w-full space-y-3 bg-white px-4 py-4  rounded-lg border bg-card text-card-foreground shadow-lg shadow-neutral-200/40 dark:shadow-none",
        className,
        {
          "bg-card/70": customBackgroundImage,
        },
      )}
    >
      <div className="flex justify-between items-center">
        <div className="flex items-center gap-2">
          <div className={cn("w-2.5 h-2.5 rounded-full transition-colors", getStatusColor(uptime))} />
          <span className="font-medium text-sm">{title}</span>
        </div>
        <div className="flex items-center gap-3">
          <span className={cn("font-medium text-sm transition-colors", getDelayColor(avgDelay))}>{avgDelay.toFixed(0)}ms</span>
          <Separator className="h-4" orientation="vertical" />
          <span className={cn("font-medium text-sm transition-colors", getUptimeColor(uptime))}>
            {uptime.toFixed(1)}% {t("serviceTracker.uptime")}
          </span>
        </div>
      </div>

      <div className="flex gap-[3px] bg-muted/30 p-1 rounded-lg">
        {days.map((day, index) => (
          <TooltipProvider delayDuration={50} key={index}>
            <Tooltip>
              <TooltipTrigger asChild>
                <div
                  className={cn(
                    "relative flex-1 h-7 rounded-[4px] transition-all duration-200 cursor-help",
                    "before:absolute before:inset-0 before:rounded-[4px] before:opacity-0 hover:before:opacity-100 before:bg-white/10 before:transition-opacity",
                    "after:absolute after:inset-0 after:rounded-[4px] after:shadow-[inset_0_1px_theme(colors.white/10%)]",
                    day.completed
                      ? "bg-gradient-to-b from-green-500/90 to-green-600 shadow-[0_1px_2px_theme(colors.green.600/30%)]"
                      : "bg-gradient-to-b from-red-500/80 to-red-600/90 shadow-[0_1px_2px_theme(colors.red.600/30%)]",
                  )}
                />
              </TooltipTrigger>
              <TooltipContent className="p-0 overflow-hidden">
                <div className="px-3 py-2 bg-popover">
                  <p className="font-medium text-sm mb-2">{day.date?.toLocaleDateString()}</p>
                  <div className="space-y-1.5">
                    <div className="flex items-center justify-between gap-3">
                      <span className="text-xs text-muted-foreground">{t("serviceTracker.uptime")}:</span>
                      <span className={cn("text-xs font-medium", day.uptime > 95 ? "text-green-500" : "text-red-500")}>{day.uptime.toFixed(1)}%</span>
                    </div>
                    <div className="flex items-center justify-between gap-3">
                      <span className="text-xs text-muted-foreground">{t("serviceTracker.delay")}:</span>
                      <span
                        className={cn(
                          "text-xs font-medium",
                          day.delay < 100 ? "text-green-500" : day.delay < 300 ? "text-yellow-500" : "text-red-500",
                        )}
                      >
                        {day.delay.toFixed(0)}ms
                      </span>
                    </div>
                  </div>
                </div>
              </TooltipContent>
            </Tooltip>
          </TooltipProvider>
        ))}
      </div>

      <div className="flex justify-between text-xs text-stone-500 dark:text-stone-400">
        <span>30 {t("serviceTracker.daysAgo")}</span>
        <span>{t("serviceTracker.today")}</span>
      </div>
    </div>
  )
}

export default ServiceTrackerClient