import type { SessionLog } from '../../types';

interface SessionDetailProps {
  logs: SessionLog[];
}

export function SessionDetail({ logs }: SessionDetailProps) {
  if (!logs || logs.length === 0) {
    return <p className="text-sm text-gray-500 py-2">Keine Sätze aufgezeichnet.</p>;
  }

  // Gruppiere nach Übung
  const grouped = new Map<number, { name: string; logs: SessionLog[] }>();
  for (const log of logs) {
    if (!grouped.has(log.exercise_id)) {
      grouped.set(log.exercise_id, { name: log.exercise_name, logs: [] });
    }
    grouped.get(log.exercise_id)!.logs.push(log);
  }

  return (
    <div className="space-y-3">
      {Array.from(grouped.entries()).map(([exerciseId, { name, logs: exLogs }]) => (
        <div key={exerciseId}>
          <h4 className="text-sm font-semibold text-gray-300 mb-1">{name}</h4>
          <div className="space-y-1">
            {exLogs
              .sort((a, b) => a.set_number - b.set_number)
              .map((log) => (
                <div
                  key={log.id}
                  className="flex items-center gap-2 text-sm text-gray-400 bg-gray-800 rounded px-3 py-1.5"
                >
                  <span className="text-gray-500 w-14">Satz {log.set_number}</span>
                  <span className="font-medium text-gray-200">
                    {log.weight_kg} kg x {log.reps}
                  </span>
                  {log.note && (
                    <span className="text-gray-500 text-xs ml-auto">({log.note})</span>
                  )}
                </div>
              ))}
          </div>
        </div>
      ))}
    </div>
  );
}
