"use client"

import { useState, useEffect, useCallback } from "react"
import { Calendar, Clock, User } from "lucide-react"
import PatientLayout from "@/components/patient-layout"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
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 { doctorsService } from "services/doctorsApi.mjs"

interface Doctor {
  id: string
  full_name: string
  specialty: string
  phone_mobile: string
}

const APPOINTMENTS_STORAGE_KEY = "clinic-appointments"

export default function ScheduleAppointment() {
  const [selectedDoctor, setSelectedDoctor] = useState("")
  const [selectedDate, setSelectedDate] = useState("")
  const [selectedTime, setSelectedTime] = useState("")
  const [notes, setNotes] = useState("")

  // novos campos
  const [tipoConsulta, setTipoConsulta] = useState("presencial")
  const [duracao, setDuracao] = useState("30")
  const [convenio, setConvenio] = useState("")
  const [queixa, setQueixa] = useState("")
  const [obsPaciente, setObsPaciente] = useState("")
  const [obsInternas, setObsInternas] = useState("")

  const [doctors, setDoctors] = useState<Doctor[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

  const fetchDoctors = useCallback(async () => {
    setLoading(true)
    setError(null)
    try {
      const data: Doctor[] = await doctorsService.list()
      setDoctors(data || [])
    } catch (e: any) {
      console.error("Erro ao carregar lista de médicos:", e)
      setError("Não foi possível carregar a lista de médicos. Verifique a conexão com a API.")
      setDoctors([])
    } finally {
      setLoading(false)
    }
  }, [])

  useEffect(() => {
    fetchDoctors()
  }, [fetchDoctors])

  const availableTimes = [
    "08:00",
    "08:30",
    "09:00",
    "09:30",
    "10:00",
    "10:30",
    "14:00",
    "14:30",
    "15:00",
    "15:30",
    "16:00",
    "16:30",
  ]

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()

    const doctorDetails = doctors.find((d) => d.id === selectedDoctor)
    const patientDetails = {
      id: "P001",
      full_name: "Paciente Exemplo Único",
      location: "Clínica Geral",
      phone: "(11) 98765-4321",
    }

    if (!patientDetails || !doctorDetails) {
      alert("Erro: Selecione o médico ou dados do paciente indisponíveis.")
      return
    }

    const newAppointment = {
      id: new Date().getTime(),
      patientName: patientDetails.full_name,
      doctor: doctorDetails.full_name,
      specialty: doctorDetails.specialty,
      date: selectedDate,
      time: selectedTime,
      tipoConsulta,
      duracao,
      convenio,
      queixa,
      obsPaciente,
      obsInternas,
      notes,
      status: "agendada",
      phone: patientDetails.phone,
    }

    const storedAppointmentsRaw = localStorage.getItem(APPOINTMENTS_STORAGE_KEY)
    const currentAppointments = storedAppointmentsRaw ? JSON.parse(storedAppointmentsRaw) : []
    const updatedAppointments = [...currentAppointments, newAppointment]
    localStorage.setItem(APPOINTMENTS_STORAGE_KEY, JSON.stringify(updatedAppointments))

    alert(`Consulta com ${doctorDetails.full_name} agendada com sucesso!`)

    // resetar campos
    setSelectedDoctor("")
    setSelectedDate("")
    setSelectedTime("")
    setNotes("")
    setTipoConsulta("presencial")
    setDuracao("30")
    setConvenio("")
    setQueixa("")
    setObsPaciente("")
    setObsInternas("")
  }

  return (
    <PatientLayout>
      <div className="space-y-6">
        <div>
          <h1 className="text-3xl font-bold text-gray-900">Agendar Consulta</h1>
          <p className="text-gray-600">Escolha o médico, data e horário para sua consulta</p>
        </div>

        <div className="grid lg:grid-cols-3 gap-6">
          <div className="lg:col-span-2">
            <Card>
              <CardHeader>
                <CardTitle>Dados da Consulta</CardTitle>
                <CardDescription>Preencha as informações para agendar sua consulta</CardDescription>
              </CardHeader>
              <CardContent>
                <form onSubmit={handleSubmit} className="space-y-6">


                  {/* Médico */}
                  <div className="space-y-2">
                    <Label htmlFor="doctor">Médico</Label>
                    <Select value={selectedDoctor} onValueChange={setSelectedDoctor}>
                      <SelectTrigger>
                        <SelectValue placeholder="Selecione um médico" />
                      </SelectTrigger>
                      <SelectContent>
                        {loading ? (
                          <SelectItem value="loading" disabled>
                            Carregando médicos...
                          </SelectItem>
                        ) : error ? (
                          <SelectItem value="error" disabled>
                            Erro ao carregar
                          </SelectItem>
                        ) : (
                          doctors.map((doctor) => (
                            <SelectItem key={doctor.id} value={doctor.id}>
                              {doctor.full_name} - {doctor.specialty}
                            </SelectItem>
                          ))
                        )}
                      </SelectContent>
                    </Select>
                  </div>

                  {/* Data e horário */}
                  <div className="grid md:grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <Label htmlFor="date">Data</Label>
                      <Input
                        id="date"
                        type="date"
                        value={selectedDate}
                        onChange={(e) => setSelectedDate(e.target.value)}
                        min={new Date().toISOString().split("T")[0]}
                      />
                    </div>

                    <div className="space-y-2">
                      <Label htmlFor="time">Horário</Label>
                      <Select value={selectedTime} onValueChange={setSelectedTime}>
                        <SelectTrigger>
                          <SelectValue placeholder="Selecione um horário" />
                        </SelectTrigger>
                        <SelectContent>
                          {availableTimes.map((time) => (
                            <SelectItem key={time} value={time}>
                              {time}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    </div>
                  </div>
                  {/* Tipo e Duração */}
                  <div className="grid md:grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <Label htmlFor="tipoConsulta">Tipo de Consulta</Label>
                      <Select value={tipoConsulta} onValueChange={setTipoConsulta}>
                        <SelectTrigger id="tipoConsulta">
                          <SelectValue placeholder="Selecione o tipo" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="presencial">Presencial</SelectItem>
                          <SelectItem value="online">Telemedicina</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>

                    <div className="space-y-2">
                      <Label htmlFor="duracao">Duração (minutos)</Label>
                      <Input
                        id="duracao"
                        type="number"
                        min={10}
                        max={120}
                        value={duracao}
                        onChange={(e) => setDuracao(e.target.value)}
                      />
                    </div>
                  </div>

                  {/* Convênio */}
                  <div className="space-y-2">
                    <Label htmlFor="convenio">Convênio (opcional)</Label>
                    <Input
                      id="convenio"
                      placeholder="Nome do convênio do paciente"
                      value={convenio}
                      onChange={(e) => setConvenio(e.target.value)}
                    />
                  </div>

                  {/* Queixa Principal */}
                  <div className="space-y-2">
                    <Label htmlFor="queixa">Queixa Principal (opcional)</Label>
                    <Textarea
                      id="queixa"
                      placeholder="Descreva brevemente o motivo da consulta..."
                      value={queixa}
                      onChange={(e) => setQueixa(e.target.value)}
                    />
                  </div>

                  {/* Observações do Paciente */}
                  <div className="space-y-2">
                    <Label htmlFor="obsPaciente">Observações do Paciente (opcional)</Label>
                    <Textarea
                      id="obsPaciente"
                      placeholder="Anotações relevantes informadas pelo paciente..."
                      value={obsPaciente}
                      onChange={(e) => setObsPaciente(e.target.value)}
                    />
                  </div>

                  {/* Observações Internas */}
                  <div className="space-y-2">
                    <Label htmlFor="obsInternas">Observações Internas (opcional)</Label>
                    <Textarea
                      id="obsInternas"
                      placeholder="Anotações para a equipe da clínica..."
                      value={obsInternas}
                      onChange={(e) => setObsInternas(e.target.value)}
                    />
                  </div>

                  {/* Observações gerais */}
                  <div className="space-y-2">
                    <Label htmlFor="notes">Observações gerais (opcional)</Label>
                    <Textarea
                      id="notes"
                      placeholder="Descreva brevemente o motivo da consulta ou observações importantes"
                      value={notes}
                      onChange={(e) => setNotes(e.target.value)}
                      rows={3}
                    />
                  </div>

                  {/* Botão */}
                  <Button
                    type="submit"
                    className="w-full"
                    disabled={!selectedDoctor || !selectedDate || !selectedTime}
                  >
                    Agendar Consulta
                  </Button>
                </form>
              </CardContent>
            </Card>
          </div>

          {/* Resumo */}
          <div className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center">
                  <Calendar className="mr-2 h-5 w-5" />
                  Resumo
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                {selectedDoctor && (
                  <div className="flex items-center space-x-2">
                    <User className="h-4 w-4 text-gray-500" />
                    <span className="text-sm">
                      {doctors.find((d) => d.id === selectedDoctor)?.full_name}
                    </span>
                  </div>
                )}

                {selectedDate && (
                  <div className="flex items-center space-x-2">
                    <Calendar className="h-4 w-4 text-gray-500" />
                    <span className="text-sm">
                      {new Date(selectedDate).toLocaleDateString("pt-BR")}
                    </span>
                  </div>
                )}

                {selectedTime && (
                  <div className="flex items-center space-x-2">
                    <Clock className="h-4 w-4 text-gray-500" />
                    <span className="text-sm">{selectedTime}</span>
                  </div>
                )}
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle>Informações Importantes</CardTitle>
              </CardHeader>
              <CardContent className="text-sm text-gray-600 space-y-2">
                <p>• Chegue com 15 minutos de antecedência</p>
                <p>• Traga documento com foto</p>
                <p>• Traga carteirinha do convênio</p>
                <p>• Traga exames anteriores, se houver</p>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </PatientLayout>
  )
}