"use client";
import {
  Box,
  Button,
  FormControl,
  FormLabel,
  TextField,
  Typography,
  Select,
  MenuItem,
  SelectChangeEvent,
} from "@mui/material";
import Header from "../lib/camera/component/hedear";
import odooApi from "../lib/api/odooApi";
import { getAuth, setAuth } from "../lib/api/auth";
import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import { setCookie } from "cookies-next";
import { clearOdooSession } from "../lib/api/clearOdooSession";
// Ambil tipe parameter untuk setAuth agar sesuai tepat dengan definisinya
type AuthProps = Parameters<typeof setAuth>[0];

type LoginStatus = { code?: number; description?: string };
type LoginResult = {
  is_auth?: boolean;
  reason?: "NOT_FOUND" | "NOT_ACTIVE" | string;
  user?: unknown; // akan dicast ke AuthProps jika lolos
};
type LoginResponse = { status?: LoginStatus; result?: LoginResult };

type Role = "driver" | "dispatch";

const Login = () => {
  const router = useRouter();

  // state input
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [role, setRole] = useState<"" | Role>("");

  // state error helperText
  const [emailError, setEmailError] = useState(false);
  const [emailErrorMessage, setEmailErrorMessage] = useState("");
  const [passwordError, setPasswordError] = useState(false);
  const [passwordErrorMessage, setPasswordErrorMessage] = useState("");
  const [roleError, setRoleError] = useState(false);
  const [roleErrorMessage, setRoleErrorMessage] = useState("");

  const [loading, setLoading] = useState(false);

  useEffect(() => {
    void clearOdooSession(process.env.NEXT_PUBLIC_ODOO_API_HOST ?? "");
    const token = getAuth();
    if (token) router.replace("/");
  }, [router]);

  // useEffect(() => {
  //   const token = getAuth();
  //   if (token) router.push("/");
  // }, [router]);

  const validateInputs = (e: string, p: string, r: "" | Role) => {
    let ok = true;

    if (!e || !/\S+@\S+\.\S+/.test(e)) {
      setEmailError(true);
      setEmailErrorMessage("Please enter a valid email address.");
      ok = false;
    } else {
      setEmailError(false);
      setEmailErrorMessage("");
    }

    if (!p || p.length < 6) {
      setPasswordError(true);
      setPasswordErrorMessage("Password must be at least 6 characters long.");
      ok = false;
    } else {
      setPasswordError(false);
      setPasswordErrorMessage("");
    }

    if (!r) {
      setRoleError(true);
      setRoleErrorMessage("Please select a role.");
      ok = false;
    } else {
      setRoleError(false);
      setRoleErrorMessage("");
    }

    return ok;
  };

  const handleRoleChange = (e: SelectChangeEvent) => {
    const val = e.target.value as Role | "";
    setRole(val);
    if (val) {
      setRoleError(false);
      setRoleErrorMessage("");
    }
  };

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

    // Ambil dari FormData agar sesuai dengan form yang disubmit
    const fd = new FormData(event.currentTarget);
    const rawEmail = fd.get("email");
    const rawPassword = fd.get("password");
    const rawRole = fd.get("role");
    const emailStr = typeof rawEmail === "string" ? rawEmail.trim() : "";
    const passwordStr = typeof rawPassword === "string" ? rawPassword : "";
    const roleStr: "" | Role =
      rawRole === "driver" || rawRole === "dispatch" ? rawRole : "";

    if (!validateInputs(emailStr, passwordStr, roleStr)) return;

    try {
      setLoading(true);

      // Kirim web_role juga (opsional, kalau backend abaikan juga tidak masalah)
      const res = (await odooApi("POST", "/api/v1/user/login", {
        email: emailStr,
        password: passwordStr,
        web_role: roleStr,
      })) as unknown as LoginResponse;

      const auth = res?.result;

      if (res?.status?.code === 200 && auth?.is_auth) {
        if (auth.user && typeof auth.user === "object") {
          setAuth(auth.user as AuthProps);
        }
        setCookie("web_role", roleStr, { path: "/", sameSite: "lax" });
        router.replace("/");
        return;
      }

      // Tangani alasan gagal umum
      switch (auth?.reason) {
        case "NOT_FOUND":
          alert("Email tidak ditemukan");
          break;
        case "NOT_ACTIVE":
          alert("Akun anda belum aktif");
          break;
        default:
          alert(
            res?.status?.description || "Login gagal. Periksa email/password."
          );
      }
    } catch (error) {
      console.error(error);
      alert("Gagal login, silahkan coba lagi");
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="bg-[#fafeff] h-screen overflow-auto">
      <Header />
      <div className="py-4 px-4 sm:px-96 pt-20">
        <div className="py-6 px-4 sm:px-96 shadow-md rounded-sm text-black">
          <Typography
            component="h1"
            variant="h4"
            sx={{
              width: "100%",
              fontSize: "clamp(2rem, 10vw, 2.15rem)",
              mb: 4,
            }}
          >
            Sign in
          </Typography>

          <Box
            component="form"
            onSubmit={handleSubmit}
            noValidate
            sx={{
              display: "flex",
              flexDirection: "column",
              width: "100%",
              gap: 2,
            }}
          >
            <FormControl>
              <FormLabel htmlFor="email">Email</FormLabel>
              <TextField
                error={emailError}
                helperText={emailErrorMessage}
                disabled={loading}
                id="email"
                type="email"
                name="email"
                placeholder="your@email.com"
                autoComplete="email"
                autoFocus
                required
                fullWidth
                variant="outlined"
                color={emailError ? "error" : "primary"}
                size="small"
                inputProps={{ "aria-label": "email" }}
                value={email}
                onChange={(e) => setEmail(e.target.value)}
              />
            </FormControl>

            <FormControl>
              <Box sx={{ display: "flex", justifyContent: "space-between" }}>
                <FormLabel htmlFor="password">Password</FormLabel>
              </Box>
              <TextField
                error={passwordError}
                helperText={passwordErrorMessage}
                disabled={loading}
                name="password"
                placeholder="••••••"
                type="password"
                id="password"
                autoComplete="current-password"
                required
                fullWidth
                variant="outlined"
                color={passwordError ? "error" : "primary"}
                size="small"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
              />
            </FormControl>

            {/* Role selection */}
            <FormControl error={roleError}>
              <FormLabel htmlFor="role">Role</FormLabel>
              <Select
                id="role"
                name="role"
                value={role}
                disabled={loading}
                onChange={handleRoleChange}
                displayEmpty
                size="small"
              >
                <MenuItem value="">
                  <em>Pilih role</em>
                </MenuItem>
                <MenuItem value="driver">Driver</MenuItem>
                <MenuItem value="dispatch">Dispatch</MenuItem>
              </Select>
              {roleError && (
                <Typography variant="caption" color="error" sx={{ mt: 0.5 }}>
                  {roleErrorMessage || "Please select a role."}
                </Typography>
              )}
            </FormControl>

            <Button
              type="submit"
              fullWidth
              variant="contained"
              disabled={loading}
            >
              {loading ? "Loading..." : "Sign in"}
            </Button>
          </Box>
        </div>
      </div>
    </div>
  );
};

export default Login;