"use client";

import { useState } from "react";
import { Download, ChevronDown } from "lucide-react";
import { toast } from "sonner";
import { trpc } from "@/trpc/client";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import type { Category } from "@/lib/types/item";

interface ExportButtonProps {
  categories: Category[];
}

export function ExportButton({ categories }: ExportButtonProps) {
  const [selectedCategory, setSelectedCategory] = useState<string>("");
  const [isLoading, setIsLoading] = useState(false);
  const utils = trpc.useUtils();

  const handleExport = async (
    categoryId: string | undefined,
    format: "csv" | "excel",
  ) => {
    setIsLoading(true);
    try {
      const result = await utils.client.item.export.query({
        categoryId,
        format,
      });

      let blob: Blob;
      let downloadFilename: string;

      if (format === "csv" && result.csv) {
        blob = new Blob([result.csv], { type: "text/csv;charset=utf-8;" });
        downloadFilename = result.filename;
      } else if ("excelBase64" in result && result.excelBase64) {
        const bstr = atob(result.excelBase64);
        let n = bstr.length;
        const u8arr = new Uint8Array(n);
        while (n--) {
          u8arr[n] = bstr.charCodeAt(n);
        }
        blob = new Blob([u8arr], {
          type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
        });
        downloadFilename = result.filename;
      } else {
        throw new Error("Invalid export response");
      }

      const url = URL.createObjectURL(blob);
      const link = document.createElement("a");
      link.href = url;
      link.download = downloadFilename;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      URL.revokeObjectURL(url);
    } catch (error) {
      toast.error("Failed to export items. Please try again.");
    } finally {
      setIsLoading(false);
    }
  };

  const handleExportAllCsv = () => handleExport(undefined, "csv");
  const handleExportAllExcel = () => handleExport(undefined, "excel");
  const handleExportCategoryCsv = () => handleExport(selectedCategory, "csv");
  const handleExportCategoryExcel = () =>
    handleExport(selectedCategory, "excel");

  return (
    <DropdownMenu>
      <DropdownMenuTrigger
        className="border-input bg-background hover:bg-accent hover:text-accent-foreground focus-visible:ring-ring inline-flex shrink-0 items-center justify-center rounded-md border px-3 py-1.5 text-sm font-medium shadow-sm focus-visible:ring-1 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50"
        disabled={isLoading}
        aria-label="Export items"
      >
        <Download className="size-4" />
        <span>{isLoading ? "Exporting..." : "Export"}</span>
        <ChevronDown className="size-4" />
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        <DropdownMenuSub>
          <DropdownMenuSubTrigger>Export All</DropdownMenuSubTrigger>
          <DropdownMenuSubContent>
            <DropdownMenuItem onClick={handleExportAllCsv} disabled={isLoading}>
              CSV
            </DropdownMenuItem>
            <DropdownMenuItem
              onClick={handleExportAllExcel}
              disabled={isLoading}
            >
              Excel
            </DropdownMenuItem>
          </DropdownMenuSubContent>
        </DropdownMenuSub>
        <DropdownMenuSeparator />
        <DropdownMenuSub>
          <DropdownMenuSubTrigger>Export by Category</DropdownMenuSubTrigger>
          <DropdownMenuSubContent>
            <div className="p-2">
              <Select
                value={selectedCategory}
                onValueChange={(value) => setSelectedCategory(value || "")}
              >
                <SelectTrigger className="w-[180px]">
                  <SelectValue placeholder="Select category" />
                </SelectTrigger>
                <SelectContent>
                  {categories.map((category) => (
                    <SelectItem key={category.id} value={category.id}>
                      {category.name}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
            <DropdownMenuSeparator />
            <DropdownMenuItem
              onClick={handleExportCategoryCsv}
              disabled={isLoading || !selectedCategory}
            >
              CSV
            </DropdownMenuItem>
            <DropdownMenuItem
              onClick={handleExportCategoryExcel}
              disabled={isLoading || !selectedCategory}
            >
              Excel
            </DropdownMenuItem>
          </DropdownMenuSubContent>
        </DropdownMenuSub>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}