import { InsightChart } from "@/components/insight-chart";
import { InsightBarChart, InsightPieChart } from "@/components/insight-extra-charts";

const rank = [
  ["Media Spark", 29430],
  ["Nova AI Studio", 28810],
  ["Pixel Flow", 19840],
  ["DevLight Proxy", 11690],
];

export default function InsightsPage() {
  return (
    <div className="space-y-6 py-8">
      <h1 className="text-3xl font-bold">数据概览</h1>
      <p className="text-sm text-slate-300">前端 mock 展示未来分析后台能力：趋势、排行、来源、渠道。</p>
      <div className="card-glass">
        <h3 className="mb-2 text-lg font-semibold">下载趋势图</h3>
        <InsightChart />
      </div>
      <section className="grid gap-4 md:grid-cols-2">
        <div className="card-glass">
          <h3 className="mb-2 font-semibold">分类热度柱状图</h3>
          <InsightBarChart />
        </div>
        <div className="card-glass">
          <h3 className="mb-2 font-semibold">点击来源占比饼图</h3>
          <InsightPieChart />
        </div>
      </section>
      <section className="grid gap-4 md:grid-cols-2">
        <div className="card-glass">
          <h3 className="mb-2 font-semibold">热门资源排行</h3>
          {rank.map(([n, v]) => (
            <div key={n} className="mb-2 flex items-center justify-between text-sm"><span>{n}</span><span>{v}</span></div>
          ))}
        </div>
        <div className="card-glass">
          <h3 className="mb-2 mt-4 font-semibold">下载渠道占比</h3>
          <p className="text-sm text-slate-300">官方 39% · 百度网盘 33% · 夸克 21% · 备用线路 7%</p>
        </div>
      </section>
    </div>
  );
}