import React, { useRef } from 'react';
import { Download, Upload, X } from 'lucide-react';

interface LeaseLedgerImportModalProps {
  open: boolean;
  onClose: () => void;
  onDownloadTemplate: () => void;
  onImport: (file: File) => void;
}

export function LeaseLedgerImportModal({
  open,
  onClose,
  onDownloadTemplate,
  onImport,
}: LeaseLedgerImportModalProps) {
  const inputRef = useRef<HTMLInputElement>(null);
  if (!open) return null;

  return (
    <div className="vm-modal-backdrop" role="presentation" onClick={onClose}>
      <div
        className="vm-modal vm-modal-lg ldb-import-modal"
        role="dialog"
        aria-modal="true"
        aria-labelledby="ldb-import-title"
        onClick={(event) => event.stopPropagation()}
      >
        <header className="vm-modal-header">
          <h2 id="ldb-import-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-import-body">
          <section className="vm-import-step">
            <div className="vm-import-step-head">
              <span className="vm-step-badge">1</span>
              <span>下载导入模板</span>
            </div>
            <button type="button" className="vm-btn vm-btn-primary" onClick={onDownloadTemplate} data-vm-icon="download">下载台账导入模板
            </button>
          </section>
          <section className="vm-import-step">
            <div className="vm-import-step-head">
              <span className="vm-step-badge">2</span>
              <span>上传填写好的文件</span>
            </div>
            <button
              type="button"
              className="vm-upload-zone"
              onClick={() => inputRef.current?.click()}
            >
              <Upload size={28} aria-hidden />
              <p>点击选择文件上传</p>
              <p className="hint">支持 .csv、.xls、.xlsx</p>
              <input
                ref={inputRef}
                type="file"
                accept=".csv,.xls,.xlsx"
                className="sr-only"
                onChange={(event) => {
                  const file = event.target.files?.[0];
                  if (file) onImport(file);
                  event.target.value = '';
                }}
              />
            </button>
          </section>
        </div>
        <footer className="vm-modal-footer">
          <button type="button" className="vm-btn vm-btn-ghost" onClick={onClose} data-vm-icon="x">关闭</button>
        </footer>
      </div>
    </div>
  );
}
