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

"use client";

import { Card } from "@/components/ui/Card";
import type { InjuryType } from "@/lib/types";

interface InjuryStepProps {
  injuryTypes: InjuryType[];
  onChange: (injuries: InjuryType[]) => void;
}

const INJURY_AREAS: { type: string; label: string; icon: string }[] = [
  { type: "knee", label: "Knee", icon: "🦵" },
  { type: "lower_back", label: "Lower Back", icon: "🔻" },
  { type: "upper_back", label: "Upper Back", icon: "🔺" },
  { type: "shoulder", label: "Shoulder", icon: "💪" },
  { type: "hip", label: "Hip", icon: "🦴" },
  { type: "wrist", label: "Wrist", icon: "✋" },
  { type: "ankle", label: "Ankle", icon: "🦶" },
  { type: "neck", label: "Neck", icon: "🧣" },
];

const SEVERITY_OPTIONS: {
  value: "mild" | "moderate" | "severe";
  label: string;
  color: string;
  bgColor: string;
  borderColor: string;
}[] = [
  {
    value: "mild",
    label: "Mild",
    color: "text-yellow-400",
    bgColor: "bg-yellow-500/10",
    borderColor: "border-yellow-500/50",
  },
  {
    value: "moderate",
    label: "Moderate",
    color: "text-orange-400",
    bgColor: "bg-orange-500/10",
    borderColor: "border-orange-500/50",
  },
  {
    value: "severe",
    label: "Severe",
    color: "text-red-400",
    bgColor: "bg-red-500/10",
    borderColor: "border-red-500/50",
  },
];

export function InjuryStep({ injuryTypes, onChange }: InjuryStepProps) {
  const getInjury = (type: string): InjuryType | undefined =>
    injuryTypes.find((i) => i.type === type);

  const toggleInjury = (type: string) => {
    const existing = getInjury(type);
    if (existing) {
      onChange(injuryTypes.filter((i) => i.type !== type));
    } else {
      onChange([...injuryTypes, { type, severity: "moderate" }]);
    }
  };

  const setSeverity = (type: string, severity: "mild" | "moderate" | "severe") => {
    onChange(
      injuryTypes.map((i) => (i.type === type ? { ...i, severity } : i))
    );
  };

  const getSeverityStyle = (type: string) => {
    const injury = getInjury(type);
    if (!injury) return "";
    const opt = SEVERITY_OPTIONS.find((s) => s.value === injury.severity);
    return opt ? `${opt.borderColor} ${opt.bgColor}` : "";
  };

  return (
    <div>
      <h2 className="text-2xl font-bold text-zinc-100 mb-2">
        Any injuries or limitations?
      </h2>
      <p className="text-zinc-400 mb-6">
        Select any body areas with current injuries. We will adjust your
        workouts to avoid aggravating them. You can skip this step if you have
        no injuries.
      </p>

      <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
        {INJURY_AREAS.map((area) => {
          const injury = getInjury(area.type);
          const isSelected = !!injury;

          return (
            <div key={area.type}>
              <Card
                onClick={() => toggleInjury(area.type)}
                className={`p-4 text-center transition-all duration-150 ${
                  isSelected ? getSeverityStyle(area.type) : ""
                }`}
              >
                <div className="flex flex-col items-center gap-1">
                  <span className="text-2xl">{area.icon}</span>
                  <span
                    className={`text-sm font-medium ${
                      isSelected ? "text-zinc-100" : "text-zinc-100"
                    }`}
                  >
                    {area.label}
                  </span>
                </div>
              </Card>

              {isSelected && (
                <div className="flex gap-1 mt-2">
                  {SEVERITY_OPTIONS.map((sev) => (
                    <button
                      key={sev.value}
                      type="button"
                      onClick={() => setSeverity(area.type, sev.value)}
                      className={`flex-1 text-xs py-1.5 rounded-lg border transition-all duration-150 ${
                        injury.severity === sev.value
                          ? `${sev.bgColor} ${sev.borderColor} ${sev.color} font-semibold`
                          : "border-zinc-700 text-zinc-500 hover:text-zinc-300"
                      }`}
                    >
                      {sev.label}
                    </button>
                  ))}
                </div>
              )}
            </div>
          );
        })}
      </div>

      {injuryTypes.length > 0 && (
        <div className="mt-6 p-4 rounded-lg bg-zinc-800/50 border border-zinc-700/50">
          <p className="text-sm text-zinc-400">
            <span className="font-medium text-zinc-300">
              {injuryTypes.length} area{injuryTypes.length !== 1 ? "s" : ""} selected.
            </span>{" "}
            Exercises that could aggravate these areas will be excluded or
            modified based on severity level.
          </p>
        </div>
      )}
    </div>
  );
}