"use client"

import { DEEPDEX_PAGES } from "@/components/deepdex/data/deepdex-page-routes"
import Link from "next/link"
import { CalendarSearch, Loader2 } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"

export function DeepdexUploadQueueReviewBulkActions({
  isSubmitting,
  onCheckObservationDates,
  isCheckingObservationDates = false,
}: {
  isSubmitting: boolean
  /** Structure module only: compare extracted observation dates with the saved ones. */
  onCheckObservationDates?: () => void
  isCheckingObservationDates?: boolean
}) {
  return (
    <Card>
      <CardHeader>
        <CardTitle className="text-base">Actions</CardTitle>
      </CardHeader>
      <CardContent className="flex flex-wrap gap-2">
        <Button variant="outline" asChild>
          <Link href={DEEPDEX_PAGES.uploadQueue}>Back to upload</Link>
        </Button>
        {onCheckObservationDates ? (
          <Button
            variant="outline"
            onClick={onCheckObservationDates}
            disabled={isSubmitting || isCheckingObservationDates}
            title="Compare the extracted observation dates with the dates already saved"
          >
            {isCheckingObservationDates ? (
              <Loader2 className="size-4 animate-spin" />
            ) : (
              <CalendarSearch className="size-4" />
            )}
            Check observation dates
          </Button>
        ) : null}
        <Button variant="outline" asChild>
          <Link href={DEEPDEX_PAGES.uploadQueue}>Cancel</Link>
        </Button>
      </CardContent>
    </Card>
  )
}