path: root/app/page.tsx

"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";

// ====== ROLE EMAIL LISTS ======
const DRIVER_EMAILS = new Set(
  ["driverindoteknik@gmail.com", "sulistianaridwan8@gmail.com"]
    .map(e => e.toLowerCase())
);

const DISPATCH_EMAILS = new Set(
  ["rahmat.afiudin@gmail.com", "it@fixcomart.co.id"]
    .map(e => e.toLowerCase())
);

function extractEmailFromAuth(auth: unknown): string | null {
  if (auth && typeof auth === "object" && "email" in (auth as any)) {
    const email = (auth as any).email;
    if (typeof email === "string") return email;
  }
  if (auth && typeof auth === "object" && "token" in (auth as any)) {
    const t = (auth as any).token;
    if (typeof t === "string") {
      const parts = t.split(".");
      if (parts.length === 3) {
        try {
          const payload = JSON.parse(atob(parts[1]));
          return payload?.email ?? payload?.preferred_username ?? payload?.sub ?? null;
        } catch {}
      }
    }
  }
  if (typeof auth === "string") {
    const parts = auth.split(".");
    if (parts.length === 3) {
      try {
        const payload = JSON.parse(atob(parts[1]));
        return payload?.email ?? payload?.preferred_username ?? payload?.sub ?? null;
      } catch {}
    }
  }
  return null;
}

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 token = getAuth();
    console.log("FE auth (akan dipakai untuk header Token):", token);

    if (!token) {
      router.push("/login");
    } else {
      setIsLogin(true);

      const email = extractEmailFromAuth(token);
      const lower = (email ?? "").toLowerCase();

      // PRIORITAS: dispatch > driver
      const dispatchFlag = DISPATCH_EMAILS.has(lower);
      const driverFlag = DRIVER_EMAILS.has(lower) && !dispatchFlag;

      setIsDispatch(dispatchFlag);
      setIsDriver(driverFlag);
    }
  }, [router]);

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

    // Hanya role dispatch yang wajib foto Dispatch
    const needDispatch = isDispatch;

    if (!barcode || !imageSj || !imagePackage || (needDispatch && !imageDispatch)) {
      alert(
        needDispatch
          ? "Barcode, Foto SJ, Foto Penerima, dan Foto Dispatch harus tersedia."
          : "Barcode, Foto SJ, dan Foto Penerima harus tersedia."
      );
      setIsLoading(false);
      return;
    }

    try {
      const newSjImage = imageSj.replace(/^.*?,/, "");
      const newPackageImage = imagePackage.replace(/^.*?,/, "");
      const newDispatchImage = imageDispatch ? imageDispatch.replace(/^.*?,/, "") : undefined;

      const data: any = {
        sj_document: newSjImage,
        paket_document: newPackageImage,
      };
      if (!isDriver && newDispatchImage) {
        data.dispatch_document = newDispatchImage;
      }

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

      if (response.status.code == 200) {
        alert("Berhasil Submit Data");
        setBarcode("");
        setImageSj("");
        setImagePackage("");
        setImageDispatch("");
        setIsLoading(false);
      } else if (response.status.code == 404) {
        alert("Gagal Submit Data, Picking Code Tidak Ditemukan ");
        setIsLoading(false);
      } else {
        alert("Gagal Submit Data, Silahkan Coba Lagi");
        setIsLoading(false);
      }
      return response.data;
    } catch (error: unknown) {
      if (error instanceof Error) {
        console.error("Error mengirim data:", error.message);
      } else if (axios.isAxiosError(error)) {
        console.error("Error:", error.response?.data);
      } else {
        console.error("Unknown error:", error);
      }
      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>

            <div className="flex justify-between">
              <SjCamera />
              <PackageCamera />
              {!isDriver && <DispatchCamera />} {/* disembunyikan untuk driver */}
            </div>
            <div className="h-2"></div>

            {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"
                    layout="fill"
                    objectFit="cover"
                    unoptimized
                    className="p-2"
                  />
                </div>
              </>
            )}

            <div className="h-2"></div>

            {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"
                    layout="fill"
                    objectFit="cover"
                    unoptimized
                    className="p-2"
                  />
                </div>
              </>
            )}

            <div className="h-2"></div>

            {!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"
                    layout="fill"
                    objectFit="cover"
                    unoptimized
                    className="p-2"
                  />
                </div>
              </>
            )}

            <div>
              <div className="h-4"></div>
              <Button
                className="w-[50%] sm:w-[25%]"
                variant="contained"
                color="error"
                startIcon={<SaveAsOutlined />}
                type="submit"
                disabled={isLoading}
              >
                Simpan
              </Button>
            </div>
          </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>
  );
}