'use client';

import { useState } from 'react';
import { ProfileLiveryUploadTemplate } from '@/templates/ProfileLiveryUploadTemplate';
import { ClientWrapperProps } from '@/lib/contracts/components/ComponentContracts';
import { ViewData } from '@/lib/contracts/view-data/ViewData';

export function ProfileLiveryUploadPageClient({ viewData: initialViewData }: Partial<ClientWrapperProps<ViewData>>) {
  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 (
    <ProfileLiveryUploadTemplate
      viewData={{}}
      selectedFile={selectedFile}
      previewUrl={previewUrl}
      isUploading={isUploading}
      onFilesSelected={handleFilesSelected}
      onUpload={handleUpload}
    />
  );
}