"use client";
import Image from "next/image";
import PackageCamera from "./lib/camera/component/pakageCamera";
import BarcodeScanner from "./lib/camera/component/scannerBarcode";
import SjCamera from "./lib/camera/component/sjCamera";
import DispatchCamera from "./lib/camera/component/dispatchCamera";
import useCameraStore from "./lib/camera/hooks/useCameraStore";
import Header from "./lib/camera/component/hedear";
import { Button } from "@mui/material";
import { SaveAsOutlined } from "@mui/icons-material";
import axios from "axios";
import odooApi from "./lib/api/odooApi";
import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { getAuth } from "./lib/api/auth";
import { getCookie } from "cookies-next";

type Role = "driver" | "dispatch";

export default function Home() {
  const [isLogin, setIsLogin] = useState<boolean>(true);
  const [isDriver, setIsDriver] = useState<boolean>(false);
  const [isDispatch, setIsDispatch] = useState<boolean>(false);

  const {
    barcode,
    imageSj,
    imagePackage,
    imageDispatch,
    setBarcode,
    setImageSj,
    setImagePackage,
    setImageDispatch,
  } = useCameraStore();

  const [isLoading, setIsLoading] = useState<boolean>(false);
  const router = useRouter();

  useEffect(() => {
    const auth = getAuth();
    if (!auth) {
      router.push("/login");
      return;
    }
    // baca role dari cookie yang diset saat login
    const roleCookie = (getCookie("web_role") as string | undefined)?.toLowerCase() as Role | undefined;
    const role: Role | null = roleCookie === "driver" || roleCookie === "dispatch" ? roleCookie : null;

    setIsLogin(true);
    setIsDriver(role === "driver");
    setIsDispatch(role === "dispatch");
  }, [router]);

  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    setIsLoading(true);

    if (!barcode) {
      alert("Barcode harus diisi.");
      setIsLoading(false);
      return;
    }

    // Validasi sesuai role yang dipilih di login
    if (isDispatch) {
      // Dispatch: dispatch wajib, SJ opsional
      if (!imageDispatch) {
        alert("Foto Dispatch Wajib Diisi");
        setIsLoading(false);
        return;
      }
    } else {
      // Driver (atau non-dispatch): SJ & Penerima wajib
      if (!imageSj || !imagePackage) {
        alert("Barcode, Foto SJ, dan Foto Penerima harus tersedia.");
        setIsLoading(false);
        return;
      }
    }

    try {
      // siapkan base64 tanpa prefix, kalau kosong biarkan undefined
      const newSjImage = imageSj ? imageSj.replace(/^.*?,/, "") : undefined;
      const newPackageImage = imagePackage ? imagePackage.replace(/^.*?,/, "") : undefined;
      const newDispatchImage =
        imageDispatch && imageDispatch.startsWith("data:")
          ? imageDispatch.replace(/^.*?,/, "")
          : imageDispatch || undefined;

      // hanya kirim field yang ada
      const submittedSj = !!newSjImage;
      const submittedPackage = !!newPackageImage;
      const submittedDispatch = !!newDispatchImage && !isDriver; // dispatch hanya untuk non-driver

      const data: Record<string, string> = {};
      if (submittedSj) data.sj_document = newSjImage!;
      if (submittedPackage) data.paket_document = newPackageImage!;
      if (submittedDispatch) data.dispatch_document = newDispatchImage!;

      const response = (await odooApi(
        "PUT",
        `/api/v1/stock-picking/${barcode}/documentation`,
        data
      )) as { status?: { code?: number } };

      if (response?.status?.code === 200) {
        alert("Berhasil Submit Data");
        setBarcode("");

        if (submittedSj) setImageSj("");
        if (submittedPackage) setImagePackage("");
        if (submittedDispatch) setImageDispatch("");
      } else if (response?.status?.code === 404) {
        alert("Gagal Submit Data, Picking Code Tidak Ditemukan");
      } else {
        alert("Gagal Submit Data, Silahkan Coba Lagi");
      }
    } catch (error) {
      if (axios.isAxiosError(error)) {
        console.error("Error:", error.response?.data);
      } else if (error instanceof Error) {
        console.error("Error mengirim data:", error.message);
      } else {
        console.error("Unknown error:", error);
      }
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div className="bg-white h-screen overflow-auto">
      <Header />
      {isLogin && (
        <div className="py-4 px-4 sm:px-96 pt-20">
          <form onSubmit={handleSubmit}>
            <div>
              <BarcodeScanner />
            </div>

            <div className="h-4" />

            <div className="flex justify-between">
              {/* SJ: driver wajib, dispatch opsional → tampil untuk semua */}
              <SjCamera />
              {/* Penerima: tidak diperlukan dispatch → sembunyikan saat dispatch */}
              {!isDispatch && <PackageCamera />}
              {/* Dispatch: wajib untuk dispatch; non-driver boleh tampil */}
              {!isDriver && <DispatchCamera />}
            </div>

            <div className="h-2" />

            {imageSj && (
              <>
                <label className="block mt-2 text-sm font-medium text-gray-700 text-center">
                  Gambar Foto Surat Jalan
                </label>
                <div className="relative w-full h-[300px] border-2 border-gray-200 p-2 rounded-sm">
                  <Image
                    src={imageSj}
                    alt="Captured"
                    fill
                    unoptimized
                    className="p-2"
                    style={{ objectFit: "cover" }}
                  />
                </div>
              </>
            )}

            <div className="h-2" />

            {imagePackage && (
              <>
                <label className="block mt-2 text-sm font-medium text-gray-700 text-center">
                  Gambar Foto Penerima
                </label>
                <div className="relative w-full h-[300px] border-2 border-gray-200 p-2 rounded-sm">
                  <Image
                    src={imagePackage}
                    alt="Captured"
                    fill
                    unoptimized
                    className="p-2"
                    style={{ objectFit: "cover" }}
                  />
                </div>
              </>
            )}

            <div className="h-2" />

            {!isDriver && imageDispatch && (
              <>
                <label className="block mt-2 text-sm font-medium text-gray-700 text-center">
                  Gambar Foto Dispatch
                </label>
                <div className="relative w-full h-[300px] border-2 border-gray-200 p-2 rounded-sm">
                  <Image
                    src={imageDispatch}
                    alt="Captured"
                    fill
                    unoptimized
                    className="p-2"
                    style={{ objectFit: "cover" }}
                  />
                </div>
              </>
            )}

            <div className="h-4" />
            <Button
              className="w-[50%] sm:w-[25%]"
              variant="contained"
              color="error"
              startIcon={<SaveAsOutlined />}
              type="submit"
              disabled={isLoading}
            >
              Simpan
            </Button>
          </form>
        </div>
      )}
      {!isLogin && (
        <div className="py-4 px-4 sm:px-96 pt-20">
          <div className="text-center">
            <p className="text-2xl font-bold">Loading...</p>
          </div>
        </div>
      )}
    </div>
  );
}