import { Plus, Eye, Edit2 } from "lucide-react";

interface Relatorio {
  id?: string;
  order_number?: string;
  exam?: string;
  patient_id?: string;
  status?: string;
  created_at?: string;
}

interface Paciente {
  id: string;
  nome: string;
}

interface RelatoriosSectionProps {
  relatorios: Relatorio[];
  pacientes: Paciente[];
  loading: boolean;
  onNovoRelatorio: () => void;
  onVerDetalhes: (id: string) => void;
  onEditarRelatorio: (id: string) => void;
}

export default function RelatoriosSection({
  relatorios,
  pacientes,
  loading,
  onNovoRelatorio,
  onVerDetalhes,
  onEditarRelatorio,
}: RelatoriosSectionProps) {
  const getStatusBadgeClass = (status?: string) => {
    switch (status) {
      case "draft":
        return "bg-muted text-foreground";
      case "completed":
        return "bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400";
      case "pending":
        return "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/20 dark:text-yellow-400";
      default:
        return "bg-red-100 text-red-800 dark:bg-red-900/20 dark:text-red-400";
    }
  };

  const getStatusLabel = (status?: string) => {
    switch (status) {
      case "draft":
        return "Rascunho";
      case "completed":
        return "Concluído";
      case "pending":
        return "Pendente";
      default:
        return "Cancelado";
    }
  };

  const getPacienteNome = (patientId?: string) => {
    const paciente = pacientes.find((p) => p.id === patientId);
    return paciente?.nome || patientId || "-";
  };

  return (
    <section className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-foreground">Relatórios</h1>
          <p className="text-muted-foreground">
            Gerencie relatórios de exames e diagnósticos
          </p>
        </div>
        <button
          onClick={onNovoRelatorio}
          className="inline-flex items-center gap-2 bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-md transition-all"
        >
          <Plus className="w-4 h-4" />
          Novo Relatório
        </button>
      </div>

      {/* Reports Table */}
      <div className="bg-card rounded-lg border border-border overflow-hidden">
        {loading ? (
          <div className="flex justify-center py-12">
            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary" />
          </div>
        ) : relatorios.length === 0 ? (
          <div className="text-center py-12">
            <p className="text-muted-foreground">
              Nenhum relatório encontrado.
            </p>
          </div>
        ) : (
          <table className="w-full">
            <thead className="bg-muted/50 border-b border-border">
              <tr>
                <th className="text-left p-4 text-sm font-medium text-muted-foreground uppercase">
                  Número
                </th>
                <th className="text-left p-4 text-sm font-medium text-muted-foreground uppercase">
                  Exame
                </th>
                <th className="text-left p-4 text-sm font-medium text-muted-foreground uppercase">
                  Paciente
                </th>
                <th className="text-left p-4 text-sm font-medium text-muted-foreground uppercase">
                  Status
                </th>
                <th className="text-left p-4 text-sm font-medium text-muted-foreground uppercase">
                  Data
                </th>
                <th className="text-right p-4 text-sm font-medium text-muted-foreground uppercase w-[200px]">
                  Ações
                </th>
              </tr>
            </thead>
            <tbody>
              {relatorios.map((relatorio) => (
                <tr
                  key={relatorio.id}
                  className="border-b border-border hover:bg-muted/30 transition-colors"
                >
                  <td className="p-4 text-sm font-medium text-foreground">
                    {relatorio.order_number || "-"}
                  </td>
                  <td className="p-4 text-sm text-foreground">
                    {relatorio.exam || "-"}
                  </td>
                  <td className="p-4 text-sm text-foreground">
                    {getPacienteNome(relatorio.patient_id)}
                  </td>
                  <td className="p-4">
                    <span
                      className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${getStatusBadgeClass(
                        relatorio.status
                      )}`}
                    >
                      {getStatusLabel(relatorio.status)}
                    </span>
                  </td>
                  <td className="p-4 text-sm text-muted-foreground">
                    {relatorio.created_at
                      ? new Date(relatorio.created_at).toLocaleDateString(
                          "pt-BR"
                        )
                      : "-"}
                  </td>
                  <td className="p-4 text-right">
                    <div className="flex items-center justify-end gap-2">
                      <button
                        onClick={() =>
                          relatorio.id && onVerDetalhes(relatorio.id)
                        }
                        className="inline-flex items-center gap-1 px-3 py-1.5 rounded-md text-sm bg-primary/10 text-primary hover:bg-primary/20 transition-colors"
                      >
                        <Eye className="h-4 w-4" />
                        Ver
                      </button>
                      <button
                        onClick={() =>
                          relatorio.id && onEditarRelatorio(relatorio.id)
                        }
                        className="inline-flex items-center gap-1 px-3 py-1.5 rounded-md text-sm bg-accent/10 text-foreground hover:bg-accent/20 transition-colors"
                      >
                        <Edit2 className="h-4 w-4" />
                        Editar
                      </button>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </div>
    </section>
  );
}


