'use client';

import { UploadDropzone } from '@/ui/UploadDropzone';
import { routes } from '@/lib/routing/RouteConfig';
import { 
  SharedBox, 
  SharedButton, 
  SharedStack, 
  SharedText, 
  SharedContainer,
  SharedCard
} from '@/components/shared/UIComponents';
import { Heading } from '@/ui/Heading';
import { MediaMetaPanel, mapMediaMetadata } from '@/ui/MediaMetaPanel';
import { MediaPreviewCard } from '@/ui/MediaPreviewCard';
import Link from 'next/link';
import { TemplateProps } from '@/lib/contracts/components/ComponentContracts';
import { ViewData } from '@/lib/contracts/view-data/ViewData';

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 (
    <SharedContainer size="md">
      <SharedBox paddingY={8}>
        <SharedBox mb={6}>
          <Heading level={1}>Upload livery</Heading>
          <SharedText color="text-gray-500">
            Upload your custom car livery. Supported formats: .png, .jpg, .tga
          </SharedText>
        </SharedBox>

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

          <SharedBox>
            {previewUrl ? (
              <SharedBox 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(),
                  })}
                />
              </SharedBox>
            ) : (
              <SharedCard center p={12}>
                <SharedText color="text-gray-500" align="center">
                  Select a file to see preview and details
                </SharedText>
              </SharedCard>
            )}
          </SharedBox>
        </SharedBox>
      </SharedBox>
    </SharedContainer>
  );
}
