import { IconSearch } from '@douyinfe/semi-icons';
import { TextArea } from '@douyinfe/semi-ui';
import { useMemo, useState } from 'react';
import { MAX_MONITOR_SEARCH_TERMS, parseMonitorSearchTerms } from '../hooks/useMonitorData';
import { WorkspaceSideSheet } from '../shared/WorkspaceSideSheet';

export default function BatchVehicleSearchDialog({ initialValue, mobile, onApply, onClose }: {
  initialValue: string;
  mobile: boolean;
  onApply: (value: string) => void;
  onClose: () => void;
}) {
  const [draft, setDraft] = useState(initialValue);
  const terms = useMemo(() => parseMonitorSearchTerms(draft), [draft]);

  return <WorkspaceSideSheet
    className="v2-monitor-batch-sidesheet"
    variant="editor"
    visible
    ariaLabel="批量搜索车辆"
    closeLabel="关闭批量搜索车辆"
    dialogId="v2-monitor-batch-search"
    placement={mobile ? 'bottom' : 'right'}
    width={mobile ? undefined : 520}
    height={mobile ? 'min(86dvh, 700px)' : undefined}
    title="批量搜索车辆"
    description="从 Excel、文本或聊天记录中直接粘贴车牌"
    icon={<IconSearch />}
    badge={`${terms.length} 辆`}
    badgeColor={terms.length ? 'blue' : 'grey'}
    summaryItems={[
      { label: '已识别', value: terms.length.toLocaleString('zh-CN'), detail: '可直接应用到监控筛选', tone: terms.length ? 'primary' : 'neutral' },
      { label: '重复处理', value: '自动去重', detail: '相同车牌只保留一次', tone: 'success' },
      { label: '单次上限', value: `${MAX_MONITOR_SEARCH_TERMS} 辆`, detail: '超出部分不会进入查询' }
    ]}
    footerNote="支持换行、空格、逗号或分号分隔。"
    secondaryActions={[{ label: '取消', onClick: onClose }]}
    primaryAction={{ label: `应用搜索（${terms.length}）`, ariaLabel: `应用搜索（${terms.length}）`, disabled: !terms.length, icon: <IconSearch />, onClick: () => onApply(terms.join('，')) }}
    onCancel={onClose}
  >
    <div className="v2-batch-search-dialog">
      <label htmlFor="batch-vehicle-search">每行一个车牌，也支持空格、逗号或分号分隔</label>
      <TextArea id="batch-vehicle-search" autoFocus value={draft} onChange={setDraft} autosize={{ minRows: 8, maxRows: 14 }} resize="vertical" placeholder={'粤A12345\n粤B67890\n粤C24680'} />
      <div className="v2-batch-search-summary" role="status"><span>已识别 <strong>{terms.length}</strong> 辆，重复项已自动去除</span><em>最多 {MAX_MONITOR_SEARCH_TERMS} 辆</em></div>
    </div>
  </WorkspaceSideSheet>;
}