import React, { useState, useEffect, useCallback } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import {
    FlaskConical, // Outil de recherche/expérimentation
    BookOpen,       // Outil de gestion bibliographique
    BarChart4,     // Outil d'analyse statistique
    LayoutDashboard, // Dashboard
    Users,           // Gestion des utilisateurs
    Settings,        // Paramètres
    HelpCircle,      // Aide/Documentation
    Plus,            // Ajouter un outil
    Search,          // Recherche
    GripVertical,    // Pour le drag and drop
    ExternalLink,
    Loader2,
    CheckCircle,
    AlertTriangle,
    XCircle,
    List,
    Grid,
    UserPlus, // Pour l'inscription
    LogIn,       // Pour la connexion
    LogOut,
    KeyRound
} from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { cn } from '@/lib/utils';
import { Separator } from '@/components/ui/separator';
import {
    Sheet,
    SheetContent,
    SheetDescription,
    SheetHeader,
    SheetTitle,
    SheetTrigger,
} from "@/components/ui/sheet"
import { Textarea } from '@/components/ui/textarea';
import { Label } from '@/components/ui/label';
import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"
import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import * as z from "zod"

// ===============================
// Types & Interfaces
// ===============================

interface Tool {
    id: string;
    name: string;
    description: string;
    category: string;
    url: string;
    icon: React.ReactNode;
    addedBy: string; // User ID
    dateAdded: Date;
    tags: string[];
    ownedByCurrentUser: boolean;
}

interface User {
    id: string;
    name: string;
    role: 'admin' | 'user';
}

type Layout = 'grid' | 'list';

// ===============================
// Mock Data & Constants
// ===============================

const CATEGORIES = [
    { name: 'Analyse de Données', value: 'data-analysis' },
    { name: 'Gestion de Références', value: 'reference-management' },
    { name: 'Visualisation', value: 'visualization' },
    { name: 'Collaboration', value: 'collaboration' },
    { name: 'Outils Généraux', value: 'general' },
    { name: 'Bio-informatique', value: 'bioinformatics' },
    { name: 'Chimie', value: 'chemistry' },
    { name: 'Mathématiques', value: 'mathematics' },
    { name: 'Physique', value: 'physics' },
    { name: 'Sciences Sociales', value: 'social-sciences' },
    { name: 'Humanités Numériques', value: 'digital-humanities' },
];

const ICONS = {
    'data-analysis': BarChart4,
    'reference-management': BookOpen,
    'visualization': BarChart4, // Réutiliser, ou créer une icône spécifique
    'collaboration': Users,
    'general': FlaskConical,
    'bioinformatics': FlaskConical, // À remplacer si une icône plus spécifique existe
    'chemistry': FlaskConical,       // À remplacer
    'mathematics': FlaskConical,    // À remplacer
    'physics': FlaskConical,        // À remplacer
    'social-sciences': BookOpen,    // À remplacer
    'digital-humanities': BookOpen,    // À remplacer
};

// ===============================
// Helper Functions
// ===============================

const getCategoryIcon = (categoryValue: string) => {
    const category = CATEGORIES.find(c => c.value === categoryValue);
    return category ? ICONS[category.value] || FlaskConical : FlaskConical;
};

// ===============================
// Composants
// ===============================

