import { useEffect, useRef, useState } from 'react';
import { router, usePage } from '@inertiajs/react';
import { ColumnDef } from '@tanstack/react-table';
import AdminLayout from '@/Layouts/AdminLayout';
import { AdminPageHeader } from '@/components/Admin/AdminPageHeader';
import { TanStackDataTable } from '@/components/Admin/TanStackDataTable';
import { useAdminLoading } from '@/hooks/useAdminLoading';
import { TableSkeleton, type TableColumnConfig } from '@/components/Admin/skeletons';
import { DataTableColumnHeader } from '@/components/ui/data-table-column-header';
import { Badge } from '@/components/ui/badge';
import { Input } from '@/components/ui/input';
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from '@/components/ui/select';
import { Search } from 'lucide-react';
import { useAppDate } from '@/lib/date';
import { formatCurrency as formatCurrencyUtil } from '@/lib/currency';
import { useTranslation } from '@/contexts/LanguageContext';
import type { PageProps } from '@/types';

interface ReferralTransaction {
    id: number;
    user_id: number;
    user: {
        id: number;
        name: string;
        email: string;
    };
    amount: number;
    balance_after: number;
    type: string;
    type_label: string;
    description: string | null;
    created_at: string;
}

interface PaginatedTransactions {
    data: ReferralTransaction[];
    current_page: number;
    last_page: number;
    per_page: number;
    total: number;
}

interface ReferralsPageProps extends PageProps {
    transactions: PaginatedTransactions;
    filters: {
        type?: string;
        search?: string;
    };
    types: string[];
}

// Skeleton column configuration for Referrals table
const skeletonColumns: TableColumnConfig[] = [
    { type: 'text', width: 'w-16' },          // ID
    { type: 'avatar-text', width: 'w-40' },   // User
    { type: 'badge', width: 'w-28' },         // Type
    { type: 'amount', width: 'w-20' },        // Amount
    { type: 'text', width: 'w-20' },          // Balance After
    { type: 'text', width: 'w-40' },          // Description
    { type: 'date', width: 'w-24' },          // Date
];

