import React, { useState, useEffect, useCallback } from "react";
import { Link } from "react-router-dom";

const ENDPOINT_LISTAR = "https://mock.apidog.com/m1/1053378-0-default/rest/v1/doctor_availability";

const DisponibilidadesDoctorPage = () => {
  const [disponibilidades, setDisponibilidades] = useState([]);
  const [loading, setLoading] = useState(false);
  const [filtroMedicoId, setFiltroMedicoId] = useState("");
  const [filtroActive, setFiltroActive] = useState("true");
  const [medicoValido, setMedicoValido] = useState(false);

  const fetchDisponibilidades = useCallback(async (doctorId, activeStatus) => {
    setLoading(true);
    let url = `${ENDPOINT_LISTAR}?select=*`;
    if (doctorId) url += `&doctor_id=eq.${doctorId}`;
    if (activeStatus === "true" || activeStatus === "false") url += `&active=eq.${activeStatus}`;

    try {
      const response = await fetch(url);
      const result = await response.json();
      setDisponibilidades(Array.isArray(result) ? result : []);
      setMedicoValido(Array.isArray(result) && result.length > 0);
    } catch (error) {
      setDisponibilidades([]);
      setMedicoValido(false);
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    if (filtroMedicoId) {
      fetchDisponibilidades(filtroMedicoId, filtroActive);
    } else {
      setDisponibilidades([]);
      setMedicoValido(false);
    }
  }, [filtroMedicoId, filtroActive, fetchDisponibilidades]);

  return (
    <div id="main-content">
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <h1 style={{ fontSize: "1.5rem", fontWeight: "bold", color: "#333" }}>
          Disponibilidades por Médico
        </h1>
        <Link
          to={medicoValido ? `../medicos/${filtroMedicoId}/edit` : "#"}
          className="btn-primary"
          style={{
            padding: "10px 20px",
            fontSize: "14px",
            whiteSpace: "nowrap",
            textDecoration: "none",
            display: "inline-block",
            opacity: medicoValido ? 1 : 0.6,
            pointerEvents: medicoValido ? "auto" : "none",
          }}
        >
          + Gerenciar Disponibilidades
        </Link>
      </div>

      <div className="atendimento-eprocura">
        <div className="busca-atendimento">
          <div>
            <i className="fa-solid fa-user-doctor"></i>
            <input
              type="text"
              placeholder="Filtrar por ID do Médico..."
              value={filtroMedicoId}
              onChange={(e) => setFiltroMedicoId(e.target.value)}
              style={{ border: "1px solid #ccc", borderRadius: "4px", padding: "5px" }}
            />
          </div>
          <div>
            <i className="fa-solid fa-check-circle"></i>
            <select
              value={filtroActive}
              onChange={(e) => setFiltroActive(e.target.value)}
              style={{ padding: "8px", border: "1px solid #ccc", borderRadius: "4px" }}
            >
              <option value="true">Ativas</option>
              <option value="false">Inativas</option>
              <option value="">Todas</option>
            </select>
          </div>
        </div>

        <section className="calendario-ou-filaespera">
          <div className="fila-container">
            <h2 className="fila-titulo">
              Disponibilidades Encontradas ({disponibilidades.length})
            </h2>

            {loading ? (
              <p className="text-center py-10">Carregando disponibilidades...</p>
            ) : disponibilidades.length === 0 ? (
              <p className="text-center py-10">
                Nenhuma disponibilidade encontrada para os filtros aplicados.
              </p>
            ) : (
              <table className="fila-tabela" style={{ width: "100%", borderCollapse: "collapse" }}>
                <thead>
                  <tr>
                    {["ID", "ID Médico", "Dia da Semana", "Início", "Término", "Intervalo (min)", "Tipo Consulta", "Status"].map(
                      (header) => (
                        <th
                          key={header}
                          style={{ padding: "10px", borderBottom: "2px solid #ddd", textAlign: "left" }}
                        >
                          {header}
                        </th>
                      )
                    )}
                  </tr>
                </thead>
                <tbody>
                  {disponibilidades.map((disp, index) => (
                    <tr key={disp.id || index} style={{ borderBottom: "1px solid #eee" }}>
                      <td style={{ padding: "10px", fontSize: "0.9em" }}>{disp.id || "N/A"}</td>
                      <td style={{ padding: "10px", fontSize: "0.9em" }}>{disp.doctor_id}</td>
                      <td style={{ padding: "10px", fontSize: "0.9em" }}>{disp.weekday}</td>
                      <td style={{ padding: "10px", fontSize: "0.9em" }}>{disp.start_time || "N/A"}</td>
                      <td style={{ padding: "10px", fontSize: "0.9em" }}>{disp.end_time || "N/A"}</td>
                      <td style={{ padding: "10px", fontSize: "0.9em" }}>{disp.slot_minutes}</td>
                      <td style={{ padding: "10px", fontSize: "0.9em" }}>{disp.appointment_type}</td>
                      <td style={{ padding: "10px", fontSize: "0.9em" }}>
                        <span className={`status-tag ${disp.active ? "legenda-item-realizado" : "legenda-item-cancelado"}`}>
                          {disp.active ? "Ativa" : "Inativa"}
                        </span>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            )}
          </div>
        </section>
      </div>
    </div>
  );
};

export default DisponibilidadesDoctorPage;