import { useKeenSlider } from "keen-slider/react";
import { useRef, useEffect, useState } from "react";
import { ChevronLeft, ChevronRight, Users } from "lucide-react";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Link } from "react-router-dom";

const apiBase = import.meta.env.VITE_API_URL;

type Team = {
  id: number;
  name: string;
  liga?: string;
  beschreibung?: string;
  trainingszeiten?: string;
};

const TeamSection = () => {
  const [teams, setTeams] = useState<Team[]>([]);
  const [loading, setLoading] = useState(true);

  const [sliderRef, slider] = useKeenSlider<HTMLDivElement>({
    slides: {
      perView: 1,
      spacing: 16,
    },
    breakpoints: {
      "(min-width: 640px)": {
        slides: { perView: 2, spacing: 16 },
      },
      "(min-width: 1024px)": {
        slides: { perView: 3, spacing: 20 },
      },
      "(min-width: 1280px)": {
        slides: { perView: 4, spacing: 24 },
      },
    },
  });

  useEffect(() => {
    const fetchTeams = async () => {
      try {
        const res = await fetch(`${apiBase}/api/teams`);
        const data = await res.json();
        setTeams(data);
      } catch (err) {
        console.error("Fehler beim Laden der Teams:", err);
      } finally {
        setLoading(false);
      }
    };

    fetchTeams();
  }, []);

  return (
    <section id="team" className="py-16">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-12">
          <h2 className="text-3xl font-bold text-gray-900">Unsere Teams</h2>
          <p className="mt-4 text-xl text-gray-600">
            Von Anfängern bis Leistungssport – für jeden ist etwas dabei
          </p>
        </div>

        {loading ? (
          <p className="text-center text-gray-500">Lade Teams...</p>
        ) : (
          <div className="relative">
            {/* Navigation Buttons */}
            <button
              onClick={() => slider.current?.prev()}
              className="absolute left-0 top-1/2 -translate-y-1/2 z-10 bg-white rounded-full p-2 shadow-md hover:bg-frog-100"
            >
              <ChevronLeft className="text-frog-600" />
            </button>
            <button
              onClick={() => slider.current?.next()}
              className="absolute right-0 top-1/2 -translate-y-1/2 z-10 bg-white rounded-full p-2 shadow-md hover:bg-frog-100"
            >
              <ChevronRight className="text-frog-600" />
            </button>

            <div ref={sliderRef} className="keen-slider">
              {teams.map((team) => (
                <div key={team.id} className="keen-slider__slide">
                  <Card className="h-full hover:shadow-lg transition-shadow border-t-4 border-t-frog-500">
                    <CardHeader>
                      <CardTitle className="flex items-center">
                        <Users className="h-5 w-5 mr-2 text-frog-500" />
                        {team.name}
                      </CardTitle>
                      <CardDescription>{team.liga}</CardDescription>
                    </CardHeader>
                    <CardContent>
                      <p className="text-sm text-gray-600 mb-4">
                        {team.beschreibung ?? "Keine Beschreibung vorhanden."}
                      </p>
                      <div className="text-sm font-medium">
                        <span className="text-frog-600">Training:</span>{" "}
                        {team.trainingszeiten ?? "Nicht angegeben"}
                      </div>
                    </CardContent>
                    <CardFooter>
                      <Link to={`/teams/${team.id}`} className="w-full">
                        <Button
                          variant="outline"
                          size="sm"
                          className="w-full border-frog-500 text-frog-600 hover:bg-frog-50"
                        >
                          Team Details
                        </Button>
                      </Link>
                    </CardFooter>
                  </Card>
                </div>
              ))}
            </div>
          </div>
        )}
      </div>
    </section>
  );
};

export default TeamSection;
