WerkoutAPI/werkout-frontend/components/onboarding/GoalsStep.tsx

"use client";

import { Card } from "@/components/ui/Card";
import { GOAL_LABELS, FITNESS_LEVEL_LABELS } from "@/lib/types";

interface GoalsStepProps {
  fitnessLevel: number;
  primaryGoal: string;
  secondaryGoal: string;
  onChange: (data: {
    fitness_level?: number;
    primary_goal?: string;
    secondary_goal?: string;
  }) => void;
}

const FITNESS_LEVEL_DESCRIPTIONS: Record<number, string> = {
  1: "New to structured training or returning after a long break.",
  2: "Consistent training for 6+ months with good form knowledge.",
  3: "Years of experience with complex programming and periodization.",
  4: "Competitive athlete or highly experienced lifter.",
};

const goalOptions = Object.keys(GOAL_LABELS);

export function GoalsStep({
  fitnessLevel,
  primaryGoal,
  secondaryGoal,
  onChange,
}: GoalsStepProps) {
  return (
    <div>
      <h2 className="text-2xl font-bold text-zinc-100 mb-2">
        Your Fitness Profile
      </h2>
      <p className="text-zinc-400 mb-8">
        Tell us about your experience level and what you want to achieve.
      </p>

      {/* Fitness Level */}
      <div className="mb-8">
        <h3 className="text-sm font-semibold text-zinc-400 uppercase tracking-wider mb-3">
          Fitness Level
        </h3>
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
          {Object.entries(FITNESS_LEVEL_LABELS).map(([key, label]) => {
            const level = Number(key);
            const isSelected = fitnessLevel === level;
            return (
              <Card
                key={level}
                onClick={() => onChange({ fitness_level: level })}
                className={`p-4 transition-all duration-150 ${
                  isSelected
                    ? "border-[#39FF14] bg-[rgba(57,255,20,0.1)]"
                    : ""
                }`}
              >
                <div className="flex flex-col gap-1">
                  <span
                    className={`text-base font-semibold ${
                      isSelected ? "text-accent" : "text-zinc-100"
                    }`}
                  >
                    {label}
                  </span>
                  <span className="text-sm text-zinc-400">
                    {FITNESS_LEVEL_DESCRIPTIONS[level]}
                  </span>
                </div>
              </Card>
            );
          })}
        </div>
      </div>

      {/* Primary Goal */}
      <div className="mb-6">
        <label className="block text-sm font-semibold text-zinc-400 uppercase tracking-wider mb-2">
          Primary Goal
        </label>
        <select
          value={primaryGoal}
          onChange={(e) => onChange({ primary_goal: e.target.value })}
          className="w-full bg-zinc-800 border border-zinc-700 text-zinc-100 rounded-lg px-4 py-3 text-base focus:outline-none focus:border-accent transition-colors"
        >
          {goalOptions.map((goal) => (
            <option key={goal} value={goal}>
              {GOAL_LABELS[goal]}
            </option>
          ))}
        </select>
      </div>

      {/* Secondary Goal */}
      <div>
        <label className="block text-sm font-semibold text-zinc-400 uppercase tracking-wider mb-2">
          Secondary Goal
        </label>
        <select
          value={secondaryGoal}
          onChange={(e) => onChange({ secondary_goal: e.target.value })}
          className="w-full bg-zinc-800 border border-zinc-700 text-zinc-100 rounded-lg px-4 py-3 text-base focus:outline-none focus:border-accent transition-colors"
        >
          <option value="">None</option>
          {goalOptions
            .filter((g) => g !== primaryGoal)
            .map((goal) => (
              <option key={goal} value={goal}>
                {GOAL_LABELS[goal]}
              </option>
            ))}
        </select>
      </div>
    </div>
  );
}