import type {Route} from "../../../.react-router/types/app/pages/dashboard/+types/PatientBooking";
import {useDisclosure} from "@mantine/hooks";
import {useEffect, useMemo, useState} from "react";
import {BookingCategory, DashboardPageType} from "~/utils/hms_enums.ts";
import {useNavigate, useOutletContext} from "react-router";
import {
    type OutletContextType,
    type PatientBookingInfo,
    type DoctorTeamInfo,
    SORT_SYMBOLS
} from "~/utils/models.ts";
import {Accordion, ActionIcon, Button, Card, Group, Pagination, Stack, Table, Text, Badge} from "@mantine/core";
import {apiGetPatientBookingList, get_team_info} from "~/utils/hms_api.ts";
import {showErrorMessage, timestampToDate} from "~/utils/utils.ts";
import {iconMStyle, marginLeftRight, marginRightBottom, marginRound, marginTopBottom, textCenter} from "~/styles.ts";
import PencilIcon from "mdi-react/PencilIcon";
import DeleteIcon from "mdi-react/DeleteIcon";
import InfoIcon from "mdi-react/InfoIcon";
import {
    confirmDeleteBooking,
    confirmEditOrCreateBooking,
    confirmViewTeamMembers
} from "~/components/subs/confirms.tsx";
import AddIcon from "mdi-react/AddIcon";
import {TruncatedText} from "~/components/subs/TruncatedText.tsx";
import { ResponsiveTableContainer } from "~/components/subs/ResponsiveTableContainer";

export function meta({}: Route.MetaArgs) {
    return [
        { title: "Patient Booking" },
        { name: "description", content: "Dashboard Patient Booking" },
    ];
}

