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

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

  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, [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 })}
    >
      {showTrigger && (
        <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">
                Manage options for this customization group.
              </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>Edit {title}</DialogTitle>
          <Button
            variant="ghost"
            onClick={() => setOpen({ ...open, [title]: false })}
          >
            <X className="h-6 w-6" />
          </Button>
        </DialogHeader>

        <div className="no-scrollbar max-h-[70vh] space-y-6 overflow-y-auto">
          {options.map((option, index) => (
            <div key={option.id} className="space-y-4 rounded-lg border p-3 bg-gray-50/50">
              <Input
                placeholder="Option name e.g. Extra Cheese"
                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 ? 'bg-[var(--primary-brand)] text-white hover:bg-[var(--primary-brand)]/90 border-[var(--primary-brand)]' : ''
                      }`}
                    onClick={() => toggleCompulsory(option.id)}
                  >
                    Compulsory
                  </Button>
                  <Button
                    type="button"
                    variant={!option.isCompulsory ? 'default' : 'outline'}
                    className={`transition-colors ${!option.isCompulsory ? 'bg-[var(--primary-brand)] text-white hover:bg-[var(--primary-brand)]/90 border-[var(--primary-brand)]' : ''
                      }`}
                    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 text-gray-500">
                    {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="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="w-full bg-[var(--primary-brand)] hover:bg-[var(--primary-brand)]/90 text-white font-semibold h-11"
            onClick={handleSave}
            disabled={options.some(opt => !opt.name)}
          >
            Save Changes
          </Button>
        </div>
      </DialogContent>
    </Dialog>
  );
};

export default CustomAddOn;