import { UploadDropzone } from '@/components/shared/UploadDropzone';
import { TemplateProps } from '@/lib/contracts/components/ComponentContracts';
import { ViewData } from '@/lib/contracts/view-data/ViewData';
import { routes } from '@/lib/routing/RouteConfig';
import { Button } from '@/ui/Button';
import { Card } from '@/ui/Card';
import { Container } from '@/ui/Container';
import { Heading } from '@/ui/Heading';
import { MediaMetaPanel, mapMediaMetadata } from '@/ui/MediaMetaPanel';
import { MediaPreviewCard } from '@/ui/MediaPreviewCard';
import { Text } from '@/ui/Text';
import { Box } from '@/ui/Box';
import Link from 'next/link';

interface ProfileLiveryUploadTemplateProps extends TemplateProps<ViewData> {
  selectedFile: File | null;
  previewUrl: string | null;
  isUploading: boolean;
  onFilesSelected: (files: File[]) => void;
  onUpload: () => void;
}

export function ProfileLiveryUploadTemplate({
  selectedFile,
  previewUrl,
  isUploading,
  onFilesSelected,
  onUpload,
}: ProfileLiveryUploadTemplateProps) {
  return (
    <Container size="md">
      <Box paddingY={8}>
        <Box mb={6}>
          <Heading level={1}>Upload livery</Heading>
          <Text color="text-gray-500">
            Upload your custom car livery. Supported formats: .png, .jpg, .tga
          </Text>
        </Box>

        <Box display="grid" responsiveGridCols={{ base: 1, md: 2 }} gap={6}>
          <Box>
            <Card>
              <UploadDropzone
                onFilesSelected={onFilesSelected}
                accept=".png,.jpg,.jpeg,.tga"
                maxSize={10 * 1024 * 1024} // 10MB
                isLoading={isUploading}
              />
              
              <Box mt={6} display="flex" justifyContent="end" gap={3}>
                <Link href={routes.protected.profileLiveries}>
                  <Button variant="ghost">Cancel</Button>
                </Link>
                <Button 
                  variant="primary" 
                  disabled={!selectedFile || isUploading}
                  onClick={onUpload}
                  isLoading={isUploading}
                >
                  Upload Livery
                </Button>
              </Box>
            </Card>
          </Box>

          <Box>
            {previewUrl ? (
              <Box display="flex" flexDirection="col" gap={6}>
                <MediaPreviewCard
                  type="image"
                  src={previewUrl}
                  alt={selectedFile?.name || 'Livery preview'}
                  title={selectedFile?.name}
                  subtitle="Preview"
                  aspectRatio="16/9"
                />
                
                <MediaMetaPanel
                  items={mapMediaMetadata({
                    filename: selectedFile?.name,
                    size: selectedFile?.size,
                    contentType: selectedFile?.type || 'image/tga',
                    createdAt: new Date(),
                  })}
                />
              </Box>
            ) : (
              <Card center p={12}>
                <Text color="text-gray-500" align="center">
                  Select a file to see preview and details
                </Text>
              </Card>
            )}
          </Box>
        </Box>
      </Box>
    </Container>
  );
}