"use client";

import { toastApiError } from "@/lib/toast-api-error";
import * as React from "react";
import { useRouter } from "next/navigation";
import { Upload } from "lucide-react";
import { toast } from "sonner";

import { DataTableHeaderActions } from "@/app/dashboard/_components/data-table";
import { Button } from "@/components/ui/button";
import { dashboardCsrfHeader } from "@/lib/csrf.client";

export function BankHolidaysHeaderActions() {
  const router = useRouter();
  const inputRef = React.useRef<HTMLInputElement>(null);
  const [uploading, setUploading] = React.useState(false);

  async function onFileChange(event: React.ChangeEvent<HTMLInputElement>) {
    const file = event.target.files?.[0];
    event.target.value = "";
    if (!file) return;

    setUploading(true);
    try {
      const formData = new FormData();
      formData.append("import_file", file, file.name);
      const response = await fetch("/dashboard/master/bank-holidays/import", {
        method: "POST",
        headers: dashboardCsrfHeader(),
        body: formData,
      });
      const data = (await response.json().catch(() => null)) as {
        status?: string;
        message?: string;
      } | null;
      if (!response.ok || data?.status !== "success") {
        throw new Error(data?.message || "Import failed.");
      }
      toast.success(data.message || "Import complete.");
      router.refresh();
    } catch (error) {
      toastApiError(error, "Import failed.");
    } finally {
      setUploading(false);
    }
  }

  return (
    <>
      <input
        ref={inputRef}
        type="file"
        className="hidden"
        accept=".ics,.ical,.ifb,.xls,.xlsx,.csv"
        onChange={onFileChange}
      />
      <DataTableHeaderActions
        createHref="/dashboard/master/bank-holidays/create"
        prefixActions={
          <Button
            type="button"
            size="sm"
            variant="outline"
            disabled={uploading}
            onClick={() => inputRef.current?.click()}
          >
            <Upload className="size-4" />
            {uploading ? "Importing…" : "Import file"}
          </Button>
        }
      />
    </>
  );
}