import { Link } from '@inertiajs/react';
import {
    Activity,
    CreditCard,
    DollarSign,
    Gamepad2,
    MessageSquare,
    Search,
    TrendingUp,
    Trophy,
    UserPlus,
    Users,
} from 'lucide-react';

import { CategoryPieChart } from '@/components/dashboard/charts/CategoryPieChart';
import { RevenueBarChart } from '@/components/dashboard/charts/RevenueBarChart';
import { TrendLineChart } from '@/components/dashboard/charts/TrendLineChart';
import { DashboardPageHeader } from '@/components/dashboard/DashboardPageHeader';
import { RefreshButton } from '@/components/dashboard/RefreshButton';
import { StatsCard } from '@/components/dashboard/StatsCard';
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
import { Badge } from '@/components/ui/badge';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { useTranslation } from '@/contexts/LanguageContext';
import { formatNumber } from '@/lib/format';
import { timeAgo } from '@/lib/time';
import { cn } from '@/lib/utils';

type Trend = 'up' | 'down' | 'neutral';
interface Change { value: number; trend: Trend }

interface User { id: number; username: string; email: string; created_at: string }
interface Comment { id: number; comment: string; created_at: string; username: string }
interface TopGame { id: number; title: string; slug: string; plays_count: number }
interface TopPlayer { id: number; username: string; level: number; total_exp_earned: number }
interface SearchRow { query: string; count: number }

export interface AdminOverviewProps {
    stats: {
        total_users: number;
        total_games: number;
        plays_today: number;
        comments_today: number;
        new_registrations: number;
        active_subscriptions: number;
        mrr: number;
        revenue_mtd: number;
    };
    changes: {
        users: Change;
        plays: Change;
        revenue: Change;
    };
    trends: { date: string; plays: number; registrations: number; comments: number }[];
    top_games: TopGame[];
    top_players: TopPlayer[];
    category_distribution: { name: string; value: number }[];
    revenue_by_method: { method: string; amount: number }[];
    top_searches: SearchRow[];
    recent_users: User[];
    recent_comments: Comment[];
    app_version: string | null;
}

