import {Tabs, TabsList, TabsTrigger} from "@/components/ui/tabs";
import {
    DropdownMenu, DropdownMenuCheckboxItem,
    DropdownMenuContent,
    DropdownMenuLabel,
    DropdownMenuSeparator,
    DropdownMenuTrigger
} from "@/components/ui/dropdown-menu";
import {Button} from "@/components/ui/button";
import {File, ListFilter} from "lucide-react";
import ClientsTab from "@/app/(admin)/admin/_components/tabs/clients";
import PatientsTab from "@/app/(admin)/admin/_components/tabs/patients";
import {ClientProfile, PatientProfile} from "@/lib/backend/appwrite_types";


type AdminDashboardTabsProps = {
    recent_clients: ClientProfile[] | null;
    recent_patients: PatientProfile[] | null;
}


export default function AdminDashboardTabs(props: AdminDashboardTabsProps) {
    return (
        <Tabs defaultValue="clients">
            <div className="flex items-center">
                <TabsList>
                    <TabsTrigger value="clients">Clients</TabsTrigger>
                    <TabsTrigger value="patients">Patients</TabsTrigger>
                </TabsList>
                <div className="ml-auto flex items-center gap-2">
                    <DropdownMenu>
                        <DropdownMenuTrigger asChild>
                            <Button
                                variant="outline"
                                size="sm"
                                className="h-7 gap-1 text-sm"
                            >
                                <ListFilter className="h-3.5 w-3.5"/>
                                <span className="sr-only sm:not-sr-only">Filter</span>
                            </Button>
                        </DropdownMenuTrigger>
                        <DropdownMenuContent align="end">
                            <DropdownMenuLabel>Filter by</DropdownMenuLabel>
                            <DropdownMenuSeparator/>
                            <DropdownMenuCheckboxItem checked>
                                Nurses
                            </DropdownMenuCheckboxItem>
                            <DropdownMenuCheckboxItem>
                                Doctors
                            </DropdownMenuCheckboxItem>
                            <DropdownMenuCheckboxItem>
                                Therapists
                            </DropdownMenuCheckboxItem>
                        </DropdownMenuContent>
                    </DropdownMenu>
                    <Button
                        size="sm"
                        variant="outline"
                        className="h-7 gap-1 text-sm"
                    >
                        <File className="h-3.5 w-3.5"/>
                        <span className="sr-only sm:not-sr-only">View All</span>
                    </Button>
                </div>
            </div>
            <ClientsTab clients={props.recent_clients}/>
            <PatientsTab patients={props.recent_patients}/>
        </Tabs>
    )
}