import React, { useState } from 'react';
import { Button } from '../../ui/button';
import { X, Zap, Calendar, Percent, CheckSquare, Square } from 'lucide-react';
import { Product } from '../../../types';
import { useToast } from '../../../context/ToastContext';

interface FlashSaleModalProps {
  products: Product[];
  onClose: () => void;
  onStart: (config: any) => void;
}

export const FlashSaleModal: React.FC<FlashSaleModalProps> = ({
  products,
  onClose,
  onStart,
}) => {
  const { addToast } = useToast();
  const [selectedIds, setSelectedIds] = useState<string[]>([]);
  const [discount, setDiscount] = useState(20);
  const [duration, setDuration] = useState(24); // Hours

  const toggleProduct = (id: string) => {
    setSelectedIds((prev) =>
      prev.includes(id) ? prev.filter((pid) => pid !== id) : [...prev, id],
    );
  };

  const handleStart = () => {
    if (selectedIds.length === 0) {
      addToast('Select at least one product', 'error');
      return;
    }
    onStart({ productIds: selectedIds, discount, duration });
    onClose();
  };

  return (
    <div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
      <div
        className="absolute inset-0 bg-kodo-void/90 backdrop-blur-sm"
        onClick={onClose}
      ></div>
      <div className="relative w-full max-w-2xl bg-kodo-graphite border border-kodo-steel rounded-xl shadow-2xl animate-scaleIn overflow-hidden flex flex-col max-h-[85vh]">
        <div className="p-4 border-b border-kodo-steel bg-kodo-ink flex justify-between items-center">
          <h3 className="font-bold text-white flex items-center gap-2">
            <Zap className="w-5 h-5 text-kodo-gold" /> Start Flash Sale
          </h3>
          <button onClick={onClose}>
            <X className="w-5 h-5 text-gray-400 hover:text-white" />
          </button>
        </div>

        <div className="p-6 flex flex-col md:flex-row gap-6 flex-1 overflow-hidden">
          {/* Left: Configuration */}
          <div className="w-full md:w-1/2 space-y-6">
            <div>
              <label className="block text-xs font-bold text-gray-400 uppercase mb-2">
                Discount Percentage
              </label>
              <div className="relative">
                <Percent className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
                <input
                  type="number"
                  className="w-full bg-kodo-void border border-kodo-steel rounded pl-10 pr-4 py-2 text-white focus:border-kodo-gold outline-none"
                  value={discount}
                  onChange={(e) => setDiscount(Number(e.target.value))}
                  min={5}
                  max={90}
                />
              </div>
            </div>

            <div>
              <label className="block text-xs font-bold text-gray-400 uppercase mb-2">
                Duration (Hours)
              </label>
              <div className="relative">
                <Calendar className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
                <select
                  className="w-full bg-kodo-void border border-kodo-steel rounded pl-10 pr-4 py-2 text-white focus:border-kodo-gold outline-none appearance-none"
                  value={duration}
                  onChange={(e) => setDuration(Number(e.target.value))}
                >
                  <option value={1}>1 Hour</option>
                  <option value={6}>6 Hours</option>
                  <option value={12}>12 Hours</option>
                  <option value={24}>24 Hours</option>
                  <option value={48}>48 Hours</option>
                  <option value={72}>3 Days</option>
                </select>
              </div>
            </div>

            <div className="bg-kodo-gold/10 border border-kodo-gold/30 p-4 rounded-lg">
              <h4 className="text-kodo-gold font-bold text-sm mb-1">
                Impact Summary
              </h4>
              <p className="text-xs text-gray-300">
                Applying a{' '}
                <span className="font-bold text-white">{discount}%</span>{' '}
                discount to{' '}
                <span className="font-bold text-white">
                  {selectedIds.length}
                </span>{' '}
                products. Sale ends in {duration} hours.
              </p>
            </div>
          </div>

          {/* Right: Product Selection */}
          <div className="w-full md:w-1/2 flex flex-col">
            <div className="flex justify-between items-center mb-2">
              <label className="block text-xs font-bold text-gray-400 uppercase">
                Select Products
              </label>
              <button
                className="text-xs text-kodo-cyan hover:underline"
                onClick={() =>
                  setSelectedIds(
                    selectedIds.length === products.length
                      ? []
                      : products.map((p) => p.id),
                  )
                }
              >
                {selectedIds.length === products.length
                  ? 'Deselect All'
                  : 'Select All'}
              </button>
            </div>

            <div className="flex-1 overflow-y-auto custom-scrollbar border border-kodo-steel rounded-lg bg-kodo-void p-2 space-y-1">
              {products.map((product) => (
                <div
                  key={product.id}
                  className={`flex items-center gap-3 p-2 rounded cursor-pointer transition-colors ${selectedIds.includes(product.id) ? 'bg-kodo-gold/10 border border-kodo-gold/30' : 'hover:bg-kodo-ink border border-transparent'}`}
                  onClick={() => toggleProduct(product.id)}
                >
                  <div
                    className={`text-gray-500 ${selectedIds.includes(product.id) ? 'text-kodo-gold' : ''}`}
                  >
                    {selectedIds.includes(product.id) ? (
                      <CheckSquare className="w-4 h-4" />
                    ) : (
                      <Square className="w-4 h-4" />
                    )}
                  </div>
                  <img
                    src={product.coverUrl}
                    className="w-8 h-8 rounded object-cover"
                  />
                  <div className="flex-1 min-w-0">
                    <div className="text-sm font-bold text-white truncate">
                      {product.title}
                    </div>
                    <div className="text-xs text-gray-500">
                      ${product.price}
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>

        <div className="p-4 border-t border-kodo-steel bg-kodo-ink flex justify-end gap-3">
          <Button variant="ghost" onClick={onClose}>
            Cancel
          </Button>
          <Button
            variant="gaming"
            onClick={handleStart}
            className="border-kodo-gold text-kodo-gold hover:bg-kodo-gold/10"
          >
            Launch Sale
          </Button>
        </div>
      </div>
    </div>
  );
};
