import { Card, CardContent } from "@/components/ui/card"
import { Trash2, Pencil, SquarePen, Copy } from "lucide-react"
import Link from "next/link"
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
import { Badge } from "@/components/ui/badge"
import { cn } from "@/lib/utils"
import { Service } from "@/types/services"
import { useTranslations } from "next-intl"
import { useDuplicateService } from "@/lib/react-query/hooks/services"

export function ServiceCard({ service, confirmDelete }: { service: Service; confirmDelete: (service: Service) => void }) {
  const t = useTranslations()
  const duplicateService = useDuplicateService()

  return (
    // Let the grid control the card width; make card adapt to cell size
    <Card className="shadow-none w-full h-full border border-gray-100 bg-white">
      <CardContent className="p-6 flex flex-col h-full">
        {/* Header Section */}
        <div className="flex items-start justify-between">
          <div className="flex-1 min-w-0">
            <div className="flex items-center gap-2 flex-wrap">
              <h3 className="font-semibold text-base text-gray-900">{service.name}</h3>
              {service.status && (
                <Badge
                  variant="outline"
                  className={cn(
                    "text-[10px] uppercase h-5 px-1.5 shadow-none",
                    service.status === "active"
                      ? "bg-green-50 text-green-700 border-green-200"
                      : "bg-red-50 text-red-700 border-red-200"
                  )}
                >
                  {service.status}
                </Badge>
              )}
            </div>
          </div>
          <div className="flex items-center gap-1">
            <button
              onClick={() => duplicateService.mutate(service._id)}
              disabled={duplicateService.isPending}
              className="p-1.5 rounded-md hover:bg-gray-50 transition-colors group disabled:opacity-50"
            >
              <Tooltip>
                <TooltipTrigger asChild>
                  <Copy className="w-4.5 h-4.5 text-gray-500 group-hover:text-gray-700" />
                </TooltipTrigger>
                <TooltipContent side="bottom">
                  <p>{t("services.card.duplicateTooltip")}</p>
                </TooltipContent>
              </Tooltip>
            </button>
            <Link href={`/dashboard/services/edit/${service._id}`} className="p-1.5 rounded-md hover:bg-blue-50 transition-colors group">
              <Tooltip>
                <TooltipTrigger asChild>
                  <SquarePen className="w-4.5 h-4.5 text-blue-600 group-hover:text-blue-700" />
                </TooltipTrigger>
                <TooltipContent side="bottom">
                  <p>{t("services.card.editTooltip")}</p>
                </TooltipContent>
              </Tooltip>
            </Link>
            <button onClick={() => confirmDelete(service)} className="p-1.5 rounded-md hover:bg-red-50 transition-colors group">
              <Tooltip>
                <TooltipTrigger asChild>
                  <Trash2 className="w-4.5 h-4.5 text-red-500 group-hover:text-red-600" />
                </TooltipTrigger>
                <TooltipContent side="bottom">
                  <p>{t("services.card.deleteTooltip")}</p>
                </TooltipContent>
              </Tooltip>
            </button>
          </div>
        </div>

        {/* Description */}
        <p className="text-sm mt-1 text-gray-400 font-normal line-clamp-2">
          {service.description || "No description available"}
        </p>

        {/* Price & Duration */}
        <div className="space-y-2 mt-6">
          <div className="flex justify-between items-center text-sm">
            <span className="text-gray-500">{t("services.card.basePriceLabel")}</span>
            <span className="text-gray-900 font-semibold">€{service.basePrice}</span>
          </div>

          {service.weekendPrice !== undefined && (
            <div className="flex justify-between items-center text-sm">
              <span className="text-gray-500">Weekend Price</span>
              <span className="text-gray-900 font-semibold">€{service.weekendPrice}</span>
            </div>
          )}

          {service.surchargePricePercentage !== undefined && service.weekendPrice === undefined && (
            <div className="flex justify-between items-center text-sm">
              <span className="text-gray-500">{t("services.card.surchargeLabel")}</span>
              <span className="text-gray-900 font-semibold">{service.surchargePricePercentage}%</span>
            </div>
          )}

          <div className="flex justify-between items-center text-sm">
            <span className="text-gray-500">{t("services.card.durationLabel")}</span>
            <span className="text-gray-900 font-semibold">{service.duration} min</span>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}