"use client"

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"

export function DeepdexIsinConflictCompareDialog({
  open,
  onOpenChange,
  isin,
  incomingName,
  incomingUrl,
  existingName,
  existingUrl,
}: {
  open: boolean
  onOpenChange: (open: boolean) => void
  isin: string
  incomingName: string
  incomingUrl: string | null
  existingName: string
  existingUrl: string | null
}) {
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="flex h-[90vh] w-[95vw] max-w-none flex-col gap-3 sm:max-w-none">
        <DialogHeader>
          <DialogTitle>Compare files for {isin}</DialogTitle>
          <DialogDescription>
            Existing Deepdex document on the left, this upload on the right.
          </DialogDescription>
        </DialogHeader>
        <div className="grid min-h-0 flex-1 gap-3 md:grid-cols-2">
          <ComparePane title="Existing" fileName={existingName} url={existingUrl} />
          <ComparePane title="This upload" fileName={incomingName} url={incomingUrl} />
        </div>
      </DialogContent>
    </Dialog>
  )
}

function ComparePane({
  title,
  fileName,
  url,
}: {
  title: string
  fileName: string
  url: string | null
}) {
  return (
    <div className="flex min-h-0 flex-col gap-2 rounded-md border">
      <div className="border-b px-3 py-2">
        <p className="text-sm font-medium">{title}</p>
        <p className="truncate text-xs text-muted-foreground" title={fileName}>
          {fileName || "—"}
        </p>
      </div>
      {url ? (
        <iframe title={`${title} PDF`} src={url} className="min-h-0 w-full flex-1 rounded-b-md bg-muted/20" />
      ) : (
        <p className="p-4 text-sm text-muted-foreground">Preview unavailable for this file.</p>
      )}
    </div>
  )
}