rsspipe/web/src/components/common/OPMLModal.tsx

import React, { useState, useRef } from 'react';
import { api } from '../../services/api';
import { X, UploadCloud, Download, Loader2, CheckCircle2, AlertCircle } from 'lucide-react';

interface OPMLModalProps {
  onClose: () => void;
  onImportComplete: () => void;
}

export const OPMLModal: React.FC<OPMLModalProps> = ({
  onClose,
  onImportComplete,
}) => {
  const [file, setFile] = useState<File | null>(null);
  const [loading, setLoading] = useState(false);
  const [result, setResult] = useState<{ imported: number; total: number } | null>(null);
  const [error, setError] = useState<string | null>(null);
  const fileInputRef = useRef<HTMLInputElement>(null);

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files && e.target.files.length > 0) {
      setFile(e.target.files[0]);
      setError(null);
      setResult(null);
    }
  };

  const handleDrop = (e: React.DragEvent) => {
    e.preventDefault();
    if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
      setFile(e.dataTransfer.files[0]);
      setError(null);
      setResult(null);
    }
  };

  const handleImport = async () => {
    if (!file) return;
    setLoading(true);
    setError(null);

    try {
      const res = await api.importOPML(file);
      setResult({ imported: res.imported_count, total: res.total_parsed });
      onImportComplete();
    } catch (err: any) {
      setError(err.message || 'Failed to import OPML file');
    } finally {
      setLoading(false);
    }
  };

  const handleExport = () => {
    const url = api.exportOPMLUrl();
    window.open(url, '_blank');
  };

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal-dialog" onClick={(e) => e.stopPropagation()}>
        <div className="modal-header">
          <h3 className="modal-title">OPML Migration</h3>
          <button className="btn-icon" style={{ border: 'none' }} onClick={onClose}>
            <X size={16} />
          </button>
        </div>

        <div className="modal-body">
          {error && (
            <div
              style={{
                padding: '0.65rem 0.85rem',
                borderRadius: 'var(--radius-sm)',
                background: 'var(--danger-soft)',
                color: 'var(--danger)',
                fontSize: '0.82rem',
                display: 'flex',
                alignItems: 'center',
                gap: '0.4rem',
              }}
            >
              <AlertCircle size={15} />
              <span>{error}</span>
            </div>
          )}

          {result && (
            <div
              style={{
                padding: '0.65rem 0.85rem',
                borderRadius: 'var(--radius-sm)',
                background: 'var(--success-soft)',
                color: 'var(--success)',
                fontSize: '0.82rem',
                display: 'flex',
                alignItems: 'center',
                gap: '0.4rem',
              }}
            >
              <CheckCircle2 size={16} />
              <span>
                Imported {result.imported} new feeds ({result.total} parsed in OPML).
              </span>
            </div>
          )}

          {/* Import Dropzone */}
          <div>
            <div className="settings-label" style={{ marginBottom: '0.5rem' }}>
              Import Subscriptions (OPML 2.0 XML)
            </div>
            <div
              onDragOver={(e) => e.preventDefault()}
              onDrop={handleDrop}
              onClick={() => fileInputRef.current?.click()}
              style={{
                border: '2px dashed var(--border-strong)',
                borderRadius: 'var(--radius-md)',
                padding: '1.75rem 1rem',
                textAlign: 'center',
                cursor: 'pointer',
                background: 'var(--bg-subtle)',
              }}
            >
              <input
                ref={fileInputRef}
                type="file"
                accept=".opml,.xml"
                style={{ display: 'none' }}
                onChange={handleFileChange}
              />
              <UploadCloud size={32} color="var(--accent-primary)" style={{ margin: '0 auto 0.5rem' }} />
              <div style={{ fontSize: '0.85rem', fontWeight: 600, color: 'var(--text-primary)' }}>
                {file ? file.name : 'Click to select or drop .opml / .xml file'}
              </div>
            </div>

            {file && (
              <div style={{ marginTop: '0.75rem', display: 'flex', justifyContent: 'flex-end' }}>
                <button className="btn-primary" onClick={handleImport} disabled={loading}>
                  {loading ? (
                    <>
                      <Loader2 size={14} className="spinning" /> Importing...
                    </>
                  ) : (
                    'Start Import'
                  )}
                </button>
              </div>
            )}
          </div>

          {/* Export Section */}
          <div style={{ borderTop: '1px solid var(--border-subtle)', paddingTop: '1rem', marginTop: '0.5rem' }}>
            <div className="settings-label" style={{ marginBottom: '0.5rem' }}>
              Export Subscriptions
            </div>
            <p style={{ fontSize: '0.8rem', color: 'var(--text-muted)', marginBottom: '0.75rem' }}>
              Download complete backup of all feeds and categories.
            </p>
            <button className="btn-secondary" onClick={handleExport}>
              <Download size={14} style={{ marginRight: 4 }} />
              Export OPML File
            </button>
          </div>
        </div>

        <div className="modal-footer">
          <button className="btn-secondary" onClick={onClose}>
            Close
          </button>
        </div>
      </div>
    </div>
  );
};