export default function Referrals() {
    const { t, locale } = useTranslation();
    const { formatDateTime } = useAppDate();
    const { auth, transactions, filters, types, appSettings } = usePage<ReferralsPageProps>().props;
    const { isLoading } = useAdminLoading();
    const [searchValue, setSearchValue] = useState(filters.search || '');
    const searchTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
    const currency = appSettings?.default_currency || 'USD';

    const formatCurrency = (amount: number) => {
        return formatCurrencyUtil(amount, currency, locale);
    };

    const typeLabels: Record<string, string> = {
        signup_bonus: t('Signup Bonus'),
        purchase_commission: t('Purchase Commission'),
        billing_redemption: t('Billing Redemption'),
        admin_adjustment: t('Admin Adjustment'),
        refund_clawback: t('Refund Clawback'),
    };

    const handleSearch = (value: string) => {
        setSearchValue(value);
        if (searchTimer.current) {
            clearTimeout(searchTimer.current);
        }
        searchTimer.current = setTimeout(() => {
            router.get(
                route('admin.referrals'),
                { ...filters, search: value || undefined, page: 1 },
                { preserveState: true, preserveScroll: true }
            );
        }, 300);
    };

    useEffect(() => {
        return () => {
            if (searchTimer.current) {
                clearTimeout(searchTimer.current);
            }
        };
    }, []);

    const handleFilterChange = (key: string, value: string | undefined) => {
        router.get(
            route('admin.referrals'),
            { ...filters, [key]: value || undefined, page: 1 },
            { preserveState: true, preserveScroll: true }
        );
    };

    const handlePageChange = (page: number) => {
        router.get(
            route('admin.referrals'),
            { ...filters, page: page + 1 },
            { preserveState: true, preserveScroll: true }
        );
    };

    const handlePageSizeChange = (size: number) => {
        router.get(
            route('admin.referrals'),
            { ...filters, per_page: size, page: 1 },
            { preserveState: true, preserveScroll: true }
        );
    };

    const columns: ColumnDef<ReferralTransaction>[] = [
        {
            accessorKey: 'id',
            header: ({ column }) => (
                <DataTableColumnHeader column={column} title={t('ID')} />
            ),
            cell: ({ row }) => (
                <span className="font-mono text-sm">#{row.original.id}</span>
            ),
        },
        {
            accessorKey: 'user',
            header: ({ column }) => (
                <DataTableColumnHeader column={column} title={t('User')} />
            ),
            cell: ({ row }) => {
                const user = row.original.user;
                return (
                    <div>
                        <p className="font-medium">{user.name}</p>
                        <p className="text-sm text-muted-foreground">{user.email}</p>
                    </div>
                );
            },
        },
        {
            accessorKey: 'type',
            header: ({ column }) => (
                <DataTableColumnHeader column={column} title={t('Type')} />
            ),
            cell: ({ row }) => (
                <Badge variant="outline" className="capitalize">
                    {typeLabels[row.original.type] || row.original.type}
                </Badge>
            ),
        },
        {
            accessorKey: 'amount',
            header: ({ column }) => (
                <DataTableColumnHeader column={column} title={t('Amount')} />
            ),
            cell: ({ row }) => {
                const amount = row.original.amount;
                const isPositive = amount >= 0;
                return (
                    <span className={`font-medium ${isPositive ? 'text-success' : 'text-destructive'}`}>
                        {isPositive ? '+' : ''}{formatCurrency(amount)}
                    </span>
                );
            },
        },
        {
            accessorKey: 'balance_after',
            header: ({ column }) => (
                <DataTableColumnHeader column={column} title={t('Balance After')} />
            ),
            cell: ({ row }) => (
                <span className="text-muted-foreground">
                    {formatCurrency(row.original.balance_after)}
                </span>
            ),
        },
        {
            accessorKey: 'description',
            header: ({ column }) => (
                <DataTableColumnHeader column={column} title={t('Description')} />
            ),
            cell: ({ row }) => (
                <span className="text-sm text-muted-foreground truncate max-w-[200px] block">
                    {row.original.description || '-'}
                </span>
            ),
        },
        {
            accessorKey: 'created_at',
            header: ({ column }) => (
                <DataTableColumnHeader column={column} title={t('Date')} />
            ),
            cell: ({ row }) => (
                    <div>
                        {formatDateTime(row.original.created_at)}
                    </div>
                ),
        },
    ];

    return (
        <AdminLayout user={auth.user!} title={t('Referral Transactions')}>
            <AdminPageHeader
                title={t('Referral Transactions')}
                subtitle={t('View and manage all referral transactions')}
            />

            <div className="space-y-4">
                {/* Toolbar */}
                <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
                    <div className="relative max-w-sm">
                        <Search className="absolute start-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                        <Input
                            placeholder={t('Search by user name or email...')}
                            value={searchValue}
                            onChange={(e) => handleSearch(e.target.value)}
                            className="ps-9 w-[300px]"
                        />
                    </div>
                    <div className="flex flex-wrap gap-2 items-center">
                        <Select
                            value={filters.type || 'all'}
                            onValueChange={(value) =>
                                handleFilterChange('type', value === 'all' ? undefined : value)
                            }
                        >
                            <SelectTrigger className="w-[180px] h-8">
                                <SelectValue placeholder={t('Filter by Type')} />
                            </SelectTrigger>
                            <SelectContent>
                                <SelectItem value="all">{t('All Types')}</SelectItem>
                                {types.map((type) => (
                                    <SelectItem key={type} value={type}>
                                        {typeLabels[type] || type}
                                    </SelectItem>
                                ))}
                            </SelectContent>
                        </Select>
                    </div>
                </div>

                {isLoading ? (
                    <TableSkeleton columns={skeletonColumns} rows={10} rowsOnly />
                ) : (
                    <TanStackDataTable
                        columns={columns}
                        data={transactions.data}
                        showSearch={false}
                        serverPagination={{
                            pageCount: transactions.last_page,
                            pageIndex: transactions.current_page - 1,
                            pageSize: transactions.per_page,
                            total: transactions.total,
                            onPageChange: handlePageChange,
                            onPageSizeChange: handlePageSizeChange,
                        }}
                    />
                )}
            </div>
        </AdminLayout>
    );
}