"use client";

import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle,
} from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Calendar, Clock, User, Trash2 } from "lucide-react";
import Link from "next/link";
import { useEffect, useState } from "react";
import {
    AlertDialog,
    AlertDialogAction,
    AlertDialogCancel,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import { disponibilidadeApi, Availability } from "@/services/disponibilidadeApi";
import { excecoesApi, Exception } from "@/services/excecoesApi";
import { toast } from "@/hooks/use-toast";

export default function PatientDashboard() {
    const [availability, setAvailability] = useState<Availability[]>([]);
    const [exceptions, setExceptions] = useState<Exception[]>([]);
    const [schedule, setSchedule] = useState<Record<string, { start: string; end: string }[]>>({});
    const [isLoading, setIsLoading] = useState(true);
    const [error, setError] = useState<string | null>(null);

    const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
    const [exceptionToDelete, setExceptionToDelete] = useState<string | null>(null);

    const formatTime = (time: string) => time.split(":").slice(0, 2).join(":");

    const weekdaysPT: Record<string, string> = {
        sunday: "Domingo",
        monday: "Segunda",
        tuesday: "Terça",
        wednesday: "Quarta",
        thursday: "Quinta",
        friday: "Sexta",
        saturday: "Sábado",
    };

    useEffect(() => {
        const fetchData = async () => {
            const doctorId = JSON.parse(localStorage.getItem("user_info") || "{}")?.id;;
            setIsLoading(true);
            setError(null);
            try {
                const [availabilityResponse, exceptionsResponse] = await Promise.all([
                    disponibilidadeApi.list(),
                    excecoesApi.list(),
                ]);

                const filteredAvailability = availabilityResponse.filter(
                    (disp) => disp.doctor_id === doctorId
                );
                setAvailability(filteredAvailability);

                const filteredExceptions = exceptionsResponse.filter(
                    (exc) => exc.doctor_id === doctorId
                );
                setExceptions(filteredExceptions);
            } catch (e: any) {
                setError("Não foi possível carregar os dados do dashboard.");
                console.error(e);
            } finally {
                setIsLoading(false);
            }
        };
        fetchData();
    }, []);

    const openDeleteDialog = (exceptionId: string) => {
        setExceptionToDelete(exceptionId);
        setDeleteDialogOpen(true);
    };

    const handleDeleteException = async (exceptionId: string) => {
        try {
            await excecoesApi.delete(exceptionId);
            toast({
                title: "Sucesso",
                description: "Exceção deletada com sucesso.",
            });
            setExceptions((prev) => prev.filter((ex) => ex.id !== exceptionId));
        } catch (e: any) {
            toast({
                title: "Erro",
                description: e?.message || "Não foi possível deletar a exceção.",
            });
        } finally {
            setDeleteDialogOpen(false);
            setExceptionToDelete(null);
        }
    };

    function formatAvailability(data: Availability[]) {
        const schedule = data.reduce(
            (acc: any, item) => {
                const { weekday, start_time, end_time } = item;
                if (!acc[weekday]) {
                    acc[weekday] = [];
                }
                acc[weekday].push({
                    start: start_time,
                    end: end_time,
                });
                return acc;
            },
            {} as Record<string, { start: string; end: string }[]>
        );
        return schedule;
    }

    useEffect(() => {
        if (availability) {
            const formatted = formatAvailability(availability);
            setSchedule(formatted);
        }
    }, [availability]);

    if (isLoading) {
        return <div>Carregando...</div>;
    }

    if (error) {
        return <div className="text-red-600">Erro: {error}</div>;
    }

    return (
        <div className="space-y-6">
            <div>
                <h1 className="text-3xl font-bold text-gray-900">Dashboard</h1>
                <p className="text-gray-600">Bem-vindo ao seu portal de consultas médicas</p>
            </div>

            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                <Card>
                    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                        <CardTitle className="text-sm font-medium">Próxima Consulta</CardTitle>
                        <Calendar className="h-4 w-4 text-muted-foreground" />
                    </CardHeader>
                    <CardContent>
                        <div className="text-2xl font-bold">02 out</div>
                        <p className="text-xs text-muted-foreground">Dr. Silva - 14:30</p>
                    </CardContent>
                </Card>

                <Card>
                    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                        <CardTitle className="text-sm font-medium">Consultas Este Mês</CardTitle>
                        <Clock className="h-4 w-4 text-muted-foreground" />
                    </CardHeader>
                    <CardContent>
                        <div className="text-2xl font-bold">4</div>
                        <p className="text-xs text-muted-foreground">4 agendadas</p>
                    </CardContent>
                </Card>

                <Card>
                    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                        <CardTitle className="text-sm font-medium">Perfil</CardTitle>
                        <User className="h-4 w-4 text-muted-foreground" />
                    </CardHeader>
                    <CardContent>
                        <div className="text-2xl font-bold">100%</div>
                        <p className="text-xs text-muted-foreground">Dados completos</p>
                    </CardContent>
                </Card>
            </div>

            <div className="grid md:grid-cols-2 gap-6">
                <Card>
                    <CardHeader>
                        <CardTitle>Ações Rápidas</CardTitle>
                        <CardDescription>Acesse rapidamente as principais funcionalidades</CardDescription>
                    </CardHeader>
                    <CardContent className="space-y-4">
                        <Link href="/doctor/medicos/consultas">
                            <Button className="w-full justify-start">
                                <Calendar className="mr-2 h-4 w-4" />
                                Ver Minhas Consultas
                            </Button>
                        </Link>
                    </CardContent>
                </Card>

                <Card>
                    <CardHeader>
                        <CardTitle>Próximas Consultas</CardTitle>
                        <CardDescription>Suas consultas agendadas</CardDescription>
                    </CardHeader>
                    <CardContent>
                        <div className="space-y-4">
                            <div className="flex items-center justify-between p-3 bg-blue-50 rounded-lg">
                                <div>
                                    <p className="font-medium">Dr. João Santos</p>
                                    <p className="text-sm text-gray-600">Cardiologia</p>
                                </div>
                                <div className="text-right">
                                    <p className="font-medium">02 out</p>
                                    <p className="text-sm text-gray-600">14:30</p>
                                </div>
                            </div>
                        </div>
                    </CardContent>
                </Card>
            </div>
            <div className="grid md:grid-cols-1 gap-6">
                <Card>
                    <CardHeader>
                        <CardTitle>Horário Semanal</CardTitle>
                        <CardDescription>Confira rapidamente a sua disponibilidade da semana</CardDescription>
                    </CardHeader>
                    <CardContent className="space-y-4 grid md:grid-cols-7 gap-2">
                        {Object.keys(schedule).length > 0 ? (
                            ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"].map((day) => {
                                const times = schedule[day] || [];
                                return (
                                    <div key={day} className="space-y-4">
                                        <div className="flex flex-col items-center justify-between p-3 bg-blue-50 rounded-lg">
                                            <div>
                                                <p className="font-medium capitalize">{weekdaysPT[day]}</p>
                                            </div>
                                            <div className="text-center">
                                                {times.length > 0 ? (
                                                    times.map((t, i) => (
                                                        <p key={i} className="text-sm text-gray-600">
                                                            {formatTime(t.start)} <br /> {formatTime(t.end)}
                                                        </p>
                                                    ))
                                                ) : (
                                                    <p className="text-sm text-gray-400 italic">Sem horário</p>
                                                )}
                                            </div>
                                        </div>
                                    </div>
                                );
                            })
                        ) : (
                            <p className="text-sm text-gray-400 italic col-span-7 text-center">Nenhum horário de disponibilidade encontrado.</p>
                        )}
                    </CardContent>
                </Card>
            </div>
            <div className="grid md:grid-cols-1 gap-6">
                <Card>
                    <CardHeader>
                        <CardTitle>Exceções</CardTitle>
                        <CardDescription>Bloqueios e liberações eventuais de agenda</CardDescription>
                    </CardHeader>

                    <CardContent className="space-y-4 grid md:grid-cols-7 gap-2">
                        {exceptions.length > 0 ? (
                            exceptions.map((ex) => {
                                const date = new Date(ex.date).toLocaleDateString("pt-BR", {
                                    weekday: "long",
                                    day: "2-digit",
                                    month: "long",
                                });
                                const startTime = formatTime(ex.start_time);
                                const endTime = formatTime(ex.end_time);

                                return (
                                    <div key={ex.id} className="space-y-4">
                                        <div className="flex flex-col items-center justify-between p-3 bg-blue-50 rounded-lg shadow-sm">
                                            <div className="text-center">
                                                <p className="font-semibold capitalize">{date}</p>
                                                <p className="text-sm text-gray-600">
                                                    {startTime} - {endTime} <br /> -
                                                </p>
                                            </div>
                                            <div className="text-center mt-2">
                                                <p className={`text-sm font-medium ${ex.kind === "bloqueio" ? "text-red-600" : "text-green-600"}`}>
                                                    {ex.kind === "bloqueio" ? "Bloqueio" : "Liberação"}
                                                </p>
                                                <p className="text-xs text-gray-500 italic">{ex.reason || "Sem motivo especificado"}</p>
                                            </div>
                                            <div>
                                                <Button className="text-red-600" variant="outline" onClick={() => openDeleteDialog(String(ex.id))}>
                                                    <Trash2 />
                                                </Button>
                                            </div>
                                        </div>
                                    </div>
                                );
                            })
                        ) : (
                            <p className="text-sm text-gray-400 italic col-span-7 text-center">Nenhuma exceção registrada.</p>
                        )}
                    </CardContent>
                </Card>
            </div>
            <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
                <AlertDialogContent>
                    <AlertDialogHeader>
                        <AlertDialogTitle>Confirmar exclusão</AlertDialogTitle>
                        <AlertDialogDescription>Tem certeza que deseja excluir esta exceção? Esta ação não pode ser desfeita.</AlertDialogDescription>
                    </AlertDialogHeader>
                    <AlertDialogFooter>
                        <AlertDialogCancel>Cancelar</AlertDialogCancel>
                        <AlertDialogAction onClick={() => exceptionToDelete && handleDeleteException(exceptionToDelete)} className="bg-red-600 hover:bg-red-700">
                            Excluir
                        </AlertDialogAction>
                    </AlertDialogFooter>
                </AlertDialogContent>
            </AlertDialog>
        </div>
    );
}