import React, { useState, useRef } from 'react';
import { api } from '../services/api';
import { X, UploadCloud, Download, Loader2, CheckCircle2 } 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-overlay" onClick={onClose}>
      <div className="modal-card" onClick={(e) => e.stopPropagation()}>
        <div className="modal-header">
          <h3>OPML Migration & Backup</h3>
          <button className="btn-icon" onClick={onClose}>
            <X size={18} />
          </button>
        </div>

        <div className="modal-body">
          {error && <div className="alert-danger">{error}</div>}

          {result && (
            <div
              style={{
                background: 'rgba(52, 211, 153, 0.15)',
                border: '1px solid var(--success)',
                color: 'var(--success)',
                padding: '0.85rem',
                borderRadius: 'var(--radius-sm)',
                marginBottom: '1.25rem',
                display: 'flex',
                alignItems: 'center',
                gap: 8,
                fontSize: '0.875rem',
              }}
            >
              <CheckCircle2 size={18} />
              <span>
                Successfully imported {result.imported} new feeds (out of {result.total} parsed in OPML). Background fetch initiated!
              </span>
            </div>
          )}

          {/* Import Section */}
          <div style={{ marginBottom: '2rem' }}>
            <h4 style={{ fontSize: '0.95rem', fontWeight: 600, marginBottom: '0.5rem' }}>
              Import Subscriptions (from Miniflux / Google Reader / OPML)
            </h4>
            <p style={{ fontSize: '0.825rem', color: 'var(--text-muted)', marginBottom: '1rem' }}>
              Upload an OPML 2.0 XML file to seamlessly import all your feeds and categories.
            </p>

            <div
              onDragOver={(e) => e.preventDefault()}
              onDrop={handleDrop}
              onClick={() => fileInputRef.current?.click()}
              style={{
                border: '2px dashed var(--border)',
                borderRadius: 'var(--radius-md)',
                padding: '2rem 1rem',
                textAlign: 'center',
                cursor: 'pointer',
                background: 'var(--bg-main)',
                transition: 'all 0.15s ease',
              }}
            >
              <input
                ref={fileInputRef}
                type="file"
                accept=".opml,.xml"
                style={{ display: 'none' }}
                onChange={handleFileChange}
              />
              <UploadCloud
                size={36}
                style={{ color: 'var(--accent)', margin: '0 auto 0.5rem auto' }}
              />
              <div style={{ fontSize: '0.875rem', fontWeight: 500 }}>
                {file ? file.name : 'Click to browse or drag & drop OPML file'}
              </div>
              <div style={{ fontSize: '0.75rem', color: 'var(--text-muted)', marginTop: 4 }}>
                Supports .opml or .xml
              </div>
            </div>

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

          {/* Export Section */}
          <div style={{ borderTop: '1px solid var(--border)', paddingTop: '1.25rem' }}>
            <h4 style={{ fontSize: '0.95rem', fontWeight: 600, marginBottom: '0.5rem' }}>
              Export Subscriptions
            </h4>
            <p style={{ fontSize: '0.825rem', color: 'var(--text-muted)', marginBottom: '1rem' }}>
              Download a complete OPML backup of all your subscribed feeds and folders.
            </p>
            <button className="btn-secondary" onClick={handleExport}>
              <Download size={16} /> Export OPML File
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};