import React, { useState } from "react";
import { ChevronRight, Plus, X } from "lucide-react";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { currency } from "@/lib/utils";

const ToppingsDialog = ({
  open,
  setOpen,
  onSave,
  initialData,
  showTrigger = true,
}: {
  open: any;
  setOpen: any;
  onSave: any;
  initialData?: any[];
  showTrigger?: boolean;
}) => {
  const [options, setOptions] = useState([
    {
      id: 1,
      name: "",
      price: 0,
      isCompulsory: true,
    },
  ]);

  React.useEffect(() => {
    if (initialData && initialData.length > 0) {
      setOptions(
        initialData.map((item, index) => ({
          id: index + 1,
          name: item.name || "",
          price: Number(item.price || 0),
          isCompulsory: item.isCompulsory ?? true,
        }))
      );
    } else {
      setOptions([
        {
          id: 1,
          name: "",
          price: 0,
          isCompulsory: true,
        },
      ]);
    }
  }, [initialData, open]);

  const addOption = () => {
    setOptions([
      ...options,
      {
        id: options.length + 1,
        name: "",
        price: 0,
        isCompulsory: true,
      },
    ]);
  };

  const removeOption = (id: number) => {
    setOptions(options.filter((option) => option.id !== id));
  };

  const handleSave = () => {
    setOpen({ ...open, toppings: false });
    onSave({ type: "toppings", option: options });
  };

  return (
    <Dialog
      open={open?.toppings}
      onOpenChange={(value: any) => setOpen({ ...open, toppings: value })}
    >
      {showTrigger && (
        <DialogTrigger asChild>
          <button className="flex w-full items-center justify-between p-4">
            <div>
              <p className="text-start font-medium">Toppings</p>
              <p className="text-sm text-gray-500">
                Sauces like pesto or veggies like onions, etc.
              </p>
            </div>
            <ChevronRight className="h-5 w-5" />
          </button>
        </DialogTrigger>
      )}
      <DialogContent className="max-w-lg">
        <DialogHeader className="flex flex-row items-center justify-between">
          <DialogTitle>Toppings</DialogTitle>
          <Button
            variant="ghost"
            onClick={() => setOpen({ ...open, toppings: false })}
          >
            <X className="h-6 w-6" />
          </Button>
        </DialogHeader>

        <div className="no-scrollbar max-h-[70vh] space-y-6 overflow-y-auto pr-2">
          {options.map((option, index) => (
            <div
              key={option.id}
              className="space-y-4 rounded-lg border bg-gray-50/50 p-3"
            >
              <Input
                placeholder="Option name e.g. Extra Olives"
                value={option.name}
                onChange={(e) => {
                  const newOptions = [...options];
                  newOptions[index].name = e.target.value;
                  setOptions(newOptions);
                }}
              />

              <div className="space-y-2">
                <p className="text-sm font-medium">Customer Selection is</p>
                <div className="flex gap-2">
                  <Button
                    type="button"
                    variant={option.isCompulsory ? 'default' : 'outline'}
                    className={`transition-colors ${option.isCompulsory
                      ? 'border-[var(--primary-brand)] bg-[var(--primary-brand)] text-white hover:bg-[var(--primary-brand)]/90'
                      : ''
                      }`}
                    onClick={() => {
                      const newOptions = [...options];
                      newOptions[index].isCompulsory = true;
                      setOptions(newOptions);
                    }}
                  >
                    Compulsory
                  </Button>
                  <Button
                    type="button"
                    variant={!option.isCompulsory ? 'default' : 'outline'}
                    className={`transition-colors ${!option.isCompulsory
                      ? 'border-[var(--primary-brand)] bg-[var(--primary-brand)] text-white hover:bg-[var(--primary-brand)]/90'
                      : ''
                      }`}
                    onClick={() => {
                      const newOptions = [...options];
                      newOptions[index].isCompulsory = false;
                      setOptions(newOptions);
                    }}
                  >
                    Optional
                  </Button>
                </div>
              </div>

              <div className="space-y-2">
                <p className="text-sm font-medium">Additional Price</p>
                <div className="relative">
                  <span className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500">
                    {currency}
                  </span>
                  <Input
                    className="pl-8"
                    type="number"
                    value={option.price}
                    onChange={(e) => {
                      const newOptions = [...options];
                      newOptions[index].price = Number(e.target.value);
                      setOptions(newOptions);
                    }}
                    placeholder="0"
                  />
                </div>
              </div>
              {options.length > 1 && (
                <div className="flex justify-end">
                  <Button
                    variant="ghost"
                    size="sm"
                    className="text-red-500 hover:text-red-600"
                    onClick={() => removeOption(option.id)}
                  >
                    Remove Option
                  </Button>
                </div>
              )}
            </div>
          ))}

          <Button
            variant="outline"
            className="w-full border-2 border-dashed border-[var(--primary-brand)]/20 text-[var(--primary-brand)] hover:bg-[var(--primary-brand)]/5 hover:border-[var(--primary-brand)]/40 transition-colors"
            onClick={addOption}
          >
            <Plus className="mr-2 h-4 w-4" />
            ADD MORE OPTION
          </Button>

          <Button
            className="h-11 w-full bg-[var(--primary-brand)] font-semibold text-white hover:bg-[var(--primary-brand)]/90"
            variant={'default'}
            onClick={handleSave}
            disabled={options.some((opt) => !opt.name)}
          >
            Save
          </Button>
        </div>
      </DialogContent>
    </Dialog>
  );
};

export default ToppingsDialog;