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 CustomAddOn = ({ open, setOpen, title, onSave }: { open: any; setOpen: any, title: string, onSave: any }) => {
  const [options, setOptions] = useState([
    {
      id: 1,
      name: '',
      price: 0,
      isCompulsory: true
    }
  ]);

  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 = () => {
    // Handle save logic
    setOpen({ ...open, [title]: false });
    onSave({ type: title, option: options })
  };

  const toggleCompulsory = (id: number) => {
    setOptions(
      options.map((option) =>
        option.id === id
          ? { ...option, isCompulsory: !option.isCompulsory }
          : option
      )
    );
  };

  return (
    <Dialog
      open={open?.[title]}
      onOpenChange={(value: any) => setOpen({ ...open, [title]: value })}
    >
      <DialogTrigger asChild>
        <button className="flex w-full items-center justify-between p-4">
          <div>
            <p className="text-start font-medium">{title}</p>
            <p className="text-sm text-gray-500">
              Add-on like curd, Coke, raita, salad, 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>Add-on</DialogTitle>
          <Button
            variant="ghost"
            onClick={() => setOpen({ ...open, [title]: false })}
          >
            <X className="h-6 w-6" />
          </Button>
        </DialogHeader>

        <div className="space-y-6">
          {options.map((option, index) => (
            <div key={option.id} className="space-y-4">
              <Input
                placeholder="Add-on Name e.g. Curd"
                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={`bg-${option.isCompulsory ? 'yellow-400' : 'transparent'
                      } text-black`}
                    onClick={() => toggleCompulsory(option.id)}
                  >
                    Compulsory
                  </Button>
                  <Button
                    type="button"
                    variant={!option.isCompulsory ? 'default' : 'outline'}
                    className={`bg-${!option.isCompulsory ? 'yellow-400' : 'transparent'
                      } text-black`}
                    onClick={() => toggleCompulsory(option.id)}
                  >
                    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">
                    {currency}
                  </span>
                  <Input
                    className="pl-8"
                    type="number"
                    maxLength={4}
                    value={option.price}
                    onChange={(e) => {
                      const val = e.target.value.slice(0, 4);
                      const newOptions = [...options];
                      newOptions[index].price = val === '' ? '' as any : Math.max(0, Number(val));
                      setOptions(newOptions);
                    }}
                    placeholder="500"
                  />
                </div>
              </div>

              {options.length > 1 && (
                <div className="flex justify-end">
                  <Button
                    variant="ghost"
                    className="text-sm text-red-500 hover:text-red-600"
                    onClick={() => removeOption(option.id)}
                  >
                    Remove
                  </Button>
                </div>
              )}

              {index !== options.length - 1 && (
                <div className="my-4 border-b border-dashed" />
              )}
            </div>
          ))}

          <Button
            variant="ghost"
            className="w-full border-2 border-dashed border-[var(--primary-brand)]/20 text-[var(--primary-brand)] hover:text-[var(--primary-brand)]/80 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="w-full bg-yellow-400 text-black hover:bg-[var(--primary-brand)]"
            onClick={handleSave}
          >
            Save
          </Button>
        </div>
      </DialogContent>
    </Dialog>
  );
};

export default CustomAddOn;