"use client"

import { useState } from "react"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { Label } from "@/components/ui/label"
import { Card, CardContent, CardHeader } from "@/components/ui/card"

export function DoctorRegistrationForm() {
  const [formData, setFormData] = useState({
    nome: "",
    crm: "",
    especialidade: "",
    email: "",
    celular: "",
    cpf: "",
    dataNascimento: "",
    cep: "",
    logradouro: "",
    numero: "",
    bairro: "",
    cidade: "",
    estado: "",
    observacoes: "",
  })
  const [errors, setErrors] = useState({})

  const handleInputChange = (field, value) => {
    setFormData((prev) => ({ ...prev, [field]: value }))
  }

  const validateForm = () => {
    const newErrors = {}
    if (!formData.nome.trim()) newErrors.nome = "Nome é obrigatório"
    if (!formData.crm.trim()) newErrors.crm = "CRM é obrigatório"
    if (!formData.especialidade.trim()) newErrors.especialidade = "Especialidade é obrigatória"
    if (!formData.email.trim()) newErrors.email = "E-mail é obrigatório"
    if (!formData.celular.trim()) newErrors.celular = "Celular é obrigatório"
    if (!formData.cpf.trim()) newErrors.cpf = "CPF é obrigatório"
    if (!formData.dataNascimento.trim()) newErrors.dataNascimento = "Data de nascimento é obrigatória"
    if (!formData.cep.trim()) newErrors.cep = "CEP é obrigatório"
    if (!formData.logradouro.trim()) newErrors.logradouro = "Logradouro é obrigatório"
    if (!formData.numero.trim()) newErrors.numero = "Número é obrigatório"
    if (!formData.bairro.trim()) newErrors.bairro = "Bairro é obrigatório"
    if (!formData.cidade.trim()) newErrors.cidade = "Cidade é obrigatória"
    if (!formData.estado.trim()) newErrors.estado = "Estado é obrigatório"
    setErrors(newErrors)
    return Object.keys(newErrors).length === 0
  }

  const handleSubmit = (e) => {
    e.preventDefault()
    if (!validateForm()) return
    // Aqui você pode chamar a API para salvar o médico
    alert("Médico cadastrado com sucesso!")
  }

  return (
    <form onSubmit={handleSubmit} className="space-y-6">
      <Card>
        <CardHeader>
          <h2 className="text-lg font-semibold">Dados do Médico</h2>
        </CardHeader>
        <CardContent className="space-y-4">
          <div>
            <Label htmlFor="nome">Nome</Label>
            <Input id="nome" value={formData.nome} onChange={e => handleInputChange("nome", e.target.value)} />
            {errors.nome && <p className="text-sm text-destructive">{errors.nome}</p>}
          </div>
          <div>
            <Label htmlFor="crm">CRM</Label>
            <Input id="crm" value={formData.crm} onChange={e => handleInputChange("crm", e.target.value)} />
            {errors.crm && <p className="text-sm text-destructive">{errors.crm}</p>}
          </div>
          <div>
            <Label htmlFor="especialidade">Especialidade</Label>
            <Input id="especialidade" value={formData.especialidade} onChange={e => handleInputChange("especialidade", e.target.value)} />
            {errors.especialidade && <p className="text-sm text-destructive">{errors.especialidade}</p>}
          </div>
          <div>
            <Label htmlFor="email">E-mail</Label>
            <Input id="email" value={formData.email} onChange={e => handleInputChange("email", e.target.value)} />
            {errors.email && <p className="text-sm text-destructive">{errors.email}</p>}
          </div>
          <div>
            <Label htmlFor="celular">Celular</Label>
            <Input id="celular" value={formData.celular} onChange={e => handleInputChange("celular", e.target.value)} />
            {errors.celular && <p className="text-sm text-destructive">{errors.celular}</p>}
          </div>
          <div>
            <Label htmlFor="cpf">CPF</Label>
            <Input id="cpf" value={formData.cpf} onChange={e => handleInputChange("cpf", e.target.value)} />
            {errors.cpf && <p className="text-sm text-destructive">{errors.cpf}</p>}
          </div>
          <div>
            <Label htmlFor="dataNascimento">Data de Nascimento</Label>
            <Input id="dataNascimento" type="date" value={formData.dataNascimento} onChange={e => handleInputChange("dataNascimento", e.target.value)} />
            {errors.dataNascimento && <p className="text-sm text-destructive">{errors.dataNascimento}</p>}
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <h2 className="text-lg font-semibold">Endereço</h2>
        </CardHeader>
        <CardContent className="space-y-4">
          <div>
            <Label htmlFor="cep">CEP</Label>
            <Input id="cep" value={formData.cep} onChange={e => handleInputChange("cep", e.target.value)} />
            {errors.cep && <p className="text-sm text-destructive">{errors.cep}</p>}
          </div>
          <div>
            <Label htmlFor="logradouro">Logradouro</Label>
            <Input id="logradouro" value={formData.logradouro} onChange={e => handleInputChange("logradouro", e.target.value)} />
            {errors.logradouro && <p className="text-sm text-destructive">{errors.logradouro}</p>}
          </div>
          <div>
            <Label htmlFor="numero">Número</Label>
            <Input id="numero" value={formData.numero} onChange={e => handleInputChange("numero", e.target.value)} />
            {errors.numero && <p className="text-sm text-destructive">{errors.numero}</p>}
          </div>
          <div>
            <Label htmlFor="bairro">Bairro</Label>
            <Input id="bairro" value={formData.bairro} onChange={e => handleInputChange("bairro", e.target.value)} />
            {errors.bairro && <p className="text-sm text-destructive">{errors.bairro}</p>}
          </div>
          <div>
            <Label htmlFor="cidade">Cidade</Label>
            <Input id="cidade" value={formData.cidade} onChange={e => handleInputChange("cidade", e.target.value)} />
            {errors.cidade && <p className="text-sm text-destructive">{errors.cidade}</p>}
          </div>
          <div>
            <Label htmlFor="estado">Estado</Label>
            <Input id="estado" value={formData.estado} onChange={e => handleInputChange("estado", e.target.value)} />
            {errors.estado && <p className="text-sm text-destructive">{errors.estado}</p>}
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <h2 className="text-lg font-semibold">Observações</h2>
        </CardHeader>
        <CardContent>
          <Label htmlFor="observacoes">Observações</Label>
          <Input id="observacoes" value={formData.observacoes} onChange={e => handleInputChange("observacoes", e.target.value)} />
        </CardContent>
      </Card>

      <div className="flex justify-end gap-2">
        <Button type="button" variant="outline">Cancelar</Button>
        <Button type="submit">Cadastrar Médico</Button>
      </div>
    </form>
  )
}