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

import { useGlobalContext } from '@/context/Provider';

interface OptionItem {
  id?: number | string;
  title: string;
  additional_price: number | string;
}

interface AddMoreDialogProps {
  open: any;
  setOpen: any;
  onAdd: (data: any, editingIndex?: number | null) => void;
  initialData?: any;
  editingIndex?: number | null;
  onDeleteGroup?: (index: number) => void;
}

const AddMoreDialog: React.FC<AddMoreDialogProps> = ({
  open,
  setOpen,
  onAdd,
  initialData,
  editingIndex = null,
  onDeleteGroup
}) => {
  const { Toast } = useGlobalContext();
  const isOpen = typeof open === 'object' ? Boolean(open?.addmore) : Boolean(open);

  const handleClose = () => {
    if (typeof open === 'object') {
      setOpen({ ...open, addmore: false });
    } else {
      setOpen(false);
    }
  };

  const [minSelection, setMinSelection] = useState<number | string>(0);
  const [maxSelection, setMaxSelection] = useState<number | string>(1);
  const [title, setTitle] = useState<string>('');
  const [description, setDescription] = useState<string>('');
  const [options, setOptions] = useState<OptionItem[]>([
    { id: 1, title: '', additional_price: 0 }
  ]);

  useEffect(() => {
    if (isOpen) {
      if (initialData) {
        setTitle(initialData.title || initialData.name || '');
        setDescription(initialData.description || initialData.desc || '');
        setMinSelection(Number(initialData.min_selection ?? 0));
        setMaxSelection(Number(initialData.max_selection ?? 1));
        if (initialData.options && Array.isArray(initialData.options) && initialData.options.length > 0) {
          setOptions(
            initialData.options.map((opt: any, idx: number) => ({
              id: opt.id || idx + 1,
              title: opt.title || opt.name || '',
              additional_price: Number(opt.additional_price ?? opt.price ?? 0)
            }))
          );
        } else {
          setOptions([{ id: 1, title: '', additional_price: 0 }]);
        }
      } else {
        setTitle('');
        setDescription('');
        setMinSelection(0);
        setMaxSelection(1);
        setOptions([{ id: 1, title: '', additional_price: 0 }]);
      }
    }
  }, [isOpen, initialData]);

  const addOption = () => {
    setOptions([
      ...options,
      {
        id: options.length + 1,
        title: '',
        additional_price: 0
      }
    ]);
  };

  const removeOption = (index: number) => {
    if (options.length <= 1) return;
    setOptions(options.filter((_, i) => i !== index));
  };

  const handleSave = () => {
    if (!title.trim()) {
      Toast.error('Title is required');
      return;
    }

    const optionsCount = options.length;
    const minVal = Number(minSelection ?? 0);
    const maxVal = Number(maxSelection ?? 1);

    if (minVal > optionsCount) {
      Toast.error(`Min Selection (${minVal}) cannot be greater than the number of options added (${optionsCount})`);
      return;
    }

    if (maxVal > optionsCount) {
      Toast.error(`Max Selection (${maxVal}) cannot be greater than the number of options added (${optionsCount})`);
      return;
    }

    if (maxVal < minVal) {
      Toast.error('Max Selection cannot be less than Min Selection');
      return;
    }

    const formattedData = {
      title: title.trim(),
      description: description.trim(),
      min_selection: minVal,
      max_selection: maxVal,
      options: options.map((opt) => ({
        title: opt.title.trim(),
        additional_price: Number(opt.additional_price || 0),
        min_selection: minVal,
        max_selection: maxVal
      }))
    };

    onAdd(formattedData, editingIndex);
    handleClose();
  };

  const handleRemoveGroup = () => {
    if (editingIndex !== null && editingIndex !== undefined && onDeleteGroup) {
      onDeleteGroup(editingIndex);
    }
    handleClose();
  };

  return (
    <Dialog open={isOpen} onOpenChange={(val) => !val && handleClose()}>
      <DialogContent className="max-w-lg p-6 bg-white rounded-2xl shadow-xl overflow-hidden border-0">
        <DialogHeader className="flex flex-row items-center justify-between pb-2 border-b border-gray-100">
          <DialogTitle className="text-xl font-bold text-gray-900">
            Customization of Item
          </DialogTitle>
          <Button
            variant="ghost"
            size="icon"
            className="h-8 w-8 rounded-full text-gray-400 hover:text-gray-600"
            onClick={handleClose}
          >
            <X className="h-5 w-5" />
          </Button>
        </DialogHeader>

        <div className="no-scrollbar max-h-[75vh] space-y-5 overflow-y-auto pt-4 pr-1">
          {/* Customer Selection Limit */}
          <div className="rounded-xl border border-gray-100 bg-gray-50/60 p-4 space-y-3">
            <div className="flex items-center justify-between">
              <span className="text-sm font-bold text-gray-900">
                Customer Selection Limit
              </span>
              <span className="text-xs text-gray-500 font-normal">
                How many options customer can select
              </span>
            </div>
            <div className="grid grid-cols-2 gap-4">
              <div>
                <label className="block text-xs font-semibold text-gray-700 mb-1">
                  Min Selection
                </label>
                <Input
                  type="number"
                  min="0"
                  maxLength={2}
                  className="h-10 bg-white rounded-lg border-gray-200 text-sm font-medium"
                  value={minSelection}
                  onChange={(e) => {
                    const val = e.target.value.slice(0, 2);
                    setMinSelection(val === '' ? '' : Math.max(0, Number(val)));
                  }}
                />
              </div>
              <div>
                <label className="block text-xs font-semibold text-gray-700 mb-1">
                  Max Selection
                </label>
                <Input
                  type="number"
                  min="1"
                  maxLength={2}
                  className="h-10 bg-white rounded-lg border-gray-200 text-sm font-medium"
                  value={maxSelection}
                  onChange={(e) => {
                    const val = e.target.value.slice(0, 2);
                    setMaxSelection(val === '' ? '' : Math.max(0, Number(val)));
                  }}
                />
              </div>
            </div>
          </div>

          {/* Group Title Section */}
          <div className="space-y-2">
            <div className="flex items-center justify-between">
              <label className="text-sm font-medium text-gray-900">
                Title of the group
              </label>
              {(editingIndex !== null && editingIndex !== undefined) && (
                <button
                  type="button"
                  onClick={handleRemoveGroup}
                  className="text-xs font-semibold text-red-500 hover:text-red-700 transition-colors"
                >
                  Remove
                </button>
              )}
            </div>
            <Input
              placeholder="e.g. Choice of Crust"
              className="h-11 rounded-lg border-gray-200 text-sm"
              value={title}
              onChange={(e) => setTitle(e.target.value)}
            />
          </div>

          {/* Options / Variants Section */}
          <div className="space-y-3 pt-2">
            <h4 className="text-sm font-bold text-gray-900">
              Options / Variants
            </h4>

            {options.map((option, index) => (
              <div
                key={index}
                className="space-y-3 rounded-xl border border-gray-200 p-4 bg-white shadow-sm"
              >
                <div>
                  <Input
                    placeholder="Option name e.g. Thin Crust"
                    className="h-10 rounded-lg border-gray-200 text-sm"
                    value={option.title}
                    onChange={(e) => {
                      const newOptions = [...options];
                      newOptions[index].title = e.target.value;
                      setOptions(newOptions);
                    }}
                  />
                </div>

                <div>
                  <label className="block text-xs font-semibold text-gray-700 mb-1">
                    Additional Price
                  </label>
                  <div className="relative">
                    <span className="absolute left-3 top-1/2 -translate-y-1/2 text-sm font-bold text-gray-600">
                      {currency}
                    </span>
                    <Input
                      type="number"
                      min="0"
                      maxLength={4}
                      className="pl-12 h-10 rounded-lg border-gray-200 text-sm font-medium"
                      value={option.additional_price}
                      onChange={(e) => {
                        const val = e.target.value.slice(0, 4);
                        const newOptions = [...options];
                        newOptions[index].additional_price = val === '' ? '' : Math.max(0, Number(val));
                        setOptions(newOptions);
                      }}
                      placeholder="0"
                    />
                  </div>
                </div>

                {options.length > 1 && (
                  <div className="flex justify-end pt-1">
                    <button
                      type="button"
                      className="text-xs font-semibold text-red-500 hover:text-red-700 transition-colors"
                      onClick={() => removeOption(index)}
                    >
                      Remove Option
                    </button>
                  </div>
                )}
              </div>
            ))}

            <Button
              type="button"
              variant="outline"
              className="w-full h-11 border-2 border-dashed border-[var(--primary-brand)]/30 text-[var(--primary-brand)] hover:bg-[var(--primary-brand)]/5 hover:border-[var(--primary-brand)]/50 font-semibold rounded-xl transition-colors flex items-center justify-center gap-2"
              onClick={addOption}
            >
              <Plus className="h-4 w-4" />
              ADD ANOTHER OPTION
            </Button>
          </div>

          <Button
            type="button"
            className="w-full h-12 bg-[var(--primary-brand)] hover:bg-[var(--primary-brand)]/90 text-white font-bold text-sm rounded-xl shadow-md shadow-[var(--primary-brand)]/20 transition-all mt-4"
            onClick={handleSave}
            disabled={!title.trim() || options.some((opt) => !opt.title.trim())}
          >
            Save Changes
          </Button>
        </div>
      </DialogContent>
    </Dialog>
  );
};

export default AddMoreDialog;