'use client';
import React, { useEffect, useState, CSSProperties } from 'react';
import Header from '@/components/Header';
import Fotter from '@/components/Fotter';
import { useSearchParams, useRouter } from 'next/navigation';

const styles = `
.page-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: radial-gradient(circle at top right, rgba(30,30,30,0.8) 0%, rgba(15,15,15,0.8) 100%);
  position: relative;
  overflow-x: hidden;
}

.page-container::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('/noise-texture.png'), linear-gradient(145deg, rgba(255,127,39,0.1) 0%, rgba(0,0,0,0) 70%);
  opacity: 0.4;
  pointer-events: none;
  z-index: -1;
}

.content-container {
  flex: 1;
  animation: fadeInUp 0.6s ease-out forwards;
  width: 100%;
}

.section-title {
  color: #ff7f27;
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
  font-weight: bold;
  background: linear-gradient(to right, #ff7f27, #ff5500);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: glowPulse 3s infinite;
  text-align: center;
  letter-spacing: -0.5px;
}

.payment-status {
  text-align: center;
  margin: 2rem auto;
  padding: 2rem;
  border-radius: 1rem;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,127,39,0.2);
  color: rgba(255,255,255,0.9);
  font-size: 1.2rem;
}

.success-message {
  color: #30d158;
}

.error-message {
  color: #ff453a;
}

.loading-message {
  color: rgba(255,255,255,0.7);
}
`;

const mainContentStyle: CSSProperties = {
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
  width: '100%',
  maxWidth: '90%',
  margin: '0 auto',
  flex: 1,
  paddingTop: '76px',
  paddingBottom: '30px',
};

export default function PaymentStatusPage() {
  const searchParams = useSearchParams();
  const router = useRouter();
  const paymentId = searchParams.get('payment_id');
  const [status, setStatus] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const checkPaymentStatus = async () => {
      // Пытаемся получить payment_id из разных источников
      const urlPaymentId = searchParams.get('payment_id');
      const returnPaymentId = searchParams.get('return_payment_id');
      const storedPaymentId = typeof window !== 'undefined' ? localStorage.getItem('current_payment_id') : null;
      
      // Используем первый доступный ID
      const finalPaymentId = urlPaymentId || returnPaymentId || storedPaymentId;
      
      console.log("Available payment IDs:", { urlPaymentId, returnPaymentId, storedPaymentId });
      
      if (!finalPaymentId) {
        setStatus('error');
        setError('ID платежа не найден');
        setLoading(false);
        return;
      }

      try {
        console.log("Checking payment status for:", finalPaymentId);
        const response = await fetch(`http://localhost:8000/payment-status/${finalPaymentId}`);
        
        if (!response.ok) {
          throw new Error(`Ошибка ${response.status}: ${response.statusText}`);
        }
        
        const data = await response.json();
        console.log("Payment status response:", data);
        setStatus(data.status);
        
        // Если платеж завершен, перенаправляем через 5 секунд
        if (data.status === 'paid') {
          setTimeout(() => {
            router.push('/'); // или на страницу с билетами пользователя
          }, 5000);
        }
      } catch (error) {
        console.error("Error fetching payment status:", error);
        setError('Не удалось получить информацию о платеже');
        setStatus('error');
      } finally {
        setLoading(false);
      }
    };

    checkPaymentStatus();
    
    // Проверяем статус каждые 5 секунд, если платеж ожидает оплаты
    const intervalId = setInterval(() => {
      if (status === 'pending' || status === 'waiting_for_capture') {
        checkPaymentStatus();
      }
    }, 5000);

    return () => clearInterval(intervalId);
  }, [paymentId, router, status]);

  return (
    <div className="page-container">
      <style>{styles}</style>
      <Header />
      <main style={mainContentStyle} className="content-container">
        <h1 className="section-title">Статус платежа</h1>
        {loading ? (
          <div className="payment-status loading-message">Загрузка статуса платежа...</div>
        ) : status === 'paid' ? (
          <div className="payment-status success-message">Ваш платеж успешно завершен!</div>
        ) : status === 'pending' ? (
          <div className="payment-status">Ваш платеж находится в ожидании подтверждения.</div>
        ) : status === 'failed' ? (
          <div className="payment-status error-message">Ваш платеж не удалось завершить.</div>
        ) : (
          <div className="payment-status error-message">Произошла ошибка. Платеж не найден.</div>
        )}
      </main>
      <Fotter />
    </div>
  );
}