import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { ArrowRight, BadgeCheck, Building2, FileText, LucideIcon, Sparkles } from "lucide-react";
import { Link } from "wouter";

type ProfileRequiredStateProps = {
  title: string;
  description: string;
  icon: LucideIcon;
  highlights: string[];
};

export function ProfileRequiredState({
  title,
  description,
  icon: Icon,
  highlights,
}: ProfileRequiredStateProps) {
  return (
    <div className="mx-auto flex min-h-[calc(100vh-18rem)] max-w-4xl items-start justify-center py-6">
      <Card className="w-full overflow-hidden border-primary/15 bg-[linear-gradient(135deg,rgba(248,252,255,0.98),rgba(255,255,255,1))] shadow-[0_28px_60px_-38px_rgba(37,99,235,0.3)]">
        <CardHeader className="border-b border-primary/10 bg-[linear-gradient(135deg,rgba(239,246,255,0.95),rgba(255,255,255,0.98))]">
          <div className="flex flex-col gap-5 md:flex-row md:items-start md:justify-between">
            <div className="flex items-start gap-4">
              <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-primary/10 text-primary shadow-inner">
                <Icon className="h-7 w-7" />
              </div>
              <div className="space-y-2">
                <div className="inline-flex items-center gap-2 rounded-full bg-primary/8 px-3 py-1 text-xs font-semibold text-primary">
                  <Sparkles className="h-3.5 w-3.5" />
                  Profil requis
                </div>
                <CardTitle className="text-2xl">{title}</CardTitle>
                <CardDescription className="max-w-2xl text-sm leading-6 text-muted-foreground">
                  {description}
                </CardDescription>
              </div>
            </div>
            <div className="rounded-2xl border border-primary/10 bg-white/85 px-4 py-3 text-sm shadow-sm">
              <p className="font-semibold text-foreground">Avant de continuer</p>
              <p className="mt-1 text-muted-foreground">
                Complétez une seule fois votre fiche, elle sera ensuite réutilisée dans vos demandes.
              </p>
            </div>
          </div>
        </CardHeader>
        <CardContent className="grid gap-6 p-6 lg:grid-cols-[1.3fr_0.9fr] lg:p-8">
          <div className="space-y-4">
            <div className="rounded-2xl border border-primary/10 bg-white/90 p-5 shadow-sm">
              <div className="flex items-start gap-3">
                <div className="mt-0.5 flex h-10 w-10 items-center justify-center rounded-xl bg-emerald-50 text-emerald-600">
                  <Building2 className="h-5 w-5" />
                </div>
                <div className="space-y-2">
                  <h2 className="text-base font-semibold text-foreground">Pourquoi remplir la fiche maintenant</h2>
                  <p className="text-sm leading-6 text-muted-foreground">
                    Le portail s’appuie sur votre identité, vos coordonnées et vos responsables pour préremplir les demandes,
                    fiabiliser l’annuaire et éviter les ressaisies inutiles.
                  </p>
                </div>
              </div>
            </div>
            <div className="grid gap-3 sm:grid-cols-2">
              {highlights.map((highlight) => (
                <div
                  key={highlight}
                  className="rounded-2xl border border-border/70 bg-white/90 p-4 text-sm leading-6 text-muted-foreground shadow-sm"
                >
                  <div className="mb-2 flex items-center gap-2 font-medium text-foreground">
                    <BadgeCheck className="h-4 w-4 text-primary" />
                    Repère utile
                  </div>
                  {highlight}
                </div>
              ))}
            </div>
          </div>
          <div className="rounded-2xl border border-dashed border-primary/20 bg-primary/5 p-5">
            <div className="flex items-start gap-3">
              <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-white text-primary shadow-sm">
                <FileText className="h-5 w-5" />
              </div>
              <div className="space-y-2">
                <h2 className="text-base font-semibold text-foreground">Suite recommandée</h2>
                <p className="text-sm leading-6 text-muted-foreground">
                  Ouvrez votre fiche association, renseignez les informations essentielles puis revenez ici pour reprendre votre
                  parcours sans perdre le fil.
                </p>
              </div>
            </div>
            <div className="mt-5 flex flex-col gap-3">
              <Link href="/dashboard/profile">
                <Button className="w-full justify-center gap-2">
                  Créer mon profil
                  <ArrowRight className="h-4 w-4" />
                </Button>
              </Link>
              <Link href="/dashboard">
                <Button variant="outline" className="w-full justify-center">
                  Retour au tableau de bord
                </Button>
              </Link>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}
