'use client';

import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
import { useCallback } from 'react';
import { useState } from 'react';
import { twMerge } from 'tailwind-merge';

import Button, {
  ButtonShape,
  ButtonSize,
  ButtonVariant,
} from '@/components/button/Button';
import downloadBlob from '@/components/edit2025/downloadBlob';
import { toast } from '@/components/toast/Toast';
import {
  DownloadIcon,
  ErrorIcon,
  HeartIcon,
  HeartOutlineIcon,
  MoreHorizontalIcon,
  SparklesIcon,
} from '@/icons';

import { MediaCardWithOverlay } from './MediaCardWithOverlay';
import type {
  HistoryBatchItem,
  ToggleFavoriteHandler,
} from './generationHistoryTypes';
import { useTrackGenerationAction } from './useTrackGenerationAction';

interface GenerationHistoryItemProps {
  item: HistoryBatchItem;
  onToggleFavorite: ToggleFavoriteHandler;
  handleGenerateVideoFromImage?: () => void;
  onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;
  className?: string;
}

const MoreActionsMenu = ({
  item,
  handleGenerateVideoFromImage,
}: {
  item: HistoryBatchItem;
  handleGenerateVideoFromImage?: () => void;
}) => {
  const [showMenu, setShowMenu] = useState(false);
  const { trackGenerationAction } = useTrackGenerationAction();

  const handleDownload = useCallback(async () => {
    // Track download action (fire and forget - don't wait for response)
    trackGenerationAction({
      entityType: item.type === 'image-to-video' ? 'video' : item.type,
      entityId: item.id,
      action: 'download',
      clipId: item.clipId,
    });

    try {
      // Fetch the file as a blob
      const response = await fetch(item.url!);
      if (!response.ok) {
        throw new Error(`Network response was not ok: ${response.status}`);
      }

      const blob = await response.blob();
      const fileExtension = item.type === 'video' ? 'mp4' : 'jpg';
      const filename = `generated-${item.type}-cover-art-${Date.now()}.${fileExtension}`;

      downloadBlob(blob, filename);

      toast({
        title: `${item.type === 'video' ? 'Video' : 'Image'} downloaded`,
        status: 'success',
        duration: 2000,
        isClosable: true,
      });
    } catch (error) {
      toast({
        title: 'Download fallback',
        description: `Direct download failed. Opening ${item.type} in a new tab.`,
        status: 'info',
        duration: 3000,
        isClosable: true,
      });
    } finally {
      // Always close the menu, whether download succeeded or failed
      setShowMenu(false);
    }
  }, [trackGenerationAction, item]);

  return (
    <DropdownMenu.Root open={showMenu} onOpenChange={setShowMenu} modal={false}>
      <DropdownMenu.Trigger asChild>
        <Button
          variant={ButtonVariant.Glass}
          shape={ButtonShape.Pill}
          size={ButtonSize.Small}
          icon={MoreHorizontalIcon}
          onClick={(e: React.MouseEvent | React.KeyboardEvent) => {
            e.stopPropagation();
          }}
          iconOnly
          className='absolute top-2 right-2'
          aria-label='More actions'
        />
      </DropdownMenu.Trigger>
      <DropdownMenu.Portal>
        <DropdownMenu.Content
          align='center'
          side='bottom'
          sideOffset={8}
          className='z-[1401] w-[170px] overflow-hidden rounded-xl border border-border-primary bg-background-tertiary p-2 shadow-2xl'
          onClick={(e) => e.stopPropagation()}
          onPointerDown={(e) => e.stopPropagation()}
        >
          <DropdownMenu.Item
            onSelect={handleDownload}
            className='flex cursor-pointer items-center gap-3 rounded-lg px-2 py-2 text-sm text-white transition-colors outline-none hover:bg-background-secondary'
          >
            <DownloadIcon className='h-5 w-5' />
            <span>Download {item.type === 'video' ? 'Video' : 'Image'}</span>
          </DropdownMenu.Item>

          {item.type === 'image' && (
            <DropdownMenu.Item
              onSelect={() => handleGenerateVideoFromImage?.()}
              className='flex cursor-pointer items-center gap-3 rounded-lg px-2 py-2 text-sm text-white transition-colors outline-none hover:bg-background-secondary'
            >
              <SparklesIcon className='h-5 w-5' />
              <span>Generate Video</span>
            </DropdownMenu.Item>
          )}
        </DropdownMenu.Content>
      </DropdownMenu.Portal>
    </DropdownMenu.Root>
  );
};

const MediaOverlayButtons = ({
  item,
  onToggleFavorite,
  handleGenerateVideoFromImage,
}: {
  item: HistoryBatchItem;
  onToggleFavorite: ToggleFavoriteHandler;
  handleGenerateVideoFromImage?: () => void;
}) => {
  return (
    <>
      <Button
        variant={ButtonVariant.Glass}
        shape={ButtonShape.Pill}
        size={ButtonSize.Small}
        icon={item.isLiked ? HeartIcon : HeartOutlineIcon}
        iconOnly
        onClick={(e: React.MouseEvent) => {
          onToggleFavorite(item.type, item.id, item.isLiked, item.clipId);
          e.stopPropagation();
        }}
        className='absolute top-2 left-2'
        aria-label={item.isLiked ? 'Remove from favorites' : 'Add to favorites'}
      />
      {!!item.url && (
        <MoreActionsMenu
          item={item}
          handleGenerateVideoFromImage={handleGenerateVideoFromImage}
        />
      )}
    </>
  );
};

export const GenerationHistoryItem = ({
  item,
  onToggleFavorite,
  handleGenerateVideoFromImage,
  onClick,
  className,
}: GenerationHistoryItemProps) => {
  if (item.status === 'processing') {
    return (
      <div
        className={twMerge(
          'flex h-[200px] w-[117px] flex-col items-center justify-center gap-2 rounded-lg border border-border-secondary bg-background-tertiary',
          className
        )}
      >
        <SparklesIcon className='h-8 w-8 animate-pulse2 text-foreground-inactive' />
        <p className='text-xs text-foreground-inactive'>Generating...</p>
      </div>
    );
  }

  if (item.status === 'error') {
    return (
      <div
        className={twMerge(
          'flex h-[200px] w-[117px] flex-col items-center justify-center gap-2 rounded-lg border border-border-secondary bg-background-tertiary',
          className
        )}
      >
        <ErrorIcon className='h-8 w-8 text-foreground-inactive' />
        <p className='text-center text-xs text-foreground-inactive'>
          Failed to Generate
        </p>
      </div>
    );
  }

  if (!item.url) {
    return null;
  }

  return (
    <MediaCardWithOverlay
      id={item.id}
      type={item.type}
      mediaUrl={item.url}
      onClick={onClick}
      className={className}
      overlayButtons={
        <MediaOverlayButtons
          item={item}
          onToggleFavorite={onToggleFavorite}
          handleGenerateVideoFromImage={() => handleGenerateVideoFromImage?.()}
        />
      }
      bottomButton={
        item.type === 'image' && handleGenerateVideoFromImage ? (
          <Button
            variant={ButtonVariant.Glass}
            shape={ButtonShape.Pill}
            size={ButtonSize.Micro}
            icon={SparklesIcon}
            onClick={(e: React.MouseEvent) => {
              e.stopPropagation();
              handleGenerateVideoFromImage();
            }}
            className='w-full text-xs'
          >
            Animate
          </Button>
        ) : null
      }
    />
  );
};