"use client";

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { useApp } from "@/context/app";
import { useGlobal } from "@/context/global";
import { ServerRequest } from "@/lib/actions";
import { getExtension, showDeviceNotification } from "@/lib/utils";
import massiveUpload from "@/services/projects/massiveUpload";
import dayjs from "dayjs";
import { useEffect, useRef, useState } from "react";
import { toast } from "sonner";

export default function UploadMassiveProjectsPage() {
  const { dict } = useGlobal();
  const { setHeader } = useApp();

  const formRef = useRef<HTMLFormElement>(null);

  const [isLoading, setIsLoading] = useState(false);
  const [formData, setFormData] = useState<{
    file: File | null;
  }>({ file: null });

  const handleFileInputChange = (e: any) => {
    const target = e.target as HTMLInputElement;

    if (target.files && target.files[0]) {
      setFormData({ file: target.files[0] });
    } else {
      setFormData({ file: null });
    }
  };

  const handleFormSubmit = async (data: FormData) => {
    if (formData.file && getExtension(formData.file.name) !== "zip") {
      return toast.error(dict.alerts.massive_upload.type_file_not_allowed);
    }
    const promise = () =>
      new Promise(async (resolve, reject) => {
        const result = await ServerRequest<any>(massiveUpload(data));

        setIsLoading(false);
        formRef.current?.reset();

        if (!result.operation) {
          return reject(result);
        }

        if (result.data.errores) {
          console.log(result.data.errores);
        }

        await showDeviceNotification(
          dict.alerts.massive_upload.notification_end || "",
          {
            requireInteraction: true,
          },
        );

        return resolve(result);
      });

    toast.promise(promise, {
      loading: dict.alerts.massive_upload.loading,
      description: dayjs().format("MMM DD, YYYY HH:MM:ss"),
      success: ({ message }: any) => (
        <div>
          <p>{message}</p>
          <p className="text-xs text-gray-500">
            {dict.alerts.massive_upload.success_description}
          </p>
        </div>
      ),
      error: ({ message }: any) => message,
    });
  };

  useEffect(() => {
    setHeader((prev) => ({
      title: {
        link: "/projects",
        text: dict.pages.general.project,
        path: [{ link: "upload", text: dict.pages.general.navigation.massive }],
      },
    }));

    return () => {
      setHeader(undefined);
    };
  }, [dict]);

  return (
    <>
      <div className="py-2">
        <form ref={formRef} action={handleFormSubmit}>
          <p className="text-base font-bold">
            {dict.pages.general.navigation.massive}
          </p>
          <div className="space-y-2">
            <div className="space-y-2">
              <div>
                <Label
                  className="block cursor-pointer rounded border px-4 py-2 shadow"
                  htmlFor="files"
                >
                  File{" "}
                  <span className="text-gray-500">{formData.file?.name}</span>
                </Label>
                <Input
                  id="files"
                  name="files"
                  type="file"
                  className="hidden"
                  onChange={handleFileInputChange}
                />
              </div>
              <div className="text-xs text-gray-500">
                <p>
                  <strong></strong>
                </p>
                <p>
                  <strong>FEDSITE_projectname</strong>
                </p>
                <p></p>
              </div>
            </div>
            <div>
              <Button
                variant="solid"
                color={isLoading ? "secondary" : "primary"}
                disabled={isLoading}
                type="submit"
              >
                {dict.pages.general.send}
              </Button>
            </div>
          </div>
        </form>
      </div>
    </>
  );
}