import React, { useState } from 'react';

/**
 * Usage: <DateFilterModal onClose={fn} onApply={(start, end) => {}} defaultStart defaultEnd />
 */
const DateFilterModal = ({ onClose, onApply, defaultStart = '', defaultEnd = '' }) => {
  const [start, setStart] = useState(defaultStart);
  const [end, setEnd] = useState(defaultEnd);
  const today = new Date().toISOString().slice(0, 10);
  const presetRanges = [
    { label: 'Today', get: () => ({ start: today, end: today }) },
     { label: 'Yesterday', get: () => {
      const d = new Date();
      const s = new Date(d.getTime() - 1 * 24 * 60 * 60 * 1000);
      return { start: s.toISOString().slice(0, 10), end: s.toISOString().slice(0, 10) };
    } },
    { label: 'Last 7 days', get: () => {
      const d = new Date();
      const s = new Date(d.getTime() - 6 * 24 * 60 * 60 * 1000);
      return { start: s.toISOString().slice(0, 10), end: today };
    } },
    { label: 'Last 30 days', get: () => {
      const d = new Date();
      const s = new Date(d.getTime() - 29 * 24 * 60 * 60 * 1000);
      return { start: s.toISOString().slice(0, 10), end: today };
    } },
    { label: 'This Year', get: () => {
      const d = new Date();
      return { start: `${d.getFullYear()}-01-01`, end: today };
    } },
    { label: 'Last Year', get: () => {
      const d = new Date();
      return { start: `${d.getFullYear() - 1}-01-01`, end: `${d.getFullYear() - 1}-12-31` };
    } },
  ];
  const handleApplyClick = () => {
    if (start && end) {
      onApply(start, end);
      onClose();
    }
  };
  // Helper to check if a preset is active
  const isPresetActive = (range) => {
    const r = range.get();
    return r.start === start && r.end === end;
  };
  return (
    <div className="absolute left-1/2 top-24 z-50" style={{ transform: 'translateX(-50%)' }}>
      <div className="bg-white rounded-lg shadow-2xl w-full max-w-md p-6 border border-blue-200" onClick={e => e.stopPropagation()}>
        <h2 className="text-xl font-semibold text-gray-800 mb-4">Select Date Range</h2>
        <div className="mb-6">
          <p className="text-sm font-medium text-gray-600 mb-2">Presets</p>
          <div className="flex flex-wrap gap-2">
            {presetRanges.map(range => {
              const active = isPresetActive(range);
              return (
                <button
                  key={range.label}
                  onClick={() => { const r = range.get(); setStart(r.start); setEnd(r.end); }}
                  className={`px-3 py-1 text-sm rounded-full transition-colors font-medium border ${active ? 'bg-blue-600 text-white border-blue-600 shadow' : 'bg-gray-100 text-gray-700 border-transparent hover:bg-blue-100 hover:text-blue-700'}`}
                >
                  {range.label}
                </button>
              );
            })}
          </div>
        </div>
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6">
          <div>
            <label htmlFor="start-date" className="block text-sm font-medium text-gray-600 mb-1">From</label>
            <input type="date" id="start-date" value={start} onChange={e => setStart(e.target.value)} className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" />
          </div>
          <div>
            <label htmlFor="end-date" className="block text-sm font-medium text-gray-600 mb-1">To</label>
            <input type="date" id="end-date" value={end} onChange={e => setEnd(e.target.value)} className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" />
          </div>
        </div>
        <div className="flex justify-end gap-3">
          <button onClick={onClose} className="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200">Cancel</button>
          <button onClick={handleApplyClick} className="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700" disabled={!start || !end}>Apply</button>
        </div>
      </div>
    </div>
  );
};

export default DateFilterModal;
