Pay2Gateway/app/admin/analytics/page.tsx

import React from 'react';
import {
    BarChart3,
    TrendingUp,
    ArrowUpRight,
    ArrowDownRight,
    Globe,
    Monitor,
    Smartphone,
    Calendar
} from 'lucide-react';
import { db } from '@/lib/db';
import { format, subDays } from 'date-fns';
import { tr } from 'date-fns/locale';
import AnalyticsBarChart from '@/components/admin/AnalyticsBarChart';
import QueryRangeSelector from '@/components/admin/QueryRangeSelector';

async function getAnalyticsData(rangeDays: number = 12) {
    const result = await db.query('SELECT * FROM transactions ORDER BY created_at ASC');
    const transactions = result.rows;

    if (!transactions) return null;

    const successfulTransactions = transactions.filter(t => t.status === 'succeeded');
    const totalRevenue = successfulTransactions.reduce((acc, t) => acc + Number(t.amount), 0);
    const avgOrderValue = successfulTransactions.length > 0 ? totalRevenue / successfulTransactions.length : 0;

    // Monthly data for chart (grouped by month or last N periods)
    const lastPeriods = Array.from({ length: rangeDays }, (_, i) => {
        const d = subDays(new Date(), (rangeDays - 1) - i);
        return {
            date: d.toISOString().split('T')[0],
            label: format(d, 'd MMM', { locale: tr }),
            amount: 0
        };
    });

    successfulTransactions.forEach(t => {
        const dateStr = new Date(t.created_at).toISOString().split('T')[0];
        const periodMatch = lastPeriods.find(p => p.date === dateStr);
        if (periodMatch) {
            periodMatch.amount += Number(t.amount);
        }
    });

    return {
        totalRevenue,
        avgOrderValue,
        chartData: lastPeriods,
        totalCount: transactions.length,
        successCount: successfulTransactions.length,
    };
}

export default async function AnalyticsPage(props: {
    searchParams: Promise<{ range?: string }>;
}) {
    const searchParams = await props.searchParams;
    const range = searchParams.range ? parseInt(searchParams.range) : 12;
    const data = await getAnalyticsData(range);

    if (!data) return <div className="p-10 font-black text-gray-400 uppercase tracking-[0.2em] animate-pulse">Veriler hazırlanıyor...</div>;

    const metrics = [
        { label: 'Dönüşüm Oranı', value: '3.24%', trend: '+0.8%', positive: true }, // Mocked for now
        { label: 'Ort. Sipariş Tutarı', value: `${data.avgOrderValue.toLocaleString('tr-TR', { maximumFractionDigits: 2 })} ₺`, trend: '+12%', positive: true },
        { label: 'Başarılı İşlem', value: data.successCount.toString(), trend: '+24%', positive: true },
        { label: 'İşlem Başarısı', value: `${((data.successCount / (data.totalCount || 1)) * 100).toFixed(1)}%`, trend: '-0.2%', positive: false },
    ];

    const maxChartAmount = Math.max(...data.chartData.map(d => d.amount), 100);

    return (
        <div className="space-y-10 animate-in fade-in slide-in-from-bottom-4 duration-700">
            {/* Header */}
            <div className="flex flex-col md:flex-row md:items-center justify-between gap-6">
                <div>
                    <h1 className="text-3xl font-black text-gray-900 tracking-tight">Analizler</h1>
                    <p className="text-sm text-gray-400 font-bold uppercase tracking-widest mt-2">Sistem performans verileri</p>
                </div>
                <div className="flex items-center gap-4">
                    <QueryRangeSelector />
                </div>
            </div>

            {/* Main Metrics */}
            <div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
                {metrics.map((item, i) => (
                    <div key={i} className="bg-white p-8 rounded-[32px] border border-gray-100 shadow-sm space-y-4">
                        <p className="text-[10px] text-gray-400 font-black uppercase tracking-[0.2em]">{item.label}</p>
                        <div className="flex items-end justify-between">
                            <h3 className="text-2xl font-black text-gray-900 leading-none">{item.value}</h3>
                            <div className={`flex items-center gap-1 text-[10px] font-black uppercase tracking-tighter ${item.positive ? 'text-emerald-500' : 'text-red-500'}`}>
                                {item.positive ? <ArrowUpRight size={14} /> : <ArrowDownRight size={14} />}
                                {item.trend}
                            </div>
                        </div>
                    </div>
                ))}
            </div>

            {/* Charts Grid */}
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
                {/* Performance Chart */}
                <div className="bg-white p-10 rounded-[40px] border border-gray-100 shadow-sm space-y-10 text-sans tracking-tight">
                    <div className="flex justify-between items-center">
                        <h3 className="text-xl font-black text-gray-900 uppercase tracking-tight">Ciro Trendi (12 Gün)</h3>
                        <div className="flex items-center gap-4">
                            <div className="flex items-center gap-2">
                                <div className="w-2 h-2 rounded-full bg-blue-500"></div>
                                <span className="text-[10px] font-bold text-gray-400 uppercase tracking-widest">Gerçekleşen</span>
                            </div>
                        </div>
                    </div>

                    <AnalyticsBarChart data={data.chartData} />
                </div>
            </div>

            {/* Breakdown Grid */}
            <div className="grid grid-cols-1 gap-8 text-sans tracking-tight">
                <div className="bg-white p-10 rounded-[40px] border border-gray-100 shadow-sm">
                    <h3 className="text-xl font-black text-gray-900 uppercase tracking-tight mb-8">Cihaz Dağılımı</h3>
                    <div className="space-y-8">
                        {[
                            { label: 'Mobil', value: '64%', icon: Smartphone, color: 'bg-blue-600', width: '64%' },
                            { label: 'Masaüstü', value: '28%', icon: Monitor, color: 'bg-indigo-400', width: '28%' },
                            { label: 'Tablet', value: '8%', icon: Globe, color: 'bg-indigo-100', width: '8%' },
                        ].map((item, i) => (
                            <div key={i} className="space-y-3">
                                <div className="flex items-center justify-between text-xs font-black text-gray-900 uppercase tracking-widest">
                                    <div className="flex items-center gap-3">
                                        <item.icon size={18} className="text-gray-300" />
                                        <span>{item.label}</span>
                                    </div>
                                    <span>{item.value}</span>
                                </div>
                                <div className="h-3 w-full bg-gray-50 rounded-full overflow-hidden border border-gray-100">
                                    <div className={`h-full ${item.color} rounded-full`} style={{ width: item.width }}></div>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>

                <div className="bg-[#2563EB] p-10 rounded-[40px] shadow-2xl shadow-blue-200 text-white relative overflow-hidden group">
                    <div className="relative z-10 space-y-6">
                        <h3 className="text-2xl font-black leading-tight">Analizleriniz hazır! <br /> Bu ay başarılı bir grafik çiziyorsunuz.</h3>
                        <button className="px-8 py-4 bg-white text-blue-600 rounded-2xl font-black text-sm hover:scale-105 transition active:scale-95 shadow-xl uppercase tracking-widest">
                            Akıllı İpuçlarını Aç
                        </button>
                    </div>
                    <BarChart3 className="absolute -bottom-10 -right-10 w-64 h-64 text-white/10 rotate-12 group-hover:rotate-0 transition-transform duration-700" />
                </div>
            </div>
        </div>
    );
}