'use client';

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import { Badge } from '@/components/ui/badge';
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from '@/components/ui/tooltip';
import type { UploadVideo } from '@/types';

import { formatUploadedAt, getUploadStatus } from './uploadUtils';

interface UploadDetailsDialogProps {
  upload: UploadVideo | null;
  open: boolean;
  onOpenChange: (open: boolean) => void;
}

export function UploadDetailsDialog({
  upload,
  open,
  onOpenChange,
}: UploadDetailsDialogProps) {
  const title = upload?.filename ?? 'Upload Details';

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-lg">
        <DialogHeader className="min-w-0 pr-8">
          <DialogTitle className="min-w-0 max-w-full overflow-hidden text-left">
            {upload?.filename ? (
              <TooltipProvider delayDuration={200}>
                <Tooltip>
                  <TooltipTrigger asChild>
                    <span
                      className="block w-full overflow-hidden text-ellipsis whitespace-nowrap"
                      title={title}
                    >
                      {title}
                    </span>
                  </TooltipTrigger>
                  <TooltipContent className="max-w-80 break-all">
                    {title}
                  </TooltipContent>
                </Tooltip>
              </TooltipProvider>
            ) : (
              title
            )}
          </DialogTitle>
          <DialogDescription>Uploaded video details</DialogDescription>
        </DialogHeader>

        {upload ? (
          <dl className="grid grid-cols-[120px_1fr] gap-x-4 gap-y-3 text-sm">
            <dt className="text-muted-foreground">Status</dt>
            <dd>
              <Badge className="rounded-full">{getUploadStatus(upload)}</Badge>
            </dd>
            <dt className="text-muted-foreground">Uploaded At</dt>
            <dd>{formatUploadedAt(upload.uploaded_at)}</dd>
            <dt className="text-muted-foreground">Uploaded By</dt>
            <dd>{upload.uploaded_by_email ?? '-'}</dd>
            <dt className="text-muted-foreground">Video ID</dt>
            <dd className="break-all font-mono text-xs">{upload.video_id}</dd>
          </dl>
        ) : null}
      </DialogContent>
    </Dialog>
  );
}