import { useState, useEffect } from 'react';
import {
    Mic2,
    Disc3,
    Users,
    Activity,
    BarChart3,
    PieChart,
    TrendingUp,
    ArrowRight,
    Headphones,
    ShoppingCart,
    CreditCard,
    RefreshCw,
    UserCheck,
    UserX,
    Filter,
    Crown,
    Coins
} from 'lucide-react';
import { motion } from 'framer-motion';
import { AnimatedCounter } from '@/components/AnimatedCounter.tsx';
import {
    AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend
} from 'recharts';
import {
    getListeningTrendApi,
    getSubscriptionTrendApi,
    getRenewalTrendApi,
    getSubscriberStatsApi,
    getContentQualityApi,
    getBusinessConversionApi,
    getPreferenceApi,
    getUserStickinessApi,
    getChannelListApi,
    getProgramListApi,
    getVipStatsApi
} from '@/api/radio.ts';
import type { RadioChannel } from '@/types/radio.ts';


// ─── Color Palette ───
const COLORS = {
    listen: '#0f172a', // Slate-900 (primary)
    sub: '#3b82f6',    // Blue-500
    renew: '#10b981',  // Emerald-500
    muted: '#9ca3af',  // Gray-400
    chart: ['#0f172a', '#3b82f6', '#10b981', '#f59e0b', '#6366f1'],
};

