"use client";
import {
  Box,
  Button,
  FormControl,
  FormLabel,
  TextField,
  Typography,
} 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";

// 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 };

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

  // state untuk validasi MUI helperText
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const [emailError, setEmailError] = useState(false);
  const [emailErrorMessage, setEmailErrorMessage] = useState("");
  const [passwordError, setPasswordError] = useState(false);
  const [passwordErrorMessage, setPasswordErrorMessage] = useState("");
  const [loading, setLoading] = useState(false);

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

  const validateInputs = (e: string, p: string) => {
    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("");
    }

    return ok;
  };

  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 emailStr = typeof rawEmail === "string" ? rawEmail.trim() : "";
    const passwordStr = typeof rawPassword === "string" ? rawPassword : "";

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

    try {
      setLoading(true);

      const res = (await odooApi("POST", "/api/v1/user/login", {
        email: emailStr,
        password: passwordStr,
      })) as unknown as LoginResponse;

      const auth = res?.result;

      if (res?.status?.code === 200 && auth?.is_auth) {
        // Cast auth.user ke AuthProps → cocok dengan setAuth
        if (auth.user && typeof auth.user === "object") {
          setAuth(auth.user as AuthProps);
        }
        router.push("/");
        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="bg-white py-6 px-4 sm:px-96 shadow-md rounded-sm">
          <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}
                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}
                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>

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

export default Login;