import Link from "next/link";
import { Badge } from "@/components/ui/Badge";
import type { SupersetExercise } from "@/lib/types";

function mediaUrl(path: string): string {
  if (typeof window === "undefined") return path;
  if (window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1") {
    return `${window.location.protocol}//${window.location.hostname}:8001${path}`;
  }
  return path;
}

interface ExerciseRowProps {
  exercise: SupersetExercise;
}

export function ExerciseRow({ exercise }: ExerciseRowProps) {
  const ex = exercise.exercise;

  const details: string[] = [];
  if (exercise.reps) {
    details.push(`${exercise.reps} reps`);
  }
  if (exercise.duration) {
    details.push(`${exercise.duration}s`);
  }
  if (exercise.weight) {
    details.push(`${exercise.weight} lbs`);
  }

  const muscles = ex.muscles?.map((m) => m.name) || [];

  return (
    <div className="flex items-center justify-between px-4 py-3 border-b border-zinc-800/50 last:border-b-0">
      <div className="flex-1 min-w-0">
        <div className="flex items-center gap-2">
          <span className="text-sm font-medium text-zinc-100 truncate">
            {ex.name}
          </span>
          {ex.video_url && (
            <Link
              href={mediaUrl(ex.video_url)}
              target="_blank"
              rel="noopener noreferrer"
              className="flex-shrink-0 text-[#39FF14] hover:text-[#39FF14]/80 transition-colors"
              title="Watch video"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="16"
                height="16"
                viewBox="0 0 24 24"
                fill="currentColor"
                stroke="none"
              >
                <polygon points="5 3 19 12 5 21 5 3" />
              </svg>
            </Link>
          )}
        </div>

        {details.length > 0 && (
          <p className="text-xs text-zinc-400 mt-0.5">{details.join(" / ")}</p>
        )}

        {muscles.length > 0 && (
          <div className="flex flex-wrap gap-1 mt-1.5">
            {muscles.map((name) => (
              <Badge
                key={name}
                variant="default"
                className="text-[10px] px-1.5 py-0"
              >
                {name}
              </Badge>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}