'use client';

import { useEffect, useId, useRef, useState } from "react";
import axios from 'axios';

type UploadStatus = 'idle' | 'uploading' | 'error' | 'success';
const MAX_FILE_SIZE = 1*1024*1024;

const FileUploader = () => {

    const [file, setFile] = useState<File|null>(null);
    const [uploadStatus, setUploadStatus] = useState<UploadStatus>('idle');
    const [uploadProgress, setUploadProgress] = useState<number>(0);
    const [isDragging, setIsDragging] = useState(false);
    const [validationError, setValidationError] = useState<string|null>(null);
    const inputRef = useRef<HTMLInputElement|null>(null);
    const statusRef = useRef<HTMLParagraphElement>(null);

    const inputId = useId();
    const labelId = useId();
    const hintId = useId();
    const statusMessageId = useId();
    const errorId = useId();
    const validationErrorId = useId();


    const handleDragOver = (e: React.DragEvent<HTMLLabelElement>) => {
        e.preventDefault();
        e.dataTransfer.dropEffect = 'copy';
    };

    const handleDragEnter = (e: React.DragEvent<HTMLLabelElement>) => {
        e.preventDefault();
        setIsDragging(true);
    };

    const handleDragLeave = (e: React.DragEvent<HTMLLabelElement>) => {
        e.preventDefault();
        if(e.currentTarget.contains(e.relatedTarget as Node)) return;
        setIsDragging(false);
    };

    const handleDrop = (e: React.DragEvent<HTMLLabelElement>) => {
        e.preventDefault();
        setIsDragging(false);
        if(uploadStatus === 'uploading') return;

        const droppedFile = e.dataTransfer.files?.[0];
        if(droppedFile) {
            selectFile(droppedFile);
        }
    }

    const selectFile = (nextFile: File|null) => {
        if(!nextFile) return;
        const error = checkFileSizeExceed(nextFile, MAX_FILE_SIZE);
        if(error) {
            setValidationError(error);
            setFile(null);
            setUploadStatus('idle');
            setUploadProgress(0);
            return;
        }
        
        setValidationError(null);
        setFile(nextFile);
        setUploadStatus('idle');
        setUploadProgress(0);
    };

    const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        if (e.target.files?.[0]) {
            selectFile(e.target.files[0]);
        }
        e.target.value = '';    // allow re-selecting same file
    }

    const formatFileSize = (bytes: number) => {
        if (bytes < 1024) return `${bytes} B`;
        if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
        return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
    };
    const checkFileSizeExceed = (file: File, size: number) => {
        if(file.size > size) {
            return `${file.name} is too large (${formatFileSize(file.size)}). Max size is ${formatFileSize(MAX_FILE_SIZE)}`;
        }
        return null;
    }

    const handleFileUpload = async () => {

        if(!file) return;
        setUploadStatus('uploading');
        setUploadProgress(0);

        const formData = new FormData();
        formData.append('file', file);

        try {
            await axios.post('https://httpbin.org/post', formData, {
                headers : {
                    'Content-Type': 'multipart/form-data',
                },
                onUploadProgress: (progressEvent) => {
                    const progress = progressEvent.total
                        ? Math.round((progressEvent.loaded*100)/progressEvent.total)
                        : 0;
                    setUploadProgress(progress);
                }
            });

            setUploadStatus('success');
            setUploadProgress(100);

        } catch(e) {
            setUploadStatus('error');
            setUploadProgress(0);
        }
    }

    const getStatusMessage = () => {
        if(uploadStatus === 'uploading') return `Uploading ${file?.name}, ${uploadProgress}% complete`;
        if(uploadStatus === 'success') return `${file?.name} uploaded successfully`;
        if(uploadStatus === 'error') return `Upload failed for ${file?.name}. Please try again`;
        if(file) return `${file.name} selected. ${formatFileSize(file.size)}`
        return '';
    }

    useEffect(() => {
        if(uploadStatus === 'success' || uploadStatus === 'error') {
            statusRef.current?.focus();
        }
    }, [uploadStatus])

    return (
        <div className="p-4 border border-border rounded-md flex flex-col gap-4">
            <label
                htmlFor={inputId}
                id={labelId}
                aria-describedby={
                    validationError ? `${hintId} ${validationErrorId}` : hintId
                }
                aria-invalid={!!validationError}
                aria-disabled={uploadStatus === 'uploading'}
                onDragEnter={handleDragEnter}
                onDragOver={handleDragOver}
                onDragLeave={handleDragLeave}
                onDrop={handleDrop}
                className={`
                    flex flex-col items-center justify-center gap-2
                    p-8 border-2 border-dashed rounded-md cursor-pointer
                    transition-colors duration-300 focus-within:ring-2 focus-within:ring-ring/60 focus-within:ring-offset-background focus-within:ring-offset-2
                    ${isDragging ? 'border-orange-400 bg-muted' : 'border-border'}
                    ${uploadStatus === 'uploading' ? 'pointer-events-none opacity-60' : ''}
                `}
            >
                <span className="text-sm text-foreground">
                    {isDragging ? 'Drop file here' : 'Drag & drop a file, or click to browse'}
                </span>
                <span id={hintId} className="text-xs text-muted-foreground">Max 1 file of size 1 mb</span>
                
                <input 
                    id={inputId}
                    ref={inputRef}
                    className="sr-only"
                    type="file"
                    onChange={handleFileChange} 
                />
            </label>


            <div>
                {file && (
                    <div className="flex items-center justify-between gap-3 rounded-md border border-border bg-muted/40 px-3 py-2">

                        <div className="min-w-0 flex-1">
                            <p className="truncate text-sm font-medium">{file.name}</p>
                            <p className="text-xs text-muted-foreground">
                            {formatFileSize(file.size)}
                            </p>
                        </div>

                        <button
                            type="button"
                            aria-label={`Remove ${file.name}`}
                            onClick={() => {setFile(null); setUploadStatus('idle')}}
                            className="cursor-pointer shrink-0 rounded-md border border-border px-2 py-1 text-xs text-muted-foreground hover:bg-muted"
                        >
                            Remove
                        </button>

                    </div>
                )}
            </div>

            <button 
                type="button"
                aria-busy={uploadStatus === 'uploading'}
                aria-describedby={uploadStatus === 'error' ? errorId : undefined}
                disabled={!file || uploadStatus === 'uploading'}
                className={`w-full sm:w-fit text-sm text-background bg-foreground hover:bg-foreground/80 active:scale-97 px-4 py-2 cursor-pointer rounded-md transition-colors transition-transform duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-foreground disabled:active:scale-100`}
                onClick={handleFileUpload}
            >Upload</button>

            {uploadStatus === 'uploading' &&
                <div className="flex flex-col gap-2 rounded-md border border-border p-4 text-sm">
                    <div
                        role="progressbar"
                        aria-valuemin={0}
                        aria-valuemax={100}
                        aria-valuenow={uploadProgress}
                        aria-labelledby={statusMessageId}
                        className="h-2 w-full overflow-hidden rounded-full bg-muted"
                    >
                        <div
                            className="h-full rounded-full bg-foreground transition-[width] duration-200"
                            style={{width: `${uploadProgress}%` }} 
                        >

                        </div>
                    </div>
                    <p className="text-muted-foreground" aria-hidden="true">
                        {uploadProgress}% uploaded
                    </p>
                </div> 
            }

            <div
                id={statusMessageId}
                role="status"
                aria-live="polite"
                aria-atomic="true"
                className="sr-only"
            >
                {getStatusMessage()}
            </div>

            {(uploadStatus === 'success' || uploadStatus === 'error') && (
                <p
                    ref={statusRef}
                    tabIndex={-1}
                    id={uploadStatus === 'error' ? errorId : undefined}
                    role={uploadStatus === 'error' ? 'alert' : 'status'}
                    className="text-sm p-4 bg-muted border border-border rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-ring/60 focus-within:ring-offset-background"
                    >
                    {uploadStatus === 'success'
                    ? 'File uploaded successfully'
                    : 'Error while uploading file. Please try again'}
                </p>
            )}

            {validationError && (
                <p
                    id={validationErrorId}
                    role="alert"
                    className="text-sm text-destructive border border-destructive/20 rounded-md p-3 bg-destructive/5"
                >
                    {validationError}
                </p>
            )}

        </div>
    );
}

export default FileUploader;