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 {PatientProfile} from "@/lib/backend/appwrite_types";
import {formatDateTime} from "@/lib/utils";


type PatientsTabProps = {
    patients: PatientProfile[] | null;
}


export default function PatientsTab(props: PatientsTabProps) {
    return (
        <TabsContent value="patients">
            <Card>
                <CardHeader className="px-7">
                    <CardTitle>Patients</CardTitle>
                    <CardDescription>
                        Recently added patients to the system.
                    </CardDescription>
                </CardHeader>

                <CardContent>
                    <Table>
                        <TableHeader>
                            <TableRow>
                                <TableHead>Patient</TableHead>
                                <TableHead className="hidden sm:table-cell">
                                    Gender
                                </TableHead>
                                <TableHead className="hidden sm:table-cell">
                                    Age
                                </TableHead>
                                <TableHead className="hidden md:table-cell">
                                    Date
                                </TableHead>
                                <TableHead className="hidden md:table-cell">
                                    Location
                                </TableHead>
                            </TableRow>
                        </TableHeader>
                        <TableBody>

                            {
                                Array.isArray(props.patients) && props.patients.length > 0
                                    ? props.patients?.map((patient, index) => (
                                        <TableRow key={index}>
                                            <TableCell>
                                                <div className="font-medium">{patient.lastName} {patient.firstName}</div>
                                                <div className="hidden text-sm text-muted-foreground md:inline">
                                                    {patient.employmentStatus}
                                                </div>
                                            </TableCell>
                                            <TableCell className="hidden sm:table-cell">
                                                <Badge className="text-xs" variant="outline">
                                                    {patient.gender}
                                                </Badge>
                                            </TableCell>
                                            <TableCell className="hidden sm:table-cell">
                                                {patient.age}
                                            </TableCell>
                                            <TableCell className="hidden md:table-cell">
                                                {formatDateTime(patient.$createdAt).dateOnly}
                                            </TableCell>
                                            <TableCell>
                                                {patient?.location?.toUpperCase() ||"N/A"}
                                            </TableCell>

                                        </TableRow>
                                    ))
                                    : <TableRow>
                                        <TableCell
                                            colSpan={5}
                                            className='h-32 text-center'
                                        >
                                            No Patients Found
                                        </TableCell>
                                    </TableRow>
                            }

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