"use client";

import { useState, useEffect } from "react";
import { api } from "@/lib/api";
import { Card } from "@/components/ui/Card";
import { Spinner } from "@/components/ui/Spinner";
import type { Muscle } from "@/lib/types";

interface MusclesStepProps {
  selectedIds: number[];
  onChange: (ids: number[]) => void;
}

export function MusclesStep({ selectedIds, onChange }: MusclesStepProps) {
  const [muscles, setMuscles] = useState<Muscle[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function fetch() {
      try {
        const data = await api.getMuscles();
        setMuscles(data);
      } catch (err) {
        console.error("Failed to fetch muscles:", err);
      } finally {
        setLoading(false);
      }
    }
    fetch();
  }, []);

  const toggle = (id: number) => {
    if (selectedIds.includes(id)) {
      onChange(selectedIds.filter((i) => i !== id));
    } else {
      onChange([...selectedIds, id]);
    }
  };

  if (loading) {
    return (
      <div className="flex items-center justify-center py-20">
        <Spinner size="lg" />
      </div>
    );
  }

  return (
    <div>
      <h2 className="text-2xl font-bold text-zinc-100 mb-2">
        Target Muscles
      </h2>
      <p className="text-zinc-400 mb-6">
        Select the muscle groups you want to focus on. Leave empty to target all
        muscle groups equally.
      </p>

      <button
        type="button"
        onClick={() => {
          if (selectedIds.length === muscles.length) {
            onChange([]);
          } else {
            onChange(muscles.map((m) => m.id));
          }
        }}
        className="mb-4 text-sm font-medium text-accent hover:underline"
      >
        {selectedIds.length === muscles.length ? "Deselect All" : "Select All"}
      </button>

      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3">
        {muscles.map((muscle) => {
          const isSelected = selectedIds.includes(muscle.id);
          return (
            <Card
              key={muscle.id}
              onClick={() => toggle(muscle.id)}
              className={`p-4 text-center transition-all duration-150 ${
                isSelected
                  ? "border-[#39FF14] bg-[rgba(57,255,20,0.1)]"
                  : ""
              }`}
            >
              <span
                className={`text-sm font-medium ${
                  isSelected ? "text-accent" : "text-zinc-100"
                }`}
              >
                {muscle.name}
              </span>
            </Card>
          );
        })}
      </div>
    </div>
  );
}