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

interface SelfImportModalProps {
  open: boolean;
  onClose: () => void;
  onDownloadTemplate: () => void;
  onImport: (file: File) => void;
  failedCount?: number;
  onDownloadErrorLog?: () => void;
}

export function SelfImportModal({
  open,
  onClose,
  onDownloadTemplate,
  onImport,
  failedCount = 0,
  onDownloadErrorLog,
}: SelfImportModalProps) {
  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="sob-import-title"
        onClick={(event) => event.stopPropagation()}
      >
        <header className="vm-modal-header">
          <h2 id="sob-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>上传填写好的 Excel 文件</span>
            </div>
            <button
              type="button"
              className="vm-upload-zone"
              onClick={() => inputRef.current?.click()}
            >
              <Upload size={28} aria-hidden />
              <p>点击选择文件上传</p>
              <input
                ref={inputRef}
                type="file"
                accept=".xls,.xlsx"
                className="sr-only"
                onChange={(event) => {
                  const file = event.target.files?.[0];
                  if (file) onImport(file);
                  event.target.value = '';
                }}
              />
            </button>
          </section>
          {failedCount > 0 && onDownloadErrorLog ? (
            <section className="vm-import-step sob-import-error-step">
              <p className="sob-import-error-summary">
                本次有 <strong>{failedCount}</strong> 条记录导入失败（如必填项缺失、车牌号不存在），可下载错误日志核对。
              </p>
              <button type="button" className="vm-btn vm-btn-secondary" onClick={onDownloadErrorLog} data-vm-icon="download">下载错误日志
              </button>
            </section>
          ) : null}
        </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>
  );
}
