import React, { useState } from 'react';
import '../styles/ExportModal.css';

interface ExportModalProps {
  isOpen: boolean;
  kpiName: string;
  onExport: (days: number) => void;
  onClose: () => void;
}

export const ExportModal: React.FC<ExportModalProps> = ({ isOpen, kpiName, onExport, onClose }) => {
  const [selectedRange, setSelectedRange] = useState<number | null>(null);

  if (!isOpen) return null;

  const handleExport = () => {
    if (selectedRange !== null) {
      onExport(selectedRange);
      setSelectedRange(null);
      onClose();
    }
  };

  return (
    <div className="export-modal-overlay" onClick={onClose}>
      <div className="export-modal" onClick={(e) => e.stopPropagation()}>
        <div className="export-modal-header">
          <h2>💾 Exporter {kpiName}</h2>
          <button className="export-modal-close" onClick={onClose}>✕</button>
        </div>

        <div className="export-modal-body">
          <p className="export-modal-description">
            Sélectionnez la plage de données à exporter:
          </p>

          <div className="export-options">
            <label className={`export-option ${selectedRange === 7 ? 'active' : ''}`}>
              <input
                type="radio"
                name="range"
                value="7"
                checked={selectedRange === 7}
                onChange={() => setSelectedRange(7)}
              />
              <span className="option-label">📅 Dernière semaine</span>
              <span className="option-sublabel">(7 jours)</span>
            </label>

            <label className={`export-option ${selectedRange === 30 ? 'active' : ''}`}>
              <input
                type="radio"
                name="range"
                value="30"
                checked={selectedRange === 30}
                onChange={() => setSelectedRange(30)}
              />
              <span className="option-label">📆 Dernier mois</span>
              <span className="option-sublabel">(30 jours)</span>
            </label>

            <label className={`export-option ${selectedRange === 365 ? 'active' : ''}`}>
              <input
                type="radio"
                name="range"
                value="365"
                checked={selectedRange === 365}
                onChange={() => setSelectedRange(365)}
              />
              <span className="option-label">📊 Cette année</span>
              <span className="option-sublabel">(365 jours)</span>
            </label>

            <label className={`export-option ${selectedRange === -1 ? 'active' : ''}`}>
              <input
                type="radio"
                name="range"
                value="-1"
                checked={selectedRange === -1}
                onChange={() => setSelectedRange(-1)}
              />
              <span className="option-label">📈 Toutes les données</span>
              <span className="option-sublabel">(Sans limite)</span>
            </label>
          </div>
        </div>

        <div className="export-modal-footer">
          <button className="btn-cancel" onClick={onClose}>
            Annuler
          </button>
          <button
            className="btn-export-confirm"
            onClick={handleExport}
            disabled={selectedRange === null}
          >
            ✓ Exporter
          </button>
        </div>
      </div>
    </div>
  );
};
