"use client";
import React from "react";
import Link from "next/link";
import { Loader2 } from "lucide-react";
import { api } from "@/lib/trpc/client";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Section } from "@/components/profile/blocks/section";

export const OrganizationListSection: React.FC = () => {
    const { data: user } = api.auth.user.useQuery();

    const { isLoading, data: organizations = [] } = api.organization.list.useQuery({
        with: ["members"]
    });

    if (!isLoading && !organizations.length) {
        return null;
    }

    return (
        <Section title='virksomhed'>
            <Card className='w-full gap-3 rounded-none border-0 bg-neutral-100 p-5 font-serif shadow-none'>
                <CardContent className='space-y-3 p-0'>
                    {isLoading && (
                        <div className='flex items-center justify-center py-8'>
                            <Loader2 className='size-6 animate-spin' />
                            <span className='ml-2'>Indlæser organisationer...</span>
                        </div>
                    )}

                    {organizations.map((organization) => {
                        const member = user ? organization.members.find((member) => member.userId === user.id) : null;

                        return (
                            <div
                                key={organization.id}
                                className='flex flex-col gap-2 rounded-md border bg-white p-5 md:flex-row md:items-center md:justify-between'
                            >
                                <div>
                                    <p className='font-bold'>{organization.name}</p>

                                    {member && (
                                        <p className='text-muted-foreground mt-1 text-xs'>Rolle: {member.role}</p>
                                    )}
                                </div>

                                <Button asChild variant='default' className='font-sans' size='sm'>
                                    <Link href={`/profile/organization/${organization.id}`}>Udsigt</Link>
                                </Button>
                            </div>
                        );
                    })}
                </CardContent>
            </Card>
        </Section>
    );
};