"use client";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";
import { Star, X } from "lucide-react";
import { useGetGenres } from "@/api/mangamochi";

interface FilterSidebarProps {
  selectedGenres: number[];
  selectedStatus: string[];
  minRating: number;
  onGenresChange: (genres: number[]) => void;
  onStatusChange: (status: string[]) => void;
  onRatingChange: (rating: number) => void;
}

const STATUSES = ["Ongoing", "Completed", "Hiatus"];

const RATINGS = [
  { label: "4.5+ Stars", value: 4.5 },
  { label: "4.0+ Stars", value: 4.0 },
  { label: "3.5+ Stars", value: 3.5 },
  { label: "All Ratings", value: 0 },
];

export function FilterSidebar({
  selectedGenres,
  selectedStatus,
  minRating,
  onGenresChange,
  onStatusChange,
  onRatingChange,
}: FilterSidebarProps) {
  const { data: genresData } = useGetGenres();

  const toggleGenre = (genre: number) => {
    if (selectedGenres.includes(genre)) {
      onGenresChange(selectedGenres.filter((g) => g !== genre));
    } else {
      onGenresChange([...selectedGenres, genre]);
    }
  };

  const toggleStatus = (status: string) => {
    if (selectedStatus.includes(status)) {
      onStatusChange(selectedStatus.filter((s) => s !== status));
    } else {
      onStatusChange([...selectedStatus, status]);
    }
  };

  const clearAllFilters = () => {
    onGenresChange([]);
    onStatusChange([]);
    onRatingChange(0);
  };

  const hasActiveFilters =
    selectedGenres.length > 0 || selectedStatus.length > 0 || minRating > 0;

  return (
    <aside className="w-64 border-r border-border bg-sidebar">
      <div className="sticky top-0 flex h-screen flex-col">
        {/* Header */}
        <div className="flex items-center justify-between border-b border-sidebar-border px-6 py-6">
          <h2 className="text-lg font-semibold text-sidebar-foreground">
            Filters
          </h2>
          {hasActiveFilters && (
            <Button
              variant="ghost"
              size="sm"
              onClick={clearAllFilters}
              className="h-8 px-2 text-xs"
            >
              Clear
            </Button>
          )}
        </div>

        {/* Filters */}
        <div className="flex-1 overflow-y-auto px-6 py-6">
          <div className="space-y-8">
            {/* Genres */}
            <div>
              <h3 className="mb-3 text-sm font-medium text-sidebar-foreground">
                Genres
              </h3>
              <div className="flex flex-wrap gap-2">
                {genresData?.map((genre) => {
                  const isSelected = selectedGenres.includes(genre.id);
                  return (
                    <Badge
                      key={genre.id}
                      variant={isSelected ? "default" : "outline"}
                      className={`cursor-pointer transition-colors ${
                        isSelected
                          ? "bg-sidebar-primary text-sidebar-primary-foreground hover:bg-sidebar-primary/90"
                          : "border-sidebar-border text-sidebar-foreground hover:bg-sidebar-accent"
                      }`}
                      onClick={() => toggleGenre(genre.id)}
                    >
                      {genre.name}
                      {isSelected && <X className="ml-1 h-3 w-3" />}
                    </Badge>
                  );
                })}
              </div>
            </div>

            <Separator className="bg-sidebar-border" />

            {/* Status */}
            <div>
              <h3 className="mb-3 text-sm font-medium text-sidebar-foreground">
                Status
              </h3>
              <div className="flex flex-wrap gap-2">
                {STATUSES.map((status) => {
                  const isSelected = selectedStatus.includes(status);
                  return (
                    <Badge
                      key={status}
                      variant={isSelected ? "default" : "outline"}
                      className={`cursor-pointer transition-colors ${
                        isSelected
                          ? "bg-sidebar-primary text-sidebar-primary-foreground hover:bg-sidebar-primary/90"
                          : "border-sidebar-border text-sidebar-foreground hover:bg-sidebar-accent"
                      }`}
                      onClick={() => toggleStatus(status)}
                    >
                      {status}
                      {isSelected && <X className="ml-1 h-3 w-3" />}
                    </Badge>
                  );
                })}
              </div>
            </div>

            <Separator className="bg-sidebar-border" />

            {/* Rating */}
            <div>
              <h3 className="mb-3 text-sm font-medium text-sidebar-foreground">
                Minimum Rating
              </h3>
              <div className="space-y-2">
                {RATINGS.map((rating) => {
                  const isSelected = minRating === rating.value;
                  return (
                    <button
                      key={rating.value}
                      onClick={() => onRatingChange(rating.value)}
                      className={`flex w-full items-center gap-2 rounded-md px-3 py-2 text-sm transition-colors ${
                        isSelected
                          ? "bg-sidebar-accent text-sidebar-accent-foreground"
                          : "text-sidebar-foreground hover:bg-sidebar-accent/50"
                      }`}
                    >
                      <Star
                        className={`h-4 w-4 ${isSelected ? "fill-sidebar-primary text-sidebar-primary" : "text-muted-foreground"}`}
                      />
                      <span>{rating.label}</span>
                    </button>
                  );
                })}
              </div>
            </div>
          </div>
        </div>
      </div>
    </aside>
  );
}