import { Badge } from "@/common/components/ui/badge";
import { Button } from "@/common/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/common/components/ui/dialog";
import { Input } from "@/common/components/ui/input";
import { Label } from "@/common/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/common/components/ui/select";
import { useEffect, useState } from "react";
import { Briefcase } from "lucide-react";

interface RateCardModalProps {
  isOpen: boolean;
  onClose: () => void;
  onSave: (cardData: any) => void;
  editingCard?: any;
}

export default function RateCardModal({
  isOpen,
  onClose,
  onSave,
  editingCard,
}: RateCardModalProps) {
  const [formData, setFormData] = useState({
    name: "",
    baseBook: "FoodBuy",
    discount: 0,
  });

  useEffect(() => {
    if (editingCard) {
      setFormData({
        name: editingCard.name,
        baseBook: editingCard.baseBook,
        discount: editingCard.discount,
      });
    } else {
      setFormData({
        name: "",
        baseBook: "FoodBuy",
        discount: 0,
      });
    }
  }, [editingCard, isOpen]);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    onSave(formData);
    onClose();
  };

  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="sm:max-w-[425px] border-border/50 shadow-lg bg-card text-primary-text">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2 text-primary-text">
            <Briefcase className="w-5 h-5 text-primary" />
            {editingCard ? "Edit Rate Card" : "New Rate Card"}
          </DialogTitle>
        </DialogHeader>
        <form onSubmit={handleSubmit} className="space-y-5 py-4">
          <div className="space-y-2">
            <Label htmlFor="name" className="text-secondary-text text-xs uppercase font-bold tracking-wider">Rate Card Name</Label>
            <Input
              id="name"
              placeholder="e.g. VIP Client 2025"
              value={formData.name}
              onChange={(e) =>
                setFormData({ ...formData, name: e.target.value })
              }
              required
              className="bg-card border-border/50 focus:border-primary"
            />
          </div>

          <div className="space-y-2">
            <Label htmlFor="baseBook" className="text-secondary-text text-xs uppercase font-bold tracking-wider">Base Pricebook</Label>
            <Select
              value={formData.baseBook}
              onValueChange={(value: string) =>
                setFormData({ ...formData, baseBook: value })
              }
            >
              <SelectTrigger className="bg-card border-border/50 focus:border-primary">
                <SelectValue placeholder="Select base book" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="FoodBuy">FoodBuy Enterprise</SelectItem>
                <SelectItem value="Aramark">Aramark Standard</SelectItem>
              </SelectContent>
            </Select>
            <p className="text-[10px] text-muted-text">
              Starting rates will be pulled from this master book
            </p>
          </div>

          <div className="space-y-2">
            <Label htmlFor="discount" className="text-secondary-text text-xs uppercase font-bold tracking-wider">Volume Discount (%)</Label>
            <div className="flex items-center gap-3">
              <Input
                id="discount"
                type="number"
                min="0"
                max="100"
                step="0.1"
                value={formData.discount}
                onChange={(e) =>
                  setFormData({
                    ...formData,
                    discount: parseFloat(e.target.value),
                  })
                }
                className="w-24 bg-card border-border/50 focus:border-primary font-mono text-right"
              />
              <Badge variant="outline" className="text-[10px] font-bold text-emerald-600 bg-emerald-50 border-emerald-200">
                Applied to all rates
              </Badge>
            </div>
          </div>
        </form>
        <DialogFooter>
          <Button variant="outline" onClick={onClose} className="border-border/50 text-secondary-text hover:text-primary-text">
            Cancel
          </Button>
          <Button onClick={handleSubmit} type="submit" className="bg-primary text-primary-foreground hover:bg-primary/90">
            {editingCard ? "Save Changes" : "Create Card"}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}