// Composant pour afficher une seule carte d'outil
const ToolCard = ({ tool, layout, onDelete }: { tool: Tool, layout: Layout, onDelete?: (id: string) => void }) => {
    const Icon = getCategoryIcon(tool.category);

    return (
        <Card
            className={cn(
                "group overflow-hidden transition-all duration-300",
                "hover:shadow-lg hover:scale-[1.01]",
                "border-gray-800/50 bg-gray-950/50 backdrop-blur-md",
                "shadow-md hover:shadow-lg",
                layout === 'list' && "flex flex-col md:flex-row items-start md:items-center gap-4 relative"
            )}
        >
            <CardHeader className="p-4">
                {layout === 'grid' && <Icon className="w-8 h-8 text-blue-400 mb-2" />}
                <CardTitle className="text-lg font-semibold text-white group-hover:text-blue-400 transition-colors">
                    <a href={tool.url} target="_blank" rel="noopener noreferrer" className="hover:underline flex items-center gap-1.5">
                        {tool.name}
                        <ExternalLink className="w-4 h-4 text-gray-400" />
                    </a>
                </CardTitle>
                <CardDescription className="text-gray-400 text-sm">
                    {CATEGORIES.find(c => c.value === tool.category)?.name || 'Non catégorisé'}
                </CardDescription>
            </CardHeader>
            <CardContent className={cn("p-4", layout === 'list' && "flex-1")}>
                <p className={cn(
                    "text-gray-300",
                    layout === 'list' && "line-clamp-3"
                )}>
                    {tool.description}
                </p>
                {layout === 'list' && (
                    <div className="mt-4 flex flex-wrap gap-2">
                        {tool.tags.map(tag => (
                            <span
                                key={tag}
                                className="bg-gray-800 text-gray-300 px-2 py-1 rounded-full text-xs"
                            >
                                {tag}
                            </span>
                        ))}
                    </div>
                )}
            </CardContent>
             {tool.ownedByCurrentUser && onDelete && (
                <div className="absolute top-2 right-2">
                    <Button
                        variant="ghost"
                        size="icon"
                        onClick={() => onDelete(tool.id)}
                        className="text-red-400 hover:text-red-500"
                    >
                        <XCircle className="w-4 h-4" />
                    </Button>
                </div>
            )}
        </Card>
    );
};

// Composant pour la barre de navigation latérale
const Sidebar = ({ onAddTool, onMyTools }: { onAddTool: () => void, onMyTools: () => void }) => {
    const [isSidebarOpen, setIsSidebarOpen] = useState(true); // État pour la visibilité sur mobile

    return (
        <>
            {/* Bouton pour basculer la sidebar sur mobile */}
            <div className="md:hidden p-2">
                <Button
                    variant="ghost"
                    size="icon"
                    onClick={() => setIsSidebarOpen(!isSidebarOpen)}
                    className="text-gray-400 hover:text-white"
                >
                    {isSidebarOpen ? <XCircle className="w-6 h-6" /> : <List className="w-6 h-6" />}
                </Button>
            </div>

            {/* Contenu de la sidebar */}
            <motion.div
                initial={{ x: '-100%' }}
                animate={{ x: isSidebarOpen ? 0 : '-100%' }}
                transition={{ type: 'spring', stiffness: 260, damping: 20 }}
                className={cn(
                    "fixed top-0 left-0 h-screen w-64 bg-gray-900 border-r border-gray-800",
                    "p-4 space-y-6 transition-transform duration-300 ease-in-out",
                    "z-50 md:z-0", // Assure que la sidebar est au-dessus du contenu sur mobile
                    "md:translate-x-0" // Annule la translation sur desktop
                )}
                style={{
                    backdropFilter: 'blur(10px)',
                }}
            >
                <div className="flex items-center gap-2">
                    <FlaskConical className="w-6 h-6 text-blue-400" />
                    <h1 className="text-xl font-bold text-white">Recherche Tools</h1>
                </div>
                <Separator className="bg-gray-800" />
                <nav className="space-y-2">
                    <Button
                        variant="ghost"
                        className="w-full justify-start text-gray-400 hover:text-white hover:bg-gray-800"
                        onClick={() => { }}
                    >
                        <LayoutDashboard className="w-5 h-5 mr-2" />
                        Dashboard
                    </Button>
                    <Button
                        variant="ghost"
                        className="w-full justify-start text-gray-400 hover:text-white hover:bg-gray-800"
                        onClick={onMyTools} // Ajout de la gestion du clic
                    >
                        <FlaskConical className="w-5 h-5 mr-2" />
                        Mes Outils
                    </Button>
                    <Button
                        variant="ghost"
                        className="w-full justify-start text-gray-400 hover:text-white hover:bg-gray-800"
                        onClick={() => { }}
                    >
                        <Users className="w-5 h-5 mr-2" />
                        Utilisateurs
                    </Button>
                    <Button
                        variant="ghost"
                        className="w-full justify-start text-gray-400 hover:text-white hover:bg-gray-800"
                        onClick={() => { }}
                    >
                        <Settings className="w-5 h-5 mr-2" />
                        Paramètres
                    </Button>
                    <Button
                        variant="ghost"
                        className="w-full justify-start text-gray-400 hover:text-white hover:bg-gray-800"
                        onClick={() => { }}
                    >
                        <HelpCircle className="w-5 h-5 mr-2" />
                        Aide
                    </Button>
                </nav>
                <Separator className="bg-gray-800" />
                <Button
                    variant="outline"
                    onClick={onAddTool}
                    className="w-full bg-blue-500/20 text-blue-400 hover:bg-blue-500/30 hover:text-blue-300 border-blue-500/50"
                >
                    <Plus className="w-5 h-5 mr-2" />
                    Ajouter un outil
                </Button>
            </motion.div>
        </>
    );
};

