import { useState, useEffect } from 'react';
import '../index.css';
import axios from 'axios';
import { AiOutlineLoading3Quarters } from "react-icons/ai";
import { FaCopy } from "react-icons/fa";
import { AiFillCheckSquare } from "react-icons/ai";
import { MdError } from "react-icons/md";

const BASE_URL = "http://localhost:8000";

function ParavanForm() {
  const [loading, setLoading] = useState(false);
  const [submissionStatus, setSubmissionStatus] = useState(null); // null | 'pending' | 'approved' | 'cancelled' | 'error'
  const [activeAccount, setActiveAccount] = useState(null);
  const [error, setError] = useState(null);
  const [accounts, setAccounts] = useState([]);
  const [investment, setInvestment] = useState([]);
  const [currentInvestmentId, setCurrentInvestmentId] = useState(null);

  const [formData, setFormData] = useState({
    refId: 'b99d6f4a-ee37-4336-8870-44b25c1a9837',
    fullName: '',
    balance: '',
    username: 'bahsegel.user',
    accountName: '',
    accountNumber: '',
    method: 'Iframe',
    note: ''
  });

  // Poll investment status
  useEffect(() => {
    let intervalId;

    const checkInvestmentStatus = async () => {
      if (!currentInvestmentId) return;

      try {
        const token = localStorage.getItem('token');
        const response = await axios.get(`${BASE_URL}/investment/${currentInvestmentId}`, {
          headers: {
            'Authorization': `Bearer ${token}`,
            'Accept': 'application/json'
          }
        });

        const status = response.data.investmentStatus;
        
        if (status === 'Onaylandı') {
          setSubmissionStatus('approved');
          clearInterval(intervalId);
        } else if (status === 'İptal') {
          setSubmissionStatus('cancelled');
          clearInterval(intervalId);
        }
      } catch (error) {
        console.error('Error checking investment status:', error);
        setSubmissionStatus('error');
        clearInterval(intervalId);
      }
    };

    if (submissionStatus === 'pending') {
      intervalId = setInterval(checkInvestmentStatus, 5000); // Poll every 5 seconds
    }

    return () => {
      if (intervalId) clearInterval(intervalId);
    };
  }, [currentInvestmentId, submissionStatus]);

  const fetchData = async () => {
    try {
      setLoading(true);
      const response = await axios.get(`${BASE_URL}/bank/accounts`);
      const sortedAccounts = response.data.data.sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
      setAccounts(sortedAccounts);
      setError(null);
    } catch (error) {
      console.error("Error fetching bank accounts:", error);
      setError("Failed to load bank accounts. Please try again later.");
    } finally {
      setLoading(false);
    }
  };

  const formatIBAN = (accountNumber) => {
    return accountNumber.replace(/\s+/g, '').match(/.{1,4}/g)?.join(' ') || '';
  };

  const getRandomActiveAccount = () => {
    const activeAccounts = accounts.filter(account => account.isInvest);
    if (activeAccounts.length === 0) return null;
    const randomIndex = Math.floor(Math.random() * activeAccounts.length);
    return activeAccounts[randomIndex];
  };

  const handleNextStep = () => {
    setLoading(true);
    setTimeout(() => {
      const randomAccount = getRandomActiveAccount();
      setActiveAccount(randomAccount);
      setLoading(false);
    }, 3500);
  };

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

  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(false);
    setSubmissionStatus('pending');

    const validationErrors = validateForm();
    if (validationErrors.length > 0) {
      setError(validationErrors.join(', '));
      setSubmissionStatus(null);
      return;
    }

    setError('');

    const params = new URLSearchParams();
    Object.entries({
      refId: formData.refId.trim(),
      fullName: formData.fullName.trim(),
      balance: parseFloat(formData.balance),
      username: formData.username.trim(),
      accountName: activeAccount.accountName,
      accountNumber: activeAccount.accountNumber,
      method: formData.method.trim(),
      note: formData.note.trim() || ''
    }).forEach(([key, value]) => {
      params.append(key, value);
    });

    try {
      const token = localStorage.getItem('token');

      const response = await axios.post(`${BASE_URL}/investment/?${params.toString()}`, {}, {
        headers: {
          'Authorization': `Bearer ${token}`,
          'Accept': 'application/json'
        }
      });

      setInvestment([...investment, response.data]);
      setCurrentInvestmentId(response.data.id);
    } catch (error) {
      let errorMessage = 'Yatırım oluşturulurken bir hata oluştu.';

      if (error.response?.data?.detail) {
        if (Array.isArray(error.response.data.detail)) {
          const fieldErrors = error.response.data.detail.map(err =>
            `${err.loc[1]}: ${err.msg}`
          ).join(', ');
          errorMessage += ` Hatalı alanlar: ${fieldErrors}`;
        } else {
          errorMessage += ` Detay: ${error.response.data.detail}`;
        }
      }

      setError(errorMessage);
      setSubmissionStatus('error');
    }
  };

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: name === 'balance' ? value.replace(/[^\d.]/g, '') : value
    }));
  };

  const validateForm = () => {
    const errors = [];
    if (!formData.fullName.trim()) errors.push("Ad Soyad alanı zorunludur");
    if (!formData.balance || isNaN(formData.balance) || parseFloat(formData.balance) <= 0)
      errors.push("Geçerli bir miktar giriniz");
    return errors;
  };

  const renderStatusScreen = () => {
    switch (submissionStatus) {
      case 'pending':
        return (
          <div className="p-5 h-72 w-64 flex flex-col items-center justify-center rounded-lg relative mx-2">
            <AiOutlineLoading3Quarters className="text-white mb-4 animate-spin duration-500 delay-200" size={35} />
            <p className="text-base font-mono text-white tracking-wider font-bold animate-pulse">İŞLEMİNİZ KONTROL EDİLİYOR</p>
            <h2 className="absolute bottom-2 text-xs text-center px-4 font-extralight text-white">
              Yatırım talebiniz kontrol ediliyor, lütfen sayfayı kapatmayınız.
            </h2>
          </div>
        );
      case 'approved':
        return (
          <div className="p-5 h-72 w-64 flex flex-col items-center justify-center rounded-lg relative mx-2">
            <AiFillCheckSquare className="text-emerald-600 mb-4" size={45} />
            <p className="text-base font-mono text-white text-center tracking-wider font-bold">Yatırımınız Onaylanmıştır</p>
            <h2 className="absolute bottom-2 text-xs text-center px-4 font-extralight text-white">
              Sayfayı güvenle kapatabilirsiniz.
            </h2>
          </div>
        );
      case 'cancelled':
        return (
          <div className="p-5 h-72 w-64 flex flex-col items-center justify-center rounded-lg relative mx-2">
            <MdError className="text-red-500 mb-4" size={45} />
            <p className="text-base font-mono text-white text-center tracking-wider font-bold">Yatırımınız İptal Edilmiştir</p>
            <h2 className="absolute bottom-2 text-xs text-center px-4 font-extralight text-white">
              Lütfen müşteri hizmetleri ile iletişime geçiniz.
            </h2>
          </div>
        );
      case 'error':
        return (
          <div className="p-5 h-72 w-64 flex flex-col items-center justify-center rounded-lg relative mx-2">
            <MdError className="text-red-500 mb-4" size={45} />
            <p className="text-base font-mono text-white text-center tracking-wider font-bold">Bir Hata Oluştu</p>
            <h2 className="absolute bottom-2 text-xs text-center px-4 font-extralight text-white">
              Lütfen daha sonra tekrar deneyiniz.
            </h2>
          </div>
        );
      default:
        return null;
    }
  };

  return (
    <div style={{ boxShadow: '4px 5px 35px white' }} className="flex items-center border border-hidden p-10 mb-12 rounded-md login-form bg-black bg-opacity-65 justify-center">
      <div className="flex flex-col items-center">
        <h1 className="text-5xl w-full p-3 text-center font-extralight text-white">
          <span className="text-emerald-500 font-semibold">Dem</span>Settle
        </h1>

        {submissionStatus ? (
          renderStatusScreen()
        ) : loading ? (
          <div className="p-5 h-72 w-64 flex flex-col items-center justify-center rounded-lg relative mx-2">
            <AiOutlineLoading3Quarters className="text-white mb-4 animate-spin duration-500 delay-200" size={35} />
            <p className="text-base font-mono text-white tracking-wider font-bold animate-pulse">LÜTFEN BEKLEYİNİZ.</p>
            <h2 className="absolute bottom-2 text-xs text-center px-4 font-extralight text-white">
              İşleminiz kontrol ediliyor, lütfen sayfayı kapatmayınız.
            </h2>
          </div>
        ) : activeAccount ? (
          <div className="flex flex-col gap-6 items-center border-2 rounded-md p-5 mt-4 mx-2 text-gray-900 w-72">
            <div className="w-full flex flex-col gap-3">
              <div className="text-start flex flex-col items-start justify-center">
                <h2 className="text-xs font-semibold text-white font-sans mb-2">Adınız Soyadınız</h2>
                <p className="w-full border-2 bg-white text-black font-semibold text-xs rounded-md p-1">{formData.fullName}</p>
              </div>

              <div className="text-start flex flex-col relative items-start justify-center">
                <h2 className="text-xs font-semibold text-white font-sans mb-2">Hesap Sahibi Adı</h2>
                <p className="w-full border-2 text-xs bg-white text-black font-semibold rounded-md p-1">{activeAccount.accountName}</p>
                <FaCopy className="absolute cursor-pointer right-1 bottom-2" />
              </div>

              <div className="text-start flex relative flex-col items-start justify-center">
                <h2 className="text-xs font-semibold text-white font-sans mb-2">IBAN</h2>
                <p className="w-full border-2 bg-white text-black font-semibold text-xs rounded-md p-1">TR {formatIBAN(activeAccount.accountNumber)}</p>
                <FaCopy className="absolute cursor-pointer right-1 bottom-2" />
              </div>

              <div className="text-center">
                <button className="p-2 border text-xs mt-4 rounded-md hover:bg-emerald-600 ease-in-out bg-emerald-500 text-white" onClick={handleSubmit}>
                  Gönderimi Yaptım
                </button>
              </div>
            </div>
          </div>
        ) : (
          <form onSubmit={handleSubmit} method='post' className="cursor-pointer w-full">
            <div className="flex flex-col gap-6 rounded-lg p-5 h-72 w-64 items-center mx-2 justify-center">
              <h1 className="text-lg text-white font-thin animate-pulse">Hoşgeldiniz!</h1>
              <input
                type="text"
                name="fullName"
                className="p-2.5 w-56 text-center pl-2 text-xs tracking-wide rounded-md"
                placeholder="Adınız Soyadınız"
                value={formData.fullName}
                onChange={handleChange}
                required
              />

              <input
                type="text"
                name="balance"
                className="p-2.5 text-center tracking-wide pl-2 w-56 text-xs rounded-md"
                value={formData.balance}
                onChange={handleChange}
                placeholder="Yatırım Tutarı"
                required
              />

              <button
                type="button"
                onClick={handleNextStep}
                className="rounded-xl p-2 bg-black bg-opacity-50 hover:bg-emerald-600 border-emerald-600 border-2 transition-all mt-4 w-32 font-semibold tracking-wider text-xs hover:ease-in-out duration-700 text-white"
              >
                Sonraki Adım
              </button>
            </div>
          </form>
        )}

        {error && (
          <div className="text-red-500 text-xs mt-4">
            {error}
          </div>
        )}
      </div>
    </div>
  );
}

export default ParavanForm;