import { redirect } from "next/navigation";
import { auth } from "@/auth";
import { db } from "@/lib/db";
import { setRequestLocale } from "next-intl/server";
import Link from "next/link";
import { AdminPathActions } from "./AdminPathActions";

export const dynamic = "force-dynamic";

export default async function AdminPathsPage({
  params,
}: {
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  setRequestLocale(locale);
  const session = await auth();

  if (!session?.user || (session.user as any).role !== "ADMIN") {
    redirect(`/${locale}/dashboard`);
  }

  const paths = await db.learningPath.findMany({
    orderBy: { order: "asc" },
    include: {
      courses: true,
      _count: { select: { enrollments: true } },
    },
  });

  return (
    <div style={{ maxWidth: 1200, margin: "0 auto", padding: "40px 24px" }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 32 }}>
        <div>
          <Link href={`/${locale}/admin`} style={{ fontSize: 12, color: "#60a5fa" }}>
            ← Administration
          </Link>
          <h1 style={{ fontSize: 24, fontWeight: 800, color: "#f1f5f9", marginTop: 4 }}>
            Parcours de formation
          </h1>
        </div>
        <Link href={`/${locale}/admin/paths/new`} className="btn btn-primary">
          + Nouveau parcours
        </Link>
      </div>

      <div className="card" style={{ padding: 0, overflow: "hidden" }}>
        <table>
          <thead>
            <tr>
              <th>Titre (FR)</th>
              <th>Formations</th>
              <th>Inscrits</th>
              <th>Statut</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
            {paths.length === 0 ? (
              <tr>
                <td colSpan={5} style={{ textAlign: "center", color: "#94a3b8", padding: "48px" }}>
                  Aucun parcours.{" "}
                  <Link href={`/${locale}/admin/paths/new`} style={{ color: "#60a5fa" }}>
                    Créer le premier.
                  </Link>
                </td>
              </tr>
            ) : (
              paths.map((path) => (
                <tr key={path.id}>
                  <td>
                    <div>
                      <p style={{ fontWeight: 600, color: "#f1f5f9", fontSize: 14 }}>{path.titleFr}</p>
                      <p style={{ fontSize: 11, color: "#475569" }}>{path.slug}</p>
                    </div>
                  </td>
                  <td style={{ color: "#f1f5f9", fontSize: 14 }}>{path.courses.length} cours</td>
                  <td style={{ color: "#f1f5f9", fontSize: 14 }}>{path._count.enrollments}</td>
                  <td>
                    <span
                      style={{
                        fontSize: 12,
                        fontWeight: 600,
                        padding: "3px 10px",
                        borderRadius: 999,
                        background: path.published ? "rgba(34,197,94,0.15)" : "rgba(148,163,184,0.1)",
                        color: path.published ? "#4ade80" : "#94a3b8",
                      }}
                    >
                      {path.published ? "Publié" : "Brouillon"}
                    </span>
                  </td>
                  <td>
                    <AdminPathActions
                      pathId={path.id}
                      isPublished={path.published}
                      editHref={`/${locale}/admin/paths/${path.id}`}
                    />
                  </td>
                </tr>
              ))
            )}
          </tbody>
        </table>
      </div>
    </div>
  );
}