export const dynamic = "force-dynamic";
import Link from "next/link";
import { cookies } from "next/headers";
import { createSbServer } from "@/lib/supabaseServer";
import { Metadata } from "next";

export const metadata: Metadata = {
  title: "Tickets support | Espace Paie Odentas",
};

function formatDate(d?: string | null) {
  if (!d) return "—";
  try {
    return new Intl.DateTimeFormat("fr-FR", { dateStyle: "medium", timeStyle: "short" }).format(new Date(d));
  } catch {
    return d as string;
  }
}

export default async function StaffTicketsPage() {
  const sb = createSbServer();
  const { data: { user } } = await sb.auth.getUser();
  if (!user) {
    return (
      <main className="p-6"><h1 className="text-lg font-semibold">Accès refusé</h1><p className="text-sm text-slate-600">Vous devez être connecté.</p></main>
    );
  }

  const { data: me } = await sb
    .from("staff_users")
    .select("is_staff")
    .eq("user_id", user.id)
    .maybeSingle();
  if (!me?.is_staff) {
    return (
      <main className="p-6"><h1 className="text-lg font-semibold">Accès refusé</h1><p className="text-sm text-slate-600">Cette page est réservée au Staff.</p></main>
    );
  }

  // Staff voit tous les tickets, pas de filtre par organisation
  const { data: items, error } = await sb
    .from("tickets")
    .select("id, org_id, subject, status, priority, last_message_at, message_count, unread_by_client, unread_by_staff, created_at, updated_at")
    .order("last_message_at", { ascending: false })
    .limit(100);
    
  if (error) {
    return (
      <main className="p-6"><h1 className="text-lg font-semibold">Erreur</h1><p className="text-sm text-rose-600">{error.message}</p></main>
    );
  }

  return (
    <main className="p-6 space-y-4">
      <div className="flex items-center justify-between gap-4">
        <h1 className="text-lg font-semibold">Tickets Support</h1>
        <Link href="/staff/tickets/nouveau" className="inline-flex items-center gap-2 px-3 py-2 rounded-lg text-sm bg-emerald-600 text-white hover:bg-emerald-700">+ Nouveau ticket</Link>
      </div>

      <div className="rounded-2xl border bg-white overflow-hidden">
        <table className="w-full text-sm">
          <thead className="bg-slate-50 text-slate-600">
            <tr>
              <th className="text-left px-4 py-2 font-medium">Sujet</th>
              <th className="text-left px-4 py-2 font-medium">Statut</th>
              <th className="text-left px-4 py-2 font-medium">Priorité</th>
              <th className="text-left px-4 py-2 font-medium">Dernier message</th>
              <th className="text-left px-4 py-2 font-medium">Non lus (client/staff)</th>
              <th className="text-right px-4 py-2 font-medium">Actions</th>
            </tr>
          </thead>
          <tbody>
            {(items || []).length ? (
              items!.map((t) => (
                <tr key={t.id} className="border-t">
                  <td className="px-4 py-2">{t.subject}</td>
                  <td className="px-4 py-2">{t.status}</td>
                  <td className="px-4 py-2">{t.priority}</td>
                  <td className="px-4 py-2">{formatDate(t.last_message_at)}</td>
                  <td className="px-4 py-2">{t.unread_by_client || 0} / {t.unread_by_staff || 0}</td>
                  <td className="px-4 py-2 text-right">
                    <Link href={`/staff/tickets/${t.id}`} className="text-slate-600 underline">Ouvrir</Link>
                  </td>
                </tr>
              ))
            ) : (
              <tr>
                <td className="px-4 py-6 text-center text-slate-500" colSpan={6}>Aucun ticket pour le moment.</td>
              </tr>
            )}
          </tbody>
        </table>
      </div>
    </main>
  );
}