const formatMoney = (n: number) =>
    `$${formatNumber(n, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;

export default function AdminOverview({
    stats,
    changes,
    trends,
    top_games,
    top_players,
    category_distribution,
    revenue_by_method,
    top_searches,
    recent_users,
    recent_comments,
    app_version,
}: AdminOverviewProps) {
    const { t } = useTranslation();
    return (
        <>
            <DashboardPageHeader
                title={
                    <span className="inline-flex items-center gap-2">
                        {t('Overview')}
                        {app_version && (
                            <Badge variant="secondary" className="align-middle text-[11px]">
                                v{app_version}
                            </Badge>
                        )}
                    </span>
                }
                subtitle={t('Live activity, subscriptions, and system health')}
                action={<RefreshButton only={['admin']} />}
            />

            {/* Stats grid */}
            <div className="mb-6 grid grid-cols-2 gap-4 md:grid-cols-4 lg:grid-cols-4 xl:grid-cols-4">
                <StatsCard title={t('Total Users')} value={formatNumber(stats.total_users)} change={changes.users} icon={Users} />
                <StatsCard title={t('Total Games')} value={formatNumber(stats.total_games)} icon={Gamepad2} />
                <StatsCard title={t('Plays Today')} value={formatNumber(stats.plays_today)} change={changes.plays} icon={Activity} />
                <StatsCard title={t('New Registrations')} value={formatNumber(stats.new_registrations)} icon={UserPlus} />
                <StatsCard title={t('Active Subscriptions')} value={formatNumber(stats.active_subscriptions)} icon={CreditCard} />
                <StatsCard title={t('MRR')} value={formatMoney(stats.mrr)} icon={TrendingUp} />
                <StatsCard title={t('Revenue (MTD)')} value={formatMoney(stats.revenue_mtd)} change={changes.revenue} icon={DollarSign} />
                <StatsCard title={t('Comments Today')} value={formatNumber(stats.comments_today)} icon={MessageSquare} />
            </div>

            {/* 30-day trend */}
            <Card className="mb-6">
                <CardHeader className="border-b">
                    <CardTitle className="text-base font-semibold">{t('30-day activity')}</CardTitle>
                    <p className="text-xs text-muted-foreground">{t('Daily plays, registrations, and comments')}</p>
                </CardHeader>
                <CardContent className="pt-4">
                    <TrendLineChart data={trends} />
                </CardContent>
            </Card>

            {/* Distribution row */}
            <div className="mb-6 grid grid-cols-1 gap-4 lg:grid-cols-2">
                <Card>
                    <CardHeader className="border-b">
                        <CardTitle className="text-base font-semibold">{t('Plays by category')}</CardTitle>
                        <p className="text-xs text-muted-foreground">{t('Last 30 days, top 6 + other')}</p>
                    </CardHeader>
                    <CardContent className="pt-4">
                        <CategoryPieChart data={category_distribution} />
                    </CardContent>
                </Card>

                <Card>
                    <CardHeader className="border-b">
                        <CardTitle className="text-base font-semibold">{t('Revenue by gateway')}</CardTitle>
                        <p className="text-xs text-muted-foreground">{t('Completed transactions, last 30 days')}</p>
                    </CardHeader>
                    <CardContent className="pt-4">
                        <RevenueBarChart data={revenue_by_method} />
                    </CardContent>
                </Card>
            </div>

            {/* Top games + Top players */}
            <div className="mb-6 grid grid-cols-1 gap-4 lg:grid-cols-2">
                <Card>
                    <CardHeader className="flex-row items-center justify-between border-b pb-3">
                        <CardTitle className="inline-flex items-center gap-2 text-base font-semibold">
                            <Trophy className="size-4 text-primary" />
                            {t('Top games (30d)')}
                        </CardTitle>
                        <Link href="/dashboard/games" className="text-xs font-semibold text-primary hover:underline">
                            {t('All games →')}
                        </Link>
                    </CardHeader>
                    <CardContent className="p-0">
                        {top_games.length === 0 ? (
                            <p className="py-6 text-center text-sm text-muted-foreground">{t('No plays in the last 30 days.')}</p>
                        ) : (
                            <ol className="divide-y">
                                {top_games.map((g, i) => (
                                    <li key={g.id} className="flex items-center gap-3 px-4 py-2.5 text-sm">
                                        <span className={cn(
                                            'inline-flex size-6 shrink-0 items-center justify-center rounded-full text-[11px] font-bold',
                                            i === 0 && 'bg-amber-400/20 text-amber-600 dark:text-amber-300',
                                            i === 1 && 'bg-zinc-400/20 text-zinc-600 dark:text-zinc-300',
                                            i === 2 && 'bg-orange-400/20 text-orange-600 dark:text-orange-300',
                                            i > 2 && 'bg-muted text-muted-foreground',
                                        )}>
                                            {i + 1}
                                        </span>
                                        <Link
                                            href={`/play/${g.slug}`}
                                            className="flex-1 truncate font-medium hover:underline"
                                        >
                                            {g.title}
                                        </Link>
                                        <span className="shrink-0 text-xs tabular-nums text-muted-foreground">
                                            {t(':count plays', { count: formatNumber(g.plays_count) })}
                                        </span>
                                    </li>
                                ))}
                            </ol>
                        )}
                    </CardContent>
                </Card>

                <Card>
                    <CardHeader className="flex-row items-center justify-between border-b pb-3">
                        <CardTitle className="inline-flex items-center gap-2 text-base font-semibold">
                            <TrendingUp className="size-4 text-primary" />
                            {t('Top players (XP)')}
                        </CardTitle>
                        <Link href="/leaderboard" className="text-xs font-semibold text-primary hover:underline">
                            {t('Leaderboard →')}
                        </Link>
                    </CardHeader>
                    <CardContent className="p-0">
                        {top_players.length === 0 ? (
                            <p className="py-6 text-center text-sm text-muted-foreground">{t('No EXP awards yet.')}</p>
                        ) : (
                            <ol className="divide-y">
                                {top_players.map((p, i) => (
                                    <li key={p.id} className="flex items-center gap-3 px-4 py-2.5 text-sm">
                                        <span className={cn(
                                            'inline-flex size-6 shrink-0 items-center justify-center rounded-full text-[11px] font-bold',
                                            i === 0 && 'bg-amber-400/20 text-amber-600 dark:text-amber-300',
                                            i === 1 && 'bg-zinc-400/20 text-zinc-600 dark:text-zinc-300',
                                            i === 2 && 'bg-orange-400/20 text-orange-600 dark:text-orange-300',
                                            i > 2 && 'bg-muted text-muted-foreground',
                                        )}>
                                            {i + 1}
                                        </span>
                                        <Avatar className="size-7">
                                            <AvatarFallback className="bg-primary/10 text-[11px] font-bold text-primary">
                                                {p.username[0]?.toUpperCase() ?? '?'}
                                            </AvatarFallback>
                                        </Avatar>
                                        <Link
                                            href={`/profile/${p.username}`}
                                            className="flex-1 truncate font-medium hover:underline"
                                        >
                                            {p.username}
                                        </Link>
                                        <span className="shrink-0 text-xs text-muted-foreground">L{p.level}</span>
                                        <span className="shrink-0 w-16 text-end text-xs tabular-nums text-muted-foreground">
                                            {t(':count XP', { count: formatNumber(p.total_exp_earned) })}
                                        </span>
                                    </li>
                                ))}
                            </ol>
                        )}
                    </CardContent>
                </Card>
            </div>

            {/* Recent activity row */}
            <div className="mb-6 grid grid-cols-1 gap-4 lg:grid-cols-3">
                <Card>
                    <CardHeader className="flex-row items-center justify-between border-b pb-3">
                        <CardTitle className="text-base font-semibold">{t('Recent users')}</CardTitle>
                        <Link href="/dashboard/users" className="text-xs font-semibold text-primary hover:underline">
                            {t('View all →')}
                        </Link>
                    </CardHeader>
                    <CardContent className="p-0">
                        {recent_users.length === 0 ? (
                            <p className="py-6 text-center text-sm text-muted-foreground">{t('No users yet.')}</p>
                        ) : (
                            <ul className="divide-y">
                                {recent_users.map((u) => (
                                    <li key={u.id} className="flex items-center gap-3 px-4 py-2.5 text-sm">
                                        <Avatar className="size-7">
                                            <AvatarFallback className="bg-primary/10 text-[11px] font-bold text-primary">
                                                {u.username[0]?.toUpperCase() ?? '?'}
                                            </AvatarFallback>
                                        </Avatar>
                                        <div className="min-w-0 flex-1">
                                            <p className="truncate font-medium">{u.username}</p>
                                            <p className="truncate text-xs text-muted-foreground">{u.email}</p>
                                        </div>
                                        <span className="shrink-0 text-xs text-muted-foreground">
                                            {timeAgo(u.created_at)}
                                        </span>
                                    </li>
                                ))}
                            </ul>
                        )}
                    </CardContent>
                </Card>

                <Card>
                    <CardHeader className="flex-row items-center justify-between border-b pb-3">
                        <CardTitle className="text-base font-semibold">{t('Recent comments')}</CardTitle>
                        <Link href="/dashboard/comments" className="text-xs font-semibold text-primary hover:underline">
                            {t('Moderate →')}
                        </Link>
                    </CardHeader>
                    <CardContent className="p-0">
                        {recent_comments.length === 0 ? (
                            <p className="py-6 text-center text-sm text-muted-foreground">{t('No comments yet.')}</p>
                        ) : (
                            <ul className="divide-y">
                                {recent_comments.map((c) => (
                                    <li key={c.id} className="px-4 py-2.5 text-sm">
                                        <p className="line-clamp-2">{c.comment}</p>
                                        <p className="mt-1 text-xs text-muted-foreground">
                                            <span className="font-medium text-foreground">{c.username}</span>
                                            {' · '}
                                            {timeAgo(c.created_at)}
                                        </p>
                                    </li>
                                ))}
                            </ul>
                        )}
                    </CardContent>
                </Card>

                <Card>
                    <CardHeader className="flex-row items-center justify-between border-b pb-3">
                        <CardTitle className="inline-flex items-center gap-2 text-base font-semibold">
                            <Search className="size-4 text-primary" />
                            {t('Top searches')}
                        </CardTitle>
                    </CardHeader>
                    <CardContent className="p-0">
                        {top_searches.length === 0 ? (
                            <p className="py-6 text-center text-sm text-muted-foreground">{t('No searches yet.')}</p>
                        ) : (
                            <ul className="divide-y">
                                {top_searches.map((s) => (
                                    <li key={s.query} className="flex items-center gap-3 px-4 py-2 text-sm">
                                        <span className="flex-1 truncate">{s.query}</span>
                                        <span className="shrink-0 text-xs tabular-nums text-muted-foreground">
                                            {formatNumber(s.count)}
                                        </span>
                                    </li>
                                ))}
                            </ul>
                        )}
                    </CardContent>
                </Card>
            </div>

        </>
    );
}