export default function Dashboard() {
    const [loading, setLoading] = useState(true);

    // Filter states
    const [startDate, setStartDate] = useState('');
    const [endDate, setEndDate] = useState('');
    const [channelId, setChannelId] = useState('');
    const [channelOptions, setChannelOptions] = useState<RadioChannel[]>([]);

    // Core stats
    const [statsData, setStatsData] = useState<{
        activeSubscribers: number;
        totalSubscribers: number;
        expiredSubscribers: number;
        channelCount: number;
        programCount: number;
    }>({
        activeSubscribers: 0,
        totalSubscribers: 0,
        expiredSubscribers: 0,
        channelCount: 0,
        programCount: 0,
    });

    const [vipStats, setVipStats] = useState<{
        activeVipUsers: number;
        vipRevenue: number;
        newVipOrders: number;
    }>({
        activeVipUsers: 0,
        vipRevenue: 0,
        newVipOrders: 0,
    });

    // Unified Trend Data
    const [trendData, setTrendData] = useState<{ date: string; listen: number; sub: number; renew: number }[]>([]);

    // Quality / Preference / Funnel / Retention
    const [qualityData, setQualityData] = useState<{ programId: string; title: string; playCount: number; avgCompletion: number }[]>([]);
    const [preferenceData, setPreferenceData] = useState<{ categoryId: string; categoryName: string; revenue: number; share: number }[]>([]);
    const [funnelData, setFunnelData] = useState<{ listenUsers: number; orderUsers: number; payUsers: number; ltv: number } | null>(null);
    const [retentionData, setRetentionData] = useState<{ date: string; newUsers: number; retention: number[] }[]>([]);
    const [subscriberTrend, setSubscriberTrend] = useState<{ date: string; count: number }[]>([]);

    // Initial load: Fetch channels for filter
    useEffect(() => {
        getChannelListApi({ pageSize: 100 })
            .then(res => {
                if (res && res.list) setChannelOptions(res.list);
            })
            .catch(console.error);
    }, []);

    useEffect(() => {
        fetchDashboardData();
        fetchTrendData();
    // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [startDate, endDate, channelId]);

    const fetchDashboardData = async () => {
        setLoading(true);
        try {
            const commonParams = {
                ...(startDate ? { startDate } : {}),
                ...(endDate ? { endDate } : {}),
                ...(channelId ? { channelId } : {}),
            };
            const dateOnlyParams = {
                ...(startDate ? { startDate } : {}),
                ...(endDate ? { endDate } : {}),
            };
            const channelOnlyParams = {
                ...(channelId ? { channelId } : {}),
            };

            const [subStats, conversion, preference, channels, programs, quality, stickiness, vipData] =
                await Promise.all([
                    getSubscriberStatsApi(commonParams),
                    getBusinessConversionApi(commonParams),
                    getPreferenceApi(), // NO PARAMS
                    getChannelListApi({ pageSize: 1 }),
                    getProgramListApi({ pageSize: 1 }),
                    getContentQualityApi(channelOnlyParams),
                    getUserStickinessApi(dateOnlyParams),
                    getVipStatsApi(dateOnlyParams)
                ]);

            setStatsData({
                activeSubscribers: subStats.activeSubscribers || 0,
                totalSubscribers: subStats.totalSubscribers || 0,
                expiredSubscribers: subStats.expiredSubscribers || 0,
                channelCount: channels.total || 0,
                programCount: programs.total || 0,
            });
            setSubscriberTrend(subStats.activeTrend || []);
            setFunnelData(conversion);
            setPreferenceData(preference.list || []);
            setQualityData(quality || []);
            setRetentionData(stickiness || []);
            setVipStats({
                activeVipUsers: vipData.activeVipUsers || 0,
                vipRevenue: vipData.vipRevenue || 0,
                newVipOrders: vipData.newVipOrders || 0,
            });
        } catch (error) {
            console.error('Fetch dashboard error:', error);
        } finally {
            setLoading(false);
        }
    };

    const fetchTrendData = async () => {
        try {
            const commonParams = {
                ...(startDate ? { startDate } : {}),
                ...(endDate ? { endDate } : {}),
                ...(channelId ? { channelId } : {}),
            };

            const [listenRes, subRes, renewRes] = await Promise.all([
                getListeningTrendApi(commonParams),
                getSubscriptionTrendApi(commonParams),
                getRenewalTrendApi(commonParams)
            ]);

            // Merge trend arrays grouping by date
            const mergedMap = new Map<string, { date: string; listen: number; sub: number; renew: number }>();
            
            const addData = (arr: { date: string; count: number }[], key: 'listen' | 'sub' | 'renew') => {
                if (!arr) return;
                arr.forEach(item => {
                    const existing = mergedMap.get(item.date) || { date: item.date, listen: 0, sub: 0, renew: 0 };
                    existing[key] = item.count;
                    mergedMap.set(item.date, existing);
                });
            };

            addData(listenRes.trend, 'listen');
            addData(subRes.trend, 'sub');
            addData(renewRes.trend, 'renew');

            const finalTrend = Array.from(mergedMap.values()).sort((a, b) => a.date.localeCompare(b.date));
            setTrendData(finalTrend);
        } catch (error) {
            console.error('Fetch trend error:', error);
        }
    };

    // ─── Funnel steps ───
    const funnelSteps = funnelData
        ? [
              { label: '活跃收听', value: funnelData.listenUsers || 0, icon: Headphones, color: COLORS.chart[0] },
              { label: '尝试下单', value: funnelData.orderUsers || 0, icon: ShoppingCart, color: COLORS.chart[1] },
              { label: '支付成功', value: funnelData.payUsers || 0, icon: CreditCard, color: COLORS.chart[2] },
          ]
        : [];

    const funnelMax = funnelSteps.length > 0 ? Math.max(...funnelSteps.map((s) => s.value), 1) : 1;

    // ─── Stats cards ───
    const stats = [
        {
            name: '有效订阅',
            value: statsData.activeSubscribers,
            icon: UserCheck,
            subLabel: '当前活跃付费用户',
            color: COLORS.sub,
            trend: statsData.totalSubscribers > 0
                ? `共 ${statsData.totalSubscribers} 人`
                : undefined,
        },
        {
            name: '已过期订阅',
            value: statsData.expiredSubscribers,
            icon: UserX,
            subLabel: '可触达召回用户',
            color: COLORS.muted,
        },
        {
            name: '活跃频道',
            value: statsData.channelCount,
            icon: Mic2,
            subLabel: '在线广播节点',
            color: COLORS.listen,
        },
        {
            name: '节目总数',
            value: statsData.programCount,
            icon: Disc3,
            subLabel: '内容资产储备',
            color: COLORS.renew,
        },
        {
            name: 'VIP 用户',
            value: vipStats.activeVipUsers,
            icon: Crown,
            subLabel: '当前生效的尊享会员',
            color: '#f59e0b',
            trend: vipStats.newVipOrders > 0 ? `+${vipStats.newVipOrders} 订单` : undefined,
        },
        {
            name: 'VIP 营收',
            value: `¥${(vipStats.vipRevenue / 100).toFixed(2)}`,
            icon: Coins,
            subLabel: '区间内会员特权变现',
            color: '#0f172a',
        },
    ];

    // ─── Formatted date helper ───
    // Handles format "2026-03-07T00:00:00+08:00" -> "03-07"
    const fmtDate = (val: string) => {
        if (!val) return '';
        const justDate = val.split('T')[0];
        return justDate.split('-').slice(1).join('-');
    };

    return (
        <div className="space-y-8 pb-20 overflow-x-hidden min-h-screen text-gray-900 font-sans relative">

            {/* ═══ Header ═══ */}
            <header className="relative z-10 flex flex-col xl:flex-row xl:items-end justify-between gap-6 pb-6 border-b border-border">
                <div>
                    <h1 className="text-3xl md:text-4xl font-bold tracking-tight">电台数据概览</h1>
                    <p className="text-sm text-muted-foreground mt-1">实时监控频道运营、内容表现与商业转化</p>
                </div>
                
                {/* ═══ Filters ═══ */}
                <div className="flex flex-wrap items-center gap-3">
                    <div className="flex items-center bg-card border border-border rounded-xl px-3 py-1.5 shadow-sm focus-within:ring-2 ring-primary/20 transition-all">
                        <span className="text-[13px] font-medium text-muted-foreground mr-2 whitespace-nowrap">日期:</span>
                        <input
                            type="date"
                            value={startDate}
                            onChange={(e) => setStartDate(e.target.value)}
                            className="bg-transparent text-[13px] font-medium text-foreground outline-none border-none custom-date-input"
                        />
                        <span className="text-muted-foreground mx-1 text-xs">-</span>
                        <input
                            type="date"
                            value={endDate}
                            onChange={(e) => setEndDate(e.target.value)}
                            className="bg-transparent text-[13px] font-medium text-foreground outline-none border-none custom-date-input"
                        />
                    </div>
                    
                    <div className="flex items-center bg-card border border-border rounded-xl px-3 py-1.5 shadow-sm focus-within:ring-2 ring-primary/20 transition-all">
                        <span className="text-[13px] font-medium text-muted-foreground mr-2 whitespace-nowrap">频道:</span>
                        <select
                            value={channelId}
                            onChange={(e) => setChannelId(e.target.value)}
                            className="bg-transparent text-[13px] font-medium text-foreground outline-none border-none appearance-none pr-6 relative cursor-pointer min-w-[100px]"
                            style={{ backgroundImage: `url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e")`, backgroundRepeat: 'no-repeat', backgroundPosition: 'right center', backgroundSize: '14px' }}
                        >
                            <option value="">全部频道</option>
                            {channelOptions.map(ch => (
                                <option key={ch.id} value={ch.id}>{ch.name || `Channel ${ch.id}`}</option>
                            ))}
                        </select>
                    </div>

                    <div className="flex items-center gap-2">
                        <motion.button
                            whileTap={{ scale: 0.95 }}
                            onClick={() => { setStartDate(''); setEndDate(''); setChannelId(''); }}
                            className="p-1.5 rounded-lg bg-muted border border-border shadow-sm hover:bg-muted/80 transition-colors flex items-center justify-center h-8 w-8"
                            title="重置过滤"
                        >
                            <Filter className="w-4 h-4 text-muted-foreground" />
                        </motion.button>
                        
                        <motion.button
                            whileHover={{ rotate: 180 }}
                            transition={{ duration: 0.4 }}
                            onClick={() => { fetchDashboardData(); fetchTrendData(); }}
                            className="p-1.5 rounded-lg bg-card border border-border shadow-sm hover:bg-muted transition-colors flex items-center justify-center h-8 w-8"
                            title="刷新数据"
                        >
                            <RefreshCw className="w-4 h-4 text-muted-foreground" />
                        </motion.button>
                    </div>
                </div>
            </header>

            {/* ═══ Stats Overview ═══ */}
            <section className="relative z-10 grid gap-5 grid-cols-2 md:grid-cols-3 xl:grid-cols-6">
                {stats.map((stat, idx) => (
                    <motion.div
                        key={stat.name}
                        initial={{ opacity: 0, y: 16 }}
                        animate={{ opacity: 1, y: 0 }}
                        transition={{ delay: idx * 0.08 }}
                        className="bg-white rounded-[2rem] p-6 border border-gray-100/50 shadow-soft shadow-hover-spring flex flex-col gap-3 group relative overflow-hidden"
                    >
                        <div className="flex justify-between items-start">
                            <p className="text-xs font-semibold text-muted-foreground">{stat.name}</p>
                            <div className="p-2 rounded-lg bg-muted/60 border border-border group-hover:scale-110 transition-transform">
                                <stat.icon className="w-4 h-4" style={{ color: stat.color }} />
                            </div>
                        </div>
                        <p className="text-2xl md:text-3xl font-bold text-gray-900 leading-none">
                            {loading ? '—' : (
                                <AnimatedCounter 
                                    value={stat.value} 
                                    format={typeof stat.value === 'string' && stat.value.startsWith('¥') ? 'currency' : 'number'} 
                                />
                            )}
                        </p>
                        <div className="flex justify-between items-center">
                            <span className="text-[11px] text-muted-foreground">{stat.subLabel}</span>
                            {stat.trend && (
                                <span className="text-[10px] font-semibold text-muted-foreground bg-muted px-2 py-0.5 rounded-full">
                                    {stat.trend}
                                </span>
                            )}
                        </div>
                    </motion.div>
                ))}
            </section>

            {/* ═══ Main Trend Chart + Sidebar ═══ */}
            <section className="relative z-10 grid grid-cols-1 xl:grid-cols-12 gap-6">
                {/* Multiplex Trend Chart */}
                <motion.div
                    className="xl:col-span-8"
                    initial={{ opacity: 0 }}
                    animate={{ opacity: 1 }}
                    transition={{ duration: 0.5 }}
                >
                    <div className="bg-white rounded-[2rem] p-8 border-glass shadow-soft flex flex-col gap-4">
                        {/* Chart header */}
                        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
                            <div>
                                <h2 className="text-lg font-bold text-foreground">核心运营趋势</h2>
                                <p className="text-xs text-muted-foreground mt-0.5">
                                    收听与订阅多维度对比分析
                                </p>
                            </div>
                        </div>

                        {/* Chart area */}
                        <div className="w-full h-[320px]">
                            <ResponsiveContainer width="100%" height="100%">
                                <AreaChart data={trendData} margin={{ top: 10, right: 10, left: -20, bottom: 0 }}>
                                    <defs>
                                        <linearGradient id="listenGrad" x1="0" y1="0" x2="0" y2="1">
                                            <stop offset="5%" stopColor={COLORS.listen} stopOpacity={0.15} />
                                            <stop offset="95%" stopColor={COLORS.listen} stopOpacity={0} />
                                        </linearGradient>
                                        <linearGradient id="subGrad" x1="0" y1="0" x2="0" y2="1">
                                            <stop offset="5%" stopColor={COLORS.sub} stopOpacity={0.15} />
                                            <stop offset="95%" stopColor={COLORS.sub} stopOpacity={0} />
                                        </linearGradient>
                                        <linearGradient id="renewGrad" x1="0" y1="0" x2="0" y2="1">
                                            <stop offset="5%" stopColor={COLORS.renew} stopOpacity={0.15} />
                                            <stop offset="95%" stopColor={COLORS.renew} stopOpacity={0} />
                                        </linearGradient>
                                    </defs>
                                    <CartesianGrid strokeDasharray="4 4" vertical={false} stroke="var(--border)" opacity={0.4} />
                                    <XAxis
                                        dataKey="date"
                                        axisLine={false}
                                        tickLine={false}
                                        tick={{ fill: 'var(--muted-foreground)', fontSize: 11 }}
                                        dy={12}
                                        tickFormatter={fmtDate}
                                        minTickGap={30}
                                    />
                                    <YAxis hide />
                                    <Tooltip
                                        cursor={{ stroke: 'var(--border)', strokeDasharray: '4 4' }}
                                        content={({ active, payload, label }) =>
                                            active && payload?.length ? (
                                                <div className="px-4 py-3 rounded-xl bg-popover border border-border shadow-xl text-xs flex flex-col gap-2 min-w-[140px]">
                                                    <p className="font-semibold text-muted-foreground border-b border-border/50 pb-2">{fmtDate(label as string)} 统计</p>
                                                    {payload.map(p => (
                                                        <div key={p.dataKey} className="flex items-center justify-between">
                                                            <div className="flex items-center gap-1.5">
                                                                <span className="w-2 h-2 rounded-full" style={{ backgroundColor: p.color }} />
                                                                <span className="text-muted-foreground">{p.name}</span>
                                                            </div>
                                                            <span className="font-bold text-foreground ml-4">{p.value}</span>
                                                        </div>
                                                    ))}
                                                </div>
                                            ) : null
                                        }
                                    />
                                    <Legend iconType="circle" wrapperStyle={{ fontSize: '11px', paddingTop: '10px' }} />
                                    
                                    <Area type="monotone" dataKey="listen" name="收听量" stroke={COLORS.listen} strokeWidth={2.5} fill="url(#listenGrad)" activeDot={{ r: 5, fill: 'var(--background)', stroke: COLORS.listen, strokeWidth: 2.5 }} />
                                    <Area type="monotone" dataKey="sub" name="新增订阅" stroke={COLORS.sub} strokeWidth={2.5} fill="url(#subGrad)" activeDot={{ r: 5, fill: 'var(--background)', stroke: COLORS.sub, strokeWidth: 2.5 }} />
                                    <Area type="monotone" dataKey="renew" name="续费订单" stroke={COLORS.renew} strokeWidth={2.5} fill="url(#renewGrad)" activeDot={{ r: 5, fill: 'var(--background)', stroke: COLORS.renew, strokeWidth: 2.5 }} />
                                </AreaChart>
                            </ResponsiveContainer>
                        </div>
                    </div>
                </motion.div>

                {/* ─── Conversion Funnel Side Card ─── */}
                <motion.div
                    className="xl:col-span-4"
                    initial={{ opacity: 0, x: 16 }}
                    animate={{ opacity: 1, x: 0 }}
                    transition={{ delay: 0.15 }}
                >
                    <div className="bg-white rounded-[2rem] p-8 border-glass shadow-soft h-full flex flex-col">
                        <div className="flex items-center justify-between mb-6 pb-4 border-b border-border">
                            <h3 className="text-sm font-bold text-foreground">商业转化漏斗</h3>
                            <TrendingUp className="w-4 h-4 text-muted-foreground" />
                        </div>

                        {/* LTV highlight */}
                        {funnelData && (
                            <div className="mb-6 rounded-2xl bg-gray-50/50 border border-gray-100 p-5 text-center shadow-inner group transition-all duration-300 hover:bg-white hover:shadow-soft">
                                <p className="text-xs text-gray-500 mb-2 transition-colors group-hover:text-gray-900">人均生命周期价值 (LTV)</p>
                                <p className="text-3xl font-black" style={{ color: COLORS.listen }}>
                                    <AnimatedCounter value={funnelData.ltv / 100} format="currency" />
                                </p>
                            </div>
                        )}

                        {/* Funnel bars */}
                        <div className="space-y-4 flex-1">
                            {funnelSteps.map((step, i) => {
                                const pct = funnelMax > 0 ? (step.value / funnelMax) * 100 : 0;
                                const convRate =
                                    i > 0 && funnelSteps[i - 1].value > 0
                                        ? ((step.value / funnelSteps[i - 1].value) * 100).toFixed(1)
                                        : null;
                                return (
                                    <div key={step.label} className="space-y-2">
                                        <div className="flex justify-between items-center">
                                            <div className="flex items-center gap-2">
                                                <step.icon className="w-4 h-4" style={{ color: step.color }} />
                                                <span className="text-xs font-bold text-foreground">{step.label}</span>
                                            </div>
                                            <div className="flex items-center gap-2">
                                                <span className="text-sm font-bold text-gray-900"><AnimatedCounter value={step.value}/></span>
                                                {convRate && (
                                                    <span className="text-[10px] font-semibold text-gray-500 bg-gray-50 px-2 py-0.5 rounded-full border border-gray-100">
                                                        <AnimatedCounter value={convRate} format="percent" />
                                                    </span>
                                                )}
                                            </div>
                                        </div>
                                        <div className="w-full bg-muted rounded-full h-2.5 overflow-hidden">
                                            <motion.div
                                                initial={{ width: 0 }}
                                                animate={{ width: `${pct}%` }}
                                                transition={{ duration: 1, delay: 0.2 + i * 0.15 }}
                                                className="h-full rounded-full"
                                                style={{ backgroundColor: step.color }}
                                            />
                                        </div>
                                        {i < funnelSteps.length - 1 && (
                                            <div className="flex justify-center">
                                                <ArrowRight className="w-3 h-3 text-border rotate-90" />
                                            </div>
                                        )}
                                    </div>
                                );
                            })}
                        </div>
                    </div>
                </motion.div>
            </section>

            {/* ═══ Subscriber Active Trend (mini chart) + Content Quality ═══ */}
            <section className="relative z-10 grid grid-cols-1 lg:grid-cols-2 gap-6">
                {/* Mini subscriber trend */}
                <div className="bg-card rounded-2xl p-6 border border-border shadow-sm">
                    <div className="flex items-center justify-between mb-4 pb-3 border-b border-border">
                        <div className="flex items-center gap-2">
                            <Users className="w-4 h-4 text-secondary" />
                            <h3 className="text-sm font-bold text-foreground">有效订阅用户趋势</h3>
                        </div>
                        <span className="text-xs text-muted-foreground">
                            当前 <span className="font-bold text-foreground">{statsData.activeSubscribers}</span> 人
                        </span>
                    </div>
                    <div className="w-full h-[200px]">
                        <ResponsiveContainer width="100%" height="100%">
                            <AreaChart data={subscriberTrend} margin={{ top: 5, right: 5, left: -25, bottom: 0 }}>
                                <defs>
                                    <linearGradient id="subTrendGrad" x1="0" y1="0" x2="0" y2="1">
                                        <stop offset="5%" stopColor={COLORS.sub} stopOpacity={0.2} />
                                        <stop offset="95%" stopColor={COLORS.sub} stopOpacity={0} />
                                    </linearGradient>
                                </defs>
                                <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="var(--border)" opacity={0.3} />
                                <XAxis dataKey="date" axisLine={false} tickLine={false} tick={{ fill: 'var(--muted-foreground)', fontSize: 10 }} dy={8} tickFormatter={fmtDate} minTickGap={40} />
                                <YAxis hide />
                                <Tooltip
                                    content={({ active, payload, label }) =>
                                        active && payload?.length ? (
                                            <div className="px-3 py-2 rounded-lg bg-popover border border-border shadow-md text-xs">
                                                <p className="text-muted-foreground">{fmtDate(label as string)}</p>
                                                <p className="font-bold text-foreground" style={{ color: COLORS.sub }}>{payload[0].value} 人</p>
                                            </div>
                                        ) : null
                                    }
                                />
                                <Area type="monotone" dataKey="count" stroke={COLORS.sub} strokeWidth={2} fill="url(#subTrendGrad)" animationDuration={1000} activeDot={{ r: 4, fill: 'var(--background)', stroke: COLORS.sub, strokeWidth: 2 }} />
                            </AreaChart>
                        </ResponsiveContainer>
                    </div>
                </div>

                {/* Content Quality */}
                <div className="bg-card rounded-2xl p-6 border border-border shadow-sm">
                    <div className="flex items-center justify-between mb-4 pb-3 border-b border-border">
                        <div className="flex items-center gap-2">
                            <BarChart3 className="w-4 h-4 text-listen" />
                            <h3 className="text-sm font-bold text-foreground">内容完播率 TOP5</h3>
                        </div>
                    </div>
                    <div className="space-y-5">
                        {qualityData.slice(0, 5).map((item, i) => {
                            const pct = (item.avgCompletion * 100);
                            return (
                                <div key={item.programId} className="space-y-1.5">
                                    <div className="flex justify-between items-baseline">
                                        <span className="text-xs font-medium text-foreground truncate pr-4 flex-1">{item.title}</span>
                                        <div className="flex items-center gap-2 shrink-0">
                                            <span className="text-[11px] text-muted-foreground">{item.playCount} 播放</span>
                                            <span className="text-xs font-bold" style={{ color: pct >= 60 ? COLORS.sub : COLORS.muted }}>
                                                {pct.toFixed(1)}%
                                            </span>
                                        </div>
                                    </div>
                                    <div className="w-full bg-muted rounded-full h-2 overflow-hidden">
                                        <motion.div
                                            initial={{ width: 0 }}
                                            animate={{ width: `${pct}%` }}
                                            className="h-full rounded-full"
                                            style={{ backgroundColor: pct >= 60 ? COLORS.sub : COLORS.listen }}
                                            transition={{ duration: 1, delay: i * 0.08 }}
                                        />
                                    </div>
                                </div>
                            );
                        })}
                    </div>
                </div>
            </section>

            {/* ═══ Bottom: Preference + Retention ═══ */}
            <section className="relative z-10 grid grid-cols-1 lg:grid-cols-2 gap-6">
                {/* Revenue by Category */}
                <div className="bg-card rounded-2xl p-6 border border-border shadow-sm">
                    <div className="flex items-center justify-between mb-5 pb-3 border-b border-border">
                        <div className="flex items-center gap-2">
                            <PieChart className="w-4 h-4 text-primary" />
                            <h3 className="text-sm font-bold text-foreground">品类营收结构</h3>
                        </div>
                        <span className="text-xs text-muted-foreground">全量统计</span>
                    </div>
                    <div className="space-y-5">
                        {preferenceData.slice(0, 5).map((item, idx) => (
                            <div key={item.categoryId} className="flex items-center gap-4">
                                <div className="w-8 h-8 rounded-lg flex items-center justify-center text-xs font-bold text-white shrink-0"
                                     style={{ backgroundColor: COLORS.chart[idx % COLORS.chart.length] }}>
                                    {idx + 1}
                                </div>
                                <div className="flex-1 min-w-0">
                                    <div className="flex justify-between items-center mb-1">
                                        <span className="text-sm font-semibold text-foreground truncate">{item.categoryName}</span>
                                        <span className="text-sm font-bold" style={{ color: COLORS.chart[idx % COLORS.chart.length] }}>
                                            ¥{(item.revenue / 100).toLocaleString()}
                                        </span>
                                    </div>
                                    <div className="flex items-center gap-2">
                                        <div className="flex-1 bg-muted rounded-full h-1.5 overflow-hidden">
                                            <motion.div
                                                className="h-full rounded-full"
                                                style={{ backgroundColor: COLORS.chart[idx % COLORS.chart.length] }}
                                                initial={{ width: 0 }}
                                                animate={{ width: `${item.share * 100}%` }}
                                                transition={{ duration: 0.8, delay: 0.2 + idx * 0.08 }}
                                            />
                                        </div>
                                        <span className="text-[11px] font-bold text-muted-foreground w-12 text-right shrink-0">
                                            {(item.share * 100).toFixed(1)}%
                                        </span>
                                    </div>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>

                {/* User Retention (real data from getUserStickinessApi) */}
                <div className="bg-card rounded-2xl p-6 border border-border shadow-sm overflow-hidden">
                    <div className="flex items-center justify-between mb-5 pb-3 border-b border-border">
                        <div className="flex items-center gap-2">
                            <Activity className="w-4 h-4 text-secondary" />
                            <h3 className="text-sm font-bold text-foreground">用户留存分析</h3>
                        </div>
                    </div>

                    <div className="w-full overflow-x-auto custom-scrollbar">
                        <table className="w-full text-left border-collapse min-w-[420px]">
                            <thead>
                                <tr>
                                    <th className="text-[11px] font-bold text-muted-foreground py-2.5 px-2 border-b border-border">日期</th>
                                    <th className="text-[11px] font-bold text-muted-foreground text-center py-2.5 px-2 border-b border-border">新增</th>
                                    <th className="text-[11px] font-bold text-muted-foreground text-center py-2.5 px-2 border-b border-border">次日</th>
                                    <th className="text-[11px] font-bold text-muted-foreground text-center py-2.5 px-2 border-b border-border">3日</th>
                                    <th className="text-[11px] font-bold text-muted-foreground text-center py-2.5 px-2 border-b border-border">7日</th>
                                    <th className="text-[11px] font-bold text-muted-foreground text-center py-2.5 px-2 border-b border-border">30日</th>
                                </tr>
                            </thead>
                            <tbody className="divide-y divide-border/40">
                                {retentionData.slice(0, 7).map((row) => (
                                    <tr key={row.date} className="hover:bg-muted/30 transition-colors">
                                        <td className="py-3 px-2 text-xs font-medium text-muted-foreground whitespace-nowrap">{fmtDate(row.date)}</td>
                                        <td className="py-3 px-2 text-center text-xs font-bold text-foreground">{row.newUsers}</td>
                                        {(row.retention || []).map((rate: number, idx: number) => {
                                            const pct = (rate * 100);
                                            const bgOpacity = Math.max(0.06, rate * 0.5);
                                            return (
                                                <td key={idx} className="py-2 px-1 text-center">
                                                    <div
                                                        className="w-full h-7 rounded-md flex items-center justify-center text-[11px] font-bold transition-colors"
                                                        style={{
                                                            backgroundColor: `rgba(106, 127, 106, ${bgOpacity})`,
                                                            color: pct > 20 ? COLORS.sub : COLORS.muted,
                                                        }}
                                                    >
                                                        {pct.toFixed(0)}%
                                                    </div>
                                                </td>
                                            );
                                        })}
                                        {/* Fill empty if less than 4 retention values */}
                                        {(row.retention || []).length < 4 &&
                                            Array.from({ length: 4 - (row.retention || []).length }).map((_, idx) => (
                                                <td key={`empty-${idx}`} className="py-2 px-1 text-center">
                                                    <div className="w-full h-7 rounded-md bg-muted/30 flex items-center justify-center text-[11px] text-muted-foreground">
                                                        —
                                                    </div>
                                                </td>
                                            ))}
                                    </tr>
                                ))}
                                {retentionData.length === 0 && (
                                    <tr>
                                        <td colSpan={6} className="py-8 text-center text-xs text-muted-foreground">暂无留存数据</td>
                                    </tr>
                                )}
                            </tbody>
                        </table>
                    </div>
                </div>
            </section>
        </div>
    );
}