"use client";

import React, { useState, useEffect, useCallback, FormEvent } from "react";
import { useRouter, useParams } from "next/navigation";
import Link from "next/link";
import { medicosApi, Doctor } from "@/services/medicosApi";
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 { Textarea } from "@/components/ui/textarea";
import { Checkbox } from "@/components/ui/checkbox";
import { ArrowLeft, Save, Loader2 } from "lucide-react";

// Usaremos Partial<Doctor> para o formulário, pois nem todos os campos são obrigatórios na edição.
type DoctorFormData = Partial<Doctor>;

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

    const [formData, setFormData] = useState<DoctorFormData>({});
    const [isLoading, setIsLoading] = useState(true);
    const [isSubmitting, setIsSubmitting] = useState(false);
    const [error, setError] = useState<string | null>(null);
    const [isGuiaConvenio, setIsGuiaConvenio] = useState(false);
    const [validadeIndeterminada, setValidadeIndeterminada] = useState(false);

    const fetchDoctor = useCallback(async () => {
        if (!doctorId) {
            setError("ID do médico não fornecido.");
            setIsLoading(false);
            return;
        }
        setIsLoading(true);
        setError(null);
        try {
            const data = await medicosApi.getById(doctorId);
            if (data) {
                setFormData(data);
            } else {
                setError("Médico não encontrado.");
            }
        } catch (e) {
            console.error("Erro ao carregar dados do médico:", e);
            setError("Não foi possível carregar os dados do médico.");
        } finally {
            setIsLoading(false);
        }
    }, [doctorId]);

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

    const handleInputChange = (field: keyof DoctorFormData, value: string | boolean) => {
        setFormData((prev) => ({ ...prev, [field]: value }));
    };

    const handleSubmit = async (e: FormEvent) => {
        e.preventDefault();
        setIsSubmitting(true);
        setError(null);
        try {
            await medicosApi.update(doctorId, formData);
            router.push("/medicos"); // Redireciona para a lista após o sucesso
        } catch (e) {
            console.error("Erro ao atualizar médico:", e);
            setError("Não foi possível salvar as alterações. Tente novamente.");
        } finally {
            setIsSubmitting(false);
        }
    };

    if (isLoading) {
        return (
            <div className="p-8 text-center text-gray-500">
                <Loader2 className="w-8 h-8 animate-spin mx-auto mb-3 text-green-600" />
                Carregando dados do médico...
            </div>
        );
    }

    if (error) {
        return (
            <div className="p-8 text-center text-red-600">
                <p>{error}</p>
                <Link href="/medicos">
                    <Button variant="outline" className="mt-4">
                        <ArrowLeft className="w-4 h-4 mr-2" />
                        Voltar para a lista
                    </Button>
                </Link>
            </div>
        );
    }

    return (
        <div className="space-y-6">
            <div className="flex items-center gap-4">
                <Link href="/medicos">
                    <Button variant="ghost" size="sm">
                        <ArrowLeft className="w-4 h-4 mr-2" />
                        Voltar
                    </Button>
                </Link>
                <div>
                    <h1 className="text-2xl font-bold text-gray-900">Editar Médico</h1>
                    <p className="text-gray-600">Atualize as informações do médico</p>
                </div>
            </div>

            <form onSubmit={handleSubmit} className="space-y-8">
                <div className="bg-white rounded-lg border border-gray-200 p-6">
                    <h2 className="text-lg font-semibold text-gray-900 mb-6">Dados Pessoais</h2>
                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                        <div className="space-y-2">
                            <Label htmlFor="full_name">Nome *</Label>
                            <Input id="full_name" value={formData.full_name || ''} onChange={(e) => handleInputChange("full_name", e.target.value)} required />
                        </div>
                        <div className="space-y-2">
                            <Label htmlFor="cpf">CPF *</Label>
                            <Input id="cpf" value={formData.cpf || ''} onChange={(e) => handleInputChange("cpf", e.target.value)} placeholder="000.000.000-00" required />
                        </div>
                        <div className="space-y-2">
                            <Label htmlFor="rg">RG</Label>
                            <Input id="rg" value={formData.rg || ''} onChange={(e) => handleInputChange("rg", e.target.value)} placeholder="00.000.000-0" />
                        </div>
                        {/* Outros campos do formulário seguem o mesmo padrão, usando formData.nome_da_coluna */}
                    </div>
                </div>

                {/* Outras seções do formulário (Profissional, Contato, etc.) */}
                {/* Omitido para brevidade, mas a lógica de value e onChange deve seguir o padrão acima */}

                <div className="flex justify-end gap-4">
                    <Link href="/medicos">
                        <Button type="button" variant="outline" disabled={isSubmitting}>
                            Cancelar
                        </Button>
                    </Link>
                    <Button type="submit" className="bg-green-600 hover:bg-green-700" disabled={isSubmitting}>
                        {isSubmitting ? (
                            <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                        ) : (
                            <Save className="w-4 h-4 mr-2" />
                        )}
                        Salvar Alterações
                    </Button>
                </div>
            </form>
        </div>
    );
}