import React, { useState } from 'react';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from './ui/dialog';
import { Button } from './ui/button';
import { Calendar, FileDown } from 'lucide-react';

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);

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

  const ranges = [
    { value: 7, label: 'Dernière semaine', sublabel: '7 jours', icon: Calendar },
    { value: 30, label: 'Dernier mois', sublabel: '30 jours', icon: Calendar },
    { value: 365, label: 'Cette année', sublabel: '365 jours', icon: Calendar },
    { value: -1, label: 'Toutes les données', sublabel: 'Sans limite', icon: FileDown },
  ];

  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="sm:max-w-[500px]">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2">
            <FileDown className="h-5 w-5" />
            Exporter {kpiName}
          </DialogTitle>
          <DialogDescription>
            Sélectionnez la plage de données à exporter en Excel
          </DialogDescription>
        </DialogHeader>

        <div className="grid gap-3 py-4">
          {ranges.map((range) => {
            const Icon = range.icon;
            return (
              <button
                key={range.value}
                className={`flex items-center gap-3 p-4 rounded-lg border-2 transition-all text-left ${
                  selectedRange === range.value
                    ? 'border-primary bg-primary/10'
                    : 'border-border hover:border-primary/50 hover:bg-accent'
                }`}
                onClick={() => setSelectedRange(range.value)}
              >
                <Icon className="h-5 w-5 text-primary" />
                <div className="flex-1">
                  <div className="font-medium">{range.label}</div>
                  <div className="text-sm text-muted-foreground">{range.sublabel}</div>
                </div>
                <div className={`w-4 h-4 rounded-full border-2 ${
                  selectedRange === range.value
                    ? 'border-primary bg-primary'
                    : 'border-muted-foreground'
                }`}>
                  {selectedRange === range.value && (
                    <div className="w-full h-full rounded-full bg-white scale-50" />
                  )}
                </div>
              </button>
            );
          })}
        </div>

        <DialogFooter>
          <Button variant="outline" onClick={onClose}>
            Annuler
          </Button>
          <Button onClick={handleExport} disabled={selectedRange === null}>
            <FileDown className="h-4 w-4 mr-2" />
            Exporter
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
};
