"use client";

import Link from "next/link";
import { useCurrentUser, ROLE_LABELS } from "../user-context";

export default function DashboardPage() {
  const user = useCurrentUser();

  return (
    <div className="mx-auto w-full max-w-3xl">
      <h1 className="text-xl font-semibold text-black sm:text-2xl dark:text-zinc-50">
        Bonjour {user.displayName || user.username} 👋
      </h1>
      <p className="mt-2 text-sm text-zinc-500 dark:text-zinc-400">
        Vous êtes connecté en tant que <strong>{ROLE_LABELS[user.role]}</strong>.
      </p>

      <div className="mt-6 grid grid-cols-1 gap-4 sm:grid-cols-2">
        <Link
          href="/agenda"
          className="rounded-2xl border border-zinc-200 bg-white p-5 transition-colors hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-950 dark:hover:bg-zinc-900"
        >
          <h2 className="text-sm font-medium text-zinc-700 dark:text-zinc-300">📅 Agenda</h2>
          <p className="mt-1 text-sm text-zinc-500">Voir et gérer vos rendez-vous (Google Calendar).</p>
        </Link>
        <Link
          href="/mail"
          className="rounded-2xl border border-zinc-200 bg-white p-5 transition-colors hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-950 dark:hover:bg-zinc-900"
        >
          <h2 className="text-sm font-medium text-zinc-700 dark:text-zinc-300">✉️ Boîte mail</h2>
          <p className="mt-1 text-sm text-zinc-500">Lire et trier vos emails (Gmail).</p>
        </Link>
        {user?.role === "super_admin" && (
          <Link
            href="/whatsapp"
            className="rounded-2xl border border-zinc-200 bg-white p-5 transition-colors hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-950 dark:hover:bg-zinc-900"
          >
            <h2 className="text-sm font-medium text-zinc-700 dark:text-zinc-300">💬 WhatsApp</h2>
            <p className="mt-1 text-sm text-zinc-500">Lier le numéro et envoyer des messages.</p>
          </Link>
        )}
        <Link
          href="/drive"
          className="rounded-2xl border border-zinc-200 bg-white p-5 transition-colors hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-950 dark:hover:bg-zinc-900"
        >
          <h2 className="text-sm font-medium text-zinc-700 dark:text-zinc-300">🗂️ Documents</h2>
          <p className="mt-1 text-sm text-zinc-500">Parcourir et gérer vos fichiers (Google Drive).</p>
        </Link>
        <Link
          href="/tracking"
          className="rounded-2xl border border-zinc-200 bg-white p-5 transition-colors hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-950 dark:hover:bg-zinc-900"
        >
          <h2 className="text-sm font-medium text-zinc-700 dark:text-zinc-300">📍 Localisation</h2>
          <p className="mt-1 text-sm text-zinc-500">Suivre la position de votre téléphone.</p>
        </Link>
      </div>
    </div>
  );
}