"use client";

import { useState, useTransition } from "react";
import { ChevronDown } from "lucide-react";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "yt-dlp-transcript-common/components/ui/dropdown-menu";
import { clearFinishedLogsAction, type ClearLogsScope } from "../actions";

const OPTIONS: { scope: ClearLogsScope; label: string }[] = [
  { scope: "7d", label: "Older than 7 days" },
  { scope: "30d", label: "Older than 30 days" },
  { scope: "90d", label: "Older than 90 days" },
];

// Replaces the old (now no-op) "Clear archived logs" button. Prunes finished
// job logs by age or all at once; running/queued jobs are never touched (see
// pruneJobLogs). The directory also self-trims on job finish, so this is the
// manual escape hatch.
export function ClearLogsMenu() {
  const [pending, startTransition] = useTransition();
  const [open, setOpen] = useState(false);

  function clear(scope: ClearLogsScope): void {
    startTransition(async () => {
      await clearFinishedLogsAction(scope);
    });
  }

  return (
    <DropdownMenu open={open} onOpenChange={setOpen}>
      <DropdownMenuTrigger
        disabled={pending}
        className="inline-flex items-center gap-1 px-3 py-2 rounded-md border border-border text-sm hover:bg-muted disabled:opacity-50 outline-none focus-visible:ring-2 focus-visible:ring-ring"
      >
        {pending ? "Clearing…" : "Clear logs"}
        <ChevronDown className="h-4 w-4" aria-hidden="true" />
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end" className="min-w-48">
        {OPTIONS.map((o) => (
          <DropdownMenuItem key={o.scope} onSelect={() => clear(o.scope)}>
            {o.label}
          </DropdownMenuItem>
        ))}
        <DropdownMenuSeparator />
        <DropdownMenuItem
          variant="destructive"
          onSelect={() => clear("all")}
        >
          All finished logs
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}