'use client';

import { useState, useEffect, useRef } from 'react';

const CHUNK_SIZE = 8 * 1024 * 1024; // 8 MB
const PARALLEL_UPLOADS = 4;

function bufferToBase64(buffer: ArrayBuffer) {
  let binary = '';
  const bytes = new Uint8Array(buffer);
  const len = bytes.byteLength;
  for (let i = 0; i < len; i++) {
    binary += String.fromCharCode(bytes[i]);
  }
  return window.btoa(binary).replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '');
}

function formatTime(seconds: number) {
    const minutes = Math.floor(seconds / 60);
    const remainingSeconds = Math.floor(seconds % 60);
    return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
}

function formatBytes(bytes: number, decimals = 2) {
    if (bytes === 0) return '0 Bytes';
    const k = 1024;
    const dm = decimals < 0 ? 0 : decimals;
    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
}

export default function Home() {
  const [selectedFile, setSelectedFile] = useState<File | null>(null);
  const [uploadState, setUploadState] = useState<'idle' | 'processing' | 'uploading' | 'complete'>('idle');
  const [progress, setProgress] = useState(0);
  const [downloadUrl, setDownloadUrl] = useState('');
  const [uploadedSize, setUploadedSize] = useState(0);
  const [uploadSpeed, setUploadSpeed] = useState(0);
  const [elapsedTime, setElapsedTime] = useState(0);
  const [etr, setEtr] = useState(0);
  const [copyState, setCopyState] = useState<'idle' | 'copied'>('idle');

  const timerRef = useRef<NodeJS.Timeout | null>(null);
  const lastUploadedSizeRef = useRef(0);
  const uploadedSizeRef = useRef(0);

  useEffect(() => {
    uploadedSizeRef.current = uploadedSize;
  }, [uploadedSize]);

  useEffect(() => {
    if (uploadState === 'uploading') {
      const startTime = Date.now();
      lastUploadedSizeRef.current = 0;

      timerRef.current = setInterval(() => {
        setElapsedTime((Date.now() - startTime) / 1000);
        const currentUploadedSize = uploadedSizeRef.current;
        const speed = currentUploadedSize - lastUploadedSizeRef.current;
        setUploadSpeed(speed > 0 ? speed : 0);

        if (speed > 0 && selectedFile) {
          const remainingSize = selectedFile.size - currentUploadedSize;
          setEtr(remainingSize / speed);
        }
        lastUploadedSizeRef.current = currentUploadedSize;
      }, 1000);
    } else if (timerRef.current) {
      clearInterval(timerRef.current);
      timerRef.current = null;
      setUploadSpeed(0);
    }

    return () => {
      if (timerRef.current) {
        clearInterval(timerRef.current);
      }
    };
  }, [uploadState, selectedFile]);

  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const files = event.target.files;
    if (files && files.length > 0) {
      handleFileSelect(files[0]);
    }
  };

  const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
    event.preventDefault();
    const files = event.dataTransfer.files;
    if (files && files.length > 0) {
      handleFileSelect(files[0]);
    }
  };
  
  const handleFileSelect = (file: File) => {
    setSelectedFile(file);
    startUploadProcess(file).catch(console.error);
  }

  const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {
    event.preventDefault();
  };

  const handleCopy = () => {
    navigator.clipboard.writeText(downloadUrl);
    setCopyState('copied');
    setTimeout(() => setCopyState('idle'), 2000);
  };

  const startUploadProcess = async (file: File) => {
    if (!file) return;

    setUploadState('processing');
    setProgress(0);
    setDownloadUrl('');
    setUploadedSize(0);
    setElapsedTime(0);
    setEtr(0);

    const fileKey = await window.crypto.subtle.generateKey({ name: 'AES-GCM', length: 256 }, true, ['encrypt', 'decrypt']);
    const numParts = Math.ceil(file.size / CHUNK_SIZE);
    const createResponse = await fetch('/api/create-file', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ filename: file.name, size: file.size, num_parts: numParts }),
    });
    const { file_id } = await createResponse.json();

    setUploadState('uploading');
    const chunks: { index: number; data: Blob }[] = [];
    for (let i = 0; i < numParts; i++) {
      const start = i * CHUNK_SIZE;
      const end = Math.min(start + CHUNK_SIZE, file.size);
      const chunk = file.slice(start, end);
      const iv = window.crypto.getRandomValues(new Uint8Array(12));
      const encryptedChunk = await window.crypto.subtle.encrypt({ name: 'AES-GCM', iv: iv }, fileKey, await chunk.arrayBuffer());
      const combinedData = new Blob([iv, new Uint8Array(encryptedChunk)]);
      chunks.push({ index: i, data: combinedData });
    }

    let uploadedCount = 0;
    const uploadChunk = async (chunk: { index: number; data: Blob }) => {
      const formData = new FormData();
      formData.append('file_id', file_id);
      formData.append('part_index', chunk.index.toString());
      formData.append('encrypted_chunk', chunk.data);
      await fetch('/api/upload-part', { method: 'POST', body: formData });
      uploadedCount++;
      const currentSize = uploadedCount * CHUNK_SIZE > file.size ? file.size : uploadedCount * CHUNK_SIZE;
      setUploadedSize(currentSize);
      setProgress(Math.round((uploadedCount / numParts) * 100));
    };

    const queue = [...chunks];
    const active: Promise<void>[] = [];
    while (queue.length > 0 || active.length > 0) {
        while (active.length < PARALLEL_UPLOADS && queue.length > 0) {
            const task = queue.shift()!;
            const promise = uploadChunk(task).finally(() => {
                const index = active.indexOf(promise);
                if (index > -1) active.splice(index, 1);
            });
            active.push(promise);
        }
        await Promise.race(active);
    }

    const completeResponse = await fetch('/api/complete-upload', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ file_id }),
    });
    const { download_token } = await completeResponse.json();

    const exportedKey = await window.crypto.subtle.exportKey('raw', fileKey);
    const keyString = bufferToBase64(exportedKey);
    setUploadState('complete');
    setDownloadUrl(`${window.location.origin}/download/${file_id}?token=${download_token}#${keyString}`);
  };

  return (
    <main className="flex min-h-screen flex-col items-center justify-center p-6 bg-gray-900 text-white font-sans">
        <div className="w-full max-w-xl">
            <div className="text-center mb-8">
                <h1 className="text-4xl font-bold">LockLoad</h1>
                <p className="text-lg text-gray-400">Upload large files, encrypted and stored on Discord. 7-day retention.</p>
            </div>

            <div className="w-full bg-gray-800 rounded-xl shadow-2xl p-8 space-y-6">
                {uploadState === 'idle' && (
                    <div 
                        onDrop={handleDrop} 
                        onDragOver={handleDragOver} 
                        className="border-2 border-dashed border-gray-600 rounded-lg p-12 text-center cursor-pointer hover:border-blue-400 hover:bg-gray-700/50 transition-colors duration-300"
                    >
                        <input type="file" className="hidden" id="file-upload" onChange={handleFileChange} />
                        <label htmlFor="file-upload" className="flex flex-col items-center justify-center cursor-pointer space-y-4">
                            <svg xmlns="http://www.w3.org/2000/svg" className="h-16 w-16 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1}>
                                <path strokeLinecap="round" strokeLinejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
                            </svg>
                            <p className="text-xl font-semibold">Drag & drop your file here</p>
                            <p className="text-gray-500">or click to select a file</p>
                        </label>
                    </div>
                )}

                {(uploadState === 'processing' || uploadState === 'uploading') && (
                    <div className="w-full space-y-4">
                        <div className="flex items-center justify-between">
                            <h2 className="text-2xl font-bold">Uploading...</h2>
                            <svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8 text-blue-400 animate-spin" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h5" />
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20 20v-5h-5" />
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 20v-5h5" />
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20 4v5h-5" />
                            </svg>
                        </div>
                        <p className="text-gray-400 truncate text-center">{selectedFile?.name}</p>
                        
                        <div className="space-y-2">
                            <div className="bg-gray-700 rounded-full h-4 w-full overflow-hidden">
                                <div className="bg-gradient-to-r from-blue-500 to-green-500 h-4 rounded-full transition-all duration-300 ease-in-out" style={{ width: `${progress}%` }}></div>
                            </div>
                            <div className="flex justify-between text-sm font-mono text-gray-300">
                                <span>{progress}%</span>
                                <span>{formatBytes(uploadedSize)} / {selectedFile ? formatBytes(selectedFile.size) : '0 Bytes'}</span>
                            </div>
                        </div>

                        <div className="grid grid-cols-3 gap-4 text-center text-sm font-mono text-gray-400 pt-2">
                            <div>
                                <p className="font-semibold">Speed</p>
                                <p>{formatBytes(uploadSpeed)}/s</p>
                            </div>
                            <div>
                                <p className="font-semibold">Elapsed</p>
                                <p>{formatTime(elapsedTime)}</p>
                            </div>
                            <div>
                                <p className="font-semibold">ETR</p>
                                <p>{etr > 0 && etr < Infinity ? formatTime(etr) : '--:--'}</p>
                            </div>
                        </div>
                    </div>
                )}

                {uploadState === 'complete' && (
                    <div className="text-center space-y-4">
                        <svg xmlns="http://www.w3.org/2000/svg" className="h-16 w-16 text-green-400 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                        <h2 className="text-2xl font-bold text-green-400">Upload Complete!</h2>
                        <p className="text-gray-300">Your file is ready. Save the link below.</p>
                        <div className="relative">
                            <input 
                                type="text" 
                                readOnly 
                                value={downloadUrl}
                                className="w-full p-3 pr-28 bg-gray-900 rounded-lg border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 font-mono text-sm"
                            />
                            <button 
                                onClick={handleCopy}
                                className="absolute inset-y-0 right-0 flex items-center px-4 bg-blue-600 hover:bg-blue-700 rounded-r-lg text-white font-semibold transition-colors duration-300"
                            >
                                {copyState === 'copied' ? 'Copied!' : 'Copy'}
                            </button>
                        </div>
                        <p className="text-xs text-gray-500">This link contains the decryption key. Keep it safe!</p>
                    </div>
                )}
            </div>
        </div>
    </main>
  );
}