"use client";

import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { Loader2 } from "lucide-react";
import { AppHeader } from "@/components/layout/app-header";
import { PageHeader } from "@/components/layout/page-header";
import { AssociateTable } from "@/components/associations/associate-table";
import { AssociationInfoCard } from "@/components/associations/association-info-card";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { getAssociation } from "@/lib/api";
import type { Association } from "@/lib/models";

export default function ClientPortalPage() {
  const router = useRouter();
  const [association, setAssociation] = useState<Association | null>(null);
  const [loading, setLoading] = useState(true);
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  useEffect(() => {
    if (!mounted) return;

    const associationId = localStorage.getItem("association_id");
    if (!associationId) {
      router.push("/login");
      return;
    }

    getAssociation(associationId)
      .then(setAssociation)
      .catch((error) => {
        console.error("Failed to load association:", error);
        router.push("/login");
      })
      .finally(() => setLoading(false));
  }, [mounted, router]);

  if (!mounted || loading) {
    return (
      <div className="flex min-h-screen items-center justify-center text-muted-foreground">
        <Loader2 className="size-5 animate-spin" />
      </div>
    );
  }

  if (!association) {
    return null;
  }

  return (
    <div className="min-h-screen bg-muted/30">
      <AppHeader />
      <main className="mx-auto max-w-5xl space-y-6 p-6">
        <PageHeader title={association.name} description="La tua associazione" />

        <AssociationInfoCard association={association} />

        <Card>
          <CardHeader>
            <CardTitle>Soci ({association.associates?.length ?? 0})</CardTitle>
          </CardHeader>
          <CardContent>
            <AssociateTable associates={association.associates ?? []} />
          </CardContent>
        </Card>
      </main>
    </div>
  );
}