'use client';

import { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { useAuthStore } from '@/lib/store';
import { useTranslation } from '@/lib/i18n';
import SidebarLayout from '@/components/SidebarLayout';

const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';

interface CCPackage {
  id: number;
  name: string;
  price_usd: number;
  cc_amount: number;
  bonus_cc: number;
  total_cc: number;
  discount_percent: number;
  recommendations: number;
  cars_per_cc: number;
}

interface ChargeHistory {
  id: number;
  amount: number;
  currency: string;
  cc_amount: number;
  bonus_cc?: number;
  payment_method: string;
  status: string;
  created_at: string;
}

export default function CCPurchasePage() {
  const { language } = useTranslation();
  const { user, token, isLoading: authLoading } = useAuthStore();
  const router = useRouter();

  const [packages, setPackages] = useState<CCPackage[]>([]);
  const [ccBalance, setCcBalance] = useState<number>(0);
  const [chargeHistory, setChargeHistory] = useState<ChargeHistory[]>([]);
  const [loading, setLoading] = useState(true);
  const [purchasing, setPurchasing] = useState<number | null>(null);
  const [selectedPackage, setSelectedPackage] = useState<number | null>(null);

  useEffect(() => {
    if (authLoading) return; // Wait for auth state to load
    if (!user) {
      router.push('/login');
      return;
    }
    loadData();
  }, [user, router, authLoading]);

  const loadData = async () => {
    try {
      const headers: Record<string, string> = {};
      if (token) {
        headers['Authorization'] = `Bearer ${token}`;
      }

      const [packagesRes, balanceRes, historyRes] = await Promise.all([
        fetch(`${API_BASE_URL}/api/cc/packages`),
        fetch(`${API_BASE_URL}/api/cc/balance`, { headers }),
        fetch(`${API_BASE_URL}/api/cc/charge-history`, { headers }),
      ]);

      if (packagesRes.ok) {
        const pkgs = await packagesRes.json();
        setPackages(pkgs);
        if (pkgs.length > 0) {
          setSelectedPackage(pkgs[1]?.id || pkgs[0]?.id); // Default to Standard
        }
      }

      if (balanceRes.ok) {
        const balance = await balanceRes.json();
        setCcBalance(balance.cc_balance || 0);
      }

      if (historyRes.ok) {
        const history = await historyRes.json();
        setChargeHistory(history);
      }
    } catch (error) {
      console.error('Failed to load data:', error);
    } finally {
      setLoading(false);
    }
  };

  const handlePurchase = async (packageId: number) => {
    if (!token) {
      router.push('/login');
      return;
    }

    setPurchasing(packageId);
    try {
      const response = await fetch(`${API_BASE_URL}/api/cc/create-checkout-session`, {
        method: 'POST',
        headers: {
          'Authorization': `Bearer ${token}`,
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ package_id: packageId }),
      });

      if (response.ok) {
        const data = await response.json();
        // Redirect to Stripe Checkout
        window.location.href = data.checkout_url;
      } else {
        const error = await response.json();
        alert(error.detail || 'Failed to create checkout session');
      }
    } catch (error) {
      console.error('Purchase error:', error);
      alert('Failed to process payment');
    } finally {
      setPurchasing(null);
    }
  };

  const handleManualRequest = async (packageId: number) => {
    if (!token) {
      router.push('/login');
      return;
    }

    const note = prompt(
      language === 'ko'
        ? '결제 메모를 입력하세요 (예: 몽골 파트너 계좌로 입금)'
        : 'Enter payment note (e.g., Paid via Mongolian partner account)'
    );

    if (note === null) return; // User cancelled

    setPurchasing(packageId);
    try {
      const response = await fetch(`${API_BASE_URL}/api/cc/manual-request`, {
        method: 'POST',
        headers: {
          'Authorization': `Bearer ${token}`,
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ package_id: packageId, payment_note: note }),
      });

      if (response.ok) {
        alert(
          language === 'ko'
            ? '요청이 제출되었습니다. 관리자 확인 후 CC가 충전됩니다.'
            : 'Request submitted. CC will be credited after admin verification.'
        );
        loadData();
      } else {
        const error = await response.json();
        alert(error.detail || 'Failed to submit request');
      }
    } catch (error) {
      console.error('Manual request error:', error);
      alert('Failed to submit request');
    } finally {
      setPurchasing(null);
    }
  };

  const getStatusBadge = (status: string) => {
    switch (status) {
      case 'completed':
        return (
          <span className="px-2 py-1 bg-green-100 text-green-700 rounded-full text-xs">
            {language === 'ko' ? '완료' : 'Completed'}
          </span>
        );
      case 'pending':
        return (
          <span className="px-2 py-1 bg-yellow-100 text-yellow-700 rounded-full text-xs">
            {language === 'ko' ? '대기' : 'Pending'}
          </span>
        );
      case 'cancelled':
        return (
          <span className="px-2 py-1 bg-gray-100 text-gray-700 rounded-full text-xs">
            {language === 'ko' ? '취소됨' : 'Cancelled'}
          </span>
        );
      default:
        return (
          <span className="px-2 py-1 bg-gray-100 text-gray-700 rounded-full text-xs">
            {status}
          </span>
        );
    }
  };

  if (authLoading || !user) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-500"></div>
      </div>
    );
  }

  if (loading) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-500"></div>
      </div>
    );
  }

  return (
    <SidebarLayout groupKey="billing">
      <div className="max-w-5xl mx-auto">
        {/* Header */}
        <div className="mb-8">
          <h1 className="text-3xl font-bold text-gray-800">
            {language === 'ko' ? 'CC 충전' : 'Purchase CC'}
          </h1>
          <p className="text-gray-600 mt-2">
            {language === 'ko'
              ? 'CC를 충전하여 차량 추천 서비스를 이용하세요'
              : 'Purchase CC to use car recommendation services'}
          </p>
        </div>

        {/* Balance Card */}
        <div className="bg-gradient-to-r from-primary-600 to-primary-700 rounded-xl p-6 text-white mb-8 shadow-lg">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-primary-100">
                {language === 'ko' ? '현재 잔액' : 'Current Balance'}
              </p>
              <p className="text-4xl font-bold mt-2">{ccBalance.toFixed(1)} CC</p>
              <p className="text-primary-200 mt-2 text-sm">
                {language === 'ko'
                  ? `1 CC = ${packages[0]?.cars_per_cc || 3}대 차량 추천`
                  : language === 'mn'
                  ? `1 CC = ${packages[0]?.cars_per_cc || 3} машины санал`
                  : language === 'ru'
                  ? `1 CC = ${packages[0]?.cars_per_cc || 3} рекомендаций авто`
                  : `1 CC = ${packages[0]?.cars_per_cc || 3} car recommendations`}
              </p>
            </div>
            <div className="text-6xl opacity-50">💳</div>
          </div>
        </div>

        {/* Package Cards */}
        <div className="mb-8">
          <h2 className="text-xl font-semibold mb-4">
            {language === 'ko' ? '패키지 선택' : 'Select Package'}
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {packages.map((pkg) => (
              <div
                key={pkg.id}
                onClick={() => setSelectedPackage(pkg.id)}
                className={`relative bg-white rounded-xl shadow-lg p-6 cursor-pointer transition-all ${
                  selectedPackage === pkg.id
                    ? 'ring-2 ring-primary-500 transform scale-[1.02]'
                    : 'hover:shadow-xl'
                }`}
              >
                {pkg.discount_percent > 0 && (
                  <div className="absolute -top-3 -right-3 bg-red-500 text-white px-3 py-1 rounded-full text-sm font-bold">
                    {pkg.discount_percent}% OFF
                  </div>
                )}

                <div className="text-center mb-4">
                  <h3 className="text-xl font-bold text-gray-800">{pkg.name}</h3>
                  <p className="text-3xl font-bold text-primary-600 mt-2">${pkg.price_usd}</p>
                </div>

                <div className="space-y-3 mb-6">
                  <div className="flex justify-between text-sm">
                    <span className="text-gray-600">CC</span>
                    <span className="font-semibold">{pkg.cc_amount} CC</span>
                  </div>
                  {pkg.bonus_cc > 0 && (
                    <div className="flex justify-between text-sm">
                      <span className="text-gray-600">
                        {language === 'ko' ? '보너스' : 'Bonus'}
                      </span>
                      <span className="font-semibold text-green-600">+{pkg.bonus_cc} CC</span>
                    </div>
                  )}
                  <div className="flex justify-between text-sm border-t pt-3">
                    <span className="text-gray-600">
                      {language === 'ko' ? '총 CC' : 'Total CC'}
                    </span>
                    <span className="font-bold text-lg">{pkg.total_cc} CC</span>
                  </div>
                  <div className="flex justify-between text-sm text-gray-500">
                    <span>{language === 'ko' ? '추천 가능' : 'Recommendations'}</span>
                    <span>
                      {pkg.recommendations}
                      {language === 'ko' ? '대' : language === 'mn' ? ' машин' : language === 'ru' ? ' авто' : ' cars'}
                    </span>
                  </div>
                </div>

                <div className="space-y-2">
                  <button
                    onClick={(e) => {
                      e.stopPropagation();
                      handlePurchase(pkg.id);
                    }}
                    disabled={purchasing !== null}
                    className="w-full py-3 bg-primary-600 text-white rounded-lg font-semibold hover:bg-primary-700 disabled:opacity-50 transition"
                  >
                    {purchasing === pkg.id ? (
                      <span className="flex items-center justify-center gap-2">
                        <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
                        {language === 'ko' ? '처리 중...' : 'Processing...'}
                      </span>
                    ) : (
                      <>
                        💳 {language === 'ko' ? '카드 결제' : 'Pay with Card'}
                      </>
                    )}
                  </button>

                  <button
                    onClick={(e) => {
                      e.stopPropagation();
                      handleManualRequest(pkg.id);
                    }}
                    disabled={purchasing !== null}
                    className="w-full py-2 border border-gray-300 text-gray-700 rounded-lg text-sm hover:bg-gray-50 disabled:opacity-50 transition"
                  >
                    {language === 'ko' ? '수동 결제 요청' : 'Manual Payment Request'}
                  </button>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Payment Info */}
        <div className="bg-blue-50 border border-blue-200 rounded-xl p-4 mb-8">
          <div className="flex items-start gap-3">
            <span className="text-2xl">ℹ️</span>
            <div>
              <p className="font-semibold text-blue-800 mb-1">
                {language === 'ko' ? '결제 안내' : 'Payment Information'}
              </p>
              <ul className="text-sm text-blue-700 space-y-1">
                <li>
                  •{' '}
                  {language === 'ko'
                    ? '카드 결제: Visa, Mastercard 지원 (Stripe 보안 결제)'
                    : 'Card Payment: Visa, Mastercard supported (Stripe secure payment)'}
                </li>
                <li>
                  •{' '}
                  {language === 'ko'
                    ? '수동 결제: 러시아 사용자는 몽골 파트너 계좌로 입금 후 요청해주세요'
                    : 'Manual Payment: Russian users can pay via Mongolian partner account'}
                </li>
                <li>
                  •{' '}
                  {language === 'ko'
                    ? '결제 완료 후 즉시 CC가 충전됩니다'
                    : 'CC will be credited immediately after payment'}
                </li>
              </ul>
            </div>
          </div>
        </div>

        {/* Charge History */}
        <div className="bg-white rounded-xl shadow-lg p-6">
          <h2 className="text-xl font-semibold mb-4">
            {language === 'ko' ? '충전 내역' : 'Purchase History'}
          </h2>

          {chargeHistory.length === 0 ? (
            <div className="text-center py-12 text-gray-500">
              <div className="text-4xl mb-2">📋</div>
              <p>{language === 'ko' ? '충전 내역이 없습니다' : 'No purchase history'}</p>
            </div>
          ) : (
            <div className="space-y-3 max-h-[400px] overflow-y-auto">
              {chargeHistory.map((item) => (
                <div key={item.id} className="p-4 bg-gray-50 rounded-lg">
                  <div className="flex items-center justify-between mb-2">
                    <span className="font-semibold">
                      ${item.amount} {item.currency}
                    </span>
                    {getStatusBadge(item.status)}
                  </div>
                  <div className="text-sm text-gray-600">
                    <div>
                      CC: +{item.cc_amount}
                      {item.bonus_cc ? ` (+${item.bonus_cc} bonus)` : ''}
                    </div>
                    <div>
                      {language === 'ko' ? '방법' : 'Method'}: {item.payment_method}
                    </div>
                    <div className="text-xs text-gray-400 mt-1">
                      {item.created_at ? new Date(item.created_at).toLocaleString() : '-'}
                    </div>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
    </SidebarLayout>
  );
}
