"use client"

import * as React from "react"
import { useTranslations } from "next-intl"
import { Eye } from "lucide-react"

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/shared/components/ui/dialog"
import { Button } from "@/shared/components/ui/button"
import { FilePreview } from "./file-preview"
import type { FileAttachment } from "../types"

interface FilePreviewDialogProps {
  file: FileAttachment
  trigger?: React.ReactNode
  triggerLabel?: string
  triggerVariant?: "default" | "outline" | "secondary" | "ghost" | "destructive"
  triggerSize?: "default" | "sm" | "lg" | "icon"
}

export function FilePreviewDialog({
  file,
  trigger,
  triggerLabel,
  triggerVariant = "outline",
  triggerSize = "sm",
}: FilePreviewDialogProps): React.ReactElement {
  const t = useTranslations("files.preview")

  return (
    <Dialog>
      <DialogTrigger asChild>
        {trigger ?? (
          <Button type="button" variant={triggerVariant} size={triggerSize}>
            <Eye
              className={triggerLabel ? "mr-2 h-4 w-4" : "h-4 w-4"}
              aria-hidden="true"
            />
            {triggerLabel ? (
              <span>{triggerLabel}</span>
            ) : (
              <span className="sr-only">{t("trigger")}</span>
            )}
          </Button>
        )}
      </DialogTrigger>
      <DialogContent className="max-h-[90vh] max-w-5xl overflow-hidden">
        <DialogHeader>
          <DialogTitle className="truncate">{file.originalName}</DialogTitle>
          <DialogDescription>
            {t("title")} · {file.mimeType}
          </DialogDescription>
        </DialogHeader>
        <div className="max-h-[75vh] overflow-auto">
          <FilePreview file={file} />
        </div>
      </DialogContent>
    </Dialog>
  )
}