export default function Component() {
    const navigate = useNavigate();
    const [refreshingBookingList, setRefreshingBookingList] = useState<boolean>(false);
    const [bookingInfo, setBookingInfo] = useState<{appointments: PatientBookingInfo[], total_pages: number}>({appointments: [], total_pages: 1});
    const [teamInfoMap, setTeamInfoMap] = useState<Map<number, DoctorTeamInfo>>(new Map());
    const [loadingTeams, setLoadingTeams] = useState<Set<number>>(new Set());

    const [sortKey, setSortKey] = useState<string>("");
    const [sortDesc, setSortDesc] = useState<boolean>(true);
    const [currPage, setCurrPage] = useState<number>(1);

    const { loginUserInfo, refreshMyInfo } = useOutletContext<OutletContextType>();

    useEffect(() => {
        refreshBookingList();
    }, []);

    useEffect(() => {
        refreshBookingList();
    }, [currPage]);

    const refreshBookingList = () => {
        setRefreshingBookingList(true);
        apiGetPatientBookingList(currPage).then(res => {
            if (!res.success) {
                showErrorMessage(res.message, "Failed to get appointments list");
                return;
            }
            setBookingInfo(res.data);

            // Fetch team info for all appointments with assigned teams
            const teamsToFetch = res.data.appointments
                .filter(app => app.assigned_team !== null)
                .map(app => app.assigned_team as number);
            
            // Remove duplicates
            const uniqueTeams = [...new Set(teamsToFetch)];
            
            // Fetch team info for each unique team ID
            uniqueTeams.forEach(teamId => {
                fetchTeamInfo(teamId);
            });
        })
        .catch(err => {})
        .finally(() => { setRefreshingBookingList(false); });
    };

    const fetchTeamInfo = (teamId: number) => {
        if (teamId === null || teamInfoMap.has(teamId) || loadingTeams.has(teamId)) {
            return;
        }

        setLoadingTeams(prev => new Set([...prev, teamId]));
        
        get_team_info(teamId).then(res => {
            if (res.success) {
                setTeamInfoMap(prev => {
                    const newMap = new Map(prev);
                    newMap.set(teamId, res.data.team);
                    return newMap;
                });
            }
        })
        .catch(err => {})
        .finally(() => {
            setLoadingTeams(prev => {
                const newSet = new Set(prev);
                newSet.delete(teamId);
                return newSet;
            });
        });
    };

    const handleViewTeam = (teamId: number) => {
        const teamInfo = teamInfoMap.get(teamId);
        if (teamInfo) {
            confirmViewTeamMembers(teamInfo);
        } else {
            // If team info is not fetched yet, fetch it and then show
            get_team_info(teamId).then(res => {
                if (res.success) {
                    setTeamInfoMap(prev => {
                        const newMap = new Map(prev);
                        newMap.set(teamId, res.data.team);
                        return newMap;
                    });
                    confirmViewTeamMembers({
                        ...res.data.team,
                        members: res.data.members
                    });
                } else {
                    showErrorMessage(res.message, "Failed to fetch team information");
                }
            }).catch(err => {
                showErrorMessage("Failed to fetch team information", "Error");
            });
        }
    };

    const handleSort = (key: string) => {
        if (sortKey === key) {
            setSortDesc(!sortDesc);
        } else {
            setSortKey(key);
            setSortDesc(false); // Default ascending
        }
    };

    const sortedBookings = useMemo(() => {
        let data = [...bookingInfo.appointments];

        if (!sortKey) return data;

        data.sort((a, b) => {
            const valA = a[sortKey];
            const valB = b[sortKey];
            
            if (typeof valA === 'string' && typeof valB === 'string') {
                const cmp = valA.localeCompare(valB);
                return sortDesc ? -cmp : cmp;
            }

            if (typeof valA === 'number' && typeof valB === 'number') {
                return sortDesc ? valB - valA : valA - valB;
            }

            if (typeof valA === 'boolean' && typeof valB === 'boolean') {
                return sortDesc ? (valB ? 1 : -1) : (valA ? 1 : -1);
            }
            
            return 0;
        });
        
        return data;
    }, [bookingInfo.appointments, sortKey, sortDesc]);

    const handleCreateBooking = () => {
        confirmEditOrCreateBooking(null, refreshBookingList);
    };

    const handleEditBooking = (booking: PatientBookingInfo) => {
        confirmEditOrCreateBooking(booking, refreshBookingList);
    };

    const handleDeleteBooking = (bookingId: number, category: string) => {
        confirmDeleteBooking(bookingId, category, refreshBookingList);
    };

    const getCategoryDisplay = (category: string) => {
        const key = Object.entries(BookingCategory).find(([_, value]) => value === category)?.[0];
        return key ? key.replace(/_/g, ' ') : category;
    };

    const getStatusBadge = (appointment: PatientBookingInfo) => {
        if (appointment.discharged) {
            return <Badge color="purple">Discharged</Badge>;
        } else if (appointment.admitted) {
            return <Badge color="blue">Admitted</Badge>;
        } else if (appointment.approved) {
            if (appointment.assigned_team === null) {
                return <Badge color="red">Rejected</Badge>;
            } else {
                return <Badge color="green">Approved</Badge>;
            }
        } else {
            return <Badge color="yellow">Pending</Badge>;
        }
    };

    const getTeamDisplay = (booking: PatientBookingInfo) => {
        if (!booking.approved) {
            return <Text size="sm" c="dimmed">Pending approval</Text>;
        }
        
        if (booking.assigned_team === null) {
            return <Text size="sm" c="dimmed">Not assigned</Text>;
        }
        
        const teamInfo = teamInfoMap.get(booking.assigned_team);
        if (!teamInfo) {
            return (
                <Group>
                    <Text>Team ID: {booking.assigned_team}</Text>
                    <ActionIcon 
                        onClick={() => handleViewTeam(booking.assigned_team as number)}
                        title="View team details"
                    >
                        <InfoIcon style={iconMStyle} />
                    </ActionIcon>
                </Group>
            );
        }
        
        return (
            <Group>
                <Text>{teamInfo.department.replace(/_/g, ' ')}</Text>
                <ActionIcon 
                    onClick={() => handleViewTeam(booking.assigned_team as number)}
                    title="View team details"
                >
                    <InfoIcon style={iconMStyle} />
                </ActionIcon>
            </Group>
        );
    };

    const rows = sortedBookings.map((booking) => (
        <Table.Tr key={booking.id}>
            <Table.Td>{booking.id}</Table.Td>
            <Table.Td>{getCategoryDisplay(booking.category)}</Table.Td>
            <Table.Td>{new Date(booking.appointment_time * 1000).toLocaleString('en-GB').replace(',', '')}</Table.Td>
            <Table.Td>
                <TruncatedText
                    text={booking.description}
                    title={`Description - Booking #${booking.id}`}
                />
            </Table.Td>
            <Table.Td>{getStatusBadge(booking)}</Table.Td>
            <Table.Td>
                {booking.feedback ? 
                    <TruncatedText
                        text={booking.feedback}
                        title={`Feedback - Booking #${booking.id}`}
                    /> : 
                    '-'
                }
            </Table.Td>
            <Table.Td>{getTeamDisplay(booking)}</Table.Td>
            <Table.Td>
                <Group>
                    {!booking.approved && (
                        <>
                            <ActionIcon onClick={() => handleEditBooking(booking)}>
                                <PencilIcon style={iconMStyle}/>
                            </ActionIcon>
                            <ActionIcon color="red" onClick={() => handleDeleteBooking(booking.id, booking.category)}>
                                <DeleteIcon style={iconMStyle}/>
                            </ActionIcon>
                        </>
                    )}
                    {booking.approved && (
                        <Text size="sm" c="dimmed">No actions available</Text>
                    )}
                </Group>
            </Table.Td>
        </Table.Tr>
    ));

    return (
        <Stack>
            <Group justify="space-between" align="center" style={marginLeftRight}>
                <Text size="1.5em" fw={700}>My Appointments</Text>
                <Button
                    leftSection={<AddIcon style={iconMStyle}/>}
                    onClick={handleCreateBooking}
                >Book Appointment</Button>
            </Group>

            <Card padding="lg" radius="md" withBorder style={marginTopBottom}>
                <Card.Section>
                    <ResponsiveTableContainer minWidth={600}>
                        <Table striped highlightOnHover withColumnBorders withTableBorder>
                            <Table.Thead>
                                <Table.Tr>
                                    <Table.Th onClick={() => handleSort("id")}>
                                        ID{" "}
                                        {sortKey === "id" && SORT_SYMBOLS[sortDesc ? "desc" : "asc"]}
                                    </Table.Th>
                                    <Table.Th onClick={() => handleSort("category")}>
                                        Category{" "}
                                        {sortKey === "category" && SORT_SYMBOLS[sortDesc ? "desc" : "asc"]}
                                    </Table.Th>
                                    <Table.Th onClick={() => handleSort("appointment_time")}>
                                        Appointment Time{" "}
                                        {sortKey === "appointment_time" && SORT_SYMBOLS[sortDesc ? "desc" : "asc"]}
                                    </Table.Th>
                                    <Table.Th>
                                        Description
                                    </Table.Th>
                                    <Table.Th onClick={() => handleSort("approved")}>
                                        Status{" "}
                                        {sortKey === "approved" && SORT_SYMBOLS[sortDesc ? "desc" : "asc"]}
                                    </Table.Th>
                                    <Table.Th>
                                        Feedback
                                    </Table.Th>
                                    <Table.Th>
                                        Assigned Team
                                    </Table.Th>
                                    <Table.Th>
                                        Actions
                                    </Table.Th>
                                </Table.Tr>
                            </Table.Thead>
                            <Table.Tbody>{rows}</Table.Tbody>
                        </Table>
                    </ResponsiveTableContainer>

                    <Pagination 
                        withEdges 
                        total={bookingInfo.total_pages} 
                        value={currPage} 
                        onChange={setCurrPage} 
                        mt="sm"
                        style={{justifyItems: "flex-end", ...marginRightBottom}}
                    />
                </Card.Section>
            </Card>
        </Stack>
    );
}