"use client";

/**
 * Admin → Platform Analytics index
 * ─────────────────────────────────
 * Landing page for the analytics sub-tree. All four surfaces are
 * live: Brand Strength Radar, Engagement, Data Moat, and Growth
 * & Retention. Each card deep-links to its own page.
 */

import Link from "next/link";
import { Target, Users, Database, TrendingUp, ArrowRight, Filter } from "lucide-react";

interface AnalyticsLink {
  href: string;
  title: string;
  description: string;
  icon: typeof Target;
  status: "live" | "soon";
}

const LINKS: AnalyticsLink[] = [
  {
    href: "/admin/analytics/radar",
    title: "Brand Strength Radar",
    description:
      "8-dimension health score per brand + platform aggregate. Top / bottom 10 leaderboard.",
    icon: Target,
    status: "live",
  },
  {
    href: "/admin/analytics/engagement",
    title: "Engagement",
    description:
      "DAU / WAU / MAU + DAU/MAU stickiness. Cohort retention heatmap. Feature adoption rates.",
    icon: Users,
    status: "live",
  },
  {
    href: "/admin/analytics/data-moat",
    title: "Data Moat",
    description:
      "Total events captured, sessions, conversions across the platform. Growth rate per month.",
    icon: Database,
    status: "live",
  },
  {
    href: "/admin/analytics/growth",
    title: "Growth & Retention",
    description:
      "New users / brands / events per month. Churn analysis (30 / 60 / 90 day inactive).",
    icon: TrendingUp,
    status: "live",
  },
  {
    href: "/admin/analytics/funnel",
    title: "Conversion Funnel",
    description:
      "5-stage journey per brand with drop-off at each step + source + entry-page breakdown.",
    icon: Filter,
    status: "live",
  },
];

export default function AdminAnalyticsIndex() {
  return (
    <div className="space-y-5">
      <div>
        <h1 className="text-2xl font-bold text-slate-900 flex items-center gap-2">
          <Target className="w-5 h-5 text-slate-700" /> Platform Analytics
        </h1>
        <p className="text-slate-500 text-sm mt-1">
          Aggregate views across the whole platform. Drill into a specific brand from <Link href="/admin/brands" className="text-brand-600 hover:underline">/admin/brands</Link>.
        </p>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        {LINKS.map((l) => {
          const Icon = l.icon;
          const inner = (
            <div className="bg-white border border-slate-200 rounded-xl p-5 hover:border-brand-300 hover:shadow-sm transition-all flex flex-col h-full">
              <div className="flex items-center gap-2 mb-2">
                <div className="w-9 h-9 rounded-lg bg-slate-100 text-slate-600 flex items-center justify-center">
                  <Icon className="w-4 h-4" />
                </div>
                <h2 className="text-sm font-bold text-slate-900">{l.title}</h2>
                {l.status === "soon" && (
                  <span className="ml-auto text-[8px] font-bold uppercase tracking-widest text-slate-500 bg-slate-100 px-1.5 py-0.5 rounded">
                    Soon
                  </span>
                )}
              </div>
              <p className="text-xs text-slate-500 leading-relaxed flex-1">{l.description}</p>
              {l.status === "live" && (
                <div className="mt-3 inline-flex items-center gap-1 text-xs font-semibold text-brand-600">
                  Open <ArrowRight className="w-3 h-3" />
                </div>
              )}
            </div>
          );
          if (l.status === "live") return <Link key={l.title} href={l.href}>{inner}</Link>;
          return <div key={l.title} className="opacity-60 cursor-not-allowed">{inner}</div>;
        })}
      </div>
    </div>
  );
}
