'use client';

import { UploadDropzone } from '@/components/media/UploadDropzone';
import { routes } from '@/lib/routing/RouteConfig';
import { Box } from '@/ui/Box';
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 Link from 'next/link';
import { useState } from 'react';

export function ProfileLiveryUploadPageClient() {
  const [selectedFile, setSelectedFile] = useState<File | null>(null);
  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
  const [isUploading, setIsUploading] = useState(false);

  const handleFilesSelected = (files: File[]) => {
    if (files.length > 0) {
      const file = files[0];
      setSelectedFile(file);
      const url = URL.createObjectURL(file);
      setPreviewUrl(url);
    } else {
      setSelectedFile(null);
      setPreviewUrl(null);
    }
  };

  const handleUpload = async () => {
    if (!selectedFile) return;
    setIsUploading(true);
    // Mock upload delay
    await new Promise(resolve => setTimeout(resolve, 2000));
    setIsUploading(false);
    alert('Livery uploaded successfully! (Mock)');
  };

  return (
    <Container size="md">
      <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={handleFilesSelected}
              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={handleUpload}
                isLoading={isUploading}
              >
                Upload Livery
              </Button>
            </Box>
          </Card>
        </Box>

        <Box>
          {previewUrl ? (
            <Box display="flex" flexDirection="col" gap={6}>
              <MediaPreviewCard
                src={previewUrl}
                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>
    </Container>
  );
}