export const dynamic = "force-dynamic";

import { prisma } from "@/lib/prisma";
import Link from "next/link";
import { notFound } from "next/navigation";
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Select } from "@/components/ui/select";
import { Button } from "@/components/ui/button";
import { updateSubscription, deleteEstablishment } from "./actions";
import { DeleteDialog } from "./delete-dialog";

export default async function EstablishmentDetailPage({ params }: { params: { id: string } }) {
  const establishment = await prisma.establishment.findUnique({
    where: { id: params.id },
    include: {
      subscription: true,
      _count: { select: { users: true, classes: true } },
    },
  });

  if (!establishment) notFound();

  const boundDelete = deleteEstablishment.bind(null, establishment.id);

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <h1 className="text-3xl font-bold">{establishment.name}</h1>
        <div className="flex items-center gap-2">
          <Button variant="outline" asChild>
            <Link href="/superadmin/establishments">Retour</Link>
          </Button>
          <DeleteDialog deleteAction={boundDelete} />
        </div>
      </div>

      <div className="grid gap-6 md:grid-cols-2">
        <Card>
          <CardHeader>
            <CardTitle>Informations</CardTitle>
          </CardHeader>
          <CardContent className="space-y-3">
            <div className="flex justify-between text-sm">
              <span className="text-muted-foreground">Slug</span>
              <span className="font-medium">{establishment.slug}</span>
            </div>
            <div className="flex justify-between text-sm">
              <span className="text-muted-foreground">Utilisateurs</span>
              <span className="font-medium">{establishment._count.users}</span>
            </div>
            <div className="flex justify-between text-sm">
              <span className="text-muted-foreground">Classes</span>
              <span className="font-medium">{establishment._count.classes}</span>
            </div>
            <div className="flex justify-between text-sm">
              <span className="text-muted-foreground">Créé le</span>
              <span className="font-medium">
                {new Date(establishment.createdAt).toLocaleDateString("fr-FR")}
              </span>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>Abonnement</CardTitle>
          </CardHeader>
          <CardContent>
            <form action={updateSubscription.bind(null, establishment.id)} className="space-y-4">
              <div className="space-y-2">
                <label htmlFor="plan" className="text-sm font-medium">
                  Plan
                </label>
                <Select
                  id="plan"
                  name="plan"
                  defaultValue={establishment.subscription?.plan || "trial"}
                >
                  <option value="trial">Trial</option>
                  <option value="starter">Starter</option>
                  <option value="standard">Standard</option>
                  <option value="premium">Premium</option>
                </Select>
              </div>
              <div className="space-y-2">
                <label htmlFor="status" className="text-sm font-medium">
                  Statut
                </label>
                <Select
                  id="status"
                  name="status"
                  defaultValue={establishment.subscription?.status || "active"}
                >
                  <option value="active">Active</option>
                  <option value="suspended">Suspended</option>
                  <option value="expired">Expired</option>
                </Select>
              </div>
              <div className="flex items-center justify-between">
                <Badge variant={establishment.subscription?.status === "active" ? "success" : "destructive"}>
                  {establishment.subscription?.status || "-"}
                </Badge>
                <Button type="submit">Mettre à jour</Button>
              </div>
            </form>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}