import { Card, CardHeader, CardContent } from "@/components/ui/card";
import { Separator } from "@/components/ui/separator";
import { Checkbox } from "@/components/ui/checkbox";
import { Button } from "@/components/ui/button";
import TicketFeature from "./TicketFeature";
import { IoIosAdd } from "react-icons/io";
import { IoIosRemove } from "react-icons/io";
import { useTranslations } from "next-intl";
import { SaudiRiyal } from "lucide-react";
import { Input } from "@/components/ui/input";
import { cn } from "@/lib/utils";

interface TicketCardProps {
  title: string;
  price: number | string;
  features: string[];
  isSelected: boolean;
  quantity: number;
  maxQuantity: number;
  hasRealFeatures?: boolean; // If false, features are messages without checkmarks
  onSelect: (isSelected: boolean) => void;
  onQuantityChange: (quantity: number) => void;
}

export default function TicketCard({
  title,
  price,
  features,
  isSelected,
  quantity,
  maxQuantity,
  hasRealFeatures = true,
  onSelect,
  onQuantityChange,
}: TicketCardProps) {
  const t = useTranslations("TicketPage");
  const handleCheckboxChange = (checked: boolean) => {
    onSelect(checked);
  };

  const increaseQuantity = () => {
    // Don't allow increasing beyond maxQuantity
    if (quantity < maxQuantity) {
      onQuantityChange(quantity + 1);
    }
  };

  const decreaseQuantity = () => {
    if (quantity > 1) {
      onQuantityChange(quantity - 1);
    }
  };

  return (
    <Card
      className={cn(
        "shadow-[var(--ticket-card-shadow)] rounded-[16px]",
        "bg-[radial-gradient(46.33%_90.82%_at_100%_-8.16%,var(--color-vendor-primary)_0%,#FFFFFF_100%)] !px-0",
        maxQuantity === 0 && "opacity-75 cursor-not-allowed",
        isSelected && "border-[1px] border-vendor-secondary",
      )}
    >
      <CardHeader className="flex flex-col sm:flex-row sm:justify-between xl:flex-col px-10">
        <div className="flex items-center gap-2 md:gap-4">
          <Checkbox
            id=""
            checked={isSelected}
            onCheckedChange={(checked) =>
              handleCheckboxChange(checked as boolean)
            }
            disabled={maxQuantity === 0}
          />
          <h2
            className={`text-[20px] md:text-[24px] font-bold uppercase transition-colors ${
              isSelected ? "text-vendor-secondary" : "text-vendor-primary"
            }`}
          >
            {title}
          </h2>
        </div>
        <h3
          className={cn(
            "text-[24px] md:text-[32px] font-bold uppercase transition-colors flex items-center ",
            "w-full h-[68px] relative",
            isSelected ? "text-vendor-secondary" : "text-vendor-primary",
            "after:content-[''] after:absolute after:inset-0 after:-left-7 after:-right-7 after:bg-vendor-primary after:opacity-[0.16] after:z-[1]",
          )}
        >
          <span className="flex items-center gap-1 relative z-[2]">
            {price}
            <SaudiRiyal className="w-6 h-6 md:w-8 md:h-8" />
          </span>
        </h3>
      </CardHeader>

      <CardContent className="p-0 flex flex-col gap-3 px-10">
        {features.map((feature, index) => (
          <TicketFeature
            key={index}
            text={feature}
            showCheckmark={hasRealFeatures}
          />
        ))}
      </CardContent>

      {/* Quantity Selector */}
      {isSelected && (
        <div className="flex flex-col mt-[auto] gap-5 px-3">
          <Separator />
          <div className="flex items-center justify-between px-7">
            <span className="text-[18px] font-semibold tracking-[0.5px]">
              {t("quantity")}
            </span>
            <div className="flex items-center gap-4">
              <Button
                variant="outline"
                className="h-8 w-8 rounded-[8px] text-vendor-primary"
                onClick={increaseQuantity}
                disabled={quantity >= maxQuantity}
              >
                <IoIosAdd />
              </Button>
              <Input
                type="number"
                value={quantity}
                onChange={(e) => onQuantityChange(parseInt(e.target.value))}
                className="text-lg font-bold text-primary-rich_black-main w-6 min-w-[2ch] text-center border-none p-0"
              />
              <Button
                variant="outline"
                className="h-8 w-8 rounded-[8px] text-vendor-primary"
                onClick={decreaseQuantity}
                disabled={quantity <= 1}
              >
                <IoIosRemove />
              </Button>
            </div>
          </div>
        </div>
      )}
      {maxQuantity === 0 && (
        <div className="flex flex-col mt-[auto] gap-5 px-3">
          <Separator />
          <span className="text-[14px] font-semibold text-red-500 tracking-[0.5px] px-7">
            {t("soldOut")}
          </span>
        </div>
      )}
    </Card>
  );
}