import Link from "next/link";

import { AnalyticsPanel } from "@/components/analytics-panel";
import { Footer } from "@/components/footer";
import { TenantSelector } from "@/components/tenant-selector";

export default function AnalyticsPage() {
  return (
    <main className="mx-auto flex min-h-screen max-w-5xl flex-col gap-10 px-4 pb-16 pt-12 sm:px-6 lg:px-8">
      <header className="flex flex-col gap-4 rounded-2xl border border-white/10 bg-white/5 px-6 py-6 text-slate-100 shadow-lg shadow-slate-950/40">
        <div className="flex items-center justify-between gap-3">
          <div className="flex items-center gap-3 text-base font-semibold">
            <span className="inline-flex h-10 w-10 items-center justify-center rounded-2xl bg-gradient-to-br from-sky-400 to-cyan-500 text-slate-950">
              IC
            </span>
            IntegraChat · Analytics
          </div>
          <div className="flex items-center gap-4">
            <TenantSelector />
            <Link href="/" className="text-xs font-semibold uppercase tracking-[0.3em] text-cyan-300 hover:text-white">
              ← Back Home
            </Link>
          </div>
        </div>
        <p className="text-sm text-slate-300">
          Inspect tenant-wide metrics including tool usage, red-flag violations, and overall activity—all powered by the
          FastAPI analytics endpoints.
        </p>
      </header>

      <AnalyticsPanel />
      <Footer />
    </main>
  );
}