"use client";

import type React from "react";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Download, FileUp } from "lucide-react";
import { useAuth } from "@/contexts/auth-context";
import { MangaDexImportDialog } from "@/components/manga-dex-import-dialog";
import { MangaManualImportDialog } from "@/components/manga-manual-import-dialog";

export function ImportDropdown() {
  const { isAuthenticated } = useAuth();

  const [mangaDexDialogOpen, setMangaDexDialogOpen] = useState(false);
  const [fileImportDialogOpen, setFileImportDialogOpen] = useState(false);

  if (!isAuthenticated) {
    return null;
  }

  return (
    <>
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button variant="outline" size="sm" className="gap-2 bg-transparent">
            <Download className="h-4 w-4" />
            Import
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="start" className="">
          <DropdownMenuItem onClick={() => setMangaDexDialogOpen(true)}>
            <Download className="mr-2 h-4 w-4" />
            Import from MangaDex
          </DropdownMenuItem>
          <DropdownMenuItem onClick={() => setFileImportDialogOpen(true)}>
            <FileUp className="mr-2 h-4 w-4" />
            Import from File
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>

      <MangaDexImportDialog
        mangaDexDialogOpen={mangaDexDialogOpen}
        onMangaDexDialogOpenChange={setMangaDexDialogOpen}
      />

      <MangaManualImportDialog
        fileImportDialogOpen={fileImportDialogOpen}
        onFileImportDialogOpenChange={setFileImportDialogOpen}
      />
    </>
  );
}