import Link from 'next/link';
import Image from '~/components/ui/image';
import whatsappUrl from '@/core/utils/whatsappUrl';
import { useEffect, useState } from 'react';
import odooApi from '@/core/api/odooApi';
import useDevice from '@/core/hooks/useDevice';
import useAuth from '@/core/hooks/useAuth';
import axios from 'axios';
import { toast } from 'react-hot-toast';
import { ChevronRightIcon, ChevronLeftIcon } from '@heroicons/react/24/outline';
import { useRouter } from 'next/router';
import switchAccountProgresApi from '@/lib/auth/api/switchAccountProgresApi.js';

const FinishTempo = ({ query }) => {
  const [data, setData] = useState();
  const [switchStatus, setSwitchStatus] = useState(null);
  const [loadingStatus, setLoadingStatus] = useState(true);
  const [transactionData, setTransactionData] = useState();
  const { isDesktop, isMobile } = useDevice();
  const auth = useAuth();
  const so_order = query?.order_id?.replaceAll('-', '/');
  const router = useRouter();

  useEffect(() => {
    const fetchData = async () => {
      const fetchedData = await odooApi(
        'GET',
        `/api/v1/sale_order_number?sale_number=${so_order}`
      );
      setData(fetchedData[0]);
    };
    fetchData();
  }, [query]);

  useEffect(() => {
    const fetchSwitchStatus = async () => {
      try {
        const progres = await switchAccountProgresApi();
        setSwitchStatus(progres?.status);
      } catch (err) {
        console.error('Gagal cek progres switch account:', err);
      } finally {
        setLoadingStatus(false);
      }
    };
    fetchSwitchStatus();
  }, []);

  // Handler khusus untuk tombol Ubah Akun
  const handleSwitchAccountClick = () => {
    if (switchStatus === 'pending') {
      toast.info('Akun sedang menunggu verifikasi. Tidak dapat mengubah akun saat ini.', { duration: 2500 });
      return;
    }
    localStorage.setItem('autoCheckProfile', 'true');
    router.push('/my/profile');
  };

  if (loadingStatus) {
    return (
      <div className="container flex flex-col items-center gap-4">
        <div className="py-20 text-gray-500">Memuat data...</div>
      </div>
    );
  }

  return (
    <div
      className={`container flex flex-col items-center gap-4 pb-20 ${
        switchStatus === 'pending'
          ? 'min-h-[calc(100vh-80px)] md:min-h-[calc(100vh-100px)] lg:min-h-[calc(100vh-120px)]'
          : 'min-h-screen'
      }`}
    >
      <div
        className={`flex ${
          isMobile ? 'w-full' : 'w-2/3'
        } justify-center items-center`}
      >
        <h1
          className={`text-red-500 text-center py-4 font-semibold ${
            isMobile ? 'text-lg' : 'text-3xl'
          }`}
        >
          {query?.status == 'finish' &&
            'Form Pengajuan Tempo kamu Telah Berhasil Didaftarkan Mohon menunggu hingga Proses Verifikasi Selesai Dilakukan'}
          {switchStatus === 'pending'
            ? 'Form Pengajuan Tempo Kamu Belum Dapat Dilakukan'
            : query?.status == 'switch-account' &&
              'Form Pengajuan Tempo Kamu Gagal Dilakukan'
          }
          {query?.status == 'review' &&
            'Pengajuan Tempo dalam Proses Verifikasi'}
          {query?.status == 'approve' && 'Pengajuan Tempo Berhasil'}
        </h1>
      </div>
      {query?.status == 'finish' && (
        <Image
          src='/images/REGISTRASI-TEMPO.svg'
          alt='Registrasi Tempo'
          width={isMobile ? 300 : 550}
          height={isMobile ? 300 : 550}
        />
      )}
      {query?.status == 'switch-account' && (
        <Image
          src='/images/ICON-TEMPO.png'
          alt='Registrasi Tempo'
          width={isMobile ? 300 : 550}
          height={isMobile ? 300 : 550}
        />
      )}
      {query?.status == 'review' && (
        <Image
          src='/images/ICON-DOKUMEN-VERIFIKASI.png'
          alt='Registrasi Tempo'
          width={isMobile ? 300 : 550}
          height={isMobile ? 300 : 550}
        />
      )}
      {query?.status == 'approve' && (
        <Image
          src='/images/ICON-WEBSITE-TELAH-MENDAFTAR-AKUN-TEMPO.svg'
          alt='Registrasi Tempo'
          width={isMobile ? 300 : 600}
          height={isMobile ? 300 : 550}
        />
      )}

      <div
        className={`mt-2 text-center opacity-75 leading-6  p-4 md:p-0 ${
          isMobile ? 'w-full text-sm' : 'w-4/5 text-base'
        }`}
      >
        {switchStatus === 'pending'
          ? 'Proses perubahan ke akun bisnis sedang kami review, mohon menunggu hingga 2x24 jam'
          : query?.status == 'switch-account' &&
            'Terima kasih atas minat anda untuk mendaftar Tempo, namun sayangnya akun anda bukan merupakan akun bisnis. Segera ubah akun anda menjadi Bisnis untuk menggunakan fitur ini'
        }
        {query?.status == 'finish' &&
          'Mohon menunggu untuk verifikasi dokumen dan kelengkapan data yang telah anda berikan. Proses approval pembayaran tempo kamu berhasil atau tidak akan diinfokan melalui email perusahaan / email yang mendaftar'}
        {query?.status == 'review' &&
          'Proses pengajuan tempo anda saat ini sedang dalam tahapan proses verifikasi oleh tim indoteknik, mohon menunggu'}
        {query?.status == 'approve' &&
          'Proses pengajuan tempo anda sudah berhasil terdaftar di indoteknik.com. Nikmati pembelian anda di website indoteknik dengan menggunakan pembayaran tempo'}
      </div>

      {switchStatus !== 'pending' && (
        <hr className="border-gray-300 w-full" />
      )}
      
      {/* Video panduan khusus tampil saat status switch-account */}
      {query?.status === 'switch-account' && switchStatus !== 'pending' &&  (
        <div className="w-full max-w-3xl mx-auto px-4 text-center text-gray-700 mb-6">
          <div className="mb-3 font-medium">
            <h1
              className={`text-red-500 text-center font-semibold ${
                isMobile ? 'text-lg' : 'text-3xl'
              }`}
              // Mengganti py-4 dengan my-6 supaya jarak vertikalnya sama dengan hr
              style={{ marginTop: 24, marginBottom: 24 }}
            >
              Video Panduan Pengajuan Tempo
            </h1>
          </div>
          <div className="relative" style={{ paddingTop: '56.25%' /* 16:9 aspect ratio */ }}>
            <iframe
              src="https://www.youtube.com/embed/m15f8-eLqUc?si=frNbGnJu1zjINnDT"
              title="YouTube video player"
              frameBorder="0"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
              allowFullScreen
              referrerPolicy="strict-origin-when-cross-origin"
              className="absolute top-0 left-0 w-full h-full rounded-md shadow-lg"
            ></iframe>
          </div>
        </div>
      )}

      {/* Tombol dengan behavior berbeda jika status switch-account */}
      {query?.status === 'switch-account' && switchStatus !== 'pending' ? (
        <button
          onClick={handleSwitchAccountClick}
          className="btn-solid-red rounded-md text-base flex flex-row items-center justify-center mb-10"
        >
          Ubah Akun
          <ChevronRightIcon className="w-5" />
        </button>
      ) : query?.status !== 'switch-account' && (
        <Link
          href={query?.status === 'approve' ? '/my/tempo/' : '/'}
          className="btn-solid-red rounded-md text-base flex flex-row items-center justify-center mb-10"
        >
          {query?.status === 'approve'
            ? 'Lihat Detail Tempo'
            : 'Kembali Ke Beranda'}
          <ChevronRightIcon className="w-5" />
        </Link>
      )}
    </div>
  );
};

export default FinishTempo;