import { cn } from "@/lib/utils"
import { useTranslations } from "next-intl"
import { Bot, Monitor } from "lucide-react"
import { useRouter } from "next/navigation"

interface AppointmentSlotProps {
  startTime: string
  endTime: string
  clientName: string
  service: string
  color: "cyan" | "teal" | "orange" | "pink"
  status?: string
  generatedBy?: string
  clientId?: string
  onClick?: () => void
  compact?: boolean // For calendar grid vs drawer
}

const colorClasses = {
  cyan: "bg-cyan-200",
  teal: "bg-teal-200",
  orange: "bg-orange-200",
  pink: "bg-pink-200"
}

// Calculate duration between two times and format it
const calculateDuration = (startTime: string, endTime: string): string => {
  const start = new Date(startTime)
  const end = new Date(endTime)
  const diffMs = end.getTime() - start.getTime()
  const diffMinutes = Math.floor(diffMs / 60000)

  if (diffMinutes < 60) {
    return `${diffMinutes} min`
  }

  const hours = Math.floor(diffMinutes / 60)
  const minutes = diffMinutes % 60

  if (minutes === 0) {
    return hours === 1 ? `${hours} hr` : `${hours} hrs`
  }

  return `${hours} hr ${minutes} min`
}

export default function AppointmentSlot({ startTime, endTime, clientName, service, color, status, generatedBy, clientId, onClick, compact = false }: AppointmentSlotProps) {
  const isCancelled = status === 'cancelled'
  const t = useTranslations()
  const router = useRouter()
  const duration = calculateDuration(startTime, endTime)

  return (
    <div
      className={cn(
        colorClasses[color],
        "rounded-md p-2 flex flex-col justify-between transition-all hover:shadow-md hover:scale-101 overflow-hidden cursor-pointer",
        compact ? "h-16 w-full" : "h-full w-full",
        isCancelled && "opacity-60 grayscale"
      )}
      onClick={onClick}
    >
      <div className={cn(
        "font-normal text-black leading-tight truncate",
        compact ? "text-[9px]" : "text-[10px] sm:text-xs"
      )}>
        {duration}
      </div>

      <div className={cn(
        "font-semibold text-black leading-tight truncate flex-1 flex items-center",
        compact ? "text-xs" : "text-sm"
      )}>
        {clientName}
        {isCancelled && (
          <span className={cn(
            "ml-1 font-bold",
            compact ? "text-[10px] text-red-600" : "text-xs text-red-600"
          )}>
            ({t("calendar.status.cancelled")})
          </span>
        )}
      </div>

      <div className="flex items-center justify-between gap-1 overflow-hidden">
        <div className={cn(
          "font-normal text-black leading-tight truncate flex-1",
          compact ? "text-[9px]" : "text-[10px] sm:text-xs"
        )}>
          {service}
        </div>
        {generatedBy && (
          <div
            className={cn(
              "flex items-center gap-0.5 shrink-0 px-1 py-0.5 rounded bg-black/30 text-black font-bold uppercase z-10",
              compact ? "text-[7px]" : "text-[8px]"
            )}
          >
            {generatedBy === 'ai' ? <Bot className="w-2.5 h-2.5" /> : <Monitor className="w-2.5 h-2.5" />}
            {generatedBy}
          </div>
        )}
      </div>
    </div>
  )
}