import React, { useState } from 'react';
import { Clock, X } from 'lucide-react';
import { Button } from '../../ui/Button';

export interface AlertSnoozeMenuProps {
  onSnooze: (duration: '15min' | '1hr' | '4hr' | 'tomorrow' | number) => void;
  onCancel: () => void;
}

const PRESET_DURATIONS = [
  { value: '15min' as const, label: '15 minutos', icon: '⏰' },
  { value: '1hr' as const, label: '1 hora', icon: '🕐' },
  { value: '4hr' as const, label: '4 horas', icon: '🕓' },
  { value: 'tomorrow' as const, label: 'Mañana (9 AM)', icon: '☀️' },
];

const AlertSnoozeMenu: React.FC<AlertSnoozeMenuProps> = ({
  onSnooze,
  onCancel,
}) => {
  const [showCustom, setShowCustom] = useState(false);
  const [customHours, setCustomHours] = useState(1);

  const handleCustomSnooze = () => {
    const milliseconds = customHours * 60 * 60 * 1000;
    onSnooze(milliseconds);
  };

  return (
    <div className="bg-[var(--bg-primary)] border border-[var(--border-primary)] rounded-lg shadow-lg p-3 min-w-[240px]">
      {/* Header */}
      <div className="flex items-center justify-between mb-3 pb-2 border-b border-[var(--border-primary)]">
        <div className="flex items-center gap-2">
          <Clock className="w-4 h-4 text-[var(--color-primary)]" />
          <span className="text-sm font-semibold text-[var(--text-primary)]">
            Posponer hasta
          </span>
        </div>
        <button
          onClick={onCancel}
          className="p-1 hover:bg-[var(--bg-secondary)] rounded transition-colors"
        >
          <X className="w-4 h-4 text-[var(--text-secondary)]" />
        </button>
      </div>

      {!showCustom ? (
        <>
          {/* Preset Options */}
          <div className="space-y-1 mb-2">
            {PRESET_DURATIONS.map((preset) => (
              <button
                key={preset.value}
                onClick={() => onSnooze(preset.value)}
                className="w-full px-3 py-2 text-left text-sm rounded-lg hover:bg-[var(--bg-secondary)] transition-colors flex items-center gap-2 text-[var(--text-primary)]"
              >
                <span className="text-lg">{preset.icon}</span>
                <span>{preset.label}</span>
              </button>
            ))}
          </div>

          {/* Custom Option */}
          <button
            onClick={() => setShowCustom(true)}
            className="w-full px-3 py-2 text-left text-sm rounded-lg border border-dashed border-[var(--border-primary)] hover:bg-[var(--bg-secondary)] transition-colors text-[var(--text-secondary)]"
          >
            ⚙️ Personalizado...
          </button>
        </>
      ) : (
        <>
          {/* Custom Time Input */}
          <div className="space-y-3">
            <div>
              <label className="block text-xs font-medium text-[var(--text-secondary)] mb-1">
                Número de horas
              </label>
              <input
                type="number"
                min="1"
                max="168"
                value={customHours}
                onChange={(e) => setCustomHours(parseInt(e.target.value) || 1)}
                className="w-full px-3 py-2 border border-[var(--border-primary)] rounded-lg text-sm bg-[var(--bg-primary)] text-[var(--text-primary)]"
                autoFocus
              />
              <p className="text-xs text-[var(--text-tertiary)] mt-1">
                Máximo 168 horas (7 días)
              </p>
            </div>

            <div className="flex gap-2">
              <Button
                variant="outline"
                size="sm"
                onClick={() => setShowCustom(false)}
                className="flex-1"
              >
                Atrás
              </Button>
              <Button
                variant="primary"
                size="sm"
                onClick={handleCustomSnooze}
                className="flex-1"
              >
                Confirmar
              </Button>
            </div>
          </div>
        </>
      )}
    </div>
  );
};

export default AlertSnoozeMenu;
