import { useState, useEffect } from "react";
import toast from "react-hot-toast";
import { Search, FileText, Download, Plus, Eye, Edit2, X } from "lucide-react";
import jsPDF from "jspdf";
import html2canvas from "html2canvas";
import {
  reportService,
  type Report,
  patientService,
  type Patient,
  doctorService,
} from "../../services";

export function SecretaryReportList() {
  const [reports, setReports] = useState<Report[]>([]);
  const [loading, setLoading] = useState(false);
  const [searchTerm, setSearchTerm] = useState("");
  const [statusFilter, setStatusFilter] = useState<string>("");
  const [showCreateModal, setShowCreateModal] = useState(false);
  const [showViewModal, setShowViewModal] = useState(false);
  const [showEditModal, setShowEditModal] = useState(false);
  const [selectedReport, setSelectedReport] = useState<Report | null>(null);
  const [patients, setPatients] = useState<Patient[]>([]);
  const [doctors, setDoctors] = useState<any[]>([]);
  const [requestedByNames, setRequestedByNames] = useState<
    Record<string, string>
  >({});
  const [formData, setFormData] = useState({
    patient_id: "",
    doctor_id: "",
    exam: "",
    diagnosis: "",
    conclusion: "",
    status: "draft" as "draft" | "completed" | "pending" | "cancelled",
    cid_code: "",
    requested_by: "",
  });

  useEffect(() => {
    loadReports();
    loadPatients();
    loadDoctors();
    loadDoctors();
  }, []);

  // Recarrega automaticamente quando o filtro de status muda
  // (evita depender do clique em Buscar)
  useEffect(() => {
    loadReports();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [statusFilter]);

  const loadPatients = async () => {
    try {
      const data = await patientService.list();
      setPatients(Array.isArray(data) ? data : []);
    } catch (error) {
      console.error("Erro ao carregar pacientes:", error);
    }
  };

  const loadDoctors = async () => {
    try {
      const data = await doctorService.list({});
      setDoctors(Array.isArray(data) ? data : []);
    } catch (error) {
      console.error("Erro ao carregar médicos:", error);
    }
  };

  const handleOpenCreateModal = () => {
    setFormData({
      patient_id: "",
      doctor_id: "",
      exam: "",
      diagnosis: "",
      conclusion: "",
      status: "draft",
      cid_code: "",
      requested_by: "",
    });
    setShowCreateModal(true);
  };

  const handleViewReport = (report: Report) => {
    setSelectedReport(report);
    setShowViewModal(true);
  };

  const handleOpenEditModal = (report: Report) => {
    setSelectedReport(report);
    setFormData({
      patient_id: report.patient_id,
      doctor_id: "",
      exam: report.exam || "",
      diagnosis: report.diagnosis || "",
      conclusion: report.conclusion || "",
      status: report.status || "draft",
      cid_code: report.cid_code || "",
      requested_by: report.requested_by || "",
    });
    setShowEditModal(true);
  };

  const handleCreateReport = async (e: React.FormEvent) => {
    e.preventDefault();

    if (!formData.patient_id) {
      toast.error("Selecione um paciente");
      return;
    }

    if (!formData.doctor_id && !formData.requested_by) {
      toast.error("Selecione um médico solicitante");
      return;
    }

    try {
      console.log("[SecretaryReportList] Criando relatório com dados:", {
        patient_id: formData.patient_id,
        exam: formData.exam,
        diagnosis: formData.diagnosis,
        conclusion: formData.conclusion,
        cid_code: formData.cid_code,
        requested_by: formData.requested_by,
        status: formData.status,
      });

      await reportService.create({
        patient_id: formData.patient_id,
        exam: formData.exam || undefined,
        diagnosis: formData.diagnosis || undefined,
        conclusion: formData.conclusion || undefined,
        cid_code: formData.cid_code || undefined,
        requested_by: formData.requested_by || undefined,
        status: formData.status,
      });

      toast.success("Relatório criado com sucesso!");
      setShowCreateModal(false);
      loadReports();
    } catch (error) {
      console.error("Erro ao criar relatório:", error);
      toast.error("Erro ao criar relatório");
    }
  };

  const handleUpdateReport = async (e: React.FormEvent) => {
    e.preventDefault();

    if (!selectedReport?.id) {
      toast.error("Relatório não identificado");
      return;
    }

    try {
      const updatedReport = await reportService.update(selectedReport.id, {
        patient_id: formData.patient_id,
        exam: formData.exam || undefined,
        diagnosis: formData.diagnosis || undefined,
        conclusion: formData.conclusion || undefined,
        status: formData.status,
        cid_code: formData.cid_code || undefined,
        requested_by: formData.requested_by || undefined,
      });

      console.log("[SecretaryReportList] Relatório atualizado:", updatedReport);
      console.log(
        "[SecretaryReportList] Novo requested_by:",
        formData.requested_by
      );

      toast.success("Relatório atualizado com sucesso!");
      setShowEditModal(false);
      setSelectedReport(null);

      // Limpar cache de nomes antes de recarregar
      setRequestedByNames({});
      await loadReports();
    } catch (error) {
      console.error("Erro ao atualizar relatório:", error);
      toast.error("Erro ao atualizar relatório");
    }
  };

  const handleDownloadReport = async (report: Report) => {
    console.log("[SecretaryReportList] Iniciando download de PDF:", report);
    
    try {
      toast.loading("Gerando PDF...", { id: "pdf-generation" });

      // Criar um elemento temporário para o relatório
      const reportElement = document.createElement("div");
      reportElement.style.padding = "40px";
      reportElement.style.backgroundColor = "white";
      reportElement.style.width = "800px";
      reportElement.style.fontFamily = "Arial, sans-serif";

      reportElement.innerHTML = `
        <div style="text-align: center; margin-bottom: 30px; border-bottom: 2px solid #333; padding-bottom: 20px;">
          <h1 style="color: #16a34a; margin: 0 0 10px 0; font-size: 28px;">Relatório Médico</h1>
          <p style="color: #666; margin: 0; font-size: 14px;">${
            report.order_number || "—"
          }</p>
        </div>

        <div style="margin-bottom: 25px;">
          <div style="background-color: #f3f4f6; padding: 15px; border-radius: 8px; margin-bottom: 15px;">
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px;">
              <div>
                <p style="margin: 0 0 5px 0; font-size: 12px; color: #6b7280; font-weight: 600;">STATUS</p>
                <p style="margin: 0; font-size: 14px; color: #111827;">${
                  report.status === "completed"
                    ? "✅ Concluído"
                    : report.status === "pending"
                    ? "⏳ Pendente"
                    : report.status === "draft"
                    ? "📝 Rascunho"
                    : "❌ Cancelado"
                }</p>
              </div>
              <div>
                <p style="margin: 0 0 5px 0; font-size: 12px; color: #6b7280; font-weight: 600;">DATA</p>
                <p style="margin: 0; font-size: 14px; color: #111827;">${formatDate(
                  report.created_at
                )}</p>
              </div>
            </div>
          </div>
        </div>

        ${
          report.exam
            ? `
          <div style="margin-bottom: 20px;">
            <h3 style="color: #16a34a; font-size: 16px; margin: 0 0 10px 0; border-bottom: 1px solid #e5e7eb; padding-bottom: 5px;">EXAME REALIZADO</h3>
            <p style="margin: 0; color: #374151; line-height: 1.6;">${report.exam}</p>
          </div>
        `
            : ""
        }

        ${
          report.cid_code
            ? `
          <div style="margin-bottom: 20px;">
            <h3 style="color: #16a34a; font-size: 16px; margin: 0 0 10px 0; border-bottom: 1px solid #e5e7eb; padding-bottom: 5px;">CÓDIGO CID-10</h3>
            <p style="margin: 0; color: #374151; line-height: 1.6; font-family: monospace; background: #f9fafb; padding: 8px; border-radius: 4px;">${report.cid_code}</p>
          </div>
        `
            : ""
        }

        ${
          report.requested_by
            ? `
          <div style="margin-bottom: 20px;">
            <h3 style="color: #16a34a; font-size: 16px; margin: 0 0 10px 0; border-bottom: 1px solid #e5e7eb; padding-bottom: 5px;">SOLICITADO POR</h3>
            <p style="margin: 0; color: #374151; line-height: 1.6;">${report.requested_by}</p>
          </div>
        `
            : ""
        }

        ${
          report.diagnosis
            ? `
          <div style="margin-bottom: 20px;">
            <h3 style="color: #16a34a; font-size: 16px; margin: 0 0 10px 0; border-bottom: 1px solid #e5e7eb; padding-bottom: 5px;">DIAGNÓSTICO</h3>
            <p style="margin: 0; color: #374151; line-height: 1.8; white-space: pre-wrap;">${report.diagnosis}</p>
          </div>
        `
            : ""
        }

        ${
          report.conclusion
            ? `
          <div style="margin-bottom: 20px;">
            <h3 style="color: #16a34a; font-size: 16px; margin: 0 0 10px 0; border-bottom: 1px solid #e5e7eb; padding-bottom: 5px;">CONCLUSÃO</h3>
            <p style="margin: 0; color: #374151; line-height: 1.8; white-space: pre-wrap;">${report.conclusion}</p>
          </div>
        `
            : ""
        }

        <div style="margin-top: 40px; padding-top: 20px; border-top: 1px solid #e5e7eb; text-align: center; color: #9ca3af; font-size: 12px;">
          <p style="margin: 0;">Documento gerado em ${new Date().toLocaleDateString(
            "pt-BR",
            { day: "2-digit", month: "long", year: "numeric" }
          )}</p>
        </div>
      `;

      console.log("[SecretaryReportList] Elemento HTML criado");

      // Adicionar ao DOM temporariamente
      document.body.appendChild(reportElement);
      console.log("[SecretaryReportList] Elemento adicionado ao DOM");

      // Capturar como imagem
      console.log("[SecretaryReportList] Iniciando captura com html2canvas...");
      const canvas = await html2canvas(reportElement, {
        scale: 2,
        backgroundColor: "#ffffff",
        logging: false,
        useCORS: true,
        allowTaint: false,
      });
      console.log("[SecretaryReportList] Canvas criado:", {
        width: canvas.width,
        height: canvas.height,
      });

      // Remover elemento temporário
      document.body.removeChild(reportElement);
      console.log("[SecretaryReportList] Elemento removido do DOM");

      // Criar PDF
      const imgWidth = 210; // A4 width in mm
      const imgHeight = (canvas.height * imgWidth) / canvas.width;
      const pdf = new jsPDF("p", "mm", "a4");
      const imgData = canvas.toDataURL("image/png");

      console.log("[SecretaryReportList] PDF criado, adicionando imagem...");
      pdf.addImage(imgData, "PNG", 0, 0, imgWidth, imgHeight);
      
      const fileName = `relatorio-${report.order_number || "sem-numero"}.pdf`;
      console.log("[SecretaryReportList] Salvando PDF:", fileName);
      pdf.save(fileName);

      toast.dismiss("pdf-generation");
      toast.success("Relatório baixado com sucesso!");
      console.log("[SecretaryReportList] ✅ PDF gerado e baixado com sucesso");
    } catch (error) {
      console.error("[SecretaryReportList] ❌ Erro ao gerar PDF:", error);
      toast.dismiss("pdf-generation");
      toast.error(`Erro ao gerar PDF: ${error instanceof Error ? error.message : "Erro desconhecido"}`);
    }
  };

  const loadRequestedByNames = async (reportsList: Report[]) => {
    const names: Record<string, string> = {};

    // Buscar nomes únicos de requested_by
    const uniqueIds = [
      ...new Set(reportsList.map((r) => r.requested_by).filter(Boolean)),
    ];

    try {
      // Buscar todos os médicos de uma vez
      const doctors = await doctorService.list({});

      for (const id of uniqueIds) {
        // Verificar se já é um nome (não é UUID)
        const isUUID =
          /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(
            id!
          );

        if (!isUUID) {
          // Já é um nome direto (dados legados), manter como está
          names[id!] = id!;
          continue;
        }

        // É um UUID, procurar o médico
        const doctor = doctors.find((d) => {
          const doctorAny = d as any;
          return doctorAny.user_id === id || d.id === id || doctorAny.id === id;
        });

        if (doctor && doctor.full_name) {
          // Formatar o nome com "Dr." se não tiver
          const doctorName = doctor.full_name;
          names[id!] = /^dr\.?\s/i.test(doctorName)
            ? doctorName
            : `Dr. ${doctorName}`;
        } else {
          // UUID não encontrado - médico pode ter sido deletado
          // Mostrar mensagem mais amigável
          names[id!] = "Médico não cadastrado";
        }
      }
    } catch (error) {
      console.error("Erro ao buscar nomes dos médicos:", error);
      // Em caso de erro, manter os IDs originais
      uniqueIds.forEach((id) => {
        names[id!] = id!;
      });
    }

    setRequestedByNames(names);
  };

  const loadReports = async () => {
    setLoading(true);
    try {
      // Se um filtro de status estiver aplicado, encaminhar para o serviço
      // Cast explícito para o tipo esperado pelo serviço (ReportStatus)
      const filters = statusFilter
        ? {
            status: statusFilter as
              | "draft"
              | "completed"
              | "pending"
              | "cancelled",
          }
        : undefined;
      console.log("[SecretaryReportList] loadReports filters:", filters);
      const data = await reportService.list(filters);
      console.log("✅ Relatórios carregados:", data);
      // Garantir filtro por status no cliente como fallback caso o backend
      // não aplique corretamente o filtro. Normaliza para evitar problemas
      // de case/whitespace.
      let reportsList = Array.isArray(data) ? data : [];
      if (statusFilter) {
        const normalized = statusFilter.toString().toLowerCase().trim();
        reportsList = reportsList.filter((r) => {
          const rs = (r.status || "").toString().toLowerCase().trim();
          return rs === normalized;
        });
      }
      setReports(reportsList);

      // Carregar nomes dos solicitantes
      if (reportsList.length > 0) {
        await loadRequestedByNames(reportsList);
      }

      if (Array.isArray(data) && data.length === 0) {
        console.warn("⚠️ Nenhum relatório encontrado na API");
      }
    } catch (error) {
      console.error("❌ Erro ao carregar relatórios:", error);
      toast.error("Erro ao carregar relatórios");
      setReports([]);
    } finally {
      setLoading(false);
    }
  };

  const handleSearch = () => {
    loadReports();
  };

  const handleClear = () => {
    setSearchTerm("");
    setStatusFilter("");
    loadReports();
  };

  const formatDate = (dateString: string) => {
    try {
      const date = new Date(dateString);
      return date.toLocaleDateString("pt-BR", {
        day: "2-digit",
        month: "2-digit",
        year: "numeric",
        hour: "2-digit",
        minute: "2-digit",
      });
    } catch {
      return "—";
    }
  };

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold text-gray-900">Relatórios</h1>
          <p className="text-gray-600 mt-1">
            Visualize e baixe relatórios do sistema
          </p>
        </div>
        <button
          onClick={handleOpenCreateModal}
          className="flex items-center gap-2 px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors"
        >
          <Plus className="h-4 w-4" />
          Novo Relatório
        </button>
      </div>

      {/* Search and Filters */}
      <div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6 space-y-4">
        <div className="flex gap-3">
          <div className="flex-1 relative">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400" />
            <input
              type="text"
              placeholder="Buscar relatórios..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="w-full pl-10 pr-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent"
            />
          </div>
          <button
            onClick={handleSearch}
            className="px-6 py-2.5 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors"
          >
            Buscar
          </button>
          <button
            onClick={handleClear}
            className="px-6 py-2.5 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
          >
            Limpar
          </button>
        </div>

        <div className="flex items-center gap-6">
          <div className="flex items-center gap-2">
            <span className="text-sm text-gray-600">Status:</span>
            <select
              value={statusFilter}
              onChange={(e) => setStatusFilter(e.target.value)}
              className="px-3 py-1.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-green-500 focus:border-transparent"
            >
              <option value="">Todos</option>
              <option value="draft">Rascunho</option>
              <option value="completed">Concluído</option>
              <option value="pending">Pendente</option>
              <option value="cancelled">Cancelado</option>
            </select>
          </div>
        </div>
      </div>

      {/* Table */}
      <div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
        <table className="w-full">
          <thead className="bg-gray-50 dark:bg-gray-700 border-b border-gray-200 dark:border-gray-600">
            <tr>
              <th className="px-6 py-4 text-left text-sm font-semibold text-gray-700 dark:text-gray-200 uppercase tracking-wider">
                Relatório
              </th>
              <th className="px-6 py-4 text-left text-sm font-semibold text-gray-700 uppercase tracking-wider">
                Status
              </th>
              <th className="px-6 py-4 text-left text-sm font-semibold text-gray-700 uppercase tracking-wider">
                Criado Em
              </th>
              <th className="px-6 py-4 text-left text-sm font-semibold text-gray-700 uppercase tracking-wider">
                Solicitante
              </th>
              <th className="px-6 py-4 text-left text-sm font-semibold text-gray-700 uppercase tracking-wider">
                Ações
              </th>
            </tr>
          </thead>
          <tbody className="divide-y divide-gray-200">
            {loading ? (
              <tr>
                <td
                  colSpan={5}
                  className="px-6 py-12 text-center text-gray-500"
                >
                  Carregando relatórios...
                </td>
              </tr>
            ) : reports.length === 0 ? (
              <tr>
                <td
                  colSpan={5}
                  className="px-6 py-12 text-center text-gray-500"
                >
                  Nenhum relatório encontrado
                </td>
              </tr>
            ) : (
              reports.map((report) => (
                <tr
                  key={report.id}
                  className="hover:bg-gray-50 transition-colors"
                >
                  <td className="px-6 py-4">
                    <div className="flex items-center gap-3">
                      <div className="p-2 bg-blue-100 rounded-lg">
                        <FileText className="h-5 w-5 text-blue-600" />
                      </div>
                      <div>
                        <p className="text-sm font-medium text-gray-900">
                          {report.order_number}
                        </p>
                        <p className="text-xs text-gray-500">
                          {report.exam || "Sem exame"}
                        </p>
                      </div>
                    </div>
                  </td>
                  <td className="px-6 py-4">
                    <span
                      className={`inline-flex px-2 py-1 text-xs font-semibold rounded-full ${
                        report.status === "completed"
                          ? "bg-green-100 text-green-800"
                          : report.status === "pending"
                          ? "bg-yellow-100 text-yellow-800"
                          : report.status === "draft"
                          ? "bg-gray-100 text-gray-800"
                          : "bg-red-100 text-red-800"
                      }`}
                    >
                      {report.status === "completed"
                        ? "Concluído"
                        : report.status === "pending"
                        ? "Pendente"
                        : report.status === "draft"
                        ? "Rascunho"
                        : "Cancelado"}
                    </span>
                  </td>
                  <td className="px-6 py-4 text-sm text-gray-700">
                    {formatDate(report.created_at)}
                  </td>
                  <td className="px-6 py-4 text-sm text-gray-700">
                    {report.requested_by
                      ? requestedByNames[report.requested_by] ||
                        report.requested_by
                      : "—"}
                  </td>
                  <td className="px-6 py-4">
                    <div className="flex items-center gap-2">
                      <button
                        onClick={() => handleViewReport(report)}
                        title="Visualizar"
                        className="flex items-center gap-1 px-3 py-1.5 text-blue-600 hover:bg-blue-50 rounded-lg transition-colors"
                      >
                        <Eye className="h-4 w-4" />
                        <span className="text-sm font-medium">Ver</span>
                      </button>
                      <button
                        onClick={() => handleOpenEditModal(report)}
                        title="Editar"
                        className="flex items-center gap-1 px-3 py-1.5 text-purple-600 hover:bg-purple-50 rounded-lg transition-colors"
                      >
                        <Edit2 className="h-4 w-4" />
                        <span className="text-sm font-medium">Editar</span>
                      </button>
                      <button
                        onClick={() => handleDownloadReport(report)}
                        title="Baixar PDF"
                        className="flex items-center gap-1 px-3 py-1.5 text-green-600 hover:bg-green-50 rounded-lg transition-colors cursor-pointer"
                      >
                        <Download className="h-4 w-4" />
                        <span className="text-sm font-medium">Baixar PDF</span>
                      </button>
                    </div>
                  </td>
                </tr>
              ))
            )}
          </tbody>
        </table>
      </div>

      {/* Modal de Criar Relatório */}
      {showCreateModal && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
          <div className="bg-white dark:bg-gray-800 rounded-xl shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
            <div className="p-6 border-b border-gray-200 dark:border-gray-700">
              <h2 className="text-2xl font-bold text-gray-900 dark:text-white">
                Novo Relatório
              </h2>
            </div>

            <form onSubmit={handleCreateReport} className="p-6 space-y-4">
              <div className="space-y-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">
                    Paciente *
                  </label>
                  <select
                    value={formData.patient_id}
                    onChange={(e) =>
                      setFormData({ ...formData, patient_id: e.target.value })
                    }
                    className="form-input"
                    required
                  >
                    <option value="">Selecione um paciente</option>
                    {patients.map((patient) => (
                      <option key={patient.id} value={patient.id}>
                        {patient.full_name}
                      </option>
                    ))}
                  </select>
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">
                    Exame
                  </label>
                  <input
                    type="text"
                    value={formData.exam}
                    onChange={(e) =>
                      setFormData({ ...formData, exam: e.target.value })
                    }
                    className="form-input"
                    placeholder="Nome do exame realizado"
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">
                    Médico Solicitante *
                  </label>
                  <select
                    value={formData.doctor_id}
                    onChange={(e) => {
                      const selectedDoctor = doctors.find(d => d.id === e.target.value);
                      setFormData({ 
                        ...formData, 
                        doctor_id: e.target.value,
                        requested_by: selectedDoctor ? `Dr. ${selectedDoctor.full_name}` : ""
                      });
                    }}
                    className="form-input"
                    required
                  >
                    <option value="">Selecione um médico</option>
                    {doctors.map((doctor) => (
                      <option key={doctor.id} value={doctor.id}>
                        Dr. {doctor.full_name} - {doctor.specialty}
                      </option>
                    ))}
                  </select>
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">
                    Diagnóstico
                  </label>
                  <textarea
                    value={formData.diagnosis}
                    onChange={(e) =>
                      setFormData({ ...formData, diagnosis: e.target.value })
                    }
                    className="form-input"
                    placeholder="Diagnóstico do paciente"
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">
                    Conclusão
                  </label>
                  <textarea
                    value={formData.conclusion}
                    onChange={(e) =>
                      setFormData({ ...formData, conclusion: e.target.value })
                    }
                    className="form-input"
                    placeholder="Conclusão e recomendações"
                  />
                </div>
              </div>

              <div className="flex justify-end gap-3 pt-4">
                <button
                  type="button"
                  onClick={() => setShowCreateModal(false)}
                  className="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
                >
                  Cancelar
                </button>
                <button
                  type="submit"
                  className="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors"
                >
                  Criar Relatório
                </button>
              </div>
            </form>
          </div>
        </div>
      )}

      {/* Modal de Visualizar Relatório */}
      {showViewModal && selectedReport && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
          <div className="bg-white dark:bg-gray-800 rounded-xl shadow-xl max-w-3xl w-full max-h-[90vh] overflow-y-auto">
            <div className="p-6 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
              <h2 className="text-2xl font-bold text-gray-900 dark:text-white">
                Visualizar Relatório
              </h2>
              <button
                onClick={() => setShowViewModal(false)}
                className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
              >
                <X className="h-5 w-5 text-gray-500" />
              </button>
            </div>

            <div className="p-6 space-y-4">
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-medium text-gray-500 mb-1">
                    Número do Relatório
                  </label>
                  <p className="text-gray-900 font-medium">
                    {selectedReport.order_number || "—"}
                  </p>
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-500 mb-1">
                    Status
                  </label>
                  <span
                    className={`inline-flex px-3 py-1 text-sm font-semibold rounded-full ${
                      selectedReport.status === "completed"
                        ? "bg-green-100 text-green-800"
                        : selectedReport.status === "pending"
                        ? "bg-yellow-100 text-yellow-800"
                        : selectedReport.status === "draft"
                        ? "bg-gray-100 text-gray-800"
                        : "bg-red-100 text-red-800"
                    }`}
                  >
                    {selectedReport.status === "completed"
                      ? "Concluído"
                      : selectedReport.status === "pending"
                      ? "Pendente"
                      : selectedReport.status === "draft"
                      ? "Rascunho"
                      : "Cancelado"}
                  </span>
                </div>
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-500 mb-1">
                  Exame
                </label>
                <p className="text-gray-900">{selectedReport.exam || "—"}</p>
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-500 mb-1">
                  Código CID-10
                </label>
                <p className="text-gray-900">
                  {selectedReport.cid_code || "—"}
                </p>
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-500 mb-1">
                  Solicitado por
                </label>
                <p className="text-gray-900">
                  {selectedReport.requested_by
                    ? requestedByNames[selectedReport.requested_by] ||
                      selectedReport.requested_by
                    : "—"}
                </p>
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-500 mb-1">
                  Diagnóstico
                </label>
                <p className="text-gray-900 whitespace-pre-wrap">
                  {selectedReport.diagnosis || "—"}
                </p>
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-500 mb-1">
                  Conclusão
                </label>
                <p className="text-gray-900 whitespace-pre-wrap">
                  {selectedReport.conclusion || "—"}
                </p>
              </div>

              <div className="grid grid-cols-2 gap-4 pt-4 border-t border-gray-200">
                <div>
                  <label className="block text-sm font-medium text-gray-500 mb-1">
                    Criado em
                  </label>
                  <p className="text-gray-900 text-sm">
                    {formatDate(selectedReport.created_at)}
                  </p>
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-500 mb-1">
                    Atualizado em
                  </label>
                  <p className="text-gray-900 text-sm">
                    {formatDate(selectedReport.updated_at)}
                  </p>
                </div>
              </div>
            </div>

            <div className="p-6 border-t border-gray-200 flex justify-end gap-3">
              <button
                onClick={() => setShowViewModal(false)}
                className="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
              >
                Fechar
              </button>
              <button
                onClick={() => {
                  setShowViewModal(false);
                  handleOpenEditModal(selectedReport);
                }}
                className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors"
              >
                Editar Relatório
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Modal de Editar Relatório */}
      {showEditModal && selectedReport && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
          <div className="bg-white dark:bg-gray-800 rounded-xl shadow-xl max-w-3xl w-full max-h-[90vh] overflow-y-auto">
            <div className="p-6 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
              <h2 className="text-2xl font-bold text-gray-900 dark:text-white">
                Editar Relatório
              </h2>
              <button
                onClick={() => {
                  setShowEditModal(false);
                  setSelectedReport(null);
                }}
                className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
              >
                <X className="h-5 w-5 text-gray-500" />
              </button>
            </div>

            <form onSubmit={handleUpdateReport} className="p-6 space-y-4">
              <div className="space-y-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">
                    Número do Relatório
                  </label>
                  <input
                    type="text"
                    value={selectedReport.order_number || ""}
                    disabled
                    className="form-input"
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">
                    Status *
                  </label>
                  <select
                    value={formData.status}
                    onChange={(e) =>
                      setFormData({
                        ...formData,
                        status: e.target.value as
                          | "draft"
                          | "completed"
                          | "pending"
                          | "cancelled",
                      })
                    }
                    className="form-input"
                    required
                  >
                    <option value="draft">Rascunho</option>
                    <option value="completed">Concluído</option>
                    <option value="pending">Pendente</option>
                    <option value="cancelled">Cancelado</option>
                  </select>
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">
                    Exame
                  </label>
                  <input
                    type="text"
                    value={formData.exam}
                    onChange={(e) =>
                      setFormData({ ...formData, exam: e.target.value })
                    }
                    className="form-input"
                    placeholder="Nome do exame realizado"
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">
                    Código CID-10
                  </label>
                  <input
                    type="text"
                    value={formData.cid_code}
                    onChange={(e) =>
                      setFormData({ ...formData, cid_code: e.target.value })
                    }
                    className="form-input"
                    placeholder="Ex: A00.0"
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">
                    Solicitado por
                  </label>
                  <select
                    value={formData.requested_by}
                    onChange={(e) =>
                      setFormData({ ...formData, requested_by: e.target.value })
                    }
                    className="form-input"
                  >
                    <option value="">Selecione um médico</option>
                    {doctors.map((doctor) => (
                      <option key={doctor.id} value={doctor.id}>
                        {doctor.full_name}
                      </option>
                    ))}
                  </select>
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">
                    Diagnóstico
                  </label>
                  <textarea
                    value={formData.diagnosis}
                    onChange={(e) =>
                      setFormData({ ...formData, diagnosis: e.target.value })
                    }
                    className="form-input"
                    placeholder="Diagnóstico do paciente"
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">
                    Conclusão
                  </label>
                  <textarea
                    value={formData.conclusion}
                    onChange={(e) =>
                      setFormData({ ...formData, conclusion: e.target.value })
                    }
                    className="form-input"
                    placeholder="Conclusão e recomendações"
                  />
                </div>
              </div>

              <div className="flex justify-end gap-3 pt-4 border-t border-gray-200">
                <button
                  type="button"
                  onClick={() => {
                    setShowEditModal(false);
                    setSelectedReport(null);
                  }}
                  className="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
                >
                  Cancelar
                </button>
                <button
                  type="submit"
                  className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors"
                >
                  Salvar Alterações
                </button>
              </div>
            </form>
          </div>
        </div>
      )}
    </div>
  );
}
