import Link from "next/link";
import { ArrowUpRight, Clock3, Smartphone, Sparkles } from "lucide-react";

import { DashboardCharts } from "@/components/admin/dashboard-charts";
import { getDashboardData, parseDashboardQuery } from "@/lib/analytics/server";
import { formatDateTime, formatNumber } from "@/lib/utils";

export const dynamic = "force-dynamic";

const ranges = [
  { label: "24 小时", value: "1" },
  { label: "7 天", value: "7" },
  { label: "30 天", value: "30" },
  { label: "90 天", value: "90" },
] as const;

type AdminPageProps = {
  searchParams: Promise<{
    range?: string;
  }>;
};

export default async function AdminPage({ searchParams }: AdminPageProps) {
  const rawParams = await searchParams;
  const query = parseDashboardQuery(rawParams);
  const data = await getDashboardData(query);

  return (
    <main className="relative overflow-hidden px-6 py-8 sm:px-8 lg:px-10">
      <div className="hero-orb left-[-120px] top-[10%]" />
      <div className="hero-orb right-[-120px] top-[-40px] bg-[radial-gradient(circle,_rgba(29,111,104,0.16)_0%,_rgba(29,111,104,0)_72%)]" />
      <div className="mx-auto flex max-w-7xl flex-col gap-6">
        <section className="soft-card p-7 sm:p-8">
          <div className="flex flex-col gap-6 xl:flex-row xl:items-end xl:justify-between">
            <div className="space-y-4">
              <div className="inline-flex items-center gap-2 rounded-full bg-[var(--surface-2)] px-4 py-2 text-sm text-[var(--ink-2)]">
                <Sparkles className="h-4 w-4 text-[var(--accent-1)]" />
                Android 陪伴数据台
              </div>
              <div>
                <p className="eyebrow">使用总览</p>
                <h1 className="font-[var(--font-display)] text-4xl leading-tight text-[var(--ink-1)] sm:text-5xl">
                  最近谁在使用，哪里需要留意，一眼看清。
                </h1>
              </div>
              <p className="max-w-3xl text-base leading-8 text-[var(--ink-2)]">
                这里持续汇总老年陪伴助手在 Android 应用中的使用情况，方便你查看哪些功能最常被打开、哪些设备最近还在使用，以及哪里出现了中断或失败。
              </p>
            </div>

            <div className="flex flex-col gap-3 xl:items-end">
              <Link
                href="/"
                className="inline-flex items-center gap-2 rounded-full border border-[var(--line-soft)] bg-white/75 px-5 py-3 text-sm font-semibold text-[var(--ink-1)]"
              >
                返回首页
                <ArrowUpRight className="h-4 w-4" />
              </Link>
              <div className="flex flex-wrap gap-2 text-sm text-[var(--ink-2)]">
                <span className="pill-tag">Android 应用</span>
                <span className="pill-tag">数据自动更新</span>
              </div>
            </div>
          </div>

          <div className="mt-8 flex flex-col gap-5">
            <div className="space-y-2">
              <p className="text-sm font-medium text-[var(--ink-3)]">时间范围</p>
              <div className="flex flex-wrap gap-2">
                {ranges.map((item) => (
                  <Link
                    key={item.value}
                    href={`?range=${item.value}`}
                    className={query.days === Number(item.value) ? "filter-pill filter-pill-active" : "filter-pill"}
                  >
                    {item.label}
                  </Link>
                ))}
              </div>
            </div>
          </div>
        </section>

        <section className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
          {data.stats.map((stat) => (
            <article key={stat.label} className="stat-card">
              <p className="stat-label">{stat.label}</p>
              <strong className="stat-value">{formatNumber(stat.value)}</strong>
              <p className="stat-hint">{stat.hint}</p>
            </article>
          ))}
        </section>

        <DashboardCharts activityTrend={data.activityTrend} topEvents={data.topEvents} />

        <section className="grid gap-6 xl:grid-cols-[1.05fr_0.95fr]">
          <article className="soft-card p-6">
            <div className="mb-5 flex items-center justify-between gap-4">
              <div>
                <p className="eyebrow">常用功能</p>
                <h2 className="text-2xl font-semibold text-[var(--ink-1)]">最近更常打开哪里</h2>
              </div>
              <div className="pill-tag">
                <Clock3 className="h-4 w-4" />
                近 {query.days} 天
              </div>
            </div>

            <div className="space-y-3">
              {data.topPaths.map((item, index) => (
                <div key={item.label} className="list-row">
                  <div className="flex items-center gap-4">
                    <span className="index-badge">{index + 1}</span>
                    <div>
                      <p className="text-sm text-[var(--ink-3)]">功能页面</p>
                      <p className="text-base font-semibold text-[var(--ink-1)]">{item.label}</p>
                    </div>
                  </div>
                  <strong className="text-lg font-semibold text-[var(--ink-1)]">{formatNumber(item.total)}</strong>
                </div>
              ))}
            </div>
          </article>

          <article className="soft-card p-6">
            <div className="mb-5 flex items-center justify-between gap-4">
              <div>
                <p className="eyebrow">最近活跃设备</p>
                <h2 className="text-2xl font-semibold text-[var(--ink-1)]">刚刚还在使用的是谁</h2>
              </div>
            </div>

            <div className="space-y-3">
              {data.recentSessions.map((session) => (
                <div key={session.sessionKey} className="rounded-[24px] border border-[var(--line-soft)] bg-white/80 px-4 py-4">
                  <div className="mb-2 flex items-center justify-between gap-3">
                    <div className="flex items-center gap-2 text-sm text-[var(--ink-2)]">
                      <Smartphone className="h-4 w-4 text-[var(--accent-2)]" />
                      Android 设备
                    </div>
                    <span className="text-xs text-[var(--ink-3)]">{formatDateTime(session.lastSeenAt)}</span>
                  </div>
                  <div className="space-y-1">
                    <p className="text-base font-semibold text-[var(--ink-1)]">{session.deviceLabel}</p>
                    <p className="text-sm text-[var(--ink-2)]">设备会话 {session.sessionKey.slice(0, 18)}...</p>
                    <p className="text-sm text-[var(--ink-3)]">
                      {formatNumber(session.eventCount)} 条事件
                      {session.appVersion ? ` · 版本 ${session.appVersion}` : ""}
                      {session.locale ? ` · ${session.locale}` : ""}
                    </p>
                  </div>
                </div>
              ))}
            </div>
          </article>
        </section>

        <section className="soft-card p-6">
          <div className="mb-5 flex items-center justify-between gap-4">
            <div>
              <p className="eyebrow">最近记录</p>
              <h2 className="text-2xl font-semibold text-[var(--ink-1)]">刚刚发生了什么</h2>
            </div>
          </div>
          <div className="overflow-x-auto">
            <table className="min-w-full border-separate border-spacing-y-3">
              <thead>
                <tr className="text-left text-sm text-[var(--ink-3)]">
                  <th className="px-4">时间</th>
                  <th className="px-4">终端</th>
                  <th className="px-4">动作</th>
                  <th className="px-4">页面 / 功能</th>
                  <th className="px-4">补充说明</th>
                </tr>
              </thead>
              <tbody>
                {data.recentEvents.map((event) => (
                  <tr key={event.id} className="rounded-[24px] bg-white/80 text-sm text-[var(--ink-2)] shadow-[var(--shadow-card)]">
                    <td className="rounded-l-[20px] px-4 py-4">{formatDateTime(event.occurredAt)}</td>
                    <td className="px-4 py-4">Android</td>
                    <td className="px-4 py-4">
                      <span className="inline-flex rounded-full bg-[var(--surface-2)] px-3 py-1 text-[var(--ink-1)]">
                        {event.name}
                      </span>
                      <p className="mt-2 text-xs tracking-[0.18em] text-[var(--ink-3)]">{event.type}</p>
                    </td>
                    <td className="px-4 py-4">
                      <p className="font-medium text-[var(--ink-1)]">{event.pathname ?? "未标记功能"}</p>
                      <p className="mt-1 text-xs text-[var(--ink-3)]">{event.component ?? "无额外标签"}</p>
                    </td>
                    <td className="rounded-r-[20px] px-4 py-4">
                      <p>{event.elementText ?? "无额外说明"}</p>
                      <p className="mt-1 text-xs text-[var(--ink-3)]">设备会话 {event.sessionKey.slice(0, 18)}...</p>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </section>
      </div>
    </main>
  );
}