import {Card, CardContent, CardDescription, CardHeader, CardTitle} from "@/components/ui/card";
import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow} from "@/components/ui/table";
import {Badge} from "@/components/ui/badge";
import {TabsContent} from "@/components/ui/tabs";
import {ClientProfile} from "@/lib/backend/appwrite_types";
import {formatDate} from "date-fns";
import {formatDateTime} from "@/lib/utils";

type ClientsTabProps = {
    clients: ClientProfile[] | null;
}

export default function ClientsTab(props: ClientsTabProps) {
    return (
        <TabsContent value="clients">
            <Card>
                <CardHeader className="px-7">
                    <CardTitle>Clients</CardTitle>
                    <CardDescription>
                        Recently added clients to the system.
                    </CardDescription>
                </CardHeader>

                <CardContent>
                    <Table>
                        <TableHeader>
                            <TableRow>
                                <TableHead>Client/Nurse</TableHead>
                                <TableHead>
                                    Nurse Licence No.
                                </TableHead>
                                <TableHead className="hidden sm:table-cell">
                                    Phone Number
                                </TableHead>
                                <TableHead className="hidden md:table-cell">
                                    Date Joined
                                </TableHead>
                                <TableHead className="hidden md:table-cell">
                                    Qualifications
                                </TableHead>
                            </TableRow>
                        </TableHeader>
                        <TableBody>

                            {
                                Array.isArray(props.clients) && props.clients.length > 0
                                    ? props.clients?.map((client, index) => (
                                        <TableRow key={index}>
                                            <TableCell>
                                                <div className="font-medium">{client.full_name}</div>
                                                <div className="hidden text-sm text-muted-foreground md:inline">
                                                    {client.email}
                                                </div>
                                            </TableCell>
                                            <TableCell>
                                                {client.nursingLicenceNumber}
                                            </TableCell>
                                            <TableCell className="hidden sm:table-cell">
                                                {client.phoneNumber}
                                            </TableCell>
                                            <TableCell className="hidden md:table-cell">
                                                {formatDateTime(client.$createdAt).dateOnly}
                                            </TableCell>
                                            <TableCell className="hidden md:table-cell">
                                                {client.qualificationEarned}
                                            </TableCell>
                                        </TableRow>
                                    ))
                                    : <TableRow>
                                        <TableCell
                                            colSpan={5}
                                            className='h-32 text-center'
                                        >
                                            No Clients Found
                                        </TableCell>
                                    </TableRow>
                            }

                        </TableBody>
                    </Table>
                </CardContent>
            </Card>
        </TabsContent>
    )
}