import { redirect } from "next/navigation";
import Link from "next/link";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Clock, XCircle } from "lucide-react";
import { createClient } from "@/lib/supabase/server";
import SignOutButton from "@/components/auth/sign-out-button";

export default async function PendingPage() {
  const supabase = createClient();
  const {
    data: { user },
  } = await supabase.auth.getUser();

  if (!user) redirect("/login");

  const { data: profile } = await supabase
    .from("profiles")
    .select("*")
    .eq("id", user.id)
    .single();

  if (!profile) redirect("/login");
  if (profile.statut === "valide") redirect("/catalogue");

  const isRefuse = profile.statut === "refuse";

  return (
    <Card className="shadow-lg">
      <CardHeader className="text-center">
        <div className="mx-auto mb-2 flex h-14 w-14 items-center justify-center rounded-full bg-muted">
          {isRefuse ? (
            <XCircle className="h-7 w-7 text-destructive" />
          ) : (
            <Clock className="h-7 w-7 text-primary" />
          )}
        </div>
        <CardTitle>
          {isRefuse ? "Compte refusé" : "Compte en attente de validation"}
        </CardTitle>
        <CardDescription>
          {isRefuse
            ? "Votre demande a été refusée. Contactez notre équipe pour plus d'informations."
            : "Notre équipe vérifie vos informations professionnelles. Vous recevrez un email dès l'activation (sous 24h ouvrées)."}
        </CardDescription>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="rounded-lg border bg-muted/40 p-4 text-sm">
          <div className="flex items-start justify-between gap-2">
            <div>
              <div className="font-medium">{profile.societe}</div>
              <div className="text-muted-foreground">SIRET {profile.siret}</div>
              <div className="text-muted-foreground">
                {profile.prenom} {profile.nom} — {profile.telephone}
              </div>
            </div>
            <Badge variant={isRefuse ? "destructive" : "warning"}>
              {profile.statut}
            </Badge>
          </div>
        </div>
        <div className="flex flex-col gap-2">
          <Button asChild variant="outline">
            <Link href="/compte">Voir mon compte</Link>
          </Button>
          <SignOutButton />
        </div>
      </CardContent>
    </Card>
  );
}