"use client";

import { useState } from "react";
import { useParams, useRouter } from "next/navigation";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } 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 { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Calendar } from "@/components/ui/calendar";
import { CalendarIcon } from "lucide-react";
import { format } from "date-fns";
import TiptapEditor from "@/components/ui/tiptap-editor";
import { relatoriosApi, Report } from "@/services/relatoriosApi";
import { toast } from "@/hooks/use-toast";

// Definindo o tipo para a criação de um relatório, omitindo o 'id' que é gerado pelo banco.
type ReportInput = Omit<Report, 'id'>;

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

    const [formData, setFormData] = useState<Partial<ReportInput>>({
        order_number: "",
        exam: "",
        diagnosis: "",
        conclusion: "",
        cid_code: "",
        content_html: "",
        content_json: {},
        status: "draft",
        requested_by: "",
        due_at: new Date().toISOString(),
        hide_date: false,
        hide_signature: false,
    });
    const [isSubmitting, setIsSubmitting] = useState(false);
    const [error, setError] = useState<string | null>(null);

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

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

    const handleCheckboxChange = (id: string, checked: boolean) => {
        setFormData((prev: Partial<ReportInput>) => ({ ...prev, [id]: checked }));
    };
    
    const handleDateChange = (date: Date | undefined) => {
        if (date) {
            setFormData((prev: Partial<ReportInput>) => ({ ...prev, due_at: date.toISOString() }));
        }
    };

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

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        setIsSubmitting(true);
        setError(null);
        try {
            const laudoData = {
                ...formData,
                patient_id: patientId,
            } as ReportInput;
            
            await relatoriosApi.create(laudoData);
            
            toast({ 
                title: "Sucesso!",
                description: "Laudo criado com sucesso." 
            });
            
            router.push(`/doctor/pacientes/${patientId}/laudos`);
        } catch (error: any) {
            const errorMessage = error.message || "Não foi possível criar o laudo. Tente novamente.";
            setError(errorMessage);
            toast({ 
                title: "Erro ao criar laudo", 
                description: errorMessage, 
                variant: "destructive" 
            });
        } finally {
            setIsSubmitting(false);
        }
    };

    return (
        <div className="container mx-auto p-4">
            <Card>
                <CardHeader>
                    <CardTitle>Criar Novo Laudo</CardTitle>
                </CardHeader>
                <CardContent>
                    <form onSubmit={handleSubmit} className="space-y-6">
                        {error && <p className="text-red-500 text-center font-medium">{error}</p>}
                        <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)} defaultValue={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>
                                 <Popover>
                                    <PopoverTrigger 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>
                                    </PopoverTrigger>
                                    <PopoverContent className="w-auto p-0">
                                        <Calendar mode="single" selected={formData.due_at ? new Date(formData.due_at) : undefined} onSelect={handleDateChange} initialFocus />
                                    </PopoverContent>
                                </Popover>
                            </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 Laudo"}
                            </Button>
                        </div>
                    </form>
                </CardContent>
            </Card>
        </div>
    );
}