'use client';

import { useState, useEffect, useRef } from 'react';
import { useAuth } from '@/contexts/AuthContext';
import { referralApi } from '@/lib/api/referral';
import ReferralList from '@/components/admin/referral/ReferralList';
import { ReferralRewardUser } from '@/types/referral';
import { ArrowPathIcon } from '@heroicons/react/24/outline';

export default function ReferralRewardsPage() {
    const { token } = useAuth();
    const [users, setUsers] = useState<ReferralRewardUser[]>([]);
    const [subscriptionTarget, setSubscriptionTarget] = useState(0);
    const [isLoading, setIsLoading] = useState(false);
    const [fulfillingId, setFulfillingId] = useState<number | null>(null);
    const [error, setError] = useState<string | null>(null);
    const [success, setSuccess] = useState<string | null>(null);

    const initialLoadRef = useRef(false);

    useEffect(() => {
        if (token && !initialLoadRef.current) {
            initialLoadRef.current = true;
            loadRewards();
        }
    }, [token]);

    const loadRewards = async () => {
        setIsLoading(true);
        setError(null);
        try {
            const data = await referralApi.getPendingRewards(token!);
            setUsers(data.data || []);
            setSubscriptionTarget(data.subscription_target || 0);
        } catch (err) {
            setError(err instanceof Error ? err.message : 'خطا در دریافت لیست پاداش‌های معرفی');
        } finally {
            setIsLoading(false);
        }
    };

    const handleFulfill = async (user: ReferralRewardUser) => {
        if (!confirm(`آیا از اعطای یک ماه اشتراک رایگان به «${user.name || user.mobile || user.email}» اطمینان دارید؟`)) {
            return;
        }

        setFulfillingId(user.id);
        setIsLoading(true);
        setError(null);
        setSuccess(null);

        try {
            await referralApi.fulfillReward(user.id, token!);
            setSuccess(`اشتراک رایگان با موفقیت به «${user.name || user.mobile || user.email}» اعطا شد`);
            // Remove the fulfilled user from the list and refresh
            setUsers((prev) => prev.filter((u) => u.id !== user.id));
        } catch (err) {
            setError(err instanceof Error ? err.message : 'خطا در اعطای اشتراک رایگان');
        } finally {
            setFulfillingId(null);
            setIsLoading(false);
        }
    };

    return (
        <div className="p-6">
            <div className="max-w-7xl mx-auto">
                <div className="flex justify-between items-center mb-6">
                    <div>
                        <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
                            پاداش‌های معرفی
                        </h1>
                        <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
                            کاربرانی که به حد نصاب دعوت موفق رسیده‌اند و هنوز اشتراک رایگان دریافت نکرده‌اند.
                        </p>
                    </div>
                    <button
                        onClick={loadRewards}
                        disabled={isLoading}
                        className="inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 disabled:opacity-50 transition-colors"
                    >
                        <ArrowPathIcon className={`h-5 w-5 ml-2 ${isLoading ? 'animate-spin' : ''}`} />
                        بروزرسانی
                    </button>
                </div>

                {/* Messages */}
                {error && (
                    <div className="mb-4 rounded-md bg-red-50 dark:bg-red-900/20 p-4">
                        <p className="text-sm text-red-800 dark:text-red-300">{error}</p>
                    </div>
                )}

                {success && (
                    <div className="mb-4 rounded-md bg-green-50 dark:bg-green-900/20 p-4">
                        <p className="text-sm text-green-800 dark:text-green-300">{success}</p>
                    </div>
                )}

                {isLoading && users.length === 0 ? (
                    <div className="text-center py-12 bg-white dark:bg-gray-900 rounded-xl shadow-sm ring-1 ring-gray-200 dark:ring-gray-800">
                        <p className="text-gray-500 dark:text-gray-400">در حال بارگذاری...</p>
                    </div>
                ) : (
                    <ReferralList
                        users={users}
                        subscriptionTarget={subscriptionTarget}
                        onFulfill={handleFulfill}
                        isLoading={isLoading}
                        fulfillingId={fulfillingId}
                    />
                )}
            </div>
        </div>
    );
}