import { Head, Link } from '@inertiajs/react';
import AdminLayout from '@/components/Layouts/AdminLayout';
import Card from '@/components/Card/Card';
import RefreshButton from '@/components/RefreshButton/RefreshButton';
import { ActivityLog } from '@/types';

interface DashboardProps {
    stats: {
        totalUsers: number;
        totalPartners: number;
        totalShows: number;
        activeShows: number;
        activeSessions: number;
        totalShowAssignments: number;
        userGrowth: number;
        partnerGrowth: number;
        totalTopups?: number;
        successfulTopups?: number;
        totalTopupAmount?: number;
        totalTopupFee?: number;
        totalCoinsDistributed?: number;
        totalPurchases?: number;
        totalCoinsSpent?: number;
        totalPurchaseAmount?: number;
        totalRevenue?: number;
    };
    recentActivities: ActivityLog[];
}

export default function Dashboard({ stats, recentActivities = [] }: DashboardProps) {
    const formatNumber = (num: number) => {
        return new Intl.NumberFormat('id-ID').format(num);
    };

    const formatGrowth = (growth: number) => {
        const sign = growth >= 0 ? '+' : '';
        return `${sign}${growth.toFixed(1)}%`;
    };

    const formatPrice = (price: number) => {
        return new Intl.NumberFormat('id-ID', {
            style: 'currency',
            currency: 'IDR',
            minimumFractionDigits: 0,
        }).format(price);
    };

    const statsData = [
        {
            name: 'Total Users',
            value: formatNumber(stats.totalUsers),
            change: formatGrowth(stats.userGrowth),
            changeType: stats.userGrowth >= 0 ? 'positive' : 'negative',
            icon: UsersIcon,
            link: '/admin/users?role=user',
        },
        {
            name: 'Total Partners',
            value: formatNumber(stats.totalPartners),
            change: formatGrowth(stats.partnerGrowth),
            changeType: stats.partnerGrowth >= 0 ? 'positive' : 'negative',
            icon: BuildingOfficeIcon,
            link: '/admin/users?role=partner',
        },
        {
            name: 'Total Shows',
            value: formatNumber(stats.totalShows),
            change: `${stats.activeShows} Active`,
            changeType: 'neutral',
            icon: FilmIcon,
            link: '/admin/shows',
        },
        {
            name: 'Total Transactions',
            value: formatNumber((stats.totalTopups || 0) + (stats.totalPurchases || 0)),
            change: `${stats.successfulTopups || 0} Success`,
            changeType: 'neutral',
            icon: CurrencyDollarIcon,
            link: '/admin/transactions',
        },
        {
            name: 'Total Revenue',
            value: formatPrice(stats.totalRevenue || 0),
            change: formatPrice(stats.totalTopupFee || 0) + ' Fee',
            changeType: 'neutral',
            icon: BanknotesIcon,
            link: '/admin/transactions',
        },
        {
            name: 'Coins Distributed',
            value: formatNumber(stats.totalCoinsDistributed || 0),
            change: formatNumber(stats.totalCoinsSpent || 0) + ' Spent',
            changeType: 'neutral',
            icon: CoinIcon,
            link: '/admin/transactions',
        },
    ];

    return (
        <AdminLayout title="Dashboard">
            <Head title="Dashboard" />
            <div className="space-y-6">
                {/* Header dengan Refresh Button */}
                <div className="flex items-center justify-between">
                    <div>
                        <h2 className="text-2xl font-bold text-gray-900 dark:text-white">Dashboard</h2>
                        <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
                            Ringkasan aktivitas dan statistik sistem
                        </p>
                    </div>
                    <RefreshButton />
                </div>

                {/* Stats Grid */}
                <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
                    {statsData.map((stat) => (
                        <Link key={stat.name} href={stat.link}>
                            <Card padding="md" className="transition-all hover:shadow-lg cursor-pointer">
                                <div className="flex items-center justify-between">
                                    <div className="flex-1">
                                        <p className="text-sm font-medium text-gray-600 dark:text-gray-400">
                                            {stat.name}
                                        </p>
                                        <p className="mt-2 text-2xl font-bold text-gray-900 dark:text-white">
                                            {stat.value}
                                        </p>
                                        <p
                                            className={`mt-2 text-sm ${
                                                stat.changeType === 'positive'
                                                    ? 'text-green-600 dark:text-green-400'
                                                    : stat.changeType === 'negative'
                                                    ? 'text-red-600 dark:text-red-400'
                                                    : 'text-gray-600 dark:text-gray-400'
                                            }`}
                                        >
                                            {stat.changeType === 'neutral'
                                                ? stat.change
                                                : `${stat.change} dari bulan lalu`}
                                        </p>
                                    </div>
                                    <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-[#d4af37]/10 dark:bg-[#b8941f]/20">
                                        <stat.icon className="h-6 w-6 text-[#d4af37] dark:text-[#b8941f]" />
                                    </div>
                                </div>
                            </Card>
                        </Link>
                    ))}
                </div>

                {/* Recent Activity */}
                <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
                    <Card padding="md">
                        <div className="flex items-center justify-between">
                            <h2 className="text-lg font-semibold text-gray-900 dark:text-white">
                                Aktivitas Terbaru
                            </h2>
                            <Link
                                href="/admin/activity-logs"
                                className="text-sm text-[#d4af37] hover:text-[#b8941f] dark:text-[#b8941f] dark:hover:text-[#d4af37]"
                            >
                                Lihat Semua
                            </Link>
                        </div>
                        <div className="mt-4 space-y-4">
                            {recentActivities.length === 0 ? (
                                <p className="text-sm text-gray-500 dark:text-gray-400 text-center py-4">
                                    Tidak ada aktivitas terbaru
                                </p>
                            ) : (
                                recentActivities.map((activity) => (
                                    <div
                                        key={activity.id}
                                        className="flex items-center gap-4 border-b border-gray-200 pb-4 last:border-0 last:pb-0 dark:border-gray-700"
                                    >
                                        <div className="flex h-10 w-10 items-center justify-center rounded-full bg-[#d4af37]/10 dark:bg-[#b8941f]/20">
                                            <i
                                                className={`fas text-[#d4af37] dark:text-[#b8941f] ${
                                                    activity.action === 'login'
                                                        ? 'fa-sign-in-alt'
                                                        : activity.action === 'logout'
                                                        ? 'fa-sign-out-alt'
                                                        : activity.action === 'create'
                                                        ? 'fa-plus'
                                                        : activity.action === 'update'
                                                        ? 'fa-edit'
                                                        : activity.action === 'delete'
                                                        ? 'fa-trash'
                                                        : 'fa-circle'
                                                }`}
                                            ></i>
                                        </div>
                                        <div className="flex-1">
                                            <p className="text-sm font-medium text-gray-900 dark:text-white">
                                                {activity.description || activity.action}
                                            </p>
                                            <p className="text-xs text-gray-500 dark:text-gray-400">
                                                {activity.user
                                                    ? `${activity.user.name} • `
                                                    : ''}
                                                {(activity as any).time_ago || 'Baru saja'}
                                            </p>
                                        </div>
                                    </div>
                                ))
                            )}
                        </div>
                    </Card>

                    <Card padding="md">
                        <h2 className="text-lg font-semibold text-gray-900 dark:text-white">
                            Quick Actions
                        </h2>
                        <div className="mt-4 grid grid-cols-2 gap-4">
                            <Link
                                href="/admin/users"
                                className="rounded-lg border border-gray-200 bg-white p-4 text-left transition-colors hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700"
                            >
                                <div className="flex items-center gap-2 mb-1">
                                    <i className="fas fa-user-plus text-[#d4af37] dark:text-[#b8941f]"></i>
                                    <div className="text-sm font-medium text-gray-900 dark:text-white">
                                        Kelola Users
                                    </div>
                                </div>
                                <div className="text-xs text-gray-500 dark:text-gray-400">
                                    Lihat dan kelola semua user
                                </div>
                            </Link>
                            <Link
                                href="/admin/shows"
                                className="rounded-lg border border-gray-200 bg-white p-4 text-left transition-colors hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700"
                            >
                                <div className="flex items-center gap-2 mb-1">
                                    <i className="fas fa-film text-[#d4af37] dark:text-[#b8941f]"></i>
                                    <div className="text-sm font-medium text-gray-900 dark:text-white">
                                        Kelola Shows
                                    </div>
                                </div>
                                <div className="text-xs text-gray-500 dark:text-gray-400">
                                    Lihat dan kelola semua show
                                </div>
                            </Link>
                            <Link
                                href="/admin/activity-logs"
                                className="rounded-lg border border-gray-200 bg-white p-4 text-left transition-colors hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700"
                            >
                                <div className="flex items-center gap-2 mb-1">
                                    <i className="fas fa-history text-[#d4af37] dark:text-[#b8941f]"></i>
                                    <div className="text-sm font-medium text-gray-900 dark:text-white">
                                        Activity Logs
                                    </div>
                                </div>
                                <div className="text-xs text-gray-500 dark:text-gray-400">
                                    Lihat semua aktivitas sistem
                                </div>
                            </Link>
                            <Link
                                href="/admin/sessions"
                                className="rounded-lg border border-gray-200 bg-white p-4 text-left transition-colors hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700"
                            >
                                <div className="flex items-center gap-2 mb-1">
                                    <i className="fas fa-desktop text-[#d4af37] dark:text-[#b8941f]"></i>
                                    <div className="text-sm font-medium text-gray-900 dark:text-white">
                                        Active Sessions
                                    </div>
                                </div>
                                <div className="text-xs text-gray-500 dark:text-gray-400">
                                    Kelola sesi aktif
                                </div>
                            </Link>
                        </div>
                    </Card>
                </div>
            </div>
        </AdminLayout>
    );
}

// Icons
function UsersIcon({ className }: { className?: string }) {
    return (
        <svg className={className} fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor">
            <path
                strokeLinecap="round"
                strokeLinejoin="round"
                d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"
            />
        </svg>
    );
}

function BuildingOfficeIcon({ className }: { className?: string }) {
    return (
        <svg className={className} fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor">
            <path
                strokeLinecap="round"
                strokeLinejoin="round"
                d="M2.25 21h19.5m-18-18v18m10.5-18v18m6-13.5V21M6.75 6.75h.75m-.75 3h.75m-.75 3h.75m3-6h.75m-.75 3h.75m-.75 3h.75M6.75 21v-3.375c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21M3 3h12m-.75 4.5H21m-3.75 3.75h.008v.008h-.008v-.008zm0 3h.008v.008h-.008v-.008zm0 3h.008v.008h-.008v-.008z"
            />
        </svg>
    );
}

function FilmIcon({ className }: { className?: string }) {
    return (
        <svg className={className} fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor">
            <path
                strokeLinecap="round"
                strokeLinejoin="round"
                d="M15.75 10.5l4.72-4.72a.75.75 0 011.28.53v11.38a.75.75 0 01-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 002.25-2.25v-9a2.25 2.25 0 00-2.25-2.25h-9A2.25 2.25 0 002.25 7.5v9a2.25 2.25 0 002.25 2.25z"
            />
        </svg>
    );
}

function TicketIcon({ className }: { className?: string }) {
    return (
        <svg className={className} fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor">
            <path
                strokeLinecap="round"
                strokeLinejoin="round"
                d="M16.5 6v.75m0 3v.75m0 3v.75m0 3V18m-9-5.25h5.25M7.5 15h3M3.375 5.25c-.621 0-1.125.504-1.125 1.125v3.026a2.999 2.999 0 010 5.198v3.026c0 .621.504 1.125 1.125 1.125h17.25c.621 0 1.125-.504 1.125-1.125v-3.026a2.999 2.999 0 010-5.198V6.375c0-.621-.504-1.125-1.125-1.125H3.375z"
            />
        </svg>
    );
}

function CurrencyDollarIcon({ className }: { className?: string }) {
    return (
        <svg className={className} fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor">
            <path
                strokeLinecap="round"
                strokeLinejoin="round"
                d="M12 6v12m-3-2.818l.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
            />
        </svg>
    );
}

function BanknotesIcon({ className }: { className?: string }) {
    return (
        <svg className={className} fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor">
            <path
                strokeLinecap="round"
                strokeLinejoin="round"
                d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0a3 3 0 11-6 0 3 3 0 016 0z"
            />
        </svg>
    );
}

function CoinIcon({ className }: { className?: string }) {
    return (
        <svg className={className} fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor">
            <path
                strokeLinecap="round"
                strokeLinejoin="round"
                d="M12 6v12m-3-2.818l.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
            />
        </svg>
    );
}

