import { Truck } from 'lucide-react';
import { SurfaceCard } from '../../../components/ui/surface';
import type { CustomerType, DateQuickPick } from '../types';
import { QUICK_PICK_OPTIONS, type RangeMode } from './model';

interface DailyRangeControlsProps {
  pick: RangeMode;
  dateRange: { start: string; end: string };
  customer: CustomerType;
  onQuickPick: (pick: DateQuickPick) => void;
  onCustomPick: () => void;
  onDateRangeChange: (field: 'start' | 'end', value: string) => void;
  onCustomerChange: (customer: CustomerType) => void;
}

export default function DailyRangeControls({
  pick,
  dateRange,
  customer,
  onQuickPick,
  onCustomPick,
  onDateRangeChange,
  onCustomerChange,
}: DailyRangeControlsProps) {
  return (
    <SurfaceCard className="p-2 md:p-3">
      <div className="flex items-center gap-2 overflow-x-auto pb-1">
        {QUICK_PICK_OPTIONS.map(opt => (
          <button
            key={opt.id}
            onClick={() => onQuickPick(opt.id)}
            className={`min-h-9 shrink-0 rounded-xl border px-3 text-[12px] font-black transition-colors ${
              pick === opt.id
                ? 'border-blue-200 bg-blue-50 text-blue-600 shadow-sm'
                : 'border-slate-100 bg-white text-slate-500 hover:bg-slate-50'
            }`}
          >
            {opt.label}
          </button>
        ))}
        <button
          onClick={onCustomPick}
          className={`min-h-9 shrink-0 rounded-xl border px-3 text-[12px] font-black transition-colors ${
            pick === 'custom'
              ? 'border-blue-200 bg-blue-50 text-blue-600 shadow-sm'
              : 'border-slate-100 bg-white text-slate-500 hover:bg-slate-50'
          }`}
        >
          自定义
        </button>
      </div>

      <div className="mt-2 grid grid-cols-2 gap-2">
        <label className="min-w-0 rounded-xl border border-slate-100 bg-slate-50 px-3 py-2">
          <span className="block text-[10px] font-black text-slate-400">开始日期</span>
          <input
            type="date"
            value={dateRange.start}
            onChange={event => onDateRangeChange('start', event.target.value)}
            onInput={event => onDateRangeChange('start', event.currentTarget.value)}
            className="mt-1 h-6 w-full bg-transparent text-[12px] font-black text-slate-800 outline-none"
          />
        </label>
        <label className="min-w-0 rounded-xl border border-slate-100 bg-slate-50 px-3 py-2">
          <span className="block text-[10px] font-black text-slate-400">结束日期</span>
          <input
            type="date"
            value={dateRange.end}
            onChange={event => onDateRangeChange('end', event.target.value)}
            onInput={event => onDateRangeChange('end', event.currentTarget.value)}
            className="mt-1 h-6 w-full bg-transparent text-[12px] font-black text-slate-800 outline-none"
          />
        </label>
      </div>

      <div className="mt-2 grid grid-cols-2 gap-1 rounded-xl bg-slate-100 p-1">
        {(['lingniu', 'external'] as const).map(option => (
          <button
            key={option}
            onClick={() => onCustomerChange(option)}
            className={`flex min-h-9 items-center justify-center gap-1.5 rounded-lg text-[12px] font-black transition-all ${
              customer === option ? 'bg-white text-slate-900 shadow-sm' : 'text-slate-500 hover:text-slate-700'
            }`}
          >
            <Truck size={14} />
            {option === 'external' ? '外部车辆' : '羚牛车辆'}
          </button>
        ))}
      </div>
    </SurfaceCard>
  );
}