"use client";

import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import toast from "react-hot-toast";

import Header from "../components/layout/Header";
import Footer from "../components/layout/Footer";
import EditProfileModal from "../components/profile/EditProfileModal";
import EditLanguageModal from "../components/profile/EditLanguageModal";

import { getProfile } from "../lib/auth";
import { deleteAccount } from "../lib/auth";
import { logout } from "../lib/auth";


export default function ProfileSetting() {

  const router = useRouter();

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

  const [languages, setLanguages] = useState<string[]>([]);

  const [showModal, setShowModal] = useState(false);

  const [user, setUser] = useState<any>(null);

  const loadProfile = async () => {
    try {

      const token = localStorage.getItem("token");

      if (!token) {
        router.push("/signin");
        return;
      }

      const response = await getProfile(token);

      if (response.success) {
        setUser(response.user);

        // Keep latest user in localStorage
        localStorage.setItem(
          "user",
          JSON.stringify(response.user)
        );
      }

    } catch (err) {
      console.error(err);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    loadProfile();
  }, []);

const handleDeleteAccount = async () => {

    if (!confirm("Are you sure you want to delete your account?")) {
        return;
    }

    try {

        const token = localStorage.getItem("token");

        const savedUser = JSON.parse(
            localStorage.getItem("user") || "{}"
        );

        if (!token) {
            toast.error("Login expired");
            return;
        }

        if (!savedUser.Id && !savedUser.id) {
            toast.error("User not found");
            return;
        }

        const response = await deleteAccount(
            savedUser.Id ?? savedUser.id,
            token
        );

        if (response.success) {

            toast.success("Account deleted successfully");

            localStorage.clear();

            router.replace("/");

        } else {

            toast.error(response.message);

        }

    } catch (error: any) {

        console.log(error);

        toast.error(
            error.response?.data?.message ??
            error.message ??
            "Something went wrong"
        );

    }

};

  const handleLogoutAllDevices = async () => {

    if (!confirm("Are you sure you want to logout from all devices?")) {
        return;
    }

    try {

        const token = localStorage.getItem("token");

        if (!token) {
            toast.error("Login expired");
            return;
        }

        await logout(token);

        toast.success("Logged out from all devices");

        localStorage.clear();

        router.replace("/");

    } catch (error: any) {

        console.log(error);

        toast.error(
            error.response?.data?.message ??
            error.message ??
            "Something went wrong"
        );

        localStorage.clear();

        router.replace("/");

    }

};

  if (loading) {
    return (
      <div className="text-center py-5">
        Loading...
      </div>
    );
  }

  return (
    <>
      <Header />
      <section className="profile-section">
        <div className="container">

          <h2 className="text-center fw-bold mb-4">
            Profile Settings
          </h2>

          <div className="row g-4">

            <div className="col-lg-6">

              <div className="card card-bg-primary text-white border-0 rounded-4 h-100">

                <div className="card-body">

                  <h5>Notifications</h5>

                  <div className="d-flex justify-content-between py-2">
                    <span>Astromall Chat</span>

                    <div className="form-check form-switch">
                      <input
                        className="form-check-input"
                        type="checkbox"
                        defaultChecked
                      />
                    </div>

                  </div>

                  <div className="d-flex justify-content-between py-2">

                    <span>Live Events</span>

                    <div className="form-check form-switch">
                      <input
                        className="form-check-input"
                        type="checkbox"
                        defaultChecked
                      />
                    </div>

                  </div>

                </div>

              </div>

            </div>

            <div className="col-lg-6">

              <div className="card card-bg-primary text-white border-0 rounded-4 h-100">

                <div className="card-body">

                  <h5>My Language</h5>

                  <div className="mt-3">
                {languages.map((language) => (
                    <span
                        key={language}
                        className="badge bg-primary me-2 mb-2"
                    >
                        {language}
                    </span>
                ))}
              </div>

                  <div className="text-center mt-5">

                    <button className="btn btn-link text-success" onClick={() => setShowLanguageModal(true)}>
                      Edit your languages
                    </button>

                  </div>

                </div>

              </div>

            </div>

          </div>

          <div className="row mt-4 g-3">

            <div className="col-md-4">
              

              <button
                className="btn btn-outline-light w-100 py-3"
                onClick={() => setShowModal(true)}
              >
                <i className="bi bi-pencil-square me-2"></i>

                Edit Profile
              </button>

            </div>

            <div className="col-md-4">

              <button
                  className="btn btn-outline-danger w-100 py-3"
                  onClick={handleLogoutAllDevices}
              >

                <i className="bi bi-box-arrow-right me-2"></i>

                Logout from all devices

              </button>

            </div>

            <div className="col-md-4">

              <button
                  className="btn btn-outline-danger w-100 py-3"
                  onClick={handleDeleteAccount}
              >
                  <i className="bi bi-trash me-2"></i>
                  Delete My Account
              </button>

            </div>

          </div>

        </div>
      </section>

      <Footer />

      <EditProfileModal
        show={showModal}
        onClose={() => setShowModal(false)}
        user={user}
        onUpdated={(updatedUser: any) => {
          setUser(updatedUser);

          localStorage.setItem(
            "user",
            JSON.stringify(updatedUser)
          );
        }}
      />

      <EditLanguageModal
          show={showLanguageModal}
          onClose={() => setShowLanguageModal(false)}
          selectedLanguages={languages}
          onSave={(value) => setLanguages(value)}
      />

    </>
  );
}