// Form schema for adding a tool
const addToolFormSchema = z.object({
    name: z.string().min(2, {
        message: "Le nom doit contenir au moins 2 caractères.",
    }),
    description: z.string().min(10, {
        message: "La description doit contenir au moins 10 caractères.",
    }),
    url: z.string().url({ message: "URL invalide." }),
    category: z.string().nonempty("Veuillez sélectionner une catégorie."),
    tags: z.array(z.string()),
});

// Composant pour ajouter un outil
const AddToolSheet = ({ onAdd }: { onAdd: (tool: Tool) => void }) => {
    const [isLoading, setIsLoading] = useState(false);
    const [error, setError] = useState<string | null>(null);

    const form = useForm<z.infer<typeof addToolFormSchema>>({
        resolver: zodResolver(addToolFormSchema),
        defaultValues: {
            name: "",
            description: "",
            url: "",
            category: "",
            tags: [],
        },
    })

    const handleAddTag = (newTag: string, tags: string[], setTags: (tags: string[]) => void) => {
        if (newTag.trim() && !tags.includes(newTag.trim())) {
            setTags([...tags, newTag.trim()]);
        }
    };

    const handleRemoveTag = (tagToRemove: string, tags: string[], setTags: (tags: string[]) => void) => {
        setTags(tags.filter(tag => tag !== tagToRemove));
    };

    const onSubmit = async (values: z.infer<typeof addToolFormSchema>) => {
        setIsLoading(true);
        setError(null);

        // Simuler un délai d'ajout
        try {
            await new Promise(resolve => setTimeout(resolve, 1000));
            const newTool: Tool = {
                id: crypto.randomUUID(),
                name: values.name,
                description: values.description,
                category: values.category,
                url: values.url,
                icon: getCategoryIcon(values.category), // Utiliser la fonction pour obtenir l'icône
                addedBy: 'user123', // Remplacer par l'ID de l'utilisateur connecté
                dateAdded: new Date(),
                tags: values.tags,
                ownedByCurrentUser: true, // Marquer l'outil comme appartenant à l'utilisateur actuel
            };
            onAdd(newTool);
            setIsLoading(false);
            form.reset(); // Réinitialiser le formulaire
        } catch (error: any) {
            setError(`Une erreur s'est produite : ${error.message}`);
            setIsLoading(false);
        }
    };

    return (
        <Sheet>
            <SheetTrigger asChild>
                <Button
                    variant="outline"
                    className="bg-blue-500/20 text-blue-400 hover:bg-blue-500/30 hover:text-blue-300 border-blue-500/50"
                >
                    <Plus className="w-5 h-5 mr-2" />
                    Ajouter un outil
                </Button>
            </SheetTrigger>
            <SheetContent className="bg-gray-900 border-gray-800 text-white sm:max-w-md">
                <SheetHeader>
                    <SheetTitle className="text-white">Ajouter un nouvel outil</SheetTitle>
                    <SheetDescription className="text-gray-400">
                        Partagez un outil que vous utilisez ou que vous trouvez utile pour la recherche.
                    </SheetDescription>
                </SheetHeader>
                <Form {...form}>
                    <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6 py-4">
                        {/* Nom de l'outil */}
                        <FormField
                            control={form.control}
                            name="name"
                            render={({ field }) => (
                                <FormItem>
                                    <FormLabel className="text-gray-300">
                                        Nom de l'outil <span className="text-red-500">*</span>
                                    </FormLabel>
                                    <FormControl>
                                        <Input
                                            placeholder="Nom de l'outil"
                                            className="bg-gray-800 border-gray-700 text-white"
                                            {...field}
                                        />
                                    </FormControl>
                                    <FormMessage />
                                </FormItem>
                            )}
                        />

                        {/* Description de l'outil */}
                        <FormField
                            control={form.control}
                            name="description"
                            render={({ field }) => (
                                <FormItem>
                                    <FormLabel className="text-gray-300">
                                        Description de l'outil <span className="text-red-500">*</span>
                                    </FormLabel>
                                    <FormControl>
                                        <Textarea
                                            placeholder="Description de l'outil"
                                            className="bg-gray-800 border-gray-700 text-white min-h-[100px]"
                                            {...field}
                                        />
                                    </FormControl>
                                    <FormMessage />
                                </FormItem>
                            )}
                        />

                        {/* URL de l'outil */}
                        <FormField
                            control={form.control}
                            name="url"
                            render={({ field }) => (
                                <FormItem>
                                    <FormLabel className="text-gray-300">
                                        URL de l'outil <span className="text-red-500">*</span>
                                    </FormLabel>
                                    <FormControl>
                                        <Input
                                            type="url"
                                            placeholder="https://example.com"
                                            className="bg-gray-800 border-gray-700 text-white"
                                            {...field}
                                        />
                                    </FormControl>
                                    <FormMessage />
                                </FormItem>
                            )}
                        />

                        {/* Catégorie de l'outil */}
                        <FormField
                            control={form.control}
                            name="category"
                            render={({ field }) => (
                                <FormItem>
                                    <FormLabel className="text-gray-300">
                                        Catégorie de l'outil <span className="text-red-500">*</span>
                                    </FormLabel>
                                    <FormControl>
                                        <select
                                            {...field}
                                            className="mt-1 block w-full bg-gray-800 border border-gray-700 text-white py-2 px-3 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                                        >
                                            <option value="">Sélectionner une catégorie</option>
                                            {CATEGORIES.map(cat => (
                                                <option key={cat.value} value={cat.value}>
                                                    {cat.name}
                                                </option>
                                            ))}
                                        </select>
                                    </FormControl>
                                    <FormMessage />
                                </FormItem>
                            )}
                        />

                        {/* Tags de l'outil */}
                        <FormField
                            control={form.control}
                            name="tags"
                            render={({ field }) => (
                                <FormItem>
                                    <FormLabel className="text-gray-300">Tags de l'outil</FormLabel>
                                    <FormControl>
                                        <div className="mt-1 flex flex-wrap gap-2">
                                            {field.value.map(tag => (
                                                <div
                                                    key={tag}
                                                    className="bg-gray-800 text-gray-300 px-2 py-1 rounded-full flex items-center gap-1"
                                                >
                                                    {tag}
                                                    <button
                                                        type="button"
                                                        onClick={() => {
                                                            const updatedTags = field.value.filter(t => t !== tag);
                                                            field.onChange(updatedTags);
                                                        }}
                                                        className="text-gray-400 hover:text-red-500"
                                                    >
                                                        <XCircle className="w-4 h-4" />
                                                    </button>
                                                </div>
                                            ))}
                                            <Input
                                                type="text"
                                                placeholder="Ajouter un tag"
                                                className="w-auto bg-gray-800 border-gray-700 text-white"
                                                onKeyDown={(e) => {
                                                    if (e.key === 'Enter') {
                                                        e.preventDefault();
                                                        const newTagValue = e.currentTarget.value.trim();
                                                        if (newTagValue) {
                                                            handleAddTag(newTagValue, field.value, (updatedTags) => field.onChange(updatedTags));
                                                            e.currentTarget.value = ''; // Clear input
                                                        }
                                                    }
                                                }}
                                            />
                                            <Button
                                                type="button" // Prevent form submission
                                                variant="outline"
                                                size="sm"
                                                onClick={() => {
                                                    const newTagValue = (document.querySelector('input[placeholder="Ajouter un tag"]') as HTMLInputElement)?.value.trim();
                                                    if (newTagValue) {
                                                        handleAddTag(newTagValue, field.value, (updatedTags) => field.onChange(updatedTags));
                                                        (document.querySelector('input[placeholder="Ajouter un tag"]') as HTMLInputElement).value = ''; // Clear input
                                                    }
                                                }}
                                                className="bg-gray-800 text-gray-300 hover:bg-gray-700 hover:text-white border-gray-700"
                                            >
                                                Ajouter
                                            </Button>
                                        </div>
                                    </FormControl>
                                    <FormMessage />
                                </FormItem>
                            )}
                        />

                        {/* Bouton d'ajout */}
                        <div className="mt-6">
                            <Button
                                type="submit"
                                disabled={isLoading}
                                className="w-full bg-blue-500 text-white hover:bg-blue-600"
                            >
                                {isLoading ? (
                                    <>
                                        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                                        Ajout en cours...
                                    </>
                                ) : (
                                    "Ajouter l'outil"
                                )}
                            </Button>
                            {error && (
                                <p className="mt-2 text-sm text-red-500">
                                    {error}
                                </p>
                            )}
                        </div>
                    </form>
                </Form>
            </SheetContent>
        </Sheet>
    );
};

