"use client";

import { DashboardLayout } from "@/components/layout/dashboard-layout";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { useAuth } from "@/hooks/use-auth";
import { db } from "@/lib/firebase";
import { collection, query, where, getDocs, doc, getDoc } from "firebase/firestore";
import { useEffect, useState, useCallback } from "react";
import { Loader2 } from "lucide-react";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Badge } from "@/components/ui/badge";
import { format } from "date-fns";

interface ReferredUser {
    id: string;
    username: string;
    createdAt: any;
    level: number;
}

interface ReferralSettings {
    depositLevels?: { length: number };
    investmentLevels?: { length: number };
    interestLevels?: { length: number };
    stakingLevels?: { length: number };
}

export default function ReferralListPage() {
    const { user } = useAuth();
    const [referrals, setReferrals] = useState<ReferredUser[]>([]);
    const [loading, setLoading] = useState(true);

    const fetchAllData = useCallback(async () => {
        if (!user || !db) {
            setLoading(false);
            return;
        }
        setLoading(true);
        try {
            const referralSettingsDoc = await getDoc(doc(db, 'settings', 'referral'));
            const referralSettings = referralSettingsDoc.exists() ? referralSettingsDoc.data() as ReferralSettings : {};
            
            const maxLevel = Math.max(
                referralSettings.depositLevels?.length || 0,
                referralSettings.investmentLevels?.length || 0,
                referralSettings.interestLevels?.length || 0,
                referralSettings.stakingLevels?.length || 0,
                0
            );

            const allReferrals: ReferredUser[] = [];
            const fetchReferralsRecursively = async (parentIds: string[], currentLevel: number) => {
                if (currentLevel > maxLevel || parentIds.length === 0) {
                    return;
                }

                const q = query(collection(db, "users"), where("referredBy", "in", parentIds));
                const snapshot = await getDocs(q);
                
                const newReferrals = snapshot.docs.map(doc => {
                    const data = doc.data();
                    return {
                        id: doc.id,
                        username: data.username || doc.id.slice(0, 8),
                        createdAt: data.createdAt,
                        level: currentLevel
                    } as ReferredUser;
                });
                
                if (newReferrals.length > 0) {
                    allReferrals.push(...newReferrals);
                    const newIds = newReferrals.map(r => r.id);
                    await fetchReferralsRecursively(newIds, currentLevel + 1);
                }
            };

            await fetchReferralsRecursively([user.uid], 1);
            
            setReferrals(allReferrals.sort((a,b) => (b.createdAt?.seconds || 0) - (a.createdAt?.seconds || 0)));

        } catch (error) {
            console.error("Error fetching referral data:", error);
        } finally {
            setLoading(false);
        }
    }, [user]);

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

    return (
        <DashboardLayout>
            <div className="space-y-6">
                <div>
                    <h1 className="text-3xl font-bold font-headline tracking-tight">My Referrals</h1>
                    <p className="text-muted-foreground">A list of all the users you have referred across all levels.</p>
                </div>
                <Card>
                    <CardHeader>
                        <CardTitle>Referral List</CardTitle>
                        <CardDescription>
                           Users who have signed up using your link will appear here.
                        </CardDescription>
                    </CardHeader>
                    <CardContent>
                        {loading ? (
                            <div className="flex justify-center p-8"><Loader2 className="h-8 w-8 animate-spin" /></div>
                        ) : referrals.length === 0 ? (
                            <p className="text-center text-muted-foreground p-8">You haven't referred anyone yet.</p>
                        ) : (
                             <Table>
                                <TableHeader>
                                    <TableRow>
                                        <TableHead>Username</TableHead>
                                        <TableHead>Level</TableHead>
                                        <TableHead className="text-right">Join Date</TableHead>
                                    </TableRow>
                                </TableHeader>
                                <TableBody>
                                    {referrals.map(ref => (
                                        <TableRow key={ref.id}>
                                            <TableCell>{ref.username}</TableCell>
                                            <TableCell><Badge>Level {ref.level}</Badge></TableCell>
                                            <TableCell className="text-right">{ref.createdAt && ref.createdAt.seconds ? format(ref.createdAt.toDate(), 'PP') : 'N/A'}</TableCell>
                                        </TableRow>
                                    ))}
                                </TableBody>
                            </Table>
                        )}
                    </CardContent>
                </Card>
            </div>
        </DashboardLayout>
    );
}