"use client";
import React, { useMemo } from "react";
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";
import { Badge } from "@/components/ui/badge";
import { Section } from "@/components/profile/blocks/section";
import { api } from "@/lib/trpc/client";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { MemberRoleHelpers } from "@/server/modules/organization/types/member-role.enum";
type Props = {
    organizationId: string;
};

export const OrganizationDetailsSection: React.FC<Props> = (props) => {
    const { organizationId } = props;

    const { data: user } = api.auth.user.useQuery();

    const { isLoading, data: organization } = api.organization.get.useQuery({
        with: ["invitations", "members"],
        id: organizationId
    });

    const member = useMemo(() => {
        if (!user || !organization || !organization.members) {
            return null;
        }

        return organization.members.find((m) => m.userId === user.id);
    }, [user, organization]);

    if (isLoading) {
        return <Skeleton className='h-40 w-full' />;
    }

    if (!organization) {
        return <div>Organization not found</div>;
    }

    return (
        <Section title='detaljer'>
            <Card className='w-full gap-3 rounded-none border-0 bg-neutral-100 shadow-none'>
                <CardHeader className='flex flex-col gap-2 md:flex-row md:items-center md:justify-between'>
                    <div>
                        <CardTitle className='font-serif text-2xl'>Organisation</CardTitle>
                        <p className='text-muted-foreground text-sm'>
                            Administrer virksomhedsabonnement og teammedlemmer
                        </p>
                    </div>

                    {member && (
                        <Badge variant='outline' className='capitalize'>
                            {MemberRoleHelpers.getLabel(member.role)}
                        </Badge>
                    )}
                </CardHeader>
                <CardContent>
                    <Table>
                        <TableHeader>
                            <TableRow>
                                <TableHead>Virksomhed</TableHead>
                                <TableHead>CVR</TableHead>
                                <TableHead>Kontakt</TableHead>
                                <TableHead>Adresse</TableHead>
                            </TableRow>
                        </TableHeader>

                        <TableBody>
                            <TableRow>
                                <TableCell className='font-medium'>{organization.name || "Ikke angivet"}</TableCell>

                                <TableCell>{organization.cvr || "-"}</TableCell>

                                <TableCell>{organization.contactName || "Ikke angivet"}</TableCell>

                                <TableCell>
                                    {[organization.address, organization.postalCode, organization.city]
                                        .filter(Boolean)
                                        .join(", ") || "Ingen adresse angivet"}
                                </TableCell>
                            </TableRow>
                        </TableBody>
                    </Table>
                </CardContent>
            </Card>
        </Section>
    );
};