import React, { useState } from 'react';
import { Calendar } from 'lucide-react';
import { DateRange } from '../types';

interface DateRangePickerProps {
  dateRange: DateRange;
  onChange: (range: DateRange) => void;
}

export const DateRangePicker: React.FC<DateRangePickerProps> = ({ dateRange, onChange }) => {
  const [startType, setStartType] = useState<'text' | 'date'>('text');
  const [endType, setEndType] = useState<'text' | 'date'>('text');

  const formatDateForInput = (date: Date) => {
    return date.toISOString().split('T')[0]; // YYYY-MM-DD for <input type="date">
  };

  const formatDateForDisplay = (date: Date) => {
    return date.toLocaleDateString('pt-BR'); // DD/MM/YYYY for visual text
  };

  const handleStartChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newStart = new Date(e.target.value);
    if (!isNaN(newStart.getTime())) {
      onChange({ ...dateRange, start: newStart });
    }
  };

  const handleEndChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newEnd = new Date(e.target.value);
    if (!isNaN(newEnd.getTime())) {
      onChange({ ...dateRange, end: newEnd });
    }
  };

  return (
    <div className="flex items-center gap-2 bg-white dark:bg-dark-bg border border-zinc-200 dark:border-dark-border px-3 py-2 rounded-lg shadow-sm hover:border-zinc-300 dark:hover:border-dark-border transition-colors">
      <Calendar size={16} className="text-zinc-500 dark:text-dark-muted shrink-0" />
      <div className="flex items-center gap-2 text-sm">
        <input
          type={startType}
          value={startType === 'date' ? formatDateForInput(dateRange.start) : formatDateForDisplay(dateRange.start)}
          onFocus={() => setStartType('date')}
          onBlur={() => setStartType('text')}
          onChange={handleStartChange}
          lang="pt-BR"
          className="bg-transparent text-zinc-700 dark:text-zinc-200 font-medium outline-none cursor-pointer w-24 sm:w-28 md:w-auto"
        />
        <span className="text-zinc-400 dark:text-dark-muted">até</span>
        <input
          type={endType}
          value={endType === 'date' ? formatDateForInput(dateRange.end) : formatDateForDisplay(dateRange.end)}
          onFocus={() => setEndType('date')}
          onBlur={() => setEndType('text')}
          onChange={handleEndChange}
          lang="pt-BR"
          className="bg-transparent text-zinc-700 dark:text-zinc-200 font-medium outline-none cursor-pointer w-24 sm:w-28 md:w-auto"
        />
      </div>
    </div>
  );
};