import React from 'react';
import { X } from 'lucide-react';
import type { DetailChangeLogEntry } from '../utils/change-log';
import { displayText } from '../utils/detail';

interface DetailChangeLogModalProps {
  open: boolean;
  rowLabel: string;
  entries: DetailChangeLogEntry[];
  onClose: () => void;
}

function renderDiffValue(value: string, tone: 'before' | 'after') {
  const text = displayText(value);
  if (!text) {
    return <span className="lbd-changelog-empty">—</span>;
  }
  return (
    <span className={`lbd-changelog-diff-text lbd-changelog-diff-text--${tone}`} title={text}>
      {text}
    </span>
  );
}

export function DetailChangeLogModal({
  open,
  rowLabel: _rowLabel,
  entries,
  onClose,
}: DetailChangeLogModalProps) {
  if (!open) return null;

  return (
    <div className="vm-modal-backdrop" role="presentation" onClick={onClose}>
      <div
        className="vm-modal vm-modal-lg lbd-changelog-modal"
        role="dialog"
        aria-modal="true"
        aria-labelledby="lbd-changelog-title"
        data-annotation-id="lbd-changelog-modal"
        onClick={(event) => event.stopPropagation()}
      >
        <header className="vm-modal-header lbd-changelog-header">
          <h2 id="lbd-changelog-title" className="vm-modal-title">变更日志</h2>
          <button type="button" className="vm-modal-close" onClick={onClose} aria-label="关闭">
            <X size={18} aria-hidden />
          </button>
        </header>
        <div className="vm-modal-body lbd-changelog-body">
          {entries.length === 0 ? (
            <p className="ldb-confirm-text">暂无变更记录</p>
          ) : (
            <>
              <p className="lbd-changelog-meta">共 {entries.length} 条变更记录</p>
              <div className="lbd-changelog-table-wrap">
              <table className="lbd-changelog-table">
                <colgroup>
                  <col style={{ width: '152px' }} />
                  <col style={{ width: '76px' }} />
                  <col style={{ width: '108px' }} />
                  <col style={{ width: '34%' }} />
                  <col style={{ width: '34%' }} />
                </colgroup>
                <thead>
                  <tr>
                    <th scope="col">操作时间</th>
                    <th scope="col">操作人</th>
                    <th scope="col">字段</th>
                    <th scope="col">修改前</th>
                    <th scope="col">修改后</th>
                  </tr>
                </thead>
                <tbody>
                  {entries.map((entry) => (
                    <tr key={entry.id}>
                      <td className="lbd-changelog-cell-meta tabular-nums">{displayText(entry.operatedAt)}</td>
                      <td className="lbd-changelog-cell-meta">{displayText(entry.operatorName)}</td>
                      <td className="lbd-changelog-cell-field">
                        <span className="lbd-changelog-field-tag" title={entry.fieldLabel}>
                          {displayText(entry.fieldLabel) || '—'}
                        </span>
                      </td>
                      <td className="lbd-changelog-cell-diff">{renderDiffValue(entry.before, 'before')}</td>
                      <td className="lbd-changelog-cell-diff">{renderDiffValue(entry.after, 'after')}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
              </div>
            </>
          )}
        </div>
        <footer className="vm-modal-footer lbd-changelog-footer">
          <button type="button" className="vm-btn vm-btn-primary" onClick={onClose} data-vm-icon="x">关闭</button>
        </footer>
      </div>
    </div>
  );
}
