import React from 'react';
import { Calendar, Filter, RotateCcw } from 'lucide-react';
import { DateFilterState, PERIOD_OPTIONS, PeriodFilterType } from '../utils/dateFilters';

interface Props {
  filterState: DateFilterState;
  onChange: (newState: DateFilterState) => void;
  className?: string;
}

export const PeriodFilterBar: React.FC<Props> = ({
  filterState,
  onChange,
  className = ''
}) => {
  const handlePeriodChange = (period: PeriodFilterType) => {
    onChange({
      ...filterState,
      period
    });
  };

  const handleStartDateChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    onChange({
      ...filterState,
      period: 'custom',
      startDate: e.target.value
    });
  };

  const handleEndDateChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    onChange({
      ...filterState,
      period: 'custom',
      endDate: e.target.value
    });
  };

  const resetFilter = () => {
    onChange({
      period: '30d',
      startDate: '',
      endDate: ''
    });
  };

  return (
    <div className={`bg-white border border-slate-200 rounded-2xl p-3.5 sm:p-4 shadow-2xs space-y-3 ${className}`}>
      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
        
        {/* Left Label */}
        <div className="flex items-center gap-2">
          <div className="p-1.5 bg-emerald-100 text-emerald-800 rounded-lg">
            <Filter className="w-4 h-4" />
          </div>
          <div>
            <h4 className="text-xs font-bold text-slate-900">Filter Periode Laporan & Transaksi</h4>
            <p className="text-[11px] text-slate-500">Pilih rentang waktu untuk menyaring statistik & riwayat</p>
          </div>
        </div>

        {/* Reset button if filter is modified */}
        {filterState.period !== 'all' && (
          <button
            type="button"
            onClick={resetFilter}
            className="text-[11px] font-bold text-slate-500 hover:text-emerald-700 flex items-center gap-1 self-start sm:self-center transition"
          >
            <RotateCcw className="w-3.5 h-3.5" />
            Reset Filter
          </button>
        )}
      </div>

      {/* Quick Select Buttons & Dropdown */}
      <div className="flex flex-wrap items-center gap-1.5 pt-1">
        {PERIOD_OPTIONS.map((opt) => {
          const isActive = filterState.period === opt.id;
          return (
            <button
              key={opt.id}
              type="button"
              onClick={() => handlePeriodChange(opt.id)}
              className={`px-3 py-1.5 rounded-xl text-xs font-bold transition flex items-center gap-1 ${
                isActive
                  ? 'bg-emerald-600 text-white shadow-xs'
                  : 'bg-slate-100 hover:bg-slate-200 text-slate-700'
              }`}
            >
              {isActive && <Calendar className="w-3.5 h-3.5 text-emerald-200 shrink-0" />}
              <span>{opt.label}</span>
            </button>
          );
        })}
      </div>

      {/* Custom Date Picker Range (Shown if Custom is selected) */}
      {filterState.period === 'custom' && (
        <div className="pt-2 border-t border-slate-100 flex flex-wrap items-center gap-3 animate-in fade-in duration-150">
          <div className="flex items-center gap-2">
            <label className="text-[11px] font-bold text-slate-600">Dari Tanggal:</label>
            <input
              type="date"
              value={filterState.startDate || ''}
              onChange={handleStartDateChange}
              className="px-2.5 py-1.5 bg-slate-50 border border-slate-200 rounded-xl text-xs font-semibold text-slate-800 outline-none focus:ring-2 focus:ring-emerald-500"
            />
          </div>

          <div className="flex items-center gap-2">
            <label className="text-[11px] font-bold text-slate-600">Sampai Tanggal:</label>
            <input
              type="date"
              value={filterState.endDate || ''}
              onChange={handleEndDateChange}
              className="px-2.5 py-1.5 bg-slate-50 border border-slate-200 rounded-xl text-xs font-semibold text-slate-800 outline-none focus:ring-2 focus:ring-emerald-500"
            />
          </div>
        </div>
      )}
    </div>
  );
};