import React, { useState, useEffect, useCallback } from "react";
import HorariosDisponibilidade from "../components/doctors/HorariosDisponibilidade";
const ENDPOINT =
  "https://mock.apidog.com/m1/1053378-0-default/rest/v1/doctor_availability";

const MEDICOS_MOCKADOS = [
  { id: 53, nome: "João Silva" },
  { id: 19, nome: "Ana Costa" },
  { id: 11, nome: "Pedro Santos" },
];

const diasDaSemana = ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sáb"];

const formatarDataHora = (isoString) => {
  if (!isoString) return "N/A";
  try {
    const data = new Date(isoString);
    // Usa o toLocaleTimeString para extrair hora e minuto
    return data.toLocaleTimeString("pt-BR", {
      hour: "2-digit",
      minute: "2-digit",
      timeZone: "UTC",
    });
  } catch {
    return "Data Inválida";
  }
};

const DisponibilidadesDoctorPage = () => {
  const [disponibilidades, setDisponibilidades] = useState([]);
  const [loading, setLoading] = useState(false);
  const [filtroMedicoNome, setFiltroMedicoNome] = useState("");
  const [gerenciarModo, setGerenciarModo] = useState(false);
  const [editando, setEditando] = useState(null); // ID da disponibilidade sendo editada

  const encontrarMedicoIdPorNome = (nome) => {
    if (!nome) return null;
    const termo = nome.toLowerCase();
    const medico = MEDICOS_MOCKADOS.find((m) =>
      m.nome.toLowerCase().includes(termo)
    );
    return medico ? medico.id : null;
  };

  const fetchDisponibilidades = useCallback(async (nome) => {
    setLoading(true);

    const doctorId = encontrarMedicoIdPorNome(nome);
    if (!doctorId) {
      setLoading(false);
      return;
    }
    try {
      const res = await fetch(`${ENDPOINT}?doctor_id=eq.${doctorId}`);
      const data = await res.json();

      setDisponibilidades(
        Array.isArray(data)
          ? data
          : data && Array.isArray(data.items)
          ? data.items
          : []
      );
    } catch (e) {
      console.error("Erro ao buscar disponibilidades:", e);
      setDisponibilidades([]);
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    if (!gerenciarModo && editando) {
      setEditando(null);
    }
  }, [gerenciarModo]);

  useEffect(() => {
    if (editando) return;
    if (filtroMedicoNome) {
      const timer = setTimeout(() => {
        fetchDisponibilidades(filtroMedicoNome);
      }, 300);

      return () => clearTimeout(timer);
    } else {
      setDisponibilidades([]);
    }
  }, [filtroMedicoNome, fetchDisponibilidades, editando]);

  const atualizarDisponibilidade = async (id, novoIntervalo) => {
    try {
      const res = await fetch(`${ENDPOINT}?id=eq.${id}`, {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ slot_minutes: novoIntervalo }),
      });
      if (res.ok) {
        alert("Disponibilidade atualizada com sucesso!");
        setEditando(null);
        fetchDisponibilidades(filtroMedicoNome);
      } else {
        alert("Erro ao atualizar disponibilidade");
      }
    } catch {
      alert("Falha ao conectar com o servidor");
    }
  };

  const deletarDisponibilidade = async (id) => {
    if (!window.confirm("Deseja realmente excluir esta disponibilidade?"))
      return;
    try {
      const res = await fetch(`${ENDPOINT}?id=eq.${id}`, { method: "DELETE" });
      if (res.ok) {
        alert("Disponibilidade excluída!");
        setDisponibilidades((prev) => prev.filter((d) => d.id !== id));
      } else {
        alert("Erro ao excluir disponibilidade");
      }
    } catch {
      alert("Erro ao conectar com o servidor");
    }
  };

  const disponibilidadeParaEdicao = editando
    ? disponibilidades.find((d) => d.id === editando)
    : null;

