import {Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle} from "@/components/ui/card";
import {Button} from "@/components/ui/button";
import {ChevronLeft, ChevronRight, Copy, CreditCard, MoreVertical, Truck} from "lucide-react";
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuSeparator,
    DropdownMenuTrigger
} from "@/components/ui/dropdown-menu";
import {Separator} from "@/components/ui/separator";
import {Pagination, PaginationContent, PaginationItem} from "@/components/ui/pagination";
import {Models} from "node-appwrite";
import {fetchUserProfile} from "@/lib/backend/api";
import {fetchPatientProfile} from "@/lib/backend/api-patients";
import {Avatar, AvatarFallback, AvatarImage} from "@/components/ui/avatar";
import {UserProfile} from "@/lib/backend/appwrite_types";


type PatientDashboardPanelProps = {
    user: Models.User<Models.Preferences>,
    userProfile: UserProfile
}


export default async function PatientDashboardPanel(props: PatientDashboardPanelProps) {

    const patientProfile = await fetchPatientProfile(props?.user?.$id);

    return (
        <div>
            <Card className="overflow-hidden">

                <CardHeader className="flex flex-row items-start bg-muted/70">
                    <div className="grid gap-0.5">
                        <CardTitle className="group flex items-center gap-2 text-lg">
                            Your Profile
                        </CardTitle>
                        <CardDescription>
                            View your profile summary.
                        </CardDescription>
                    </div>
                    <div className="ml-auto flex items-center gap-1">
                        <DropdownMenu>
                            <DropdownMenuTrigger asChild>
                                <Button size="icon" variant="outline" className="h-8 w-8">
                                    <MoreVertical className="h-3.5 w-3.5"/>
                                    <span className="sr-only">More</span>
                                </Button>
                            </DropdownMenuTrigger>
                            <DropdownMenuContent align="end">
                                <DropdownMenuItem>Edit</DropdownMenuItem>
                                <DropdownMenuItem>Export</DropdownMenuItem>
                                <DropdownMenuSeparator/>
                                <DropdownMenuItem>Trash</DropdownMenuItem>
                            </DropdownMenuContent>
                        </DropdownMenu>
                    </div>
                </CardHeader>
                <CardContent className="p-6 text-sm">

                    {/* user avatar */}
                    <div className={"flex flex-col justify-center items-center pb-4"}>
                        <Avatar className={"w-24 h-24 text-medium"}>
                            <AvatarImage src={props.userProfile.avatarUrl} />
                            <AvatarFallback>{props.user.name?.substring(0, 2)?.toUpperCase()}</AvatarFallback>
                        </Avatar>
                    </div>

                    {/* patient information */}
                    <div className="grid gap-3">
                        <div className="font-semibold">Patient Information</div>
                        <dl className="grid gap-3">
                            <div className="flex items-center justify-between">
                                <dt className="text-muted-foreground">Patient name</dt>
                                <dd>{props.user.name}</dd>
                            </div>
                            <div className="flex items-center justify-between">
                                <dt className="text-muted-foreground">Email</dt>
                                <dd>
                                    <a href="mailto:">{props.user.email || "---"}</a>
                                </dd>
                            </div>
                            <div className="flex items-center justify-between">
                                <dt className="text-muted-foreground">Gender</dt>
                                <dd>{patientProfile.gender || "N/A"}</dd>
                            </div>
                            <div className="flex items-center justify-between">
                                <dt className="text-muted-foreground">Age</dt>
                                <dd>
                                    <a href="tel:">{patientProfile.age?.toUpperCase() || "N/A"}</a>
                                </dd>
                            </div>
                            <div className="flex items-center justify-between">
                                <dt className="text-muted-foreground">Location</dt>
                                <dd>{patientProfile.location?.toUpperCase() || "N/A"}</dd>
                            </div>
                            <div className="flex items-center justify-between">
                                <dt className="text-muted-foreground">Gender</dt>
                                <dd>{patientProfile.gender || "N/A"}</dd>
                            </div>
                        </dl>
                    </div>
                    <Separator className="my-4"/>

                    <div className="grid gap-3">
                        <div className="font-semibold">Medical History</div>
                        <ul className="grid gap-3">
                            <li className="flex items-center justify-between">
                                <span className="text-muted-foreground">Current Medication</span>
                                <span>{patientProfile.medicalConditions || "N/A"}</span>
                            </li>
                            <li className="flex items-center justify-between">
                                <span className="text-muted-foreground">Medical Conditions</span>
                                <span>{patientProfile.medicalConditions || "N/A"}</span>
                            </li>
                        </ul>
                    </div>
                    <Separator className="my-4"/>

                    <div className="grid gap-3">
                        <div className="font-semibold">Other Information</div>
                        <div className="flex items-center justify-between">
                            <dt className="text-muted-foreground">Relationship Status</dt>
                            <dd>{patientProfile.relationshipStatus?.toUpperCase() || "N/A"}</dd>
                        </div>
                        <div className="flex items-center justify-between">
                            <dt className="text-muted-foreground">Employment Status</dt>
                            <dd>{patientProfile.employmentStatus || "N/A"}</dd>
                        </div>
                        <div className="flex items-center justify-between">
                            <dt className="text-muted-foreground">Preferred Language</dt>
                            <dd>{patientProfile.preferredLanguage?.toUpperCase() || "SISWATI"}</dd>
                        </div>
                    </div>
                </CardContent>
                <CardFooter className="flex flex-row items-center border-t bg-muted/50 px-6 py-3">
                    <div className="text-xs text-muted-foreground">
                        Updated <time dateTime="2023-11-23">November 23, 2023</time>
                    </div>
                </CardFooter>
            </Card>
        </div>
    )
}