"use client";

import { useState, useEffect } from "react";
import Link from "next/link";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { disponibilidadeApi, Availability } from "@/services/disponibilidadeApi";
import { toast } from "@/hooks/use-toast";
import { useRouter } from "next/navigation";

export default function AvailabilityPage() {
    const [availabilities, setAvailabilities] = useState<Availability[]>([]);
    const [isLoading, setIsLoading] = useState(true);
    const [error, setError] = useState<string | null>(null);
    const [isSubmitting, setIsSubmitting] = useState(false);
    const [modalidadeConsulta, setModalidadeConsulta] = useState<string>("");
    const router = useRouter();

    // TODO: Substituir pelo ID do médico autenticado
    const doctorIdTemp = "3bb9ee4a-cfdd-4d81-b628-383907dfa225";

    useEffect(() => {
        const fetchData = async () => {
            setIsLoading(true);
            setError(null);
            try {
                const response = await disponibilidadeApi.list();
                setAvailabilities(response || []);
            } catch (e: any) {
                setError("Não foi possível carregar as disponibilidades existentes.");
                console.error(e);
            } finally {
                setIsLoading(false);
            }
        };

        fetchData();
    }, []);

    const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault();
        if (isSubmitting) return;
        setIsSubmitting(true);
        setError(null);

        const formData = new FormData(e.currentTarget);
        const apiPayload = {
            doctor_id: doctorIdTemp,
            created_by: doctorIdTemp, // TODO: Substituir pelo ID do usuário autenticado
            weekday: (formData.get("weekday") as string) || undefined,
            start_time: (formData.get("horarioEntrada") as string) || undefined,
            end_time: (formData.get("horarioSaida") as string) || undefined,
            slot_minutes: Number(formData.get("duracaoConsulta")) || undefined,
            appointment_type: modalidadeConsulta || undefined,
            active: true,
        };

        try {
            await disponibilidadeApi.create(apiPayload as Omit<Availability, 'id'>);
            toast({
                title: "Sucesso",
                description: "Disponibilidade cadastrada com sucesso.",
            });
            router.push("/doctor/dashboard"); // Redirecionar para uma página de listagem ou dashboard
        } catch (err: any) {
            setError(err?.message || "Não foi possível cadastrar a disponibilidade.");
            toast({
                title: "Erro",
                description: err?.message || "Não foi possível cadastrar a disponibilidade.",
                variant: "destructive",
            });
        } finally {
            setIsSubmitting(false);
        }
    };

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

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

    return (
        <div className="space-y-6">
            <div className="flex items-center justify-between">
                <div>
                    <h1 className="text-2xl font-bold text-gray-900">Definir Disponibilidade</h1>
                    <p className="text-gray-600">Defina sua disponibilidade para consultas</p>
                </div>
            </div>

            <form className="space-y-6" onSubmit={handleSubmit}>
                <div className="bg-white rounded-lg border border-gray-200 p-6">
                    <h2 className="text-lg font-semibold text-gray-900 mb-6">Dados</h2>

                    <div className="space-y-6">
                        <div className="grid md:grid-cols-3 gap-4">
                            <div>
                                <Label className="text-sm font-medium text-gray-700">Dia Da Semana</Label>
                                <div className="flex gap-4 mt-2 flex-nowrap">
                                    <label className="flex items-center gap-2">
                                        <input type="radio" name="weekday" value="monday" className="text-blue-600" />
                                        <span className="whitespace-nowrap text-sm">Segunda-Feira</span>
                                    </label>
                                    <label className="flex items-center gap-2">
                                        <input type="radio" name="weekday" value="tuesday" className="text-blue-600" />
                                        <span className="whitespace-nowrap text-sm">Terça-Feira</span>
                                    </label>
                                    <label className="flex items-center gap-2">
                                        <input type="radio" name="weekday" value="wednesday" className="text-blue-600" />
                                        <span className="whitespace-nowrap text-sm">Quarta-Feira</span>
                                    </label>
                                    <label className="flex items-center gap-2">
                                        <input type="radio" name="weekday" value="thursday" className="text-blue-600" />
                                        <span className="whitespace-nowrap text-sm">Quinta-Feira</span>
                                    </label>
                                    <label className="flex items-center gap-2">
                                        <input type="radio" name="weekday" value="friday" className="text-blue-600" />
                                        <span className="whitespace-nowrap text-sm">Sexta-Feira</span>
                                    </label>
                                    <label className="flex items-center gap-2">
                                        <input type="radio" name="weekday" value="saturday" className="text-blue-600" />
                                        <span className="whitespace-nowrap text-sm">Sábado</span>
                                    </label>
                                    <label className="flex items-center gap-2">
                                        <input type="radio" name="weekday" value="sunday" className="text-blue-600" />
                                        <span className="whitespace-nowrap text-sm">Domingo</span>
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div className="grid md:grid-cols-5 gap-6">
                            <div>
                                <Label htmlFor="horarioEntrada" className="text-sm font-medium text-gray-700">
                                    Horário De Entrada
                                </Label>
                                <Input type="time" id="horarioEntrada" name="horarioEntrada" required className="mt-1" />
                            </div>
                            <div>
                                <Label htmlFor="horarioSaida" className="text-sm font-medium text-gray-700">
                                    Horário De Saída
                                </Label>
                                <Input type="time" id="horarioSaida" name="horarioSaida" required className="mt-1" />
                            </div>
                            <div>
                                <Label htmlFor="duracaoConsulta" className="text-sm font-medium text-gray-700">
                                    Duração Da Consulta (min)
                                </Label>
                                <Input type="number" id="duracaoConsulta" name="duracaoConsulta" required className="mt-1" />
                            </div>
                        </div>

                        <div>
                            <Label htmlFor="modalidadeConsulta" className="text-sm font-medium text-gray-700">
                                Modalidade De Consulta
                            </Label>
                            <Select onValueChange={(value) => setModalidadeConsulta(value)} value={modalidadeConsulta}>
                                <SelectTrigger className="mt-1">
                                    <SelectValue placeholder="Selecione" />
                                </SelectTrigger>
                                <SelectContent>
                                    <SelectItem value="presencial">Presencial</SelectItem>
                                    <SelectItem value="telemedicina">Telemedicina</SelectItem>
                                </SelectContent>
                            </Select>
                        </div>
                    </div>
                </div>

                <div className="flex justify-end gap-4">
                    <Link href="/doctor/disponibilidade/excecoes">
                        <Button variant="outline">Adicionar Exceção</Button>
                    </Link>
                    <Link href="/doctor/dashboard">
                        <Button variant="outline">Cancelar</Button>
                    </Link>
                    <Button type="submit" className="bg-green-600 hover:bg-green-700" disabled={isSubmitting}>
                        {isSubmitting ? "Salvando..." : "Salvar Disponibilidade"}
                    </Button>
                </div>
            </form>
        </div>
    );
}