import React, { useState } from 'react';
import { Calendar } from 'lucide-react';
import { cn } from '../lib/utils';

interface DateFilterPopoverProps {
  selectedRange: { start: string; end: string };
  onRangeChange: (range: { start: string; end: string }) => void;
  onClose: () => void;
}

export function DateFilterPopover({ selectedRange, onRangeChange, onClose }: DateFilterPopoverProps) {
  const [startDate, setStartDate] = useState(selectedRange.start);
  const [endDate, setEndDate] = useState(selectedRange.end);

  const handleApply = () => {
    onRangeChange({ start: startDate, end: endDate });
    onClose();
  };

  const handleClear = () => {
    setStartDate('');
    setEndDate('');
    onRangeChange({ start: '', end: '' });
    onClose();
  };

  const hasValue = startDate || endDate;

  return (
    <div
      className="absolute top-full left-0 mt-1 w-72 bg-slate-800 border border-slate-700 rounded-lg shadow-2xl z-50 p-4 flex flex-col gap-4 animate-in fade-in zoom-in-95 duration-100"
      onClick={(e) => e.stopPropagation()}
    >
      <div className="flex items-center gap-2 text-xs font-medium text-slate-400 uppercase tracking-wider">
        <Calendar className="w-4 h-4" />
        Filter by Date Range
      </div>

      <div className="space-y-3">
        <div className="flex flex-col gap-1.5">
          <label className="text-[10px] text-slate-500 uppercase tracking-wider">From</label>
          <input
            type="date"
            value={startDate}
            onChange={e => setStartDate(e.target.value)}
            className="w-full bg-slate-900 border border-slate-700 rounded px-3 py-2 text-xs text-white focus:outline-none focus:border-blue-500"
          />
        </div>

        <div className="flex flex-col gap-1.5">
          <label className="text-[10px] text-slate-500 uppercase tracking-wider">To</label>
          <input
            type="date"
            value={endDate}
            onChange={e => setEndDate(e.target.value)}
            className="w-full bg-slate-900 border border-slate-700 rounded px-3 py-2 text-xs text-white focus:outline-none focus:border-blue-500"
          />
        </div>
      </div>

      <div className="flex items-center justify-between pt-3 border-t border-slate-700">
        <button
          onClick={handleClear}
          className="text-[10px] font-bold text-slate-400 hover:text-white transition-colors uppercase tracking-tight"
        >
          Clear
        </button>
        <div className="flex items-center gap-2">
          <button
            onClick={onClose}
            className="px-3 py-1.5 text-[10px] font-medium text-slate-300 hover:text-white hover:bg-slate-700 rounded transition-colors"
          >
            Cancel
          </button>
          <button
            onClick={handleApply}
            className="px-4 py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-[10px] font-black rounded transition-colors shadow-lg"
          >
            Apply
          </button>
        </div>
      </div>
    </div>
  );
}