import { Button, Spin, Tag } from '@douyinfe/semi-ui';
import type { ReactNode } from 'react';
import { protocolDisplayLabel } from '../domain/protocols';
import { ProtocolTag } from './ProtocolTag';
import { VehicleOptionError } from './VehicleOptionError';

export interface VehicleCandidateItem {
  vin: string;
  plate?: string;
  protocols?: string[];
}

interface VehicleCandidateListProps<T extends VehicleCandidateItem> {
  id?: string;
  items: T[];
  loading?: boolean;
  loadingText?: string;
  error?: string;
  onRetry?: () => void;
  emptyText?: string;
  selectedVins?: ReadonlySet<string>;
  disableSelected?: boolean;
  actionLabel?: string;
  selectedLabel?: string;
  showProtocols?: boolean;
  header?: ReactNode;
  meta?: ReactNode;
  footer?: ReactNode;
  className?: string;
  layout?: 'list' | 'grid';
  onSelect: (vehicle: T) => void;
}

export function VehicleCandidateList<T extends VehicleCandidateItem>({
  id,
  items,
  loading = false,
  loadingText = '正在搜索车辆…',
  error,
  onRetry,
  emptyText = '没有匹配车辆',
  selectedVins,
  disableSelected = false,
  actionLabel = '选择',
  selectedLabel = '已选择',
  showProtocols = false,
  header,
  meta,
  footer,
  className = '',
  layout = 'list',
  onSelect
}: VehicleCandidateListProps<T>) {
  return <div id={id} className={`v2-vehicle-candidate-list is-${layout}${className ? ` ${className}` : ''}`} role="listbox" aria-busy={loading}>
    {header || meta ? <header><span>{header}</span>{meta ? <em>{meta}</em> : null}</header> : null}
    {loading ? <div className="v2-vehicle-candidate-state" role="status"><Spin size="small" /><span>{loadingText}</span></div> : null}
    {!loading && error && onRetry ? <VehicleOptionError message={error} onRetry={onRetry} /> : null}
    {!loading && !error ? items.map((vehicle) => {
      const selected = selectedVins?.has(vehicle.vin) ?? false;
      const label = selected ? selectedLabel : actionLabel;
      const protocols = showProtocols ? (vehicle.protocols ?? []).filter(Boolean) : [];
      const protocolLabels = protocols.map(protocolDisplayLabel);
      return <Button
        key={vehicle.vin}
        className={`v2-vehicle-option${selected ? ' is-selected' : ''}`}
        theme="borderless"
        type="tertiary"
        role="option"
        aria-selected={selected}
        aria-label={`${vehicle.plate || '未绑定车牌'} ${vehicle.vin} ${protocolLabels.join(' ')} ${label}`.replace(/\s+/g, ' ').trim()}
        disabled={selected && disableSelected}
        onMouseDown={(event) => event.preventDefault()}
        onClick={() => onSelect(vehicle)}
      >
        <span className="v2-vehicle-option-identity">
          <strong>{vehicle.plate || '未绑定车牌'}</strong>
          <small>{vehicle.vin}</small>
        </span>
        {protocols.length ? <span className="v2-vehicle-option-protocols">{protocols.slice(0, 3).map((protocol) => <ProtocolTag key={protocol} protocol={protocol} compact />)}</span> : null}
        <Tag className="v2-vehicle-option-action" color={selected ? 'blue' : 'grey'} type="light" size="small">{label}</Tag>
      </Button>;
    }) : null}
    {!loading && !error && items.length === 0 ? <div className="v2-vehicle-candidate-state is-empty"><span>{emptyText}</span></div> : null}
    {footer ? <footer>{footer}</footer> : null}
  </div>;
}
