import React from 'react';
import { X } from 'lucide-react';
import type { OperationHistoryEntry } from '../types';
import { displayText } from '../utils/ledger';

interface OperationHistoryModalProps {
  open: boolean;
  plateNo: string;
  entries: OperationHistoryEntry[];
  onClose: () => void;
}

export function OperationHistoryModal({ open, plateNo, entries, onClose }: OperationHistoryModalProps) {
  if (!open) return null;

  return (
    <div className="vm-modal-backdrop" role="presentation" onClick={onClose}>
      <div
        className="vm-modal vm-modal-md"
        role="dialog"
        aria-modal="true"
        aria-labelledby="operation-history-title"
        onClick={(e) => e.stopPropagation()}
      >
        <header className="vm-modal-header">
          <h2 id="operation-history-title" className="vm-modal-title">操作历史 · {plateNo}</h2>
          <button type="button" className="vm-modal-close" onClick={onClose} aria-label="关闭">
            <X size={18} aria-hidden />
          </button>
        </header>
        <div className="vm-modal-body">
          {entries.length === 0 ? (
            <p className="ldb-confirm-text">暂无操作记录</p>
          ) : (
            <div className="ldb-detail-popover-table-wrap">
              <table className="ldb-detail-popover-table ldb-history-table">
                <thead>
                  <tr>
                    <th>操作时间</th>
                    <th>操作人</th>
                    <th>修改项</th>
                    <th>修改前</th>
                    <th>修改后</th>
                  </tr>
                </thead>
                <tbody>
                  {entries.map((entry, index) => (
                    <tr key={`${entry.operatedAt}-${index}`}>
                      <td className="tabular-nums">{displayText(entry.operatedAt)}</td>
                      <td>{displayText(entry.operatorName)}</td>
                      <td>{displayText(entry.field)}</td>
                      <td>{displayText(entry.before)}</td>
                      <td>{displayText(entry.after)}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </div>
        <footer className="vm-modal-footer">
          <button type="button" className="vm-btn vm-btn-primary" onClick={onClose} data-vm-icon="x">关闭</button>
        </footer>
      </div>
    </div>
  );
}
