"use client";

import { useParams, useRouter } from "next/navigation";
import { useState, useEffect } from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { Checkbox } from "@/components/ui/checkbox";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
import { Calendar } from "@/components/ui/calendar";
import { CalendarIcon, Clock, User, Trash2 } from "lucide-react";
import { format } from "date-fns";
import TiptapEditor from "@/components/ui/tiptap-editor";
import { Skeleton } from "@/components/ui/skeleton";
import { toast } from "@/hooks/use-toast";
import Link from "next/link";

// [CORREÇÃO] Adicionando a importação que faltava para o AlertDialog
import {
    AlertDialog,
    AlertDialogAction,
    AlertDialogCancel,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogTitle,
} from "@/components/ui/alert-dialog";

// [TIPAGEM] Importando tipos da camada de serviço
import { relatoriosApi, Report } from "@/services/relatoriosApi";
import { disponibilidadeApi, Availability } from "@/services/disponibilidadeApi";
import { excecoesApi, Exception } from "@/services/excecoesApi";

export default function EditarLaudoPage() {
    const router = useRouter();
    const params = useParams();
    const patientId = params.id as string;
    const laudoId = params.laudoId as string;

    // [ESTADO] & [TIPAGEM] Estados robustos e tipados
    const [formData, setFormData] = useState<Partial<Report>>({});
    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 [isSubmitting, setIsSubmitting] = useState(false);
    
    const [isDatePickerOpen, setIsDatePickerOpen] = useState(false);
    const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
    const [exceptionToDelete, setExceptionToDelete] = useState<string | null>(null);

    const formatTime = (time: string) => (time ? 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",
    };

    // [API] & [ESTADO] Lógica de busca de dados centralizada e robusta
    useEffect(() => {
        if (!laudoId) {
            setIsLoading(false);
            setError("ID do laudo não encontrado.");
            return;
        }

        const fetchData = async () => {
            setIsLoading(true);
            setError(null);
            try {
                // TODO: Remover ID fixo e obter do usuário logado
                const doctorId = "3bb9ee4a-cfdd-4d81-b628-383907dfa225";

                const [reportData, availabilityResponse, exceptionsResponse] = await Promise.all([
                    relatoriosApi.getById(laudoId),
                    disponibilidadeApi.list(),
                    excecoesApi.list(),
                ]);

                if (reportData) {
                    setFormData({
                        ...reportData,
                        due_at: reportData.due_at ? new Date(reportData.due_at) : null,
                    });
                } else {
                    throw new Error("Laudo não encontrado.");
                }

                setAvailability(availabilityResponse.filter(disp => disp.doctor_id === doctorId));
                setExceptions(exceptionsResponse.filter(exc => exc.doctor_id === doctorId));

            } catch (e: any) {
                setError("Falha ao carregar os dados. Por favor, tente novamente.");
                console.error("Failed to fetch data:", e);
            } finally {
                setIsLoading(false);
            }
        };

        fetchData();
    }, [laudoId]);

    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((p) => p.id !== exceptionId));
        } catch (e: any) {
            toast({
                title: "Erro",
                description: e?.message || "Não foi possível deletar a exceção.",
                variant: "destructive",
            });
        } finally {
            setDeleteDialogOpen(false);
            setExceptionToDelete(null);
        }
    };

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

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

    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
        const { id, value } = e.target;
        setFormData((prev) => ({ ...prev, [id]: value }));
    };

    const handleSelectChange = (id: string, value: string) => {
        setFormData((prev) => ({ ...prev, [id]: value }));
    };

    const handleCheckboxChange = (id: string, checked: boolean) => {
        setFormData((prev) => ({ ...prev, [id]: checked }));
    };
    
    const handleDateSelect = (date: Date | undefined) => {
        if (date) {
            setFormData((prev) => ({ ...prev, due_at: date }));
        }
        setIsDatePickerOpen(false);
    };

    const handleEditorChange = (html: string, json: object) => {
        setFormData((prev) => ({ 
            ...prev, 
            content_html: html,
            content_json: json 
        }));
    };

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        setIsSubmitting(true);
        try {
            const { id, patient_id, created_at, updated_at, created_by, updated_by, ...updateData } = formData;
            await relatoriosApi.update(laudoId, updateData);
            toast({ title: "Laudo atualizado com sucesso!" });
            router.push(`/doctor/medicos/${patientId}/laudos`);
        } catch (error) {
            console.error("Failed to update laudo", error);
            toast({ title: "Erro ao atualizar laudo", variant: "destructive" });
        } finally {
            setIsSubmitting(false);
        }
    };

    // [UI] Feedback Visual
    if (isLoading) {
        return (
            <div className="container mx-auto p-4">
                <Card>
                    <CardHeader><Skeleton className="h-8 w-1/4" /></CardHeader>
                    <CardContent className="space-y-6">
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div className="space-y-2"><Skeleton className="h-4 w-1/6" /><Skeleton className="h-10 w-full" /></div>
                            <div className="space-y-2"><Skeleton className="h-4 w-1/6" /><Skeleton className="h-10 w-full" /></div>
                        </div>
                        <div className="space-y-2"><Skeleton className="h-4 w-1/6" /><Skeleton className="h-40 w-full" /></div>
                        <div className="flex justify-end space-x-2"><Skeleton className="h-10 w-24" /><Skeleton className="h-10 w-24" /></div>
                    </CardContent>
                </Card>
            </div>
        );
    }

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

    return (
        <div className="container mx-auto p-4">
            <Card>
                <CardHeader>
                    <CardTitle>Editar Laudo - {formData.order_number}</CardTitle>
                </CardHeader>
                <CardContent>
                    <form onSubmit={handleSubmit} className="space-y-6">
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div className="space-y-2">
                                <Label htmlFor="order_number">Nº do Pedido</Label>
                                <Input id="order_number" value={formData.order_number || ''} onChange={handleInputChange} />
                            </div>
                            <div className="space-y-2">
                                <Label htmlFor="exam">Exame</Label>
                                <Input id="exam" value={formData.exam || ''} onChange={handleInputChange} />
                            </div>
                            <div className="space-y-2">
                                <Label htmlFor="diagnosis">Diagnóstico</Label>
                                <Input id="diagnosis" value={formData.diagnosis || ''} onChange={handleInputChange} />
                            </div>
                            <div className="space-y-2">
                                <Label htmlFor="cid_code">Código CID</Label>
                                <Input id="cid_code" value={formData.cid_code || ''} onChange={handleInputChange} />
                            </div>
                                <div className="space-y-2">
                                <Label htmlFor="requested_by">Solicitado Por</Label>
                                <Input id="requested_by" value={formData.requested_by || ''} onChange={handleInputChange} />
                            </div>
                            <div className="space-y-2">
                                <Label htmlFor="status">Status</Label>
                                <Select onValueChange={(value) => handleSelectChange("status", value)} value={formData.status}>
                                    <SelectTrigger>
                                        <SelectValue placeholder="Selecione o status" />
                                    </SelectTrigger>
                                    <SelectContent>
                                        <SelectItem value="draft">Rascunho</SelectItem>
                                        <SelectItem value="final">Finalizado</SelectItem>
                                    </SelectContent>
                                </Select>
                            </div>
                                <div className="space-y-2">
                                <Label htmlFor="due_at">Data de Vencimento</Label>
                                <Dialog open={isDatePickerOpen} onOpenChange={setIsDatePickerOpen}>
                                    <DialogTrigger asChild>
                                        <Button variant={"outline"} className="w-full justify-start text-left font-normal">
                                            <CalendarIcon className="mr-2 h-4 w-4" />
                                            {formData.due_at ? format(new Date(formData.due_at), "PPP") : <span>Escolha uma data</span>}
                                        </Button>
                                    </DialogTrigger>
                                    <DialogContent className="w-auto p-0">
                                        <Calendar
                                            mode="single"
                                            selected={formData.due_at ? new Date(formData.due_at) : undefined}
                                            onSelect={handleDateSelect}
                                            initialFocus
                                        />
                                    </DialogContent>
                                </Dialog>
                            </div>
                        </div>
                        
                        <div className="space-y-2">
                            <Label htmlFor="conclusion">Conclusão</Label>
                            <Textarea id="conclusion" value={formData.conclusion || ''} onChange={handleInputChange} />
                        </div>

                        <div className="space-y-2">
                            <Label>Conteúdo do Laudo</Label>
                            <div className="rounded-md border border-input">
                                <TiptapEditor content={formData.content_html || ''} onChange={handleEditorChange} />
                            </div>
                        </div>

                        <div className="flex items-center space-x-4">
                            <div className="flex items-center space-x-2">
                                <Checkbox id="hide_date" checked={formData.hide_date} onCheckedChange={(checked) => handleCheckboxChange("hide_date", !!checked)} />
                                <Label htmlFor="hide_date">Ocultar Data</Label>
                            </div>
                            <div className="flex items-center space-x-2">
                                <Checkbox id="hide_signature" checked={formData.hide_signature} onCheckedChange={(checked) => handleCheckboxChange("hide_signature", !!checked)} />
                                <Label htmlFor="hide_signature">Ocultar Assinatura</Label>
                            </div>
                        </div>

                        <div className="flex justify-end space-x-2">
                            <Button type="button" variant="outline" onClick={() => router.back()} disabled={isSubmitting}>
                                Cancelar
                            </Button>
                            <Button type="submit" disabled={isSubmitting}>
                                {isSubmitting ? "Salvando..." : "Salvar Alterações"}
                            </Button>
                        </div>
                    </form>
                </CardContent>
            </Card>

            <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>
    );
}