import { useState, useEffect, useCallback } from 'react';
import { Link } from 'react-router-dom';
import { adminRequest } from '@/lib/adminApi';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Badge } from '@/components/ui/badge';
import { Skeleton } from '@/components/ui/skeleton';
import { PaginationControls } from '@/components/ui/pagination';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { useRealtimeSubscription } from '@/hooks/useRealtimeSubscription';
import { RealtimeStatusIndicator } from '@/components/RealtimeStatusIndicator';
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from '@/components/ui/table';
import { Search, Crown, Users, ChevronRight, HardDrive, MailWarning, Hourglass } from 'lucide-react';
import { format } from 'date-fns';

interface Profile {
    id: string;
    name: string | null;
    email: string | null;
    avatar_url: string | null;
    is_premium: boolean | null;
    couple_id: string | null;
    created_at: string | null;
    last_sign_in_at: string | null;
    email_confirmed_at: string | null;
    storage_bytes?: number;
    partner_is_premium?: boolean;
    partner_count?: number;
}

function formatBytes(bytes: number): string {
    if (bytes === 0) return '—';
    const k = 1024;
    const sizes = ['B', 'KB', 'MB', 'GB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
}

export function UsersPage() {
    const [profiles, setProfiles] = useState<Profile[]>([]);
    const [loading, setLoading] = useState(true);
    const [search, setSearch] = useState('');
    const [filteredProfiles, setFilteredProfiles] = useState<Profile[]>([]);
    const [page, setPage] = useState(1);
    const [pageSize, setPageSize] = useState(25);

    const fetchProfiles = useCallback(async () => {
        setLoading(true);
        try {
            // Fetch profiles with auth info (includes last_sign_in_at)
            const { users: profilesData } = await adminRequest<{ users: Profile[] }>('/v1/admin/users');

            // Build a map of couple_id -> users with premium in that couple
            const couplePartners: Record<string, { id: string; is_premium: boolean }[]> = {};
            profilesData.forEach(profile => {
                if (profile.couple_id) {
                    if (!couplePartners[profile.couple_id]) {
                        couplePartners[profile.couple_id] = [];
                    }
                    couplePartners[profile.couple_id].push({
                        id: profile.id,
                        is_premium: profile.is_premium || false,
                    });
                }
            });

            // Merge storage data, partner premium status, and partner count with profiles
            const profilesWithExtras = profilesData.map(profile => {
                // Check if partner has premium and count partners in couple
                let partnerIsPremium = false;
                let partnerCount = 0;
                if (profile.couple_id && couplePartners[profile.couple_id]) {
                    partnerCount = couplePartners[profile.couple_id].length;
                    const partner = couplePartners[profile.couple_id].find(p => p.id !== profile.id);
                    partnerIsPremium = partner?.is_premium || false;
                }
                return {
                    ...profile,
                    storage_bytes: Number(profile.storage_bytes || 0),
                    partner_is_premium: partnerIsPremium,
                    partner_count: partnerCount,
                };
            });

            setProfiles(profilesWithExtras);
            setFilteredProfiles(profilesWithExtras);
        } catch (error) {
            console.error('Failed to load profiles:', error);
        } finally {
            setLoading(false);
        }
    }, []);

    // Real-time subscription for profiles table
    const { status: realtimeStatus } = useRealtimeSubscription<Profile>({
        table: 'profiles',
        onInsert: useCallback(() => {
            // Refetch to get storage and partner data
            fetchProfiles();
        }, [fetchProfiles]),
        onUpdate: useCallback(() => {
            // Refetch to update partner premium status
            fetchProfiles();
        }, [fetchProfiles]),
        onDelete: useCallback((deleted: Profile) => {
            setProfiles(prev => prev.filter(p => p.id !== deleted.id));
            setFilteredProfiles(prev => prev.filter(p => p.id !== deleted.id));
        }, []),
            insertToast: {
            enabled: true,
            message: (payload) => {
                const label = payload.name || payload.email || 'Guest';
                return payload.email ? `New user registered: ${label}` : `New guest user: ${label}`;
            },
            type: 'success',
        },
        debounceMs: 1000, // Debounce to avoid excessive refetches
    });

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

    useEffect(() => {
        setPage(1);
        if (!search.trim()) {
            setFilteredProfiles(profiles);
            return;
        }

        const query = search.toLowerCase();
        setFilteredProfiles(
            profiles.filter(
                p =>
                    p.name?.toLowerCase().includes(query) ||
                    p.email?.toLowerCase().includes(query) ||
                    p.id.toLowerCase().includes(query)
            )
        );
    }, [search, profiles]);

    const totalCount = filteredProfiles.length;
    const paginatedProfiles = filteredProfiles.slice(
        (page - 1) * pageSize,
        page * pageSize
    );

    useEffect(() => {
        const totalPages = Math.max(1, Math.ceil(totalCount / pageSize));
        if (page > totalPages) {
            setPage(totalPages);
        }
    }, [page, pageSize, totalCount]);

    if (loading) {
        return (
            <div className="space-y-6">
                <div className="flex items-center justify-between">
                    <Skeleton className="h-9 w-48" />
                    <Skeleton className="h-10 w-64" />
                </div>
                <Skeleton className="h-96" />
            </div>
        );
    }

    return (
        <div className="space-y-4 md:space-y-6">
            {/* Header */}
            <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
                <div>
                    <div className="flex items-center gap-2 flex-wrap">
                        <h1 className="text-2xl md:text-3xl font-bold tracking-tight">Users</h1>
                        <RealtimeStatusIndicator status={realtimeStatus} showLabel />
                    </div>
                    <p className="text-muted-foreground text-sm">
                        {profiles.length} account{profiles.length !== 1 ? 's' : ''}
                        {(() => {
                            const guestCount = profiles.filter(p => !p.email).length;
                            const savedCount = profiles.length - guestCount;
                            if (guestCount === 0) return null;
                            return (
                                <span> • {savedCount} saved • {guestCount} guest</span>
                            );
                        })()}
                    </p>
                </div>
                <div className="relative w-full sm:w-64">
                    <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
                    <Input
                        placeholder="Search users..."
                        value={search}
                        onChange={(e) => setSearch(e.target.value)}
                        className="pl-9"
                    />
                </div>
            </div>

            {/* Users Table */}
            <div className="rounded-md border overflow-x-auto">
                <Table>
                    <TableHeader>
                        <TableRow>
                            <TableHead>User</TableHead>
                            <TableHead className="hidden md:table-cell">Email</TableHead>
                            <TableHead className="hidden md:table-cell">Status</TableHead>
                            <TableHead className="hidden lg:table-cell">Couple</TableHead>
                            <TableHead className="hidden lg:table-cell">Storage</TableHead>
                            <TableHead className="hidden xl:table-cell">Joined</TableHead>
                            <TableHead className="hidden xl:table-cell">Last Active</TableHead>
                            <TableHead className="hidden md:table-cell w-12"></TableHead>
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        {filteredProfiles.length === 0 ? (
                            <TableRow>
                                <TableCell colSpan={8} className="text-center py-8 text-muted-foreground">
                                    {search ? 'No users found matching your search.' : 'No users yet.'}
                                </TableCell>
                            </TableRow>
                        ) : (
                            paginatedProfiles.map((profile) => {
                                const statusBadge = profile.is_premium ? (
                                    <Badge className="bg-amber-500">
                                        <Crown className="h-3 w-3 mr-1" />
                                        Premium
                                    </Badge>
                                ) : profile.partner_is_premium ? (
                                    <Badge className="bg-amber-500/70">
                                        <Crown className="h-3 w-3 mr-1" />
                                        Partner
                                    </Badge>
                                ) : (
                                    <Badge variant="secondary" className="bg-slate-100 text-slate-500 hover:bg-slate-200">
                                        Free
                                    </Badge>
                                );

                                const coupleBadge = profile.couple_id ? (
                                    profile.partner_count && profile.partner_count >= 2 ? (
                                        <Badge variant="secondary" className="bg-green-100 text-green-700 hover:bg-green-200">
                                            <Users className="h-3 w-3 mr-1" />
                                            Paired
                                        </Badge>
                                    ) : (
                                        <Badge variant="secondary" className="bg-amber-100 text-amber-700 hover:bg-amber-200">
                                            <Hourglass className="h-3 w-3 mr-1" />
                                            Pairing
                                        </Badge>
                                    )
                                ) : (
                                    <span className="text-muted-foreground text-xs">Not paired</span>
                                );

                                const emailContent = profile.email ? (
                                    <span className="flex items-center gap-1.5 truncate max-w-[220px]">
                                        <span className="truncate">{profile.email}</span>
                                        {!profile.email_confirmed_at && (
                                            <MailWarning className="h-3.5 w-3.5 text-amber-500" aria-label="Email not verified" />
                                        )}
                                    </span>
                                ) : (
                                    <Badge variant="secondary" className="bg-slate-100 text-slate-500 hover:bg-slate-200">
                                        Guest
                                    </Badge>
                                );

                                const storageLabel = profile.storage_bytes && profile.storage_bytes > 0
                                    ? formatBytes(profile.storage_bytes)
                                    : '—';

                                const joinedLabel = profile.created_at
                                    ? format(new Date(profile.created_at), 'MMM d, yyyy')
                                    : '—';

                                const lastActiveLabel = profile.last_sign_in_at
                                    ? format(new Date(profile.last_sign_in_at), 'MMM d, yyyy h:mm a')
                                    : 'Never';

                                return (
                                    <TableRow key={profile.id}>
                                        <TableCell>
                                            <div className="flex items-center gap-3">
                                                <Link to={`/users/${profile.id}`} className="flex items-center gap-3 min-w-0 hover:opacity-80 transition-opacity">
                                                    <Avatar className="h-9 w-9">
                                                        <AvatarImage src={profile.avatar_url || undefined} />
                                                        <AvatarFallback>
                                                            {profile.name?.charAt(0).toUpperCase() || 'U'}
                                                        </AvatarFallback>
                                                    </Avatar>
                                                    <span className="font-medium truncate hover:text-primary transition-colors">
                                                        {profile.name || 'Unnamed User'}
                                                    </span>
                                                </Link>
                                                <div className="ml-auto md:hidden">
                                                    <Link to={`/users/${profile.id}`}>
                                                        <Button variant="ghost" size="icon">
                                                            <ChevronRight className="h-4 w-4" />
                                                        </Button>
                                                    </Link>
                                                </div>
                                            </div>
                                            <div className="mt-2 flex flex-wrap items-center gap-2 text-xs text-muted-foreground md:hidden">
                                                {emailContent}
                                                {statusBadge}
                                                {coupleBadge}
                                                {storageLabel !== '—' && (
                                                    <span className="flex items-center gap-1">
                                                        <HardDrive className="h-3 w-3 text-muted-foreground" />
                                                        {storageLabel}
                                                    </span>
                                                )}
                                                <span className="text-muted-foreground">Active {lastActiveLabel}</span>
                                            </div>
                                        </TableCell>
                                        <TableCell className="hidden md:table-cell text-muted-foreground">
                                            <div className="flex items-center gap-1.5">
                                                {emailContent}
                                            </div>
                                        </TableCell>
                                        <TableCell className="hidden md:table-cell">
                                            {statusBadge}
                                        </TableCell>
                                        <TableCell className="hidden lg:table-cell">
                                            {profile.couple_id ? coupleBadge : <span className="text-muted-foreground text-sm">—</span>}
                                        </TableCell>
                                        <TableCell className="hidden lg:table-cell">
                                            {profile.storage_bytes && profile.storage_bytes > 0 ? (
                                                <div className="flex items-center gap-1 text-sm">
                                                    <HardDrive className="h-3 w-3 text-muted-foreground" />
                                                    {storageLabel}
                                                </div>
                                            ) : (
                                                <span className="text-muted-foreground text-sm">—</span>
                                            )}
                                        </TableCell>
                                        <TableCell className="hidden xl:table-cell text-muted-foreground text-sm">
                                            {joinedLabel}
                                        </TableCell>
                                        <TableCell className="hidden xl:table-cell text-muted-foreground text-sm">
                                            {lastActiveLabel}
                                        </TableCell>
                                        <TableCell className="hidden md:table-cell">
                                            <Link to={`/users/${profile.id}`}>
                                                <Button variant="ghost" size="icon">
                                                    <ChevronRight className="h-4 w-4" />
                                                </Button>
                                            </Link>
                                        </TableCell>
                                    </TableRow>
                                );
                            })
                        )}
                    </TableBody>
                </Table>
            </div>

            {filteredProfiles.length > 0 && (
                <PaginationControls
                    page={page}
                    pageSize={pageSize}
                    totalCount={totalCount}
                    onPageChange={setPage}
                    onPageSizeChange={(size) => {
                        setPage(1);
                        setPageSize(size);
                    }}
                />
            )}
        </div>
    );
}