import React from 'react';
import { X } from 'lucide-react';
import type { ChangeLogEntry } from '../types';

interface ChangeLogDrawerProps {
  open: boolean;
  supplierId: string;
  supplierName: string;
  entries: ChangeLogEntry[];
  onClose: () => void;
}

export function ChangeLogDrawer({
  open,
  supplierId,
  supplierName,
  entries,
  onClose,
}: ChangeLogDrawerProps) {
  if (!open) return null;

  const filtered = entries.filter((item) => item.supplierId === supplierId);

  return (
    <div className="sm-drawer-backdrop" role="presentation" onClick={onClose}>
      <aside
        className="sm-drawer"
        role="dialog"
        aria-modal="true"
        aria-labelledby="sm-changelog-title"
        onClick={(event) => event.stopPropagation()}
        data-annotation-id="sm-changelog-drawer"
      >
        <header className="sm-drawer-header">
          <div>
            <h2 id="sm-changelog-title">变更记录</h2>
            <p className="sm-drawer-sub">{supplierName}</p>
          </div>
          <button type="button" className="vm-modal-close" onClick={onClose} aria-label="关闭">
            <X size={18} aria-hidden />
          </button>
        </header>
        <div className="sm-drawer-body">
          {filtered.length === 0 ? (
            <div className="vm-empty">
              <p>暂无变更记录</p>
            </div>
          ) : (
            <ul className="sm-changelog-list">
              {filtered.map((entry) => (
                <li key={entry.id} className="sm-changelog-item">
                  <div className="sm-changelog-meta">
                    <span>{entry.fieldLabel}</span>
                    <time>{entry.operatedAt}</time>
                  </div>
                  <div className="sm-changelog-diff">
                    <span className="sm-changelog-old">{entry.oldValue}</span>
                    <span className="sm-changelog-arrow" aria-hidden>→</span>
                    <span className="sm-changelog-new">{entry.newValue}</span>
                  </div>
                  <div className="sm-changelog-operator">操作人：{entry.operator}</div>
                </li>
              ))}
            </ul>
          )}
        </div>
      </aside>
    </div>
  );
}
