'use client';

import { useFileUpload, useUserFiles } from '@/hooks/useFiles';
import { useState } from 'react';

export default function FileUpload({ userId }: { userId: string }) {
  const { upload, loading } = useFileUpload();
  const { files, total, totalSize, refetch } = useUserFiles(userId);
  const [error, setError] = useState<string | null>(null);

  const handleUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (!file) return;

    // Validate file size (10MB max)
    if (file.size > 10 * 1024 * 1024) {
      setError('File too large. Max size: 10MB');
      return;
    }

    try {
      setError(null);
      const result = await upload(file, {
        path: `users/${userId}/`,
        isPublic: false,
      });

      console.log('Uploaded:', result.data.uploadFile);
      refetch(); // Refresh file list
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Upload failed');
    }
  };

  const formatBytes = (bytes: number) => {
    if (bytes === 0) return '0 Bytes';
    const k = 1024;
    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
  };

  return (
    <div className="max-w-4xl mx-auto p-6">
      <div className="mb-8">
        <h2 className="text-2xl font-bold mb-4">File Upload</h2>

        <div className="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center">
          <input
            type="file"
            onChange={handleUpload}
            disabled={loading}
            className="block w-full text-sm text-gray-500
              file:mr-4 file:py-2 file:px-4
              file:rounded-full file:border-0
              file:text-sm file:font-semibold
              file:bg-blue-50 file:text-blue-700
              hover:file:bg-blue-100
              disabled:opacity-50 disabled:cursor-not-allowed"
          />
          {loading && (
            <p className="mt-2 text-sm text-gray-600">Uploading...</p>
          )}
          {error && (
            <p className="mt-2 text-sm text-red-600">{error}</p>
          )}
        </div>
      </div>

      <div>
        <h3 className="text-xl font-semibold mb-4">
          Your Files ({total} files, {formatBytes(totalSize)})
        </h3>

        {files.length === 0 ? (
          <p className="text-gray-500">No files uploaded yet.</p>
        ) : (
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            {files.map((file) => (
              <div key={file.id} className="border rounded-lg p-4">
                {file.thumbnailUrl && (
                  <img
                    src={file.thumbnailUrl}
                    alt={file.name}
                    className="w-full h-48 object-cover rounded mb-2"
                  />
                )}
                <p className="font-medium truncate">{file.name}</p>
                <p className="text-sm text-gray-500">
                  {formatBytes(file.size)}
                </p>
                <a
                  href={file.url}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-blue-600 hover:underline text-sm"
                >
                  Download
                </a>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}

import FileUpload from '@/components/FileUpload';
import { auth } from '@/lib/auth'; // Your auth provider

export default async function FilesPage() {
  const session = await auth();

  if (!session?.user?.id) {
    return <p>Please log in to upload files.</p>;
  }

  return <FileUpload userId={session.user.id} />;
}

import { useDropzone } from 'react-dropzone';

const { getRootProps, getInputProps, isDragActive } = useDropzone({
  onDrop: async (acceptedFiles) => {
    for (const file of acceptedFiles) {
      await upload(file, {
        path: `users/${userId}/`,
        isPublic: false,
      });
    }
    refetch();
  },
  maxSize: 10 * 1024 * 1024, // 10MB
  accept: {
    'image/*': ['.jpeg', '.jpg', '.png', '.gif', '.webp'],
  },
});

const [progress, setProgress] = useState(0);

const handleUpload = async (file: File) => {
  const xhr = new XMLHttpRequest();

  xhr.upload.addEventListener('progress', (event) => {
    if (event.lengthComputable) {
      const percentComplete = (event.loaded / event.total) * 100;
      setProgress(percentComplete);
    }
  });

  // Upload with XHR for progress tracking
};

import { useFileDelete } from '@/hooks/useFiles';

const { remove } = useFileDelete();

const handleDelete = async (fileId: string) => {
  if (confirm('Delete this file?')) {
    await remove(fileId);
    refetch();
  }
};