import Link from "next/link";
import { BuildingIcon, GlobeIcon, PlugIcon, ShieldIcon } from "lucide-react";
import { Card, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { requireSession } from "@/lib/session";

export const metadata = { title: "Réglages — seoinsight" };

// Index des réglages : mêmes sections que le groupe « Réglages » de la sidebar.
const SECTIONS = [
  {
    title: "Sites",
    href: "/settings/sites",
    icon: GlobeIcon,
    description: "Ajouter un site, renommer, gérer les cibles pays · langue, supprimer.",
  },
  {
    title: "Organisation",
    href: "/settings/org",
    icon: BuildingIcon,
    description: "Source préférée pour la consolidation des métriques du réservoir.",
  },
  {
    title: "Intégrations",
    href: "/settings/integrations",
    icon: PlugIcon,
    description:
      "Vos clés d'API (BYOK) et le rythme de synchro de chaque cible : manuelle, hebdomadaire ou mensuelle.",
  },
  {
    title: "Sécurité",
    href: "/settings/security",
    icon: ShieldIcon,
    description: "Double authentification du compte.",
  },
];

export default async function SettingsPage() {
  await requireSession();
  return (
    <section className="space-y-6">
      <h1 className="text-2xl font-semibold">Réglages</h1>
      <div className="grid gap-4 sm:grid-cols-2">
        {SECTIONS.map((section) => {
          const Icon = section.icon;
          return (
            <Card key={section.href} className="relative transition-colors hover:bg-accent/40">
              <CardHeader>
                <CardTitle>
                  {/* `after:absolute inset-0` : toute la carte est cliquable, un seul lien. */}
                  <Link
                    href={section.href}
                    className="flex items-center gap-2 after:absolute after:inset-0"
                  >
                    <Icon className="size-4" />
                    {section.title}
                  </Link>
                </CardTitle>
                <CardDescription>{section.description}</CardDescription>
              </CardHeader>
            </Card>
          );
        })}
      </div>
    </section>
  );
}