import React, { useRef, useState } from 'react';
import { Calendar, RefreshCw, ChevronDown } from 'lucide-react';
import type { DateRange } from '../types';
import { endOfLocalDay, formatDateParam, parseLocalDateInput, rangeForDay, rangeForLastDays, rangeForPreviousDay, startOfLocalDay } from '../dateRanges';

interface DateRangePickerProps {
  dateRange: DateRange;
  onChange: (range: DateRange) => void;
  refreshInterval?: number;
  setRefreshInterval?: (interval: number) => void;
  onManualRefresh?: () => void;
}

const PRESETS = [
  { label: 'Hoje', getRange: () => rangeForDay(new Date()) },
  { label: 'Ontem', getRange: () => rangeForPreviousDay() },
  { label: 'Últimos 7 dias', getRange: () => rangeForLastDays(7) },
  { label: 'Últimos 30 dias', getRange: () => rangeForLastDays(30) },
  { label: 'Este Mês', getRange: () => { const end = endOfLocalDay(new Date()); const start = startOfLocalDay(new Date(end.getFullYear(), end.getMonth(), 1)); return { start, end }; } },
  { label: 'Mês Passado', getRange: () => { const d = new Date(); const start = new Date(d.getFullYear(), d.getMonth() - 1, 1); const end = new Date(d.getFullYear(), d.getMonth(), 0, 23, 59, 59, 999); return { start, end }; } },
  { label: 'Últimos 90 dias', getRange: () => rangeForLastDays(90) },
  { label: 'Este Ano', getRange: () => { const end = endOfLocalDay(new Date()); const start = startOfLocalDay(new Date(end.getFullYear(), 0, 1)); return { start, end }; } },
  { label: 'Todo o Período', getRange: () => { const end = endOfLocalDay(new Date()); const start = startOfLocalDay(new Date(2000, 0, 1)); return { start, end }; } },
];

const REFRESH_OPTIONS = [
  { label: 'Desligado', value: 0 },
  { label: '5s', value: 5000 },
  { label: '10s', value: 10000 },
  { label: '30s', value: 30000 },
  { label: '1m', value: 60000 },
  { label: '5m', value: 300000 },
];

const getRangeKey = (range: DateRange) => `${formatDateParam(range.start)}:${formatDateParam(range.end)}`;

