import React from 'react';
import { X } from 'lucide-react';
import type { VehicleRecord } from '../types';
import { OperateCityPickerPanel } from './OperateCityPickerPanel';
import { formatOperateCityChipLabel } from '../utils/filters';
import { formatOperateCity } from '../utils/vehicle';

interface OperateCityEditModalProps {
  open: boolean;
  record: VehicleRecord | null;
  records: VehicleRecord[];
  onClose: () => void;
  onSave: (location: string) => void;
}

export function OperateCityEditModal({
  open,
  record,
  records: _records,
  onClose,
  onSave,
}: OperateCityEditModalProps) {
  if (!open || !record) return null;

  const handleSelect = (location: string) => {
    onSave(location);
    onClose();
  };

  return (
    <div className="vm-modal-backdrop" role="presentation" onClick={onClose}>
      <div
        className="vm-modal vm-modal-operate-city"
        data-annotation-id="vm-operate-city-modal"
        role="dialog"
        aria-modal="true"
        aria-labelledby="vm-operate-city-edit-title"
        onClick={(e) => e.stopPropagation()}
      >
        <header className="vm-modal-header">
          <div>
            <h2 id="vm-operate-city-edit-title">修改运营城市</h2>
            <p>{record.plateNo} · 当前 {formatOperateCityChipLabel(formatOperateCity(record.location))}</p>
          </div>
          <button type="button" className="vm-modal-close" onClick={onClose} aria-label="关闭">
            <X size={18} aria-hidden />
          </button>
        </header>

        <OperateCityPickerPanel
          location={record.location}
          onSelect={handleSelect}
          autoFocusSearch
        />

        <footer className="vm-modal-footer">
          <button type="button" className="vm-btn vm-btn-ghost" onClick={onClose}>取消</button>
        </footer>
      </div>
    </div>
  );
}
