import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import { Label } from "@/components/ui/label";
import { Download, FileJson, FileSpreadsheet, FileText } from "lucide-react";
import { useState } from "react";
import { useTranslation } from "react-i18next";

interface ExportModalProps {
  isOpen: boolean;
  onClose: () => void;
  data: Record<string, unknown>[];
  onExport: (format: ExportFormat) => void;
}

export type ExportFormat = "csv" | "json" | "excel";

export function ExportModal({ isOpen, onClose, data, onExport }: ExportModalProps) {
  const { t } = useTranslation();
  const [selectedFormat, setSelectedFormat] = useState<ExportFormat>("csv");
  const [isExporting, setIsExporting] = useState(false);

  const handleExport = async () => {
    setIsExporting(true);
    try {
      await onExport(selectedFormat);
      // Close modal after successful export
      setTimeout(() => {
        onClose();
        setIsExporting(false);
      }, 500);
    } catch (error) {
      console.error("Export failed:", error);
      setIsExporting(false);
    }
  };

  const formatOptions = [
    {
      value: "csv",
      label: t("callLogs.exportDialog.formats.csv"),
      description: t("callLogs.exportDialog.formats.csvDescription"),
      icon: FileText,
    },
    {
      value: "json",
      label: t("callLogs.exportDialog.formats.json"),
      description: t("callLogs.exportDialog.formats.jsonDescription"),
      icon: FileJson,
    },
    {
      value: "excel",
      label: t("callLogs.exportDialog.formats.excel"),
      description: t("callLogs.exportDialog.formats.excelDescription"),
      icon: FileSpreadsheet,
    },
  ];

  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="max-w-md bg-slate-800 border-slate-700 text-white">
        <DialogHeader>
          <DialogTitle className="text-xl font-semibold text-white">
            {t("callLogs.exportDialog.title")}
          </DialogTitle>
        </DialogHeader>

        <div className="py-4">
          <p className="text-slate-400 text-sm mb-4">
            {t("callLogs.exportDialog.description", { count: data.length })}
          </p>

          <RadioGroup
            value={selectedFormat}
            onValueChange={(value) => setSelectedFormat(value as ExportFormat)}
            className="space-y-3"
          >
            {formatOptions.map((option) => {
              const Icon = option.icon;
              return (
                <div
                  key={option.value}
                  className={`flex items-start space-x-3 p-4 rounded-lg border-2 cursor-pointer transition-colors ${
                    selectedFormat === option.value
                      ? "border-cyan-500 bg-cyan-500/10"
                      : "border-slate-700 bg-slate-700/30 hover:border-slate-600"
                  }`}
                  onClick={() => setSelectedFormat(option.value as ExportFormat)}
                >
                  <RadioGroupItem value={option.value} id={option.value} className="mt-1" />
                  <div className="flex-1">
                    <Label
                      htmlFor={option.value}
                      className="flex items-center gap-2 cursor-pointer"
                    >
                      <Icon className="w-5 h-5 text-slate-400" />
                      <span className="font-medium text-white">{option.label}</span>
                    </Label>
                    <p className="text-sm text-slate-400 mt-1">{option.description}</p>
                  </div>
                </div>
              );
            })}
          </RadioGroup>
        </div>

        <DialogFooter className="flex gap-2 sm:gap-2">
          <Button
            variant="outline"
            onClick={onClose}
            className="border-slate-700 text-slate-300 hover:text-white hover:bg-slate-700"
            disabled={isExporting}
          >
            {t("common.cancel")}
          </Button>
          <Button
            onClick={handleExport}
            className="bg-cyan-600 hover:bg-cyan-700 text-white"
            disabled={isExporting}
          >
            <Download className="w-4 h-4 mr-2" />
            {isExporting ? t("callLogs.exportDialog.downloading") : t("callLogs.exportDialog.download")}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}
