"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 { Equipment } from "@/lib/types";

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

export function EquipmentStep({ selectedIds, onChange }: EquipmentStepProps) {
  const [equipment, setEquipment] = useState<Equipment[]>([]);
  const [loading, setLoading] = useState(true);

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

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

  // Group by category
  const grouped = equipment.reduce<Record<string, Equipment[]>>(
    (acc, item) => {
      const cat = item.category || "Other";
      if (!acc[cat]) acc[cat] = [];
      acc[cat].push(item);
      return acc;
    },
    {}
  );

  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">
        What equipment do you have?
      </h2>
      <p className="text-zinc-400 mb-6">
        Select all the equipment you have access to. This helps us build
        workouts tailored to your setup.
      </p>

      {Object.entries(grouped).map(([category, items]) => (
        <div key={category} className="mb-6">
          <h3 className="text-sm font-semibold text-zinc-400 uppercase tracking-wider mb-3">
            {category}
          </h3>
          <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
            {items.map((item) => {
              const isSelected = selectedIds.includes(item.id);
              return (
                <Card
                  key={item.id}
                  onClick={() => toggle(item.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"
                    }`}
                  >
                    {item.name}
                  </span>
                </Card>
              );
            })}
          </div>
        </div>
      ))}
    </div>
  );
}