"use client";

import React, { useState, useEffect, useMemo } from 'react';
import { AdminLayout } from "@/components/layout/admin-layout";
import { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { PlusCircle, Trash2, Settings, History, Users, Loader2, ChevronsUpDown, Check, Download } from "lucide-react";
import { useToast } from '@/hooks/use-toast';
import { Textarea } from '@/components/ui/textarea';
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
import { db } from '@/lib/firebase';
import { doc, setDoc, getDoc, collection, getDocs, query, orderBy } from 'firebase/firestore';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { format } from "date-fns";
import { Badge } from '@/components/ui/badge';
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
import { ScrollArea } from '@/components/ui/scroll-area';
import { cn } from '@/lib/utils';
import jsPDF from 'jspdf';
import autoTable from 'jspdf-autotable';
import Papa from 'papaparse';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';


type CommissionType = 'fixed' | 'percentage';
type ReferralAccessCondition = 'none' | 'min_deposit' | 'min_investment';

interface CommissionLevel {
  id: string;
  value: number;
  type: CommissionType;
}

interface CommissionHistoryItem {
    id: string;
    amount: number;
    type: 'deposit' | 'investment' | 'interest' | 'referral' | 'staking';
    level: number;
    date: any;
    referrerId: string;
    referrerEmail?: string;
    referredUserId: string;
    referredUserEmail?: string;
}

interface UserReferral {
    id: string;
    email: string;
    referredBy?: string;
    referrerEmail?: string;
    createdAt: any;
    firstName?: string;
    lastName?: string;
    username?: string;
    photoURL?: string;
}

interface CurrencySettings {
  symbol: string;
  position: 'left' | 'right';
}


const CommissionSetupCard = ({ title, description, isEnabled, onToggle, levels, onLevelChange, onAddLevel, onRemoveLevel, onTypeChange }: {
    title: string;
    description: string;
    isEnabled: boolean;
    onToggle: (enabled: boolean) => void;
    levels: CommissionLevel[];
    onLevelChange: (index: number, value: number) => void;
    onAddLevel: () => void;
    onRemoveLevel: (index: number) => void;
    onTypeChange: (index: number, type: CommissionType) => void;
}) => (
    <Card>
        <CardHeader>
            <div className="flex items-center justify-between">
                <div>
                    <CardTitle>{title}</CardTitle>
                    <CardDescription>{description}</CardDescription>
                </div>
                <Switch checked={isEnabled} onCheckedChange={onToggle} />
            </div>
        </CardHeader>
        {isEnabled && (
            <CardContent className="space-y-4">
                <Label>Commission Levels</Label>
                {levels.map((level, index) => (
                    <div key={level.id} className="flex items-center gap-2">
                        <Input
                            placeholder={`Level ${index + 1} Commission`}
                            type="number"
                            value={level.value}
                            onChange={(e) => onLevelChange(index, parseFloat(e.target.value))}
                            className="flex-grow"
                        />
                        <Select value={level.type} onValueChange={(value: CommissionType) => onTypeChange(index, value)}>
                            <SelectTrigger className="w-[120px]">
                                <SelectValue />
                            </SelectTrigger>
                            <SelectContent>
                                <SelectItem value="fixed">Fixed</SelectItem>
                                <SelectItem value="percentage">Percent (%)</SelectItem>
                            </SelectContent>
                        </Select>
                        <Button variant="destructive" size="icon" onClick={() => onRemoveLevel(index)}>
                            <Trash2 className="h-4 w-4" />
                        </Button>
                    </div>
                ))}
                <Button variant="outline" onClick={onAddLevel}>
                    <PlusCircle className="mr-2 h-4 w-4" /> Add Level
                </Button>
            </CardContent>
        )}
    </Card>
);

export default function ReferralSettingsPage() {
    const { toast } = useToast();
    const [isSaving, setIsSaving] = useState(false);
    const [isLoading, setIsLoading] = useState(true);

    // Deposit Commission State
    const [depositCommissionEnabled, setDepositCommissionEnabled] = useState(true);
    const [depositLevels, setDepositLevels] = useState<CommissionLevel[]>([{ id: '1', value: 5, type: 'percentage' }]);

    // Investment Commission State
    const [investmentCommissionEnabled, setInvestmentCommissionEnabled] = useState(true);
    const [investmentLevels, setInvestmentLevels] = useState<CommissionLevel[]>([{ id: '1', value: 2, type: 'percentage' }]);
    
    // Staking Commission State
    const [stakingCommissionEnabled, setStakingCommissionEnabled] = useState(true);
    const [stakingLevels, setStakingLevels] = useState<CommissionLevel[]>([{ id: '1', value: 1.5, type: 'percentage' }]);

    // Interest Commission State
    const [interestCommissionEnabled, setInterestCommissionEnabled] = useState(true);
    const [interestLevels, setInterestLevels] = useState<CommissionLevel[]>([{ id: '1', value: 1, type: 'percentage' }]);

    // Content State
    const [refEarnHeader, setRefEarnHeader] = useState("Refer & Earn");
    const [refEarnDescription, setRefEarnDescription] = useState("Share your referral link with friends and earn commissions on their deposits and investments.");
    
    // System Rules State
    const [refAccessEnabled, setRefAccessEnabled] = useState(false);
    const [refAccessCondition, setRefAccessCondition] = useState<ReferralAccessCondition>('none');
    const [refAccessAmount, setRefAccessAmount] = useState('');
    
    const [withdrawBlockEnabled, setWithdrawBlockEnabled] = useState(false);
    const [withdrawBlockCount, setWithdrawBlockCount] = useState('');
    const [withdrawBlockMessage, setWithdrawBlockMessage] = useState('Withdrawal is currently disabled. You need to refer more users to enable withdrawals.');
    
    // History State
    const [commissionHistory, setCommissionHistory] = useState<CommissionHistoryItem[]>([]);
    const [loadingHistory, setLoadingHistory] = useState(true);
    
    // User Referrals State
    const [allUsers, setAllUsers] = useState<UserReferral[]>([]);
    const [loadingUsers, setLoadingUsers] = useState(true);

    // New state for filtering
    const [open, setOpen] = useState(false);
    const [selectedReferrer, setSelectedReferrer] = useState<string | null>(null);
    const [searchReferrer, setSearchReferrer] = useState('');
    const [referrersList, setReferrersList] = useState<{ id: string, email: string }[]>([]);
    const [currency, setCurrency] = useState<CurrencySettings>({ symbol: '$', position: 'left' });
    
    const [treeData, setTreeData] = useState<any>(null);
    const [treeLoading, setTreeLoading] = useState(false);
    const [logoUrl, setLogoUrl] = useState('');


    useEffect(() => {
        const fetchSettings = async () => {
            if (!db) {
                setIsLoading(false);
                return;
            }
            setIsLoading(true);
            try {
                const generalSettingsDoc = await getDoc(doc(db, 'settings', 'general'));
                if (generalSettingsDoc.exists()) {
                    setLogoUrl(generalSettingsDoc.data().logoUrl || '');
                }

                const docRef = doc(db, 'settings', 'referral');
                const docSnap = await getDoc(docRef);
                if (docSnap.exists()) {
                    const data = docSnap.data();
                    setDepositCommissionEnabled(data.depositCommissionEnabled ?? true);
                    setDepositLevels(data.depositLevels || [{ id: '1', value: 5, type: 'percentage' }]);
                    setInvestmentCommissionEnabled(data.investmentCommissionEnabled ?? true);
                    setInvestmentLevels(data.investmentLevels || [{ id: '1', value: 2, type: 'percentage' }]);
                    setStakingCommissionEnabled(data.stakingCommissionEnabled ?? true);
                    setStakingLevels(data.stakingLevels || [{ id: '1', value: 1.5, type: 'percentage' }]);
                    setInterestCommissionEnabled(data.interestCommissionEnabled ?? true);
                    setInterestLevels(data.interestLevels || [{ id: '1', value: 1, type: 'percentage' }]);
                    setRefEarnHeader(data.refEarnHeader || "Refer & Earn");
                    setRefEarnDescription(data.refEarnDescription || "Share your referral link with friends and earn commissions on their deposits and investments.");
                    setRefAccessEnabled(data.refAccessEnabled ?? false);
                    setRefAccessCondition(data.refAccessCondition || 'none');
                    setRefAccessAmount(data.refAccessAmount?.toString() || '');
                    setWithdrawBlockEnabled(data.withdrawBlockEnabled ?? false);
                    setWithdrawBlockCount(data.withdrawBlockCount?.toString() || '');
                    setWithdrawBlockMessage(data.withdrawBlockMessage || 'Withdrawal is currently disabled. You need to refer more users to enable withdrawals.');
                }
            } catch (error) {
                toast({ variant: 'destructive', title: 'Error', description: 'Failed to fetch referral settings.' });
            } finally {
                setIsLoading(false);
            }
        };

        const fetchHistory = async () => {
            if (!db) { setLoadingHistory(false); return; }
            setLoadingHistory(true);
            try {
                const currencyDoc = await getDoc(doc(db, "settings", "currency"));
                if (currencyDoc.exists()) setCurrency(currencyDoc.data() as CurrencySettings);

                const q = query(collection(db, 'referralCommissions'), orderBy('date', 'desc'));
                const querySnapshot = await getDocs(q);
                
                const historyData = await Promise.all(querySnapshot.docs.map(async d => {
                    const data = d.data();
                    let referrerEmail = '...';
                    let referredUserEmail = '...';
                    
                    if (data.referrerId) {
                        const referrerDoc = await getDoc(doc(db, 'users', data.referrerId));
                        referrerEmail = referrerDoc.exists() ? referrerDoc.data().email : 'Unknown';
                    }
                    if (data.referredUserId) {
                        const referredUserDoc = await getDoc(doc(db, 'users', data.referredUserId));
                        referredUserEmail = referredUserDoc.exists() ? referredUserDoc.data().email : 'Unknown';
                    }

                    return {
                        id: d.id,
                        ...data,
                        referrerEmail,
                        referredUserEmail,
                    } as CommissionHistoryItem;
                }));
                
                setCommissionHistory(historyData);
                
                const uniqueReferrersMap = new Map<string, string>();
                historyData.forEach(item => {
                    if (item.referrerId && item.referrerEmail) {
                        uniqueReferrersMap.set(item.referrerId, item.referrerEmail);
                    }
                });
                const uniqueReferrers = Array.from(uniqueReferrersMap.entries()).map(([id, email]) => ({ id, email }));
                setReferrersList(uniqueReferrers);

            } catch (error: any) {
                toast({ variant: 'destructive', title: 'Error', description: 'Failed to fetch commission history.' });
            } finally {
                setLoadingHistory(false);
            }
        };
        
        const fetchUsers = async () => {
            if (!db) { setLoadingUsers(false); return; }
            setLoadingUsers(true);
            try {
                const usersSnapshot = await getDocs(collection(db, 'users'));
                const usersList = usersSnapshot.docs.map(doc => ({ id: doc.id, ...doc.data() })) as UserReferral[];
    
                const userEmailMap = new Map(usersList.map(user => [user.id, user.email]));
    
                const usersWithReferrer = usersList.map(user => ({
                    ...user,
                    referrerEmail: user.referredBy ? userEmailMap.get(user.referredBy) || 'Unknown' : 'N/A'
                }));
    
                setAllUsers(usersWithReferrer);
    
            } catch (error: any) {
                toast({ variant: 'destructive', title: 'Error', description: `Failed to fetch users: ${error.message}`});
            } finally {
                setLoadingUsers(false);
            }
        };
        
        fetchSettings();
        fetchHistory();
        fetchUsers();

    }, [toast]);

    useEffect(() => {
      const buildTree = () => {
        if (!selectedReferrer || allUsers.length === 0) {
          setTreeData(null);
          return;
        }
        setTreeLoading(true);
    
        const usersMap = new Map(allUsers.map(u => [u.id, u]));
    
        const commissionsFromUser = commissionHistory.reduce((acc, curr) => {
          const referredId = curr.referredUserId;
          if (!acc[referredId]) {
            acc[referredId] = 0;
          }
          acc[referredId] += curr.amount;
          return acc;
        }, {} as Record<string, number>);
    
        const buildNode = (userId: string): any | null => {
          const user = usersMap.get(userId);
          if (!user) return null;
    
          const children = allUsers
            .filter(u => u.referredBy === userId)
            .map(child => buildNode(child.id))
            .filter(Boolean);
    
          return {
            ...user,
            commissionEarned: commissionsFromUser[userId] || 0,
            children: children
          };
        };
    
        const rootNode = buildNode(selectedReferrer);
        setTreeData(rootNode);
        setTreeLoading(false);
      }
      buildTree();
    }, [selectedReferrer, allUsers, commissionHistory]);


    const handleAddLevel = (setter: React.Dispatch<React.SetStateAction<CommissionLevel[]>>) => {
        setter(prev => [...prev, { id: Date.now().toString(), value: 0, type: 'percentage' }]);
    };

    const handleRemoveLevel = (index: number, setter: React.Dispatch<React.SetStateAction<CommissionLevel[]>>) => {
        setter(prev => prev.filter((_, i) => i !== index));
    };

    const handleLevelChange = (index: number, value: number, setter: React.Dispatch<React.SetStateAction<CommissionLevel[]>>) => {
        setter(prev => prev.map((level, i) => i === index ? { ...level, value } : level));
    };
    
    const handleTypeChange = (index: number, type: CommissionType, setter: React.Dispatch<React.SetStateAction<CommissionLevel[]>>) => {
        setter(prev => prev.map((level, i) => i === index ? { ...level, type } : level));
    }
    
    const handleSaveChanges = async () => {
        if (!db) {
            toast({ variant: 'destructive', title: 'Error', description: 'Firestore is not initialized.' });
            return;
        }
        setIsSaving(true);
        try {
            const settingsData = {
                depositCommissionEnabled,
                depositLevels,
                investmentCommissionEnabled,
                investmentLevels,
                stakingCommissionEnabled,
                stakingLevels,
                interestCommissionEnabled,
                interestLevels,
                refEarnHeader,
                refEarnDescription,
                refAccessEnabled,
                refAccessCondition,
                refAccessAmount: refAccessEnabled ? parseFloat(refAccessAmount) : 0,
                withdrawBlockEnabled,
                withdrawBlockCount: withdrawBlockEnabled ? parseInt(withdrawBlockCount) : 0,
                withdrawBlockMessage
            };

            await setDoc(doc(db, 'settings', 'referral'), settingsData);
            
            toast({ title: "Success", description: "Referral settings saved successfully." });
        } catch (error: any) {
             toast({ variant: 'destructive', title: 'Error', description: `Failed to save settings: ${error.message}` });
        } finally {
            setIsSaving(false);
        }
    }
    
    const formatCurrency = (amount: number) => {
        const value = (amount || 0).toFixed(2);
        return currency.position === 'left' ? `${currency.symbol}${value}` : `${value}${currency.symbol}`;
    }

    const filteredHistory = useMemo(() => {
        if (!selectedReferrer) return commissionHistory;
        return commissionHistory.filter(item => item.referrerId === selectedReferrer);
    }, [selectedReferrer, commissionHistory]);

    const selectedReferrerTotal = useMemo(() => {
        return filteredHistory.reduce((sum, item) => sum + item.amount, 0);
    }, [filteredHistory]);

    const commissionBreakdown = useMemo(() => {
        if (!selectedReferrer) return null;
        return filteredHistory.reduce((acc, item) => {
            let type = item.type || 'other';
            if (type === 'deposit' || type === 'investment' || type === 'interest' || type === 'staking') {
                 if (!acc[type]) acc[type] = 0;
                acc[type] += item.amount;
            }
            return acc;
        }, {} as Record<string, number>);
    }, [filteredHistory, selectedReferrer]);

    const downloadCSV = () => {
        let csvContent = "";
        const referrerEmail = referrersList.find(r => r.id === selectedReferrer)?.email || 'all_commissions';

        if (selectedReferrer && commissionBreakdown) {
            const summary = [
                { Item: "Total Commissions", Value: formatCurrency(selectedReferrerTotal) },
                { Item: "Deposit Commissions", Value: formatCurrency(commissionBreakdown.deposit || 0) },
                { Item: "Investment Commissions", Value: formatCurrency(commissionBreakdown.investment || 0) },
                { Item: "Staking Commissions", Value: formatCurrency(commissionBreakdown.staking || 0) },
                { Item: "Interest Commissions", Value: formatCurrency(commissionBreakdown.interest || 0) },
            ];
            csvContent += "Commission Summary\n";
            csvContent += Papa.unparse(summary);
            csvContent += "\n\n";
        }

        csvContent += "Commission History\n";
        const historyData = filteredHistory.map(item => ({
            'Referrer': item.referrerEmail,
            'From User': item.referredUserEmail,
            'Type': item.type,
            'Level': item.level,
            'Amount': formatCurrency(item.amount),
            'Date': item.date ? format(item.date.toDate(), "PPp") : 'N/A'
        }));
        csvContent += Papa.unparse(historyData);
        csvContent += "\n\n";

        if (selectedReferrer && treeData) {
            const flattenedTree: {level: number, name: string, email: string, commissionEarned: string}[] = [];
            const flattenTreeForExport = (node: any, level: number) => {
                if (!node) return;
                flattenedTree.push({
                    level,
                    name: `${node.firstName || ''} ${node.lastName || ''}`.trim() || node.username,
                    email: node.email,
                    commissionEarned: formatCurrency(node.commissionEarned || 0),
                });
                if (node.children && node.children.length > 0) {
                    node.children.forEach((child: any) => flattenTreeForExport(child, level + 1));
                }
            };
            flattenTreeForExport(treeData, 1);

            csvContent += "Referral Tree\n";
            csvContent += Papa.unparse(flattenedTree.map(user => ({
                'Level': user.level,
                'User': user.name,
                'Email': user.email,
                'Commission Earned': user.commissionEarned
            })));
            csvContent += "\n\n";
        }
        
        const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
        const link = document.createElement('a');
        link.href = URL.createObjectURL(blob);
        link.setAttribute('download', `${referrerEmail}_commissions.csv`);
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    };

    const getBase64FromUrl = (url: string): Promise<string> => {
        return new Promise((resolve, reject) => {
            const img = new Image();
            img.crossOrigin = 'Anonymous';
            img.onload = () => {
                const canvas = document.createElement('canvas');
                canvas.width = img.width;
                canvas.height = img.height;
                const ctx = canvas.getContext('2d');
                if (!ctx) {
                    return reject(new Error('Canvas context not available'));
                }
                ctx.drawImage(img, 0, 0);
                resolve(canvas.toDataURL('image/png'));
            };
            img.onerror = () => reject(new Error(`Failed to load image for PDF: ${url}`));
            img.src = url;
        });
    };

    const downloadPDF = async () => {
        const pdfDoc = new jsPDF();
        const referrerEmail = referrersList.find(r => r.id === selectedReferrer)?.email || 'All Users';
        let startY = 15;

        const generalSettingsDoc = await getDoc(doc(db, 'settings', 'general'));
        const brandingData = generalSettingsDoc.exists() ? generalSettingsDoc.data() : {};
        const { 
            companyName = 'My App', 
            companySlogan = '', 
            logoUrl = '',
            pdfHeaderType = 'logo_and_text',
            pdfHeaderTextColor = '#000000',
            pdfSloganTextColor = '#555555'
        } = brandingData;

        if ((pdfHeaderType === 'logo_and_text' || pdfHeaderType === 'logo_only') && logoUrl) {
            try {
                const logoBase64 = await getBase64FromUrl(logoUrl);
                const imgProps = pdfDoc.getImageProperties(logoBase64);
                const imgWidth = 40;
                const imgHeight = (imgProps.height * imgWidth) / imgProps.width;
                pdfDoc.addImage(logoBase64, 'PNG', 14, startY, imgWidth, imgHeight);
                startY += imgHeight + 2;
            } catch (e) {
                console.error("Error adding logo to PDF", e);
            }
        }
        
        if (pdfHeaderType === 'logo_and_text' || pdfHeaderType === 'text_only') {
            if (pdfHeaderType === 'text_only' && !logoUrl) startY = 22;
             pdfDoc.setTextColor(pdfHeaderTextColor);
             pdfDoc.setFontSize(16).setFont('helvetica', 'bold').text(companyName, 14, startY);
             startY += 8;
             if (companySlogan) {
                 pdfDoc.setTextColor(pdfSloganTextColor);
                 pdfDoc.setFontSize(10).setFont('helvetica', 'normal').text(companySlogan, 14, startY);
                 startY += 6;
             }
        }
        
        startY += 5;
        pdfDoc.setTextColor(0,0,0);
        pdfDoc.setFontSize(12).setFont('helvetica', 'bold').text(`Commission Report for ${referrerEmail}`, 14, startY);
        startY += 6;

        if (selectedReferrer && commissionBreakdown) {
            const summaryData = [
                ['Total Commissions', formatCurrency(selectedReferrerTotal)],
                ['Deposit Commissions', formatCurrency(commissionBreakdown.deposit || 0)],
                ['Investment Commissions', formatCurrency(commissionBreakdown.investment || 0)],
                ['Staking Commissions', formatCurrency(commissionBreakdown.staking || 0)],
                ['Interest Commissions', formatCurrency(commissionBreakdown.interest || 0)],
            ];
            autoTable(pdfDoc, {
                body: summaryData,
                startY: startY,
                theme: 'striped',
                headStyles: { fillColor: [34, 41, 57] },
                columnStyles: { 0: { fontStyle: 'bold' } }
            });
            startY = (pdfDoc as any).lastAutoTable.finalY + 10;
        }

        pdfDoc.text("Commission History", 14, startY);
        autoTable(pdfDoc, {
            head: [['From User', 'Type', 'Level', 'Amount', 'Date']],
            body: filteredHistory.map(item => [
                item.referredUserEmail,
                item.type,
                item.level,
                formatCurrency(item.amount),
                item.date ? format(item.date.toDate(), "PPp") : 'N/A'
            ]),
            startY: startY + 6,
        });
        startY = (pdfDoc as any).lastAutoTable.finalY + 10;

        if (selectedReferrer && treeData) {
            const flattenedTree: {level: number, name: string, email: string, commissionEarned: number}[] = [];
            const flattenTreeForExport = (node: any, level: number) => {
                if (!node) return;
                flattenedTree.push({
                    level,
                    name: `${node.firstName || ''} ${node.lastName || ''}`.trim() || node.username,
                    email: node.email,
                    commissionEarned: node.commissionEarned || 0,
                });
                if (node.children && node.children.length > 0) {
                    node.children.forEach((child: any) => flattenTreeForExport(child, level + 1));
                }
            };
            flattenTreeForExport(treeData, 1);
            
            if (startY > 250) {
                pdfDoc.addPage();
                startY = 20;
            }
            
            pdfDoc.text("Referral Tree", 14, startY);
            autoTable(pdfDoc, {
                startY: startY + 6,
                head: [['Level', 'User', 'Email', 'Commission Earned']],
                body: flattenedTree.map(user => [
                    user.level,
                    user.name,
                    user.email,
                    formatCurrency(user.commissionEarned),
                ]),
            });
        }
        
        pdfDoc.save(`${referrerEmail}_commissions.pdf`);
    };

    const TreeNodeComponent = ({ node, isRoot = false }: { node: any, isRoot?: boolean }) => {
        if (!node) return null;
      
        return (
          <li className="flex-shrink-0">
            <div className="flex flex-col items-center text-center p-2 bg-card rounded-lg border-2 border-border w-36">
              <Avatar>
                <AvatarImage src={node.photoURL} alt={node.firstName} />
                <AvatarFallback>{node.firstName?.[0] || node.email[0]}</AvatarFallback>
              </Avatar>
              <p className="font-bold text-sm mt-2 truncate w-full">{node.firstName || node.username} {node.lastName}</p>
              <p className="text-xs text-muted-foreground truncate w-full">{node.email}</p>
              {!isRoot && <p className="text-xs font-semibold text-primary mt-1">{formatCurrency(node.commissionEarned)}</p>}
            </div>
            {node.children && node.children.length > 0 && (
              <ul>
                {node.children.map((child: any) => (
                  <TreeNodeComponent key={child.id} node={child} />
                ))}
              </ul>
            )}
          </li>
        );
      };

  return (
    <AdminLayout>
        {isLoading ? (
            <div className="flex justify-center items-center p-8"><Loader2 className="h-8 w-8 animate-spin" /></div>
        ) : (
      <div className="flex flex-col gap-8">
        <div className="flex items-center justify-between">
            <div>
                <h1 className="text-3xl font-bold font-headline tracking-tight">Referral Settings</h1>
                <p className="text-muted-foreground">Configure the multi-level referral commission system.</p>
            </div>
            <Button onClick={handleSaveChanges} disabled={isSaving}>
                {isSaving && <Loader2 className="mr-2 h-4 w-4 animate-spin"/>}
                Save Changes
            </Button>
        </div>
        
        <Tabs defaultValue="setup">
            <TabsList className="grid w-full max-w-lg grid-cols-4">
                <TabsTrigger value="setup"><Settings className="mr-2" />Commission Setup</TabsTrigger>
                <TabsTrigger value="history"><History className="mr-2" />Commission History</TabsTrigger>
                <TabsTrigger value="referrals"><Users className="mr-2" />User Referrals</TabsTrigger>
                <TabsTrigger value="tree"><Users className="mr-2" />Referral Tree</TabsTrigger>
            </TabsList>
            <TabsContent value="setup" className="space-y-8">
                <Card>
                    <CardHeader>
                        <CardTitle>Referral Page Content</CardTitle>
                        <CardDescription>Customize the content shown to users on the 'Ref & Earn' page.</CardDescription>
                    </CardHeader>
                    <CardContent className="space-y-4">
                        <div className="space-y-2">
                            <Label htmlFor="ref-header">Header Text</Label>
                            <Input id="ref-header" value={refEarnHeader} onChange={(e) => setRefEarnHeader(e.target.value)} />
                        </div>
                         <div className="space-y-2">
                            <Label htmlFor="ref-desc">Description</Label>
                            <Textarea id="ref-desc" value={refEarnDescription} onChange={(e) => setRefEarnDescription(e.target.value)} />
                        </div>
                    </CardContent>
                </Card>

                <Card>
                    <CardHeader>
                        <CardTitle>Referral System Rules</CardTitle>
                        <CardDescription>Set global rules for referral access and withdrawals.</CardDescription>
                    </CardHeader>
                    <CardContent className="space-y-6">
                        {/* Referral Access Rule */}
                        <div className="p-4 border rounded-md">
                            <div className="flex items-center justify-between">
                                <div>
                                    <h4 className="font-semibold">Referral Access Requirement</h4>
                                    <p className="text-sm text-muted-foreground">Require users to meet a condition before they can earn commissions.</p>
                                </div>
                                <Switch checked={refAccessEnabled} onCheckedChange={setRefAccessEnabled} />
                            </div>
                            {refAccessEnabled && (
                                <div className="mt-4 space-y-4">
                                    <RadioGroup onValueChange={(val: ReferralAccessCondition) => setRefAccessCondition(val)} value={refAccessCondition}>
                                        <div className="flex items-center space-x-2">
                                            <RadioGroupItem value="min_deposit" id="min_deposit" />
                                            <Label htmlFor="min_deposit">Minimum Deposit</Label>
                                        </div>
                                        <div className="flex items-center space-x-2">
                                            <RadioGroupItem value="min_investment" id="min_investment" />
                                            <Label htmlFor="min_investment">Minimum Investment</Label>
                                        </div>
                                    </RadioGroup>
                                    {(refAccessCondition === 'min_deposit' || refAccessCondition === 'min_investment') && (
                                        <Input 
                                            type="number" 
                                            placeholder="Enter amount" 
                                            value={refAccessAmount}
                                            onChange={(e) => setRefAccessAmount(e.target.value)}
                                        />
                                    )}
                                </div>
                            )}
                        </div>
                        {/* Withdrawal Block Rule */}
                        <div className="p-4 border rounded-md">
                            <div className="flex items-center justify-between">
                                <div>
                                    <h4 className="font-semibold">Withdrawal Requirement</h4>
                                    <p className="text-sm text-muted-foreground">Block withdrawals until a user meets a referral target.</p>
                                </div>
                                <Switch checked={withdrawBlockEnabled} onCheckedChange={setWithdrawBlockEnabled} />
                            </div>
                             {withdrawBlockEnabled && (
                                <div className="mt-4 space-y-4">
                                     <div>
                                        <Label>Required Number of Referrals</Label>
                                        <Input 
                                            type="number"
                                            placeholder="e.g., 5"
                                            value={withdrawBlockCount}
                                            onChange={(e) => setWithdrawBlockCount(e.target.value)}
                                        />
                                    </div>
                                    <div>
                                        <Label>Withdrawal Block Message</Label>
                                        <Textarea 
                                            placeholder="Message to show users when withdrawal is blocked."
                                            value={withdrawBlockMessage}
                                            onChange={(e) => setWithdrawBlockMessage(e.target.value)}
                                        />
                                    </div>
                                </div>
                            )}
                        </div>
                    </CardContent>
                </Card>

                <CommissionSetupCard
                    title="Deposit Commission"
                    description="Reward users when their referrals make a deposit."
                    isEnabled={depositCommissionEnabled}
                    onToggle={setDepositCommissionEnabled}
                    levels={depositLevels}
                    onAddLevel={() => handleAddLevel(setDepositLevels)}
                    onRemoveLevel={(index) => handleRemoveLevel(index, setDepositLevels)}
                    onLevelChange={(index, value) => handleLevelChange(index, value, setDepositLevels)}
                    onTypeChange={(index, type) => handleTypeChange(index, type, setDepositLevels)}
                />

                <Card>
                    <CardHeader>
                        <CardTitle>Activity-Based Commission</CardTitle>
                        <CardDescription>Set up commissions for when referred users invest, stake, or earn interest.</CardDescription>
                    </CardHeader>
                    <CardContent className="space-y-6">
                        <CommissionSetupCard
                            title="On Investment"
                            description="Commission paid when a referral invests in a plan."
                            isEnabled={investmentCommissionEnabled}
                            onToggle={setInvestmentCommissionEnabled}
                            levels={investmentLevels}
                            onAddLevel={() => handleAddLevel(setInvestmentLevels)}
                            onRemoveLevel={(index) => handleRemoveLevel(index, setInvestmentLevels)}
                            onLevelChange={(index, value) => handleLevelChange(index, value, setInvestmentLevels)}
                             onTypeChange={(index, type) => handleTypeChange(index, type, setInvestmentLevels)}
                        />
                        <CommissionSetupCard
                            title="On Staking"
                            description="Commission paid when a referral stakes in a plan."
                            isEnabled={stakingCommissionEnabled}
                            onToggle={setStakingCommissionEnabled}
                            levels={stakingLevels}
                            onAddLevel={() => handleAddLevel(setStakingLevels)}
                            onRemoveLevel={(index) => handleRemoveLevel(index, setStakingLevels)}
                            onLevelChange={(index, value) => handleLevelChange(index, value, setStakingLevels)}
                            onTypeChange={(index, type) => handleTypeChange(index, type, setStakingLevels)}
                        />
                         <CommissionSetupCard
                            title="On Interest"
                            description="Commission paid when a referral receives an interest return from an investment plan."
                            isEnabled={interestCommissionEnabled}
                            onToggle={setInterestCommissionEnabled}
                            levels={interestLevels}
                            onAddLevel={() => handleAddLevel(setInterestLevels)}
                            onRemoveLevel={(index) => handleRemoveLevel(index, setInterestLevels)}
                            onLevelChange={(index, value) => handleLevelChange(index, value, setInterestLevels)}
                             onTypeChange={(index, type) => handleTypeChange(index, type, setInterestLevels)}
                        />
                    </CardContent>
                </Card>
            </TabsContent>
            <TabsContent value="history">
                <Card>
                    <CardHeader>
                        <CardTitle>Commission History</CardTitle>
                        <CardDescription>A log of all referral commissions paid out.</CardDescription>
                    </CardHeader>
                    <CardContent>
                        <div className="flex flex-col md:flex-row gap-4 mb-6 items-start">
                            <Popover open={open} onOpenChange={setOpen}>
                                <PopoverTrigger asChild>
                                    <Button variant="outline" role="combobox" aria-expanded={open} className="w-full md:w-[300px] justify-between">
                                        {selectedReferrer ? referrersList.find(r => r.id === selectedReferrer)?.email : "Select a referrer..."}
                                        <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                                    </Button>
                                </PopoverTrigger>
                                <PopoverContent className="w-full md:w-[300px] p-0">
                                    <div className="p-2">
                                        <Input
                                            placeholder="Search referrer..."
                                            value={searchReferrer}
                                            onChange={(e) => setSearchReferrer(e.target.value)}
                                        />
                                    </div>
                                    <ScrollArea className="h-72">
                                        {referrersList.filter(r => r.email.toLowerCase().includes(searchReferrer.toLowerCase())).map(referrer => (
                                            <div
                                                key={referrer.id}
                                                onClick={() => {
                                                    setSelectedReferrer(referrer.id);
                                                    setSearchReferrer('');
                                                    setOpen(false);
                                                }}
                                                className="relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent"
                                            >
                                                <Check className={cn("mr-2 h-4 w-4", selectedReferrer === referrer.id ? "opacity-100" : "opacity-0")} />
                                                {referrer.email}
                                            </div>
                                        ))}
                                    </ScrollArea>
                                </PopoverContent>
                            </Popover>
                            {selectedReferrer && (
                                <Button variant="outline" onClick={() => setSelectedReferrer(null)}>Clear Filter</Button>
                            )}
                            {selectedReferrer && (
                                <Card className="flex-1">
                                    <CardHeader className="pb-2">
                                        <CardTitle className="text-base font-medium">Summary for:</CardTitle>
                                        <CardDescription>{referrersList.find(r => r.id === selectedReferrer)?.email}</CardDescription>
                                    </CardHeader>
                                    <CardContent>
                                        <div className="text-2xl font-bold">{formatCurrency(selectedReferrerTotal)}</div>
                                        {commissionBreakdown && (
                                            <div className="mt-4 space-y-2 text-sm text-muted-foreground">
                                                {Object.entries(commissionBreakdown).map(([type, amount]) => (
                                                    <div key={type} className="flex justify-between">
                                                        <span className="capitalize">{type}</span>
                                                        <span className="font-medium text-foreground">{formatCurrency(amount)}</span>
                                                    </div>
                                                ))}
                                            </div>
                                        )}
                                    </CardContent>
                                    <CardFooter>
                                        <DropdownMenu>
                                            <DropdownMenuTrigger asChild>
                                                <Button><Download className="mr-2 h-4 w-4"/> Export Data</Button>
                                            </DropdownMenuTrigger>
                                            <DropdownMenuContent>
                                                <DropdownMenuItem onSelect={downloadCSV}>Download CSV</DropdownMenuItem>
                                                <DropdownMenuItem onSelect={downloadPDF}>Download PDF</DropdownMenuItem>
                                            </DropdownMenuContent>
                                        </DropdownMenu>
                                    </CardFooter>
                                </Card>
                            )}
                        </div>
                        {loadingHistory ? (
                             <div className="flex justify-center p-8"><Loader2 className="h-8 w-8 animate-spin" /></div>
                        ) : filteredHistory.length === 0 ? (
                            <p className="text-center text-muted-foreground p-8">No commission history for the selected criteria.</p>
                        ) : (
                            <Table>
                                <TableHeader>
                                    <TableRow>
                                        <TableHead>Referrer</TableHead>
                                        <TableHead>From User</TableHead>
                                        <TableHead>Type</TableHead>
                                        <TableHead>Level</TableHead>
                                        <TableHead>Amount</TableHead>
                                        <TableHead>Date</TableHead>
                                    </TableRow>
                                </TableHeader>
                                <TableBody>
                                    {filteredHistory.map(item => (
                                        <TableRow key={item.id}>
                                            <TableCell>{item.referrerEmail}</TableCell>
                                            <TableCell>{item.referredUserEmail}</TableCell>
                                            <TableCell><Badge variant="secondary" className="capitalize">{item.type}</Badge></TableCell>
                                            <TableCell><Badge>Level {item.level}</Badge></TableCell>
                                            <TableCell>{formatCurrency(item.amount)}</TableCell>
                                            <TableCell>{format(new Date(item.date.seconds * 1000), 'PPp')}</TableCell>
                                        </TableRow>
                                    ))}
                                </TableBody>
                            </Table>
                        )}
                    </CardContent>
                 </Card>
            </TabsContent>
            <TabsContent value="referrals">
                 <Card>
                    <CardHeader>
                        <CardTitle>User Referrals</CardTitle>
                        <CardDescription>View the referral network of your users.</CardDescription>
                    </CardHeader>
                    <CardContent>
                        {loadingUsers ? (
                            <div className="flex justify-center p-8"><Loader2 className="h-8 w-8 animate-spin" /></div>
                        ) : allUsers.length === 0 ? (
                            <p className="text-center text-muted-foreground p-8">No users found.</p>
                        ) : (
                             <Table>
                                <TableHeader>
                                    <TableRow>
                                        <TableHead>User Email</TableHead>
                                        <TableHead>Referred By</TableHead>
                                        <TableHead>Join Date</TableHead>
                                    </TableRow>
                                </TableHeader>
                                <TableBody>
                                    {allUsers.map(user => (
                                        <TableRow key={user.id}>
                                            <TableCell>{user.email}</TableCell>
                                            <TableCell>{user.referrerEmail || 'N/A'}</TableCell>
                                            <TableCell>{user.createdAt && user.createdAt.seconds ? format(new Date(user.createdAt.seconds * 1000), 'PPp') : 'N/A'}</TableCell>
                                        </TableRow>
                                    ))}
                                </TableBody>
                            </Table>
                        )}
                    </CardContent>
                 </Card>
            </TabsContent>
             <TabsContent value="tree">
                <Card>
                    <CardHeader>
                        <CardTitle>Referral Tree</CardTitle>
                        <CardDescription>Visual representation of the selected user's referral network.</CardDescription>
                    </CardHeader>
                    <CardContent>
                        {treeLoading ? (
                            <div className="flex justify-center items-center p-8"><Loader2 className="h-8 w-8 animate-spin" /></div>
                        ) : treeData ? (
                            <ScrollArea className="w-full">
                                <div className="tree py-4">
                                    <ul>
                                        <TreeNodeComponent node={treeData} isRoot />
                                    </ul>
                                </div>
                            </ScrollArea>
                        ) : (
                            <p className="text-center text-muted-foreground p-8">Select a referrer from the "Commission History" tab to view their tree.</p>
                        )}
                    </CardContent>
                </Card>
            </TabsContent>
        </Tabs>
      </div>
        )}
    </AdminLayout>
  );
}