import Divider from '@/core/components/elements/Divider/Divider';
import AppLayout from '@/core/components/layouts/AppLayout';
import BasicLayout from '@/core/components/layouts/BasicLayout';
import DesktopView from '@/core/components/views/DesktopView';
import MobileView from '@/core/components/views/MobileView';
import useAuth from '@/core/hooks/useAuth';
import CompanyProfile from '@/lib/auth/components/CompanyProfile';
import SwitchAccount from '@/lib/auth/components/SwitchAccount';
import IsAuth from '@/lib/auth/components/IsAuth';
import Menu from '@/lib/auth/components/Menu';
import PersonalProfile from '@/lib/auth/components/PersonalProfile';
// import StatusSwitchAccount from '@/lib/auth/components/StatusSwitchAccount';
import { Checkbox } from '@chakra-ui/react';
import { useState, useEffect } from 'react';
import switchAccountProgresApi from '@/lib/auth/api/switchAccountProgresApi.js';
import BottomPopup from '@/core/components/elements/Popup/BottomPopup';
import { useRouter } from 'next/router';

export default function Profile() {
  const auth = useAuth();
  // console.log('auth', auth);
  const [isChecked, setIsChecked] = useState(false);
  const [ubahAkun, setUbahAkun] = useState(false);
  const [isAprove, setIsAprove] = useState();
  const [changeConfirmation, setChangeConfirmation] = useState(false);
  const router = useRouter();

  // Handle checkbox toggle
  const handleChange = () => {
    if (isChecked) {
      setIsChecked(false);
    } else {
      setChangeConfirmation(true);
    }
  };

  // Load status dan cek localStorage "autoCheckProfile"
  useEffect(() => {
    const loadPromo = async () => {
      const progresSwitchAccount = await switchAccountProgresApi();
      if (progresSwitchAccount) {
        setIsAprove(progresSwitchAccount.status);
        setUbahAkun(progresSwitchAccount.status);
      }
    };
    loadPromo();

    if (typeof window !== 'undefined') {
      const autoCheck = localStorage.getItem('autoCheckProfile');
      if (autoCheck === 'true') {
        setIsChecked(true);
        localStorage.removeItem('autoCheckProfile');

        // Hapus query param supaya URL bersih
        if (router.query.autoCheck) {
          const cleanQuery = { ...router.query };
          delete cleanQuery.autoCheck;
          router.replace(
            { pathname: router.pathname, query: cleanQuery },
            undefined,
            { shallow: true }
          );
        }
      }
    }
  }, [router]);

  // Confirm checkbox change from popup
  const handleConfirmSubmit = () => {
    setChangeConfirmation(false);
    setIsChecked(true);
  };
  return (
    <>
      <BottomPopup
        active={changeConfirmation}
        close={() => setChangeConfirmation(false)} //Menutup popup
        title="Ubah type akun"
      >
        <div className="leading-7 text-gray_r-12/80">
          Anda akan mengubah type akun anda?
        </div>
        <div className="flex mt-6 gap-x-4 md:justify-end">
          <button
            className="btn-solid-red flex-1 md:flex-none"
            type="button"
            onClick={handleConfirmSubmit}
          >
            Yakin
          </button>
          <button
            className="btn-light flex-1 md:flex-none"
            type="button"
            onClick={() => setChangeConfirmation(false)}
          >
            Batal
          </button>
        </div>
      </BottomPopup>
      <IsAuth>
        <MobileView>
          <AppLayout title="Akun Saya">
            {auth?.company || ((isChecked || (!ubahAkun && ubahAkun !== 'pending')) && (
                <div className="text-sm p-4 flex items-center">
                  <Checkbox
                    borderColor="gray.600"
                    colorScheme="red"
                    size="lg"
                    isChecked={isChecked}
                    onChange={handleChange}
                  />
                  <p className="ml-2">Ubah ke akun bisnis</p>
                </div>
              ))}
            {isChecked && ubahAkun !== 'pending'  && (
              <div>
                <SwitchAccount company_type="nonpkp" setIsAprove={setIsAprove} setUbahAkun={setUbahAkun}/>
                <Divider />
              </div>
            )}
            {/* {!auth?.parentId
              ? auth?.parentId
              : auth?.parent_id &&
                isAprove != 'unknown' && (
                  <StatusSwitchAccount status={isAprove} />
                )} */}
            <PersonalProfile />
            <Divider />
            {(auth?.parentId || auth?.company) && <CompanyProfile />}
          </AppLayout>
        </MobileView>

        <DesktopView>
          <BasicLayout>
            <div className="container mx-auto flex py-10">
              <div className="w-3/12 pr-4">
                <Menu />
              </div>
              <div className="w-9/12 bg-white border border-gray_r-6 rounded">
                {auth?.company || ((isChecked || (!ubahAkun && ubahAkun !== 'pending')) && (
                    <div className="text-sm p-4 flex items-center">
                      <Checkbox
                        borderColor="gray.600"
                        colorScheme="red"
                        size="lg"
                        isChecked={isChecked}
                        onChange={handleChange}
                      />
                      <p className="ml-2">Ubah ke akun bisnis</p>
                    </div>
                  ))}
                {isChecked && ubahAkun !== 'pending'  && (
                  <div>
                    <SwitchAccount company_type="nonpkp" setIsAprove={setIsAprove} setUbahAkun={setUbahAkun}/>
                    <Divider />
                  </div>
                )}
                {/* {!auth?.parentId
                  ? auth?.parentId
                  : auth?.parent_id &&
                    isAprove != 'unknown' && (
                      <StatusSwitchAccount status={isAprove} />
                    )} */}
                <PersonalProfile />
                <Divider />
                {(auth?.parentId || auth?.company) && <CompanyProfile />}
              </div>
            </div>
          </BasicLayout>
        </DesktopView>
      </IsAuth>
    </>
  );
}