const initialAvailabilityParaEdicao = diasDaSemana.map((dia, weekdayIndex) => {
  const blocosDoDia = disponibilidades
    .filter(d => d.weekday === weekdayIndex)
    .map(d => ({
      id: d.id,
      inicio: d.start_time
        ? new Date(d.start_time).toISOString().substring(11, 16)
        : "07:00",
      termino: d.end_time
        ? new Date(d.end_time).toISOString().substring(11, 16)
        : "17:00",
      isNew: false,
      slot_minutes: d.slot_minutes,
    }));

  return {
    dia,
    isChecked: blocosDoDia.length > 0,
    blocos: blocosDoDia,
  };
});

  const handleUpdateHorarios = (horariosAtualizados) => {
    console.log("Horários editados:", horariosAtualizados);

    setEditando(null);
    fetchDisponibilidades(filtroMedicoNome);
  };

  return (
    <div id="main-content">
      {/* Cabeçalho */}
      <div
        style={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
        }}
      >
        <h1 style={{ fontSize: "1.5rem", fontWeight: "bold", color: "#333" }}>
          Disponibilidades por Médico
        </h1>

        {/* Botão Voltar/Gerenciar */}
        <button
          onClick={() => {
            if (editando) {
              setEditando(null); // Se está editando, volta para a tabela
            } else {
              setGerenciarModo((m) => !m); // Senão, alterna o modo de gerenciamento
            }
          }}
          className="btn-primary"
          style={{
            padding: "10px 20px",
            fontSize: "14px",
            whiteSpace: "nowrap",
          }}
        >
          {editando
            ? "← Voltar para Tabela"
            : gerenciarModo
            ? "← Voltar"
            : "+ Gerenciar Disponibilidades"}
        </button>
      </div>

      {/* Campo de busca - ESCONDIDO NO MODO DE EDIÇÃO */}
      {!editando && (
        <div className="atendimento-eprocura">
          <div className="busca-atendimento">
            <input
              type="text"
              placeholder="Filtrar por Nome do Médico..."
              value={filtroMedicoNome}
              onChange={(e) => setFiltroMedicoNome(e.target.value)}
              style={{
                border: "1px solid #ccc",
                borderRadius: "4px",
                padding: "5px",
                marginTop: "10px",
                marginBottom: "10px",
              }}
            />
          </div>
        </div>
      )}

      <section className="calendario-ou-filaespera">
        <div className="fila-container">
          <h2 className="fila-titulo">
            {editando
              ? "Editar Disponibilidade"
              : gerenciarModo
              ? "Gerenciar Disponibilidades"
              : "Disponibilidades Encontradas"}{" "}
            ({disponibilidades.length})
          </h2>

          {loading ? (
            <p>Carregando...</p>
          ) : disponibilidades.length === 0 ? (
            <p>Nenhuma disponibilidade encontrada.</p>
          ) : editando ? (
            <>
              <HorariosDisponibilidade
                initialAvailability={initialAvailabilityParaEdicao}
                onUpdate={handleUpdateHorarios}
              />
              <button
                onClick={() =>
                  handleUpdateHorarios(initialAvailabilityParaEdicao)
                }
                style={{
                  marginTop: "20px",
                  padding: "10px 20px",
                  fontSize: "16px",
                  fontWeight: "bold",
                  borderRadius: "8px",
                  backgroundColor: "#3b82f6",
                  color: "white",
                  border: "none",
                  cursor: "pointer",
                }}
              >
                Salvar Alterações
              </button>
            </>
          ) : (
            <table style={{ width: "100%", borderCollapse: "collapse" }}>
              <thead>
                <tr>
                  <th>Dia da Semana</th>
                  <th>Início</th>
                  <th>Término</th>
                  <th>Intervalo</th>
                  <th>Tipo Consulta</th>
                  {gerenciarModo && <th>Ações</th>}
                </tr>
              </thead>
              <tbody>
                {disponibilidades.map((disp) => (
                  <tr key={disp.id}>
                    <td>{diasDaSemana[disp.weekday]}</td>
                    <td>{formatarDataHora(disp.start_time)}</td>
                    <td>{formatarDataHora(disp.end_time)}</td>
                    <td>{disp.slot_minutes}</td>
                    <td>{disp.appointment_type}</td>
                    {gerenciarModo && (
                      <td>
                        <button
                          onClick={() => setEditando(disp.id)}
                          style={{
                            backgroundColor: "#10b981",
                            color: "white",
                            borderRadius: "6px",
                          }}
                        >
                          Editar
                        </button>{" "}
                        <button
                          onClick={() => deletarDisponibilidade(disp.id)}
                          style={{
                            backgroundColor: "#c72f2f",
                            color: "white",
                            borderRadius: "6px",
                          }}
                        >
                          Excluir
                        </button>
                      </td>
                    )}
                  </tr>
                ))}
              </tbody>
            </table>
          )}
        </div>
      </section>
    </div>
  );
};

export default DisponibilidadesDoctorPage;
