"use client";

import { ArrowUpDown, ArrowUp, ArrowDown } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";

export type SortOption =
  | "title-asc"
  | "title-desc"
  | "rating-desc"
  | "rating-asc"
  | "date-newest"
  | "date-oldest"
  | "status";

interface SortOptionsProps {
  currentSort: SortOption;
  onSortChange: (sort: SortOption) => void;
}

export function SortOptions({ currentSort, onSortChange }: SortOptionsProps) {
  const getSortLabel = () => {
    switch (currentSort) {
      case "title-asc":
        return "Title (A-Z)";
      case "title-desc":
        return "Title (Z-A)";
      case "rating-desc":
        return "Rating (High to Low)";
      case "rating-asc":
        return "Rating (Low to High)";
      case "date-newest":
        return "Newest First";
      case "date-oldest":
        return "Oldest First";
      case "status":
        return "Status";
      default:
        return "Sort by";
    }
  };

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline" size="sm" className="gap-2 bg-transparent">
          <ArrowUpDown className="h-4 w-4" />
          {getSortLabel()}
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="start" className="w-56">
        <DropdownMenuLabel>Sort by</DropdownMenuLabel>
        <DropdownMenuSeparator />

        <DropdownMenuLabel className="text-xs font-semibold text-muted-foreground">
          Title
        </DropdownMenuLabel>
        <DropdownMenuItem
          onClick={() => onSortChange("title-asc")}
          className="cursor-pointer"
        >
          <ArrowUp className="mr-2 h-4 w-4" />
          Title (A-Z)
        </DropdownMenuItem>
        <DropdownMenuItem
          onClick={() => onSortChange("title-desc")}
          className="cursor-pointer"
        >
          <ArrowDown className="mr-2 h-4 w-4" />
          Title (Z-A)
        </DropdownMenuItem>

        <DropdownMenuSeparator />
        <DropdownMenuLabel className="text-xs font-semibold text-muted-foreground">
          Rating
        </DropdownMenuLabel>
        <DropdownMenuItem
          onClick={() => onSortChange("rating-desc")}
          className="cursor-pointer"
        >
          <ArrowDown className="mr-2 h-4 w-4" />
          Rating (High to Low)
        </DropdownMenuItem>
        <DropdownMenuItem
          onClick={() => onSortChange("rating-asc")}
          className="cursor-pointer"
        >
          <ArrowUp className="mr-2 h-4 w-4" />
          Rating (Low to High)
        </DropdownMenuItem>

        <DropdownMenuSeparator />
        <DropdownMenuLabel className="text-xs font-semibold text-muted-foreground">
          Publication Date
        </DropdownMenuLabel>
        <DropdownMenuItem
          onClick={() => onSortChange("date-newest")}
          className="cursor-pointer"
        >
          <ArrowDown className="mr-2 h-4 w-4" />
          Newest First
        </DropdownMenuItem>
        <DropdownMenuItem
          onClick={() => onSortChange("date-oldest")}
          className="cursor-pointer"
        >
          <ArrowUp className="mr-2 h-4 w-4" />
          Oldest First
        </DropdownMenuItem>

        <DropdownMenuSeparator />
        <DropdownMenuLabel className="text-xs font-semibold text-muted-foreground">
          Status
        </DropdownMenuLabel>
        <DropdownMenuItem
          onClick={() => onSortChange("status")}
          className="cursor-pointer"
        >
          <ArrowUpDown className="mr-2 h-4 w-4" />
          Ongoing First
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}