"use client";

import { useState } from "react";
import { createBrowserClient } from "@supabase/ssr";
import { toast } from "sonner";
import { FileDown, Upload, X, Loader2 } from "lucide-react";

interface FileUploadProps {
    lessonId: string;
    currentFileUrl?: string | null;
    onUploadComplete: (url: string) => void;
    onRemove?: () => void;
    accept?: string;
    label?: string;
}

const ALLOWED_MIMES = [
    "application/pdf",
    "application/msword",
    "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
    "application/vnd.openxmlformats-officedocument.presentationml.presentation",
    "text/plain"
].join(",");

export default function FileUpload({
    lessonId,
    currentFileUrl,
    onUploadComplete,
    onRemove,
    accept = ALLOWED_MIMES,
    label = "Documento / Material"
}: FileUploadProps) {
    const [uploading, setUploading] = useState(false);

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

        setUploading(true);

        const supabase = createBrowserClient(
            process.env.NEXT_PUBLIC_SUPABASE_URL!,
            process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
        );

        // 1. Verify session
        const { data: { user }, error: authError } = await supabase.auth.getUser();
        if (authError || !user) {
            toast.error("Error de autenticación: Por favor inicia sesión de nuevo.");
            setUploading(false);
            return;
        }

        // 2. Create a unique file path: lesson_id/timestamp_filename
        const filePath = `${lessonId}/${Date.now()}_${file.name.replace(/\s+/g, '_')}`;

        // 3. Upload to Supabase Storage (assets bucket)
        const { error } = await supabase.storage
            .from("assets")
            .upload(filePath, file, {
                upsert: true,
            });

        if (error) {
            console.error("Storage upload error:", error);
            if (error.message.includes("row-level security policy")) {
                toast.error("Error de permisos: El bucket 'assets' no permite subidas para profesores.");
            } else {
                toast.error("Error al subir: " + error.message);
            }
            setUploading(false);
            return;
        }

        // 4. Get Public URL
        const { data: { publicUrl } } = supabase.storage
            .from("assets")
            .getPublicUrl(filePath);

        onUploadComplete(publicUrl);
        setUploading(false);
        toast.success("Archivo subido con éxito");
    };

    const fileName = currentFileUrl ? currentFileUrl.split('/').pop() : "";

    return (
        <div className="space-y-2">
            <label className="block text-sm font-medium text-slate-700">{label}</label>
            
            {currentFileUrl ? (
                <div className="flex items-center gap-3 p-3 border border-slate-200 rounded-lg bg-white group shadow-sm">
                    <div className="h-10 w-10 bg-slate-100 rounded flex items-center justify-center text-slate-500">
                        <FileDown className="h-5 w-5" />
                    </div>
                    <div className="flex-1 min-w-0">
                        <p className="text-sm font-medium text-slate-900 truncate">
                            {decodeURIComponent(fileName || "Archivo adjunto")}
                        </p>
                        <a 
                            href={currentFileUrl} 
                            target="_blank" 
                            rel="noopener noreferrer"
                            className="text-xs text-blue-600 hover:underline"
                        >
                            Ver archivo actual
                        </a>
                    </div>
                    <button
                        onClick={onRemove}
                        className="p-1.5 text-slate-400 hover:text-red-500 hover:bg-red-50 rounded-md transition-colors"
                        title="Eliminar archivo"
                    >
                        <X className="h-4 w-4" />
                    </button>
                    
                    <div className="relative">
                         <input
                            type="file"
                            accept={accept}
                            onChange={handleFileUpload}
                            disabled={uploading}
                            className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
                        />
                        <button className="text-xs bg-slate-100 text-slate-700 px-2 py-1 rounded border border-slate-200 hover:bg-slate-200">
                             Cambiar
                        </button>
                    </div>
                </div>
            ) : (
                <div className="relative border-2 border-dashed border-slate-300 rounded-lg p-6 hover:border-black hover:bg-slate-50 transition-all cursor-pointer group">
                    <input
                        type="file"
                        accept={accept}
                        onChange={handleFileUpload}
                        disabled={uploading}
                        className="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10"
                    />
                    <div className="flex flex-col items-center justify-center text-center space-y-2">
                        {uploading ? (
                            <Loader2 className="h-8 w-8 text-slate-400 animate-spin" />
                        ) : (
                            <Upload className="h-8 w-8 text-slate-400 group-hover:text-black" />
                        )}
                        <div>
                            <p className="text-sm font-medium text-slate-900">
                                {uploading ? "Subiendo archivo..." : "Haz clic o arrastra un archivo aquí"}
                            </p>
                            <p className="text-xs text-slate-500 mt-1">
                                Formatos permitidos: <span className="font-semibold">PDF, Word, PowerPoint o Texto (.txt)</span>
                            </p>
                            <p className="text-xs text-slate-400 mt-0.5">Máximo 50MB</p>
                        </div>
                    </div>
                </div>
            )}
        </div>
    );
}