'use client';

import { useState } from 'react';
import Image from 'next/image';
import CifVerif from './CifVerif';
import { useMetaAccount } from '@/context/MetaAccountProductContext';
import { useEmploymentFinancial } from '@/context/EmploymentFinancial';
import { createMetaAccount } from '@/modules/api/meta-account-step/createMetaAccount';
import { submitBankAccountBulk } from '@/modules/api/bank/submitBankAccountBulk';

export default function SuccessVerif() {
  const [showCifVerif, setShowCifVerif] = useState(false);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');
  const { metaAccountProductData } = useMetaAccount();
  const { employmentFinancialData } = useEmploymentFinancial();

  const handleContinue = async () => {
    const product_id = metaAccountProductData?.selectedProduct?.id || metaAccountProductData?.selectedProduct?.product_id;

    setLoading(true);
    setError('');
    try {
      const createResponse = await createMetaAccount(product_id);
      const metaAccountId = createResponse?.data?.data?.meta_account_id || createResponse?.data?.meta_account_id;

      if (!metaAccountId) {
        throw new Error('Meta account ID tidak ditemukan dari response create meta account');
      }

      const bankAccountsSource = employmentFinancialData?.banks?.length
        ? employmentFinancialData.banks
        : [];

      const bankAccounts = bankAccountsSource
        .map((bank) => ({
          bank_name: bank.bank_name || bank.bank_name_custom || '',
          account_number: bank.bank_account_number || '',
          account_type: bank.bank_account_type || '',
          account_holder_name: bank.bank_account_holder || '',
          branch_name: bank.bank_branch || '',
        }))
        .filter((bank) => bank.bank_name || bank.account_number || bank.account_type || bank.account_holder_name || bank.branch_name);

      if (bankAccounts.length > 0) {
        await submitBankAccountBulk({
          meta_account_id: metaAccountId,
          bank_accounts: bankAccounts,
        });
      }

      setShowCifVerif(true);
    } catch (err) {
      setError(err.response?.data?.message || 'Gagal membuat akun. Silakan coba lagi.');
    } finally {
      setLoading(false);
    }
  };

  if (showCifVerif) {
    return <CifVerif />;
  }

  return (
    <div className="min-h-screen flex items-center justify-center px-4 py-20 mb-30 relative">
      {/* Background Image - Grid */}
      <div className="absolute inset-0 bg-cover bg-center bg-no-repeat bg-[url('/images/bg_grid.png')] -z-10"></div>
      
      {/* Background Image - Candle (overlay) */}
      <div className="absolute inset-0 bg-cover bg-center bg-no-repeat bg-[url('/images/bg_candle_2.png')] opacity-50 bg-transparent"></div>
      
      {/* Gradient Overlay - Darker */}
      <div className="absolute inset-0 bg-linear-to-tr from-[#0a0a0a]/95 via-[#190D66]/90 to-[#0a0a0a]/95 -z-10"></div>

      <div className="w-full max-w-2xl">
        {/* Success Card */}
        <div className="bg-[#190D66]/50 backdrop-blur-sm rounded-3xl p-8 md:p-12 text-center border border-[#1D0D80]/30">
          {/* Success Icon */}
          <div className="flex justify-center mb-6">
            <div className="w-32 h-32 md:w-40 md:h-40 rounded-3xl border-4 border-[#1D0D80] flex items-center justify-center">
              <Image
                src="/icon/success_verif.png"
                alt="Success Verification"
                width={80}
                height={80}
                className="md:w-24 md:h-24"
              />
            </div>
          </div>

          {/* Title */}
          <h1 className="text-3xl md:text-4xl font-bold text-white mb-4">
            Data Terverifikasi
          </h1>

          {/* Subtitle */}
          <p className="text-gray-300 mb-8 text-sm md:text-base">
            Data Terverifikasi. Silakan lanjut ke tahap selanjutnya
          </p>

          {/* Error Message */}
          {error && (
            <p className="text-red-400 text-sm mb-4">{error}</p>
          )}

          {/* Continue Button */}
          <button
            onClick={handleContinue}
            disabled={loading}
            className="px-8 py-3 bg-transparent border-2 border-[#1D0D80] text-white hover:bg-[#1D0D80] hover:text-black font-semibold rounded-full transition-all disabled:opacity-50 disabled:cursor-not-allowed"
          >
            {loading ? 'Memproses...' : 'Lanjut ke Tahap Selanjutnya'}
          </button>
        </div>
      </div>
    </div>
  );
}