import React, { useMemo } from 'react';
import { DatePicker, Select } from 'antd';
import type { Dayjs } from 'dayjs';
import dayjs from 'dayjs';
import type { PaymentKpiDetailFilters } from '../types';
import type { PaymentKpiKey } from '../utils/payment';

const { RangePicker } = DatePicker;
const DATE_FORMAT = 'YYYY-MM-DD';

interface PaymentKpiDetailFilterBarProps {
  kpiKey: PaymentKpiKey;
  filters: PaymentKpiDetailFilters;
  customerOptions: Array<{ value: string; label: string }>;
  onChange: (patch: Partial<PaymentKpiDetailFilters>) => void;
  onReset: () => void;
  onSearch: () => void;
}

export function PaymentKpiDetailFilterBar({
  kpiKey,
  filters,
  customerOptions,
  onChange,
  onReset,
  onSearch,
}: PaymentKpiDetailFilterBarProps) {
  const dateRangeValue = useMemo((): [Dayjs, Dayjs] | null => {
    if (!filters.paymentFrom && !filters.paymentTo) return null;
    const from = filters.paymentFrom ? dayjs(filters.paymentFrom) : null;
    const to = filters.paymentTo ? dayjs(filters.paymentTo) : null;
    if (from?.isValid() && to?.isValid()) return [from, to];
    return null;
  }, [filters.paymentFrom, filters.paymentTo]);

  const inlineLayout = kpiKey === 'linked' || kpiKey === 'unlinked';

  return (
    <section
      className={`pr-kpi-detail-filter${inlineLayout ? ' pr-kpi-detail-filter--inline' : ''}`}
      aria-label="明细筛选"
    >
      <div className="pr-kpi-detail-filter__grid">
        <label className="pr-kpi-detail-filter__field">
          <span>客户名称</span>
          <Select
            placeholder="全部客户"
            style={{ width: '100%' }}
            value={filters.customerName || undefined}
            onChange={(value) => onChange({ customerName: value || '' })}
            allowClear
            showSearch
            options={customerOptions}
            filterOption={(input, option) =>
              (option?.label ?? '').toString().toLowerCase().includes(input.toLowerCase())}
          />
        </label>
        <label className="pr-kpi-detail-filter__field">
          <span>收款时间</span>
          <RangePicker
            className="lc-filter-select pr-payment-range"
            style={{ width: '100%' }}
            picker="date"
            showTime={false}
            format={DATE_FORMAT}
            separator="至"
            placeholder={['开始日期', '结束日期']}
            allowClear
            inputReadOnly
            value={dateRangeValue}
            onChange={(values) => {
              onChange({
                paymentFrom: values?.[0]?.format(DATE_FORMAT) ?? '',
                paymentTo: values?.[1]?.format(DATE_FORMAT) ?? '',
              });
            }}
          />
        </label>
      </div>
      <div className="pr-kpi-detail-filter__actions">
        <button type="button" className="vm-btn vm-btn-ghost vm-btn-sm ldb-toolbar-btn" onClick={onReset} data-vm-icon="rotate-ccw">重置</button>
        <button type="button" className="vm-btn vm-btn-primary vm-btn-sm ldb-toolbar-btn" data-vm-icon="search" onClick={onSearch}>
          查询
        </button>
      </div>
    </section>
  );
}
