photum/frontend/components/EventTable.tsx

import React, { useState, useMemo } from "react";
import { EventData, EventStatus, UserRole } from "../types";
import { CheckCircle, ArrowUpDown, ArrowUp, ArrowDown } from "lucide-react";
import { STATUS_COLORS } from "../constants";

interface EventTableProps {
  events: EventData[];
  onEventClick: (event: EventData) => void;
  onApprove?: (e: React.MouseEvent, eventId: string) => void;
  userRole: UserRole;
  currentProfessionalId?: string;
  onAssignmentResponse?: (e: React.MouseEvent, eventId: string, status: string, reason?: string) => void;
}

type SortField =
  | "fot"
  | "date"
  | "curso"
  | "instituicao"
  | "anoFormatura"
  | "empresa"
  | "type"
  | "status";
type SortOrder = "asc" | "desc" | null;

export const EventTable: React.FC<EventTableProps> = ({
  events,
  onEventClick,
  onApprove,
  userRole,
  currentProfessionalId,
  onAssignmentResponse,
}) => {
  const canApprove =
    userRole === UserRole.BUSINESS_OWNER || userRole === UserRole.SUPERADMIN;
  const isPhotographer = userRole === UserRole.PHOTOGRAPHER;

  const [sortField, setSortField] = useState<SortField | null>(null);
  const [sortOrder, setSortOrder] = useState<SortOrder>(null);

  const handleSort = (field: SortField) => {
    if (sortField === field) {
      if (sortOrder === "asc") {
        setSortOrder("desc");
      } else if (sortOrder === "desc") {
        setSortOrder(null);
        setSortField(null);
      }
    } else {
      setSortField(field);
      setSortOrder("asc");
    }
  };

  const sortedEvents = useMemo(() => {
    if (!sortField || !sortOrder) {
      return events;
    }

    const sorted = [...events].sort((a, b) => {
      let aValue: any;
      let bValue: any;

      switch (sortField) {
        case "fot":
          aValue = (a as any).fotId || "";
          bValue = (b as any).fotId || "";
          break;
        case "date":
          aValue = new Date(a.date + "T00:00:00").getTime();
          bValue = new Date(b.date + "T00:00:00").getTime();
          break;
        case "curso":
          aValue = ((a as any).curso || "").toLowerCase();
          bValue = ((b as any).curso || "").toLowerCase();
          break;
        case "instituicao":
          aValue = ((a as any).instituicao || "").toLowerCase();
          bValue = ((b as any).instituicao || "").toLowerCase();
          break;
        case "anoFormatura":
          aValue = (a as any).anoFormatura || 0;
          bValue = (b as any).anoFormatura || 0;
          break;
        case "empresa":
          aValue = ((a as any).empresa || "").toLowerCase();
          bValue = ((b as any).empresa || "").toLowerCase();
          break;
        case "type":
          aValue = a.type.toLowerCase();
          bValue = b.type.toLowerCase();
          break;
        case "status":
          aValue = a.status.toLowerCase();
          bValue = b.status.toLowerCase();
          break;
        default:
          return 0;
      }

      if (aValue < bValue) return sortOrder === "asc" ? -1 : 1;
      if (aValue > bValue) return sortOrder === "asc" ? 1 : -1;
      return 0;
    });

    return sorted;
  }, [events, sortField, sortOrder]);

  const getSortIcon = (field: SortField) => {
    if (sortField !== field) {
      return (
        <ArrowUpDown
          size={14}
          className="opacity-0 group-hover:opacity-50 transition-opacity"
        />
      );
    }
    if (sortOrder === "asc") {
      return <ArrowUp size={14} className="text-brand-gold" />;
    }
    return <ArrowDown size={14} className="text-brand-gold" />;
  };

  const formatDate = (date: string) => {
    const eventDate = new Date(date + "T00:00:00");
    return eventDate.toLocaleDateString("pt-BR", {
      day: "2-digit",
      month: "2-digit",
      year: "numeric",
    });
  };

  const getStatusDisplay = (status: EventStatus) => {
    const statusLabels: Record<EventStatus, string> = {
      [EventStatus.PENDING_APPROVAL]: "Pendente",
      [EventStatus.CONFIRMED]: "Confirmado",
      [EventStatus.PLANNING]: "Planejamento",
      [EventStatus.IN_PROGRESS]: "Em Andamento",
      [EventStatus.DELIVERED]: "Entregue",
      [EventStatus.ARCHIVED]: "Arquivado",
    };
    return statusLabels[status] || status;
  };

  return (
    <div className="bg-white rounded-lg border border-gray-200 overflow-hidden shadow-sm">
      {/* Mobile Card View */}
      <div className="md:hidden divide-y divide-gray-100">
        {sortedEvents.map((event) => {
          let photographerAssignment = null;
          if (isPhotographer && currentProfessionalId && event.assignments) {
            photographerAssignment = event.assignments.find(a => a.professionalId === currentProfessionalId);
          }

          return (
            <div
              key={event.id}
              className="p-4 hover:bg-gray-50 active:bg-gray-100 transition-colors cursor-pointer"
              onClick={() => onEventClick(event)}
            >
              <div className="flex justify-between items-start mb-2">
                <div>
                  <span className="font-bold text-gray-900 block">FOT {event.fot || "-"}</span>
                  <span className="text-xs text-gray-500">{event.type}</span>
                </div>
                <span className="text-sm font-medium text-gray-600 bg-gray-100 px-2 py-1 rounded">
                  {formatDate(event.date)}
                </span>
              </div>

              <div className="mb-3 space-y-1">
                <p className="text-sm text-gray-800 font-medium">{event.curso || "Sem curso defined"}</p>
                <p className="text-sm text-gray-600">{event.instituicao || "-"}</p>
                <div className="flex items-center gap-2 text-xs text-gray-500">
                  <span>{event.empresa || "-"}</span>
                  <span>•</span>
                  <span>{event.anoFormatura || "-"}</span>
                </div>
              </div>

              <div className="flex justify-between items-center mt-3 pt-3 border-t border-gray-50">
                <span
                  className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${STATUS_COLORS[event.status] || "bg-gray-100 text-gray-800"}`}
                >
                  {getStatusDisplay(event.status)}
                </span>

                {(canApprove || isPhotographer) && (
                  <div onClick={(e) => e.stopPropagation()} className="flex items-center gap-2">
                    {canApprove && event.status === EventStatus.PENDING_APPROVAL && (
                      <button
                        onClick={(e) => onApprove?.(e, event.id)}
                        className="bg-green-500 text-white p-2 rounded-full hover:bg-green-600 transition-colors shadow-sm"
                        title="Aprovar evento"
                      >
                        <CheckCircle size={16} />
                      </button>
                    )}

                    {isPhotographer && photographerAssignment && (
                      <>
                        {photographerAssignment.status === "PENDENTE" && (
                          <div className="flex gap-2">
                            <button
                              onClick={(e) => onAssignmentResponse?.(e, event.id, "ACEITO")}
                              className="bg-green-100 text-green-700 px-3 py-1 rounded-md text-xs font-bold border border-green-200"
                            >
                              Aceitar
                            </button>
                            <button
                              onClick={(e) => {
                                const reason = prompt("Motivo da rejeição:");
                                if (reason) onAssignmentResponse?.(e, event.id, "REJEITADO", reason);
                              }}
                              className="bg-red-100 text-red-700 px-3 py-1 rounded-md text-xs font-bold border border-red-200"
                            >
                              Rejeitar
                            </button>
                          </div>
                        )}
                        {photographerAssignment.status === "ACEITO" && (
                          <span className="text-green-600 text-xs font-bold border border-green-200 bg-green-50 px-2 py-1 rounded">Aceito</span>
                        )}
                        {photographerAssignment.status === "REJEITADO" && (
                          <span className="text-red-600 text-xs font-bold border border-red-200 bg-red-50 px-2 py-1 rounded">Rejeitado</span>
                        )}
                      </>
                    )}
                  </div>
                )}
              </div>
            </div>
          );
        })}
      </div>

      <div className="hidden md:block overflow-x-auto">
        <table className="w-full">
          <thead className="bg-gray-50 border-b border-gray-200">
            <tr>
              <th
                className="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider cursor-pointer hover:bg-gray-100 transition-colors group"
                onClick={() => handleSort("fot")}
              >
                <div className="flex items-center gap-2">
                  FOT
                  {getSortIcon("fot")}
                </div>
              </th>
              <th
                className="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider cursor-pointer hover:bg-gray-100 transition-colors group"
                onClick={() => handleSort("date")}
              >
                <div className="flex items-center gap-2">
                  Data
                  {getSortIcon("date")}
                </div>
              </th>
              <th
                className="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider cursor-pointer hover:bg-gray-100 transition-colors group"
                onClick={() => handleSort("curso")}
              >
                <div className="flex items-center gap-2">
                  Curso
                  {getSortIcon("curso")}
                </div>
              </th>
              <th
                className="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider cursor-pointer hover:bg-gray-100 transition-colors group"
                onClick={() => handleSort("instituicao")}
              >
                <div className="flex items-center gap-2">
                  Instituição
                  {getSortIcon("instituicao")}
                </div>
              </th>
              <th
                className="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider cursor-pointer hover:bg-gray-100 transition-colors group"
                onClick={() => handleSort("anoFormatura")}
              >
                <div className="flex items-center gap-2">
                  Ano Formatura
                  {getSortIcon("anoFormatura")}
                </div>
              </th>
              <th
                className="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider cursor-pointer hover:bg-gray-100 transition-colors group"
                onClick={() => handleSort("empresa")}
              >
                <div className="flex items-center gap-2">
                  Empresa
                  {getSortIcon("empresa")}
                </div>
              </th>
              <th
                className="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider cursor-pointer hover:bg-gray-100 transition-colors group"
                onClick={() => handleSort("type")}
              >
                <div className="flex items-center gap-2">
                  Tipo Evento
                  {getSortIcon("type")}
                </div>
              </th>
              <th
                className="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider cursor-pointer hover:bg-gray-100 transition-colors group"
                onClick={() => handleSort("status")}
              >
                <div className="flex items-center gap-2">
                  Status
                  {getSortIcon("status")}
                </div>
              </th>
              {(canApprove || isPhotographer) && (
                <th className="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider w-32">
                  Ações
                </th>
              )}
            </tr>
          </thead>
          <tbody className="divide-y divide-gray-100">
            {sortedEvents.map((event) => {
              // Logic to find photographer assignment status
              let photographerAssignment = null;
              if (isPhotographer && currentProfessionalId && event.assignments) {
                photographerAssignment = event.assignments.find(a => a.professionalId === currentProfessionalId);
              }

              return (
                <tr
                  key={event.id}
                  onClick={() => onEventClick(event)}
                  className="hover:bg-gray-50 cursor-pointer transition-colors"
                >
                  <td className="px-4 py-3">
                    <span className="text-sm font-medium text-gray-900">
                      {event.fot || "-"}
                    </span>
                  </td>
                  <td className="px-4 py-3">
                    <span className="text-sm text-gray-600">
                      {formatDate(event.date)}
                    </span>
                  </td>
                  <td className="px-4 py-3">
                    <span className="text-sm text-gray-600">
                      {event.curso || "-"}
                    </span>
                  </td>
                  <td className="px-4 py-3">
                    <span className="text-sm text-gray-600">
                      {event.instituicao || "-"}
                    </span>
                  </td>
                  <td className="px-4 py-3">
                    <span className="text-sm text-gray-600">
                      {event.anoFormatura || "-"}
                    </span>
                  </td>
                  <td className="px-4 py-3">
                    <span className="text-sm text-gray-600">
                      {event.empresa || "-"}
                    </span>
                  </td>
                  <td className="px-4 py-3">
                    <span className="text-sm text-gray-600">{event.type}</span>
                  </td>
                  <td className="px-4 py-3">
                    <span
                      className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${STATUS_COLORS[event.status] || "bg-gray-100 text-gray-800"
                        }`}
                    >
                      {getStatusDisplay(event.status)}
                    </span>
                  </td>
                  {(canApprove || isPhotographer) && (
                    <td
                      className="px-4 py-3"
                      onClick={(e) => e.stopPropagation()}
                    >
                      <div className="flex items-center gap-2">
                        {canApprove && event.status === EventStatus.PENDING_APPROVAL && (
                          <button
                            onClick={(e) => onApprove?.(e, event.id)}
                            className="bg-green-500 text-white px-2 py-1 rounded text-xs font-semibold hover:bg-green-600 transition-colors flex items-center gap-1 whitespace-nowrap"
                            title="Aprovar evento"
                          >
                            <CheckCircle size={12} />
                            Aprovar
                          </button>
                        )}

                        {isPhotographer && photographerAssignment && (
                          <>
                            {photographerAssignment.status === "PENDENTE" && (
                              <>
                                <button
                                  onClick={(e) => onAssignmentResponse?.(e, event.id, "ACEITO")}
                                  className="bg-green-500 text-white px-2 py-1 rounded text-xs font-semibold hover:bg-green-600 transition-colors"
                                  title="Aceitar"
                                >
                                  Aceitar
                                </button>
                                <button
                                  onClick={(e) => {
                                    const reason = prompt("Motivo da rejeição:");
                                    if (reason) onAssignmentResponse?.(e, event.id, "REJEITADO", reason);
                                  }}
                                  className="bg-red-500 text-white px-2 py-1 rounded text-xs font-semibold hover:bg-red-600 transition-colors"
                                  title="Rejeitar"
                                >
                                  Rejeitar
                                </button>
                              </>
                            )}
                            {photographerAssignment.status === "ACEITO" && (
                              <span className="text-green-600 text-xs font-bold border border-green-200 bg-green-50 px-2 py-1 rounded">Aceito</span>
                            )}
                            {photographerAssignment.status === "REJEITADO" && (
                              <span className="text-red-600 text-xs font-bold border border-red-200 bg-red-50 px-2 py-1 rounded" title={photographerAssignment.reason}>Rejeitado</span>
                            )}
                          </>
                        )}
                      </div>
                    </td>
                  )}
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>

      {sortedEvents.length === 0 && (
        <div className="text-center py-12 text-gray-500">
          <p>Nenhum evento encontrado.</p>
        </div>
      )}
    </div>
  );
};