// Form schema for user signup
const signUpFormSchema = z.object({
    name: z.string().min(2, { message: "Name must be at least 2 characters." }),
    email: z.string().email({ message: "Invalid email address." }),
    password: z.string().min(8, { message: "Password must be at least 8 characters." }),
});

// Form schema for user signin
const signInFormSchema = z.object({
    email: z.string().email({ message: "Invalid email address." }),
    password: z.string().min(8, { message: "Password must be at least 8 characters." }),
});

const ResearchToolsPlatform = () => {
    const [tools, setTools] = useState<Tool[]>([]);
    const [filteredTools, setFilteredTools] = useState<Tool[]>([]);
    const [searchTerm, setSearchTerm] = useState('');
    const [layout, setLayout] = useState<Layout>('grid'); // 'grid' or 'list'
    const [showMyTools, setShowMyTools] = useState(false);
    const [currentUser, setCurrentUser] = useState<User | null>(null); // Simuler l'utilisateur connecté
    const [isSignUpOpen, setIsSignUpOpen] = useState(false);
    const [isSignInOpen, setIsSignInOpen] = useState(false);
    const [loading, setLoading] = useState(true);

    const signUpForm = useForm<z.infer<typeof signUpFormSchema>>({
        resolver: zodResolver(signUpFormSchema),
        defaultValues: {
            name: "",
            email: "",
            password: "",
        },
    });

    const signInForm = useForm<z.infer<typeof signInFormSchema>>({
        resolver: zodResolver(signInFormSchema),
        defaultValues: {
            email: "",
            password: "",
        },
    });

    // Simuler la récupération des données et l'authentification
    useEffect(() => {
        const mockTools: Tool[] = [
            {
                id: '1',
                name: 'Sci-Hub',
                description: 'Accédez à des articles scientifiques gratuitement.',
                category: 'general',
                url: 'https://sci-hub.se/',
                icon: getCategoryIcon('general'),
                addedBy: 'user123',
                dateAdded: new Date(),
                tags: ['articles', 'recherche', 'accès libre'],
                ownedByCurrentUser: false
            },
            {
                id: '2',
                name: 'Zotero',
                description: 'Logiciel de gestion de références bibliographiques.',
                category: 'reference-management',
                url: 'https://www.zotero.org/',
                icon: getCategoryIcon('reference-management'),
                addedBy: 'user456',
                dateAdded: new Date(),
                tags: ['bibliographie', 'citations', 'références'],
                ownedByCurrentUser: false
            },
            {
                id: '3',
                name: 'Jupyter Notebook',
                description: 'Environnement interactif pour le calcul scientifique.',
                category: 'data-analysis',
                url: 'https://jupyter.org/',
                icon: getCategoryIcon('data-analysis'),
                addedBy: 'user789',
                dateAdded: new Date(),
                tags: ['python', 'data science', 'notebooks'],
                ownedByCurrentUser: false
            },
            {
                id: '4',
                name: 'Plotly',
                description: 'Bibliothèque de visualisation interactive.',
                category: 'visualization',
                url: 'https://plotly.com/',
                icon: getCategoryIcon('visualization'),
                addedBy: 'user123',
                dateAdded: new Date(),
                tags: ['graphiques', 'visualisation', 'données'],
                ownedByCurrentUser: false
            },
            {
                id: '5',
                name: 'Overleaf',
                description: 'Editeur LaTeX collaboratif en ligne.',
                category: 'collaboration',
                url: 'https://www.overleaf.com/',
                icon: getCategoryIcon('collaboration'),
                addedBy: 'user456',
                dateAdded: new Date(),
                tags: ['latex', 'collaboration', 'édition'],
                ownedByCurrentUser: false
            },
            {
                id: '6',
                name: 'BLAST',
                description: 'Outil de recherche d\'alignements de séquences biologiques.',
                category: 'bioinformatics',
                url: 'https://blast.ncbi.nlm.nih.gov/Blast.cgi',
                icon: getCategoryIcon('bioinformatics'),
                addedBy: 'user789',
                dateAdded: new Date(),
                tags: ['bioinformatique', 'séquences', 'alignement'],
                ownedByCurrentUser: false
            },
            {
                id: '7',
                name: 'PubChem',
                description: 'Base de données de molécules chimiques et leurs activités biologiques.',
                category: 'chemistry',
                url: 'https://pubchem.ncbi.nlm.nih.gov/',
                icon: getCategoryIcon('chemistry'),
                addedBy: 'user123',
                dateAdded: new Date(),
                tags: ['chimie', 'molécules', 'données'],
                ownedByCurrentUser: true  // Outil ajouté par l'utilisateur connecté
            },
            {
                id: '8',
                name: 'Wolfram Alpha',
                description: 'Moteur de connaissance computationnelle.',
                category: 'mathematics',
                url: 'https://www.wolframalpha.com/',
                icon: getCategoryIcon('mathematics'),
                addedBy: 'user456',
                dateAdded: new Date(),
                tags: ['mathématiques', 'calcul', 'connaissance'],
                 ownedByCurrentUser: true
            },
            {
                id: '9',
                name: 'arXiv',
                description: 'Archive ouverte de prépublications scientifiques.',
                category: 'physics',
                url: 'https://arxiv.org/',
                icon: getCategoryIcon('physics'),
                addedBy: 'user789',
                dateAdded: new Date(),
                tags: ['physique', 'prépublications', 'recherche'],
                ownedByCurrentUser: false
            },
            {
                id: '10',
                name: 'ICPSR',
                description: 'Archive de données de recherche en sciences sociales.',
                category: 'social-sciences',
                url: 'https://www.icpsr.umich.edu/',
                icon: getCategoryIcon('social-sciences'),
                addedBy: 'user123',
                dateAdded: new Date(),
                tags: ['sciences sociales', 'données', 'recherche'],
                ownedByCurrentUser: false
            },
            {
                id: '11',
                name: 'Voyant Tools',
                description: 'Outil d\'analyse de texte pour les humanités numériques.',
                category: 'digital-humanities',
                url: 'https://voyant-tools.org/',
                icon: getCategoryIcon('digital-humanities'),
                addedBy: 'user456',
                dateAdded: new Date(),
                tags: ['texte', 'analyse', 'humanités numériques'],
                ownedByCurrentUser: false
            },
        ];
        setTools(mockTools);

        // Simuler la connexion d'un utilisateur
        setTimeout(() => {
            setCurrentUser({ id: 'user123', name: 'John Doe', role: 'user' });
            setLoading(false);
        }, 1500);
    }, []);

    // Filtrer les outils en fonction de la recherche et de l'affichage "Mes outils"
    useEffect(() => {
        let filtered = tools;
        if (showMyTools && currentUser) {
            filtered = tools.filter(tool => tool.addedBy === currentUser.id);
        }
        filtered = filtered.filter(tool =>
            tool.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
            tool.description.toLowerCase().includes(searchTerm.toLowerCase()) ||
            tool.tags.some(tag => tag.toLowerCase().includes(searchTerm.toLowerCase()))
        );
        setFilteredTools(filtered);
    }, [searchTerm, tools, showMyTools, currentUser]);

     const handleAddTool = (newTool: Tool) => {
        setTools(prevTools => {
            const updatedTools = [newTool, ...prevTools];
             // Mettre à jour ownedByCurrentUser pour le nouvel outil
            return updatedTools.map(tool =>
                tool.id === newTool.id ? { ...tool, ownedByCurrentUser: true } : tool
            );
        });
    };

    const handleShowMyTools = () => {
        setShowMyTools(true);
    };

    const handleShowAllTools = () => {
        setShowMyTools(false);
    };

    const handleDeleteTool = (id: string) => {
        setTools(prevTools => prevTools.filter(tool => tool.id !== id));
    };

    const handleSignUp = async (values: z.infer<typeof signUpFormSchema>) => {
        // Simuler une requête d'inscription
        console.log('Signup form values:', values);
        setIsSignUpOpen(false); // Fermer la modal après l'inscription
        // Ici, vous devriez appeler votre API pour créer un nouvel utilisateur
        // et potentiellement le connecter directement.
        // Pour cet exemple, on simule une connexion réussie :
        setCurrentUser({ id: 'newUser123', name: values.name, role: 'user' });
    };

    const handleSignIn = async (values: z.infer<typeof signInFormSchema>) => {
       console.log('Signin form values:', values);
        setIsSignInOpen(false);
        setCurrentUser({id: 'user123', name: "test user", role: "user"})
    };

    const handleSignOut = () => {
        setCurrentUser(null);
        // Clear local storage here
    };

    if (loading) {
        return (
            <div className="flex items-center justify-center h-screen bg-gray-950">
                <Loader2 className="w-10 h-10 text-blue-400 animate-spin" />
            </div>
        );
    }

    return (
        <div className="flex h-screen bg-gray-950">
            <Sidebar onAddTool={() => { }} onMyTools={handleShowMyTools} />
            <div className="flex-1 p-6 overflow-y-auto">
                <div className="flex justify-between items-center mb-6">
                    <h2 className="text-2xl font-semibold text-white">
                        {showMyTools ? 'Mes Outils' : 'Outils de Recherche'}
                    </h2>
                    <div className="flex items-center gap-4">
                        <Input
                            type="text"
                            placeholder="Rechercher des outils..."
                            value={searchTerm}
                            onChange={(e) => setSearchTerm(e.target.value)}
                            className="w-64 bg-gray-800 border-gray-700 text-white"
                        />
                        <Button
                            variant="ghost"
                            size="icon"
                            onClick={() => setLayout(prev => prev === 'grid' ? 'list' : 'grid')}
                            className="text-gray-400 hover:text-white"
                        >
                            {layout === 'grid' ? <List className="w-5 h-5" /> : <Grid className="w-5 h-5" />}
                        </Button>
                        {!showMyTools && <AddToolSheet onAdd={handleAddTool} />}
                        {showMyTools && (
                            <Button onClick={handleShowAllTools} className="bg-gray-800 hover:bg-gray-700 text-white">
                                Voir tous les outils
                            </Button>
                        )}
                        {currentUser ? (
                            <Button onClick={handleSignOut} variant="outline" className="text-red-400 hover:text-red-300 border-red-500/50">
                                <LogOut className="w-4 h-4 mr-2" />
                                Déconnexion
                            </Button>
                        ) : (
                            <>
                                <Sheet open={isSignInOpen} onOpenChange={setIsSignInOpen}>
                                    <SheetTrigger asChild>
                                        <Button variant="outline" className="text-blue-400 hover:text-blue-300 border-blue-500/50">
                                            <LogIn className="w-4 h-4 mr-2" />
                                            Connexion
                                        </Button>
                                    </SheetTrigger>
                                    <SheetContent className="bg-gray-900 border-gray-800 text-white sm:max-w-md">
                                        <SheetHeader>
                                            <SheetTitle className="text-white">Connexion</SheetTitle>
                                            <SheetDescription className="text-gray-400">
                                                Connectez-vous à votre compte pour accéder à toutes les fonctionnalités.
                                            </SheetDescription>
                                        </SheetHeader>
                                        <Form {...signInForm}>
                                            <form onSubmit={signInForm.handleSubmit(handleSignIn)} className="space-y-6 py-4">
                                                <FormField
                                                    control={signInForm.control}
                                                    name="email"
                                                    render={({ field }) => (
                                                        <FormItem>
                                                            <FormLabel className="text-gray-300">Email</FormLabel>
                                                            <FormControl>
                                                                <Input
                                                                    placeholder="Email"
                                                                    className="bg-gray-800 border-gray-700 text-white"
                                                                    {...field}
                                                                />
                                                            </FormControl>
                                                            <FormMessage />
                                                        </FormItem>
                                                    )}
                                                />
                                                <FormField
                                                    control={signInForm.control}
                                                    name="password"
                                                    render={({ field }) => (
                                                        <FormItem>
                                                            <FormLabel className="text-gray-300">Mot de passe</FormLabel>
                                                            <FormControl>
                                                                <Input
                                                                    type="password"
                                                                    placeholder="Mot de passe"
                                                                    className="bg-gray-800 border-gray-700 text-white"
                                                                    {...field}
                                                                />
                                                            </FormControl>
                                                            <FormMessage />
                                                        </FormItem>
                                                    )}
                                                />
                                                <Button type="submit" className="w-full bg-blue-500 text-white hover:bg-blue-600">
                                                    Se connecter
                                                </Button>
                                            </form>
                                        </Form>
                                    </SheetContent>
                                </Sheet>

                                <Sheet open={isSignUpOpen} onOpenChange={setIsSignUpOpen}>
                                    <SheetTrigger asChild>
                                        <Button variant="outline" className="text-green-400 hover:text-green-300 border-green-500/50">
                                            <UserPlus className="w-4 h-4 mr-2" />
                                            Inscription
                                        </Button>
                                    </SheetTrigger>
                                    <SheetContent className="bg-gray-900 border-gray-800 text-white sm:max-w-md">
                                        <SheetHeader>
                                            <SheetTitle className="text-white">Inscription</SheetTitle>
                                            <SheetDescription className="text-gray-400">
                                                Créez un compte pour commencer à utiliser la plateforme.
                                            </SheetDescription>
                                        </SheetHeader>
                                        <Form {...signUpForm}>
                                            <form onSubmit={signUpForm.handleSubmit(handleSignUp)} className="space-y-6 py-4">
                                                <FormField
                                                    control={signUpForm.control}
                                                    name="name"
                                                    render={({ field }) => (
                                                        <FormItem>
                                                            <FormLabel className="text-gray-300">Nom</FormLabel>
                                                            <FormControl>
                                                                <Input
                                                                    placeholder="Nom"
                                                                    className="bg-gray-800 border-gray-700 text-white"
                                                                    {...field}
                                                                />
                                                            </FormControl>
                                                            <FormMessage />
                                                        </FormItem>
                                                    )}
                                                />
                                                <FormField
                                                    control={signUpForm.control}
                                                    name="email"
                                                    render={({ field }) => (
                                                        <FormItem>
                                                            <FormLabel className="text-gray-300">Email</FormLabel>
                                                            <FormControl>
                                                                <Input
                                                                    placeholder="Email"
                                                                    className="bg-gray-800 border-gray-700 text-white"
                                                                    {...field}
                                                                />
                                                            </FormControl>
                                                            <FormMessage />
                                                        </FormItem>
                                                    )}
                                                />
                                                <FormField
                                                    control={signUpForm.control}
                                                    name="password"
                                                    render={({ field }) => (
                                                        <FormItem>
                                                            <FormLabel className="text-gray-300">Mot de passe</FormLabel>
                                                            <FormControl>
                                                                <Input
                                                                    type="password"
                                                                    placeholder="Mot de passe"
                                                                    className="bg-gray-800 border-gray-700 text-white"
                                                                    {...field}
                                                                />
                                                            </FormControl>
                                                            <FormMessage />
                                                        </FormItem>
                                                    )}
                                                />
                                                <Button type="submit" className="w-full bg-green-500 text-white hover:bg-green-600">
                                                    S'inscrire
                                                </Button>
                                            </form>
                                        </Form>
                                    </SheetContent>
                                </Sheet>
                            </>
                        )}
                    </div>
                </div>

                <AnimatePresence>
                    {filteredTools.length === 0 ? (
                        <motion.div
                            initial={{ opacity: 0 }}
                            animate={{ opacity: 1 }}
                            exit={{ opacity: 0 }}
                            className="text-gray-400 text-center py-12"
                        >
                            {showMyTools
                                ? "Vous n'avez pas encore ajouté d'outils."
                                : "Aucun outil trouvé."
                            }
                        </motion.div>
                    ) : (
                        <div
                            className={cn(
                                "grid gap-6",
                                layout === 'grid'
                                    ? "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3"
                                    : "grid-cols-1"
                            )}
                        >
                            {filteredTools.map(tool => (
                                <motion.div
                                    key={tool.id}
                                    initial={{ opacity: 0, y: 20 }}
                                    animate={{ opacity: 1, y: 0 }}
                                    exit={{ opacity: 0, y: -20 }}
                                    transition={{ duration: 0.2 }}
                                >
                                    <ToolCard tool={tool} layout={layout}  onDelete={tool.ownedByCurrentUser ? handleDeleteTool : undefined}/>
                                </motion.div>
                            ))}
                        </div>
                    )}
                </AnimatePresence>
            </div>
        </div>
    );
};

export default ResearchToolsPlatform;