/**
 * Download Result Component
 * Displays download result (success or error)
 */

'use client';

import * as React from 'react';
import { Box, Flex, Text, VStack, Image, HStack } from '@chakra-ui/react';
import { FiCheck, FiDownload, FiAlertCircle, FiX } from 'react-icons/fi';
import { useTranslations } from 'next-intl';
import { Alert } from '@/components/ui/feedback/alert';
import { Button } from '@/components/ui/buttons/button';
import { LinkButton } from '@/components/ui/buttons/link-button';
import { Tag } from '@/components/ui/data-display/tag';
import { Platform, PLATFORM_INFO, DownloadResponse } from '@/types/download';

interface DownloadResultProps {
  result: DownloadResponse | null;
  onReset: () => void;
}

export function DownloadResult({ result, onReset }: DownloadResultProps) {
  const t = useTranslations('download');

  if (!result) return null;

  // Error state
  if (!result.success || !result.data) {
    return (
      <Alert status="error" borderRadius="xl" variant="surface" icon={<Box as={FiAlertCircle} />}>
        <Text fontWeight="medium">{t('error')}</Text>
        <Text fontSize="sm">{result.error?.message || t('unknownError')}</Text>
        <Button size="sm" variant="outline" onClick={onReset} ml="auto">
          <Box as={FiX} mr={1} />
          {t('newDownload')}
        </Button>
      </Alert>
    );
  }

  const { data } = result;

  return (
    <Box
      p={6}
      borderRadius="xl"
      bg="bg.subtle"
      border="1px solid"
      borderColor="border.emphasized"
    >
      <VStack gap={4} align="stretch">
        {/* Success Header */}
        <Flex align="center" gap={3}>
          <Flex
            w={10}
            h={10}
            borderRadius="full"
            bg="green.100"
            _dark={{ bg: 'green.900' }}
            align="center"
            justify="center"
          >
            <Box as={FiCheck} color="green.600" boxSize={5} />
          </Flex>
          <Box>
            <Text fontWeight="semibold" fontSize="lg">
              {t('readyToDownload')}
            </Text>
            <Text fontSize="sm" color="fg.muted">
              {data.title || data.filename}
            </Text>
          </Box>
        </Flex>

        {/* Platform Badge */}
        {data.platform && data.platform !== 'unknown' && (
          <HStack>
            <Tag colorPalette="primary" variant="subtle" borderRadius="md" px={2} py={1}>
              {PLATFORM_INFO[data.platform]?.name}
            </Tag>
          </HStack>
        )}

        {/* Thumbnail if available */}
        {data.thumbnail && (
          <Box borderRadius="lg" overflow="hidden" maxH="200px">
            <Image
              src={data.thumbnail}
              alt={data.title || 'Video thumbnail'}
              w="100%"
              h="auto"
              objectFit="cover"
            />
          </Box>
        )}

        {/* Actions */}
        <Flex gap={3} direction={{ base: 'column', sm: 'row' }}>
          <LinkButton
            href={
              data.downloadUrl.startsWith('/api/download/serve')
                ? data.downloadUrl
                : `/api/proxy?url=${encodeURIComponent(data.downloadUrl)}&filename=${encodeURIComponent(data.filename)}`
            }
            target="_blank"
            rel="noopener noreferrer"
            colorPalette="primary"
            size="lg"
            flex={1}
            borderRadius="xl"
          >
            <Box as={FiDownload} mr={2} />
            {t('downloadFile')}
          </LinkButton>
          <Button
            variant="outline"
            size="lg"
            borderRadius="xl"
            onClick={onReset}
          >
            <Box as={FiX} mr={2} />
            {t('newDownload')}
          </Button>
        </Flex>

        {/* Help text */}
        <Text fontSize="xs" color="fg.muted" textAlign="center">
          {t('downloadHint')}
        </Text>
      </VStack>
    </Box>
  );
}