const DateRangePicker: React.FC<DateRangePickerProps> = ({ dateRange, onChange, refreshInterval, setRefreshInterval, onManualRefresh }) => {
  const [isPresetOpen, setIsPresetOpen] = useState(false);
  const [customDraft, setCustomDraft] = useState(() => ({
    appliedKey: getRangeKey(dateRange),
    range: dateRange
  }));
  const startRef = useRef<HTMLInputElement>(null);
  const endRef = useRef<HTMLInputElement>(null);
  const appliedRangeKey = getRangeKey(dateRange);
  const draftRange = customDraft.appliedKey === appliedRangeKey ? customDraft.range : dateRange;

  const formatDisplayDate = (date: Date) => {
    return date.toLocaleDateString('pt-BR', { day: '2-digit', month: '2-digit', year: 'numeric' });
  };

  const formatDateForInput = (date: Date) => {
    return formatDateParam(date);
  };

  const handleStartChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newStart = parseLocalDateInput(e.target.value);
    if (newStart && !isNaN(newStart.getTime())) {
      const start = startOfLocalDay(newStart);
      const end = draftRange.end < start ? endOfLocalDay(start) : draftRange.end;
      setCustomDraft({ appliedKey: appliedRangeKey, range: { start, end } });
    }
  };

  const handleEndChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newEnd = parseLocalDateInput(e.target.value);
    if (newEnd && !isNaN(newEnd.getTime())) {
      const end = endOfLocalDay(newEnd);
      const start = draftRange.start > end ? startOfLocalDay(end) : draftRange.start;
      setCustomDraft({ appliedKey: appliedRangeKey, range: { start, end } });
    }
  };

  const draftRangeKey = getRangeKey(draftRange);
  const isDraftApplied = draftRangeKey === appliedRangeKey;

  const handleApplyCustomRange = () => {
    onChange(draftRange);
    setIsPresetOpen(false);
  };

  const openPicker = (ref: React.RefObject<HTMLInputElement | null>) => {
    if (ref.current) {
      try {
        if ('showPicker' in HTMLInputElement.prototype) {
          ref.current.showPicker();
        } else {
          ref.current.focus();
        }
      } catch {
        ref.current.focus();
      }
    }
  };

  return (
    <div className="flex w-full flex-col gap-2 sm:w-auto sm:flex-row sm:flex-wrap sm:items-center sm:gap-3">
      {/* Date Presets Dropdown */}
      <div className="relative w-full sm:w-auto">
        <button 
          onClick={() => setIsPresetOpen(!isPresetOpen)}
          className="flex min-h-11 w-full items-center gap-2 rounded-xl border border-dark-border bg-dark-card px-4 py-2.5 text-sm font-medium text-dark-text shadow-sm transition-colors hover:border-brand-primary cursor-pointer sm:w-auto"
        >
          <Calendar size={16} className="text-dark-muted shrink-0" />
          <span>{formatDisplayDate(dateRange.start)} - {formatDisplayDate(dateRange.end)}</span>
          <ChevronDown size={14} className="text-dark-muted ml-1" />
        </button>

        {isPresetOpen && (
          <>
            <div className="fixed inset-0 z-10" onClick={() => setIsPresetOpen(false)}></div>
            <div className="fixed inset-x-3 top-20 z-20 mt-0 max-h-[calc(100dvh-6rem)] overflow-y-auto rounded-xl border border-dark-border bg-dark-card py-2 shadow-xl sm:absolute sm:right-0 sm:top-auto sm:inset-x-auto sm:mt-2 sm:max-h-[32rem] sm:w-56">
              <div className="px-4 pb-3 pt-1 border-b border-dark-border mb-2 flex flex-col gap-2">
                <span className="text-xs font-bold text-dark-muted uppercase tracking-widest">Período Customizado</span>
                <div className="flex flex-col gap-1.5">
                  <div className="flex items-center justify-between gap-2">
                    <span className="text-xs font-medium text-dark-text w-6">De:</span>
                    <div 
                      className="relative bg-dark-input border border-dark-border text-dark-text text-xs rounded-lg px-2 py-1 focus-within:border-brand-primary w-full cursor-pointer overflow-hidden flex items-center h-6"
                      onClick={() => openPicker(startRef)}
                    >
                      <span className="w-full text-center">{formatDisplayDate(draftRange.start)}</span>
                      <input 
                        ref={startRef}
                        type="date" 
                        value={formatDateForInput(draftRange.start)}
                        onChange={handleStartChange}
                        className="absolute inset-0 opacity-0 cursor-pointer"
                      />
                    </div>
                  </div>
                  <div className="flex items-center justify-between gap-2">
                    <span className="text-xs font-medium text-dark-text w-6">Até:</span>
                    <div 
                      className="relative bg-dark-input border border-dark-border text-dark-text text-xs rounded-lg px-2 py-1 focus-within:border-brand-primary w-full cursor-pointer overflow-hidden flex items-center h-6"
                      onClick={() => openPicker(endRef)}
                    >
                      <span className="w-full text-center">{formatDisplayDate(draftRange.end)}</span>
                      <input 
                        ref={endRef}
                        type="date" 
                        value={formatDateForInput(draftRange.end)}
                        onChange={handleEndChange}
                        className="absolute inset-0 opacity-0 cursor-pointer"
                      />
                    </div>
                  </div>
                  <button
                    type="button"
                    onClick={handleApplyCustomRange}
                    disabled={isDraftApplied}
                    className="mt-1 inline-flex h-8 w-full items-center justify-center rounded-lg bg-brand-primary px-3 text-xs font-bold text-white transition-colors hover:bg-brand-primary/90 disabled:cursor-not-allowed disabled:bg-dark-input disabled:text-dark-muted cursor-pointer"
                  >
                    Aplicar
                  </button>
                </div>
              </div>
              <span className="px-4 text-xs font-bold text-dark-muted uppercase tracking-widest mb-1 block">Atalhos</span>
              {PRESETS.map((preset) => (
                <button
                  key={preset.label}
                  onClick={() => {
                    const nextRange = preset.getRange();
                    setCustomDraft({ appliedKey: getRangeKey(nextRange), range: nextRange });
                    onChange(nextRange);
                    setIsPresetOpen(false);
                  }}
                  className="w-full text-left px-4 py-2 text-sm text-dark-muted hover:text-dark-text hover:bg-dark-input transition-colors cursor-pointer"
                >
                  {preset.label}
                </button>
              ))}
            </div>
          </>
        )}
      </div>

      {/* Auto Refresh Dropdown */}
      {setRefreshInterval && onManualRefresh && (
        <div className="flex min-h-11 w-full items-center overflow-hidden rounded-xl border border-dark-border bg-dark-card shadow-sm transition-colors hover:border-brand-primary sm:w-auto">
          <button 
            onClick={onManualRefresh}
            className="flex items-center gap-1.5 px-4 py-2.5 text-sm font-medium text-dark-text hover:text-brand-primary hover:bg-dark-input transition-colors border-r border-dark-border cursor-pointer"
            title="Atualizar Agora"
          >
            <RefreshCw size={16} className="text-brand-primary" />
            <span>Atualizar</span>
          </button>
          <select
            value={refreshInterval}
            onChange={(e) => setRefreshInterval(Number(e.target.value))}
            className="appearance-none bg-transparent text-sm font-bold text-dark-muted pl-4 pr-10 py-2.5 focus:outline-none cursor-pointer relative"
            style={{ backgroundImage: `url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e")`, backgroundRepeat: 'no-repeat', backgroundPosition: 'right 0.75rem center', backgroundSize: '1em' }}
          >
            {REFRESH_OPTIONS.map(opt => (
              <option key={opt.label} value={opt.value} className="bg-dark-card font-medium text-dark-text">
                {opt.label}
              </option>
            ))}
          </select>
        </div>
      )}
    </div>
  );
};

export default DateRangePicker;