import type { Metadata } from "next";
import Link from "next/link";

export const metadata: Metadata = {
  title: "Route Index | XRemit",
};

const ROUTES = [
  // Marketing
  { group: "Marketing", path: "/", label: "Home" },
  { group: "Marketing", path: "/calculator", label: "Calculator" },
  { group: "Marketing", path: "/contact", label: "Contact" },
  { group: "Marketing", path: "/faq", label: "FAQ" },
  { group: "Marketing", path: "/features", label: "Features" },
  { group: "Marketing", path: "/how-it-works", label: "How It Works" },
  { group: "Marketing", path: "/pricing", label: "Pricing" },
  { group: "Marketing", path: "/privacy", label: "Privacy" },
  { group: "Marketing", path: "/security", label: "Security" },
  { group: "Marketing", path: "/terms", label: "Terms" },
  // Auth
  { group: "Auth", path: "/login", label: "Login" },
  { group: "Auth", path: "/register", label: "Register" },
  { group: "Auth", path: "/forgot-password", label: "Forgot Password" },
  { group: "Auth", path: "/reset-password", label: "Reset Password" },
  { group: "Auth", path: "/two-factor", label: "Two Factor" },
  // App
  { group: "App", path: "/dashboard", label: "Dashboard" },
  { group: "App", path: "/send", label: "Send Money" },
  { group: "App", path: "/recipients", label: "Recipients" },
  { group: "App", path: "/recipients/new", label: "New Recipient" },
  { group: "App", path: "/recipients/placeholder", label: "Recipient Detail [id]" },
  { group: "App", path: "/recipients/placeholder/edit", label: "Edit Recipient [id]" },
  { group: "App", path: "/transactions", label: "Transactions" },
  { group: "App", path: "/transactions/placeholder", label: "Transaction Detail [id]" },
  { group: "App", path: "/notifications", label: "Notifications" },
  { group: "App", path: "/profile", label: "Profile" },
  { group: "App", path: "/settings", label: "Settings" },
  { group: "App", path: "/help", label: "Help" },
];

const GROUPS = ["Marketing", "Auth", "App"] as const;

export default function TestPage() {
  return (
    <div className="min-h-screen bg-slate-950 p-8 font-mono">
      <h1 className="mb-2 text-2xl font-bold text-white">Route Index</h1>
      <p className="mb-10 text-sm text-slate-400">{ROUTES.length} routes — click opens in new tab</p>

      <div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
        {GROUPS.map((group) => (
          <div key={group}>
            <p className="mb-3 text-xs font-semibold uppercase tracking-widest text-brand-400">
              {group}
            </p>
            <ul className="space-y-1">
              {ROUTES.filter((r) => r.group === group).map((r) => (
                <li key={r.path}>
                  <Link
                    href={r.path}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="flex items-center justify-between rounded-lg px-3 py-2 text-sm text-slate-300 transition hover:bg-slate-800 hover:text-white"
                  >
                    <span>{r.label}</span>
                    <span className="ml-4 truncate text-xs text-slate-500">{r.path}</span>
                  </Link>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </div>
  );
}