"use client";
import React, { useState } from "react";
import Link from "next/link";
import Cookies from "js-cookie";
import { useRouter } from "next/navigation";

import withReactContent from "sweetalert2-react-content";
import { Input } from "../ui/input";
import { Label } from "../ui/label";

import Swal from "sweetalert2";
import { EyeFilledIcon, EyeSlashFilledIcon } from "../icons";
import { Button } from "../ui/button";
import { error, loading } from "@/lib/swal";
import { doLogin, getProfile } from "@/service/auth";

export default function Login() {
  const router = useRouter();
  const [isVisible, setIsVisible] = useState(false);
  const [isVisibleSetup, setIsVisibleSetup] = useState([false, false]);
  const [oldEmail, setOldEmail] = useState("");
  const [newEmail, setNewEmail] = useState("");
  const [passwordSetup, setPasswordSetup] = useState("");
  const [confPasswordSetup, setConfPasswordSetup] = useState("");

  const toggleVisibility = () => setIsVisible(!isVisible);
  const [needOtp, setNeedOtp] = useState(false);
  const [isFirstLogin, setFirstLogin] = useState(false);
  const [otpValue, setOtpValue] = useState("");
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [accessData, setAccessData] = useState<any>();
  const [profile, setProfile] = useState<any>();
  const [isValidEmail, setIsValidEmail] = useState(false);
  const [isResetPassword, setIsResetPassword] = useState(false);
  const [checkUsernameValue, setCheckUsernameValue] = useState("");
  const MySwal = withReactContent(Swal);

  const setValUsername = (e: any) => {
    const uname = e.replaceAll(/[^\w.-]/g, "");
    setUsername(uname.toLowerCase());
  };

  const onSubmit = async () => {
    const data = {
      username: username,
      password: password,
    };

    if (!username || !password) {
      error("Username & Password Wajib Diisi !");
    } else {
      loading();
      const response = await doLogin(data);
      if (response?.error) {
        error("Username / Password Tidak Sesuai");
      } else {
        const profile = await getProfile(response?.data?.data?.access_token);
        const dateTime: any = new Date();

        const newTime: any = dateTime.getTime() + 10 * 60 * 1000;

        Cookies.set("access_token", response?.data?.data?.access_token, {
          expires: 1,
        });
        Cookies.set("refresh_token", response?.data?.data?.refresh_token, {
          expires: 1,
        });
        Cookies.set("time_refresh", newTime, {
          expires: 1,
        });
        Cookies.set("is_first_login", "true", {
          secure: true,
          sameSite: "strict",
        });
        // await saveActivity(
        //   {
        //     activityTypeId: 1,
        //     url: "https://dev.mikulnews.com/auth",
        //     userId: profile?.data?.data?.id,
        //   },
        //   response?.data?.data?.access_token
        // );
        Cookies.set("profile_picture", profile?.data?.data?.profilePictureUrl, {
          expires: 1,
        });
        Cookies.set("uie", profile?.data?.data?.id, {
          expires: 1,
        });
        Cookies.set("ufne", profile?.data?.data?.fullname, {
          expires: 1,
        });
        Cookies.set("ulie", profile?.data?.data?.userLevelGroup, {
          expires: 1,
        });
        Cookies.set("username", profile?.data?.data?.username, {
          expires: 1,
        });
        Cookies.set("urie", profile?.data?.data?.userRoleId, {
          expires: 1,
        });
        console.log(
          "RRR",
          profile?.data?.data?.role.id,
          "TTTT",
          profile?.data?.data?.roleId
        );
        Cookies.set("roleName", profile?.data?.data?.roleName, {
          expires: 1,
        });
        Cookies.set("masterPoldaId", profile?.data?.data?.masterPoldaId, {
          expires: 1,
        });
        Cookies.set("ulne", profile?.data?.data?.userLevelId, {
          expires: 1,
        });
        Cookies.set("urce", profile?.data?.data?.roleCode, {
          expires: 1,
        });
        Cookies.set("email", profile?.data?.data?.email, {
          expires: 1,
        });
        // router.push("/admin/dashboard");
        console.log("OOO", profile?.data?.data);

        Cookies.set("status", "login", {
          expires: 1,
        });

        close();
      }
    }
  };

  return (
    <div className="min-h-screen flex">
      <div className="hidden lg:flex lg:w-1/2 bg-white relative overflow-hidden">
        <div className="absolute inset-0 bg-white"></div>
        <div className="relative z-10 flex items-center justify-center w-full p-12">
          <div className="text-center">
            <Link href={"/"}>
              <div>
                <img
                  src="/Group.png"
                  alt="Mikul News Logo"
                  className="max-w-2xl h-auto drop-shadow-lg"
                />
              </div>
            </Link>
            <div className="mt-8 text-white/90">
              <h2 className="text-2xl font-bold mb-2">Portal Jaecoo</h2>
              <p className="text-sm opacity-80">Platform beyond classic</p>
            </div>
          </div>
        </div>

        <div className="absolute top-10 left-10 w-20 h-20 bg-white/10 rounded-full blur-xl"></div>
        <div className="absolute bottom-20 right-20 w-32 h-32 bg-white/5 rounded-full blur-2xl"></div>
      </div>

      <div className="w-full lg:w-1/2 flex items-center justify-center p-8">
        <div className="w-full max-w-md">
          <div className="lg:hidden text-center mb-8">
            <Link href={"/"}>
              <img
                src="/masjaecoonav.png"
                alt="Mikul News Logo"
                className="w-64 h-10 mx-auto"
              />
            </Link>
          </div>

          {isFirstLogin ? (
            <div className="bg-white rounded-2xl shadow-xl p-8 border border-gray-100">
              <div className="text-center mb-8">
                <div className="w-16 h-16 bg-orange-100 rounded-full flex items-center justify-center mx-auto mb-4">
                  <svg
                    className="w-8 h-8 text-orange-600"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2}
                      d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
                    />
                  </svg>
                </div>
                <h2 className="text-2xl font-bold text-gray-900 mb-2">
                  Setup Akun
                </h2>
                <p className="text-gray-600">Lengkapi informasi email Anda</p>
              </div>

              <div className="space-y-6">
                <div>
                  <Label
                    htmlFor="old-email"
                    className="text-sm font-medium text-gray-700 mb-2 block"
                  >
                    Email Lama
                  </Label>
                  <Input
                    id="old-email"
                    type="email"
                    required
                    placeholder="Masukkan email lama"
                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition-colors"
                    value={oldEmail}
                    onChange={(e) => setOldEmail(e.target.value)}
                  />
                </div>

                <div>
                  <Label
                    htmlFor="new-email"
                    className="text-sm font-medium text-gray-700 mb-2 block"
                  >
                    Email Baru
                  </Label>
                  <Input
                    id="new-email"
                    type="email"
                    required
                    placeholder="Masukkan email baru"
                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition-colors"
                    value={newEmail}
                    onChange={(e) => setNewEmail(e.target.value)}
                  />
                </div>

                <Button
                  size="lg"
                  className="w-full bg-gradient-to-r from-orange-500 to-orange-600 hover:from-orange-600 hover:to-orange-700 text-white font-semibold py-3 rounded-lg transition-all duration-200 shadow-lg hover:shadow-xl"
                  // onClick={submitCheckEmail}
                >
                  Submit
                </Button>
              </div>
            </div>
          ) : needOtp ? (
            <div className="bg-white rounded-2xl shadow-xl p-8 border border-gray-100">
              <div className="text-center">
                <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
                  <svg
                    className="w-8 h-8 text-blue-600"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2}
                      d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
                    />
                  </svg>
                </div>
                <h2 className="text-2xl font-bold text-gray-900 mb-2">
                  Verifikasi OTP
                </h2>
                <p className="text-gray-600">
                  Masukkan kode OTP yang telah dikirim
                </p>
              </div>
            </div>
          ) : isResetPassword ? (
            <div className="bg-white rounded-2xl shadow-xl p-8 border border-gray-100">
              <div className="text-center mb-8">
                <div className="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
                  <svg
                    className="w-8 h-8 text-red-600"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2}
                      d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
                    />
                  </svg>
                </div>
                <h2 className="text-2xl font-bold text-gray-900 mb-2">
                  Reset Password
                </h2>
                <p className="text-gray-600">
                  Masukkan username untuk reset password
                </p>
              </div>

              <div className="space-y-6">
                <div>
                  <Label
                    htmlFor="reset-username"
                    className="text-sm font-medium text-gray-700 mb-2 block"
                  >
                    Username
                  </Label>
                  <Input
                    id="reset-username"
                    type="text"
                    required
                    placeholder="Masukkan username"
                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500 transition-colors"
                    value={checkUsernameValue}
                    onChange={(e) =>
                      setCheckUsernameValue(e.target.value.trim())
                    }
                    onPaste={(e) =>
                      setCheckUsernameValue(e.currentTarget.value.trim())
                    }
                    onCopy={(e) =>
                      setCheckUsernameValue(e.currentTarget.value.trim())
                    }
                  />
                </div>

                <Button
                  size="lg"
                  className="w-full bg-gradient-to-r from-red-500 to-red-600 hover:from-red-600 hover:to-red-700 text-white font-semibold py-3 rounded-lg transition-all duration-200 shadow-lg hover:shadow-xl disabled:opacity-50 disabled:cursor-not-allowed"
                  // onClick={checkUsername}
                  disabled={checkUsernameValue === ""}
                >
                  Check Username
                </Button>

                <div className="flex justify-between items-center pt-4 border-t border-gray-100">
                  <Link
                    href={`/`}
                    className="text-sm text-gray-600 hover:text-gray-900 transition-colors lg:hidden"
                  >
                    Beranda
                  </Link>

                  <button
                    className="text-sm text-red-600 hover:text-red-700 font-medium transition-colors"
                    onClick={() => setIsResetPassword(false)}
                  >
                    Kembali ke Login
                  </button>
                </div>
              </div>
            </div>
          ) : (
            <div className=" ">
              <div className="text-center mb-8">
                <div className=" w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-8">
                  <img
                    src="/logo-netidhub.png"
                    alt="netidhub Logo"
                    className="max-w-[150px] h-auto drop-shadow-lg"
                  />
                </div>
                <h2 className="text-lg font-bold text-gray-900 mb-2 mt-5">
                  MENYATUKAN INDONESIA
                </h2>
              </div>

              <div className="space-y-6">
                <div>
                  <Label
                    htmlFor="username"
                    className="text-sm font-medium text-gray-700 mb-2 block"
                  >
                    Username
                  </Label>
                  <Input
                    id="username"
                    required
                    type="text"
                    placeholder="Masukkan username"
                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 transition-colors"
                    value={username}
                    onChange={(e) => setValUsername(e.target.value.trim())}
                    onPaste={(e) =>
                      setValUsername(e.currentTarget.value.trim())
                    }
                    onCopy={(e) => setValUsername(e.currentTarget.value.trim())}
                  />
                </div>

                <div>
                  <Label
                    htmlFor="password"
                    className="text-sm font-medium text-gray-700 mb-2 block"
                  >
                    Password
                  </Label>
                  <div className="relative">
                    <Input
                      id="password"
                      required
                      type={isVisible ? "text" : "password"}
                      placeholder="Masukkan password"
                      className="w-full px-4 py-3 pr-12 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 transition-colors"
                      value={password}
                      onChange={(e) => setPassword(e.target.value)}
                    />
                    <button
                      type="button"
                      onClick={toggleVisibility}
                      className="absolute inset-y-0 right-0 px-3 flex items-center text-gray-400 hover:text-gray-600 focus:outline-none transition-colors"
                    >
                      {isVisible ? (
                        <EyeSlashFilledIcon className="w-5 h-5" />
                      ) : (
                        <EyeFilledIcon className="w-5 h-5" />
                      )}
                    </button>
                  </div>
                </div>
                <p className="text-[#007AFF]">Lupa Kata Sandi?</p>
                <Link href={"/admin/dashboard"}>
                  <Button
                    size="lg"
                    className="w-full bg-gradient-to-r from-gray-500 to-gray-600 hover:from-gray-600 hover:to-gray-700 text-white font-semibold py-3 rounded-lg transition-all duration-200 shadow-lg hover:shadow-xl"
                    onClick={onSubmit}
                  >
                    Masuk ke Portal
                  </Button>
                </Link>
                <div className="flex justify-center items-center border-gray-100">
                  <button
                    className="text-sm text-black font-medium transition-colors text-center "
                    onClick={() => setIsResetPassword(true)}
                  >
                    Belum Punya akun?{" "}
                    <span className="text-[#007AFF]">Daftar</span>
                  </button>
                </div>
              </div>

              {/* <div className="mt-8 p-4 bg-blue-50 rounded-lg border border-blue-100">
                <div className="flex items-start">
                  <svg className="w-5 h-5 text-blue-600 mt-0.5 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                  </svg>
                  <div className="text-sm text-blue-800">
                    <p className="font-medium mb-1">Informasi Portal</p>
                    <p className="text-blue-700">Akses informasi terkini dan status permintaan informasi yang telah diajukan.</p>
                  </div>
                </div>
              </div> */}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}