'use client';

import React, { useState } from 'react';
import { Idea, IdeaStatus, IdeaCategory } from '@/lib/types';
import { Plus, X, GripVertical, CheckCircle, Circle, Clock, Lightbulb, Search, Trash2, Edit3, Save } from 'lucide-react';

interface IdeaBoardProps {
    ideas: Idea[];
    onUpdate: (ideas: Idea[]) => void;
}

const CATEGORIES: Record<IdeaCategory, { label: string, color: string, icon: any }> = {
    plot: { label: 'Intrigue', color: 'bg-rose-100 text-rose-800 border-rose-200', icon: Lightbulb },
    character: { label: 'Personnage', color: 'bg-blue-100 text-blue-800 border-blue-200', icon: Search },
    research: { label: 'Recherche', color: 'bg-amber-100 text-amber-800 border-amber-200', icon: Search },
    todo: { label: 'À faire', color: 'bg-slate-100 text-slate-800 border-slate-200', icon: CheckCircle },
};

const STATUS_LABELS: Record<IdeaStatus, string> = {
    todo: 'Idées / À faire',
    progress: 'En cours',
    done: 'Terminé / Validé'
};

const MAX_DESCRIPTION_LENGTH = 500;

const IdeaBoard: React.FC<IdeaBoardProps> = ({ ideas, onUpdate }) => {
    const [newIdeaTitle, setNewIdeaTitle] = useState('');
    const [newIdeaCategory, setNewIdeaCategory] = useState<IdeaCategory>('plot');

    // Drag and Drop State
    const [draggedIdeaId, setDraggedIdeaId] = useState<string | null>(null);

    // Modal State for Edit/Quick Add
    const [editingItem, setEditingItem] = useState<Partial<Idea> | null>(null);

    // --- ACTIONS ---

    const handleAddIdea = (e: React.FormEvent) => {
        e.preventDefault();
        if (!newIdeaTitle.trim()) return;

        const newIdea: Idea = {
            id: `idea-${Date.now()}`,
            title: newIdeaTitle,
            description: '',
            category: newIdeaCategory,
            status: 'todo',
            createdAt: Date.now()
        };

        onUpdate([...ideas, newIdea]);
        setNewIdeaTitle('');
    };

    const handleDelete = (id: string) => {
        if (confirm("Supprimer cette carte ?")) {
            onUpdate(ideas.filter(i => i.id !== id));
            if (editingItem?.id === id) setEditingItem(null);
        }
    };

    const handleSaveEdit = () => {
        if (!editingItem || !editingItem.title?.trim()) return;

        if (editingItem.id) {
            // Update existing
            onUpdate(ideas.map(i => i.id === editingItem.id ? { ...i, ...editingItem } as Idea : i));
        } else {
            // Create new from modal
            const newIdea: Idea = {
                id: `idea-${Date.now()}`,
                title: editingItem.title || '',
                description: editingItem.description || '',
                category: editingItem.category || 'plot',
                status: editingItem.status || 'todo',
                createdAt: Date.now()
            };
            onUpdate([...ideas, newIdea]);
        }
        setEditingItem(null);
    };

    const openQuickAdd = (status: IdeaStatus) => {
        setEditingItem({
            title: '',
            description: '',
            category: 'plot',
            status: status
        });
    };

    const openEdit = (idea: Idea) => {
        setEditingItem({ ...idea });
    };

    // --- DRAG HANDLERS ---

    const handleDragStart = (e: React.DragEvent, id: string) => {
        setDraggedIdeaId(id);
        e.dataTransfer.effectAllowed = 'move';
    };

    const handleDrop = (e: React.DragEvent, status: IdeaStatus) => {
        e.preventDefault();
        if (draggedIdeaId) {
            const updatedIdeas = ideas.map(idea =>
                idea.id === draggedIdeaId ? { ...idea, status } : idea
            );
            onUpdate(updatedIdeas);
            setDraggedIdeaId(null);
        }
    };

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

    // --- RENDERERS ---

    const Column = ({ title, status, icon: Icon }: { title: string, status: IdeaStatus, icon: any }) => {
        const columnIdeas = ideas.filter(i => i.status === status);

        return (
            <div
                className="flex-1 bg-theme-bg/50 rounded-xl border border-theme-border flex flex-col h-full overflow-hidden transition-colors hover:border-blue-300"
                onDragOver={handleDragOver}
                onDrop={(e) => handleDrop(e, status)}
                onDoubleClick={() => openQuickAdd(status)}
                title="Double-cliquez dans le vide pour ajouter une carte ici"
            >
                {/* Column Header */}
                <div className={`p-4 border-b border-theme-border flex justify-between items-center transition-colors duration-300 ${status === 'todo' ? 'bg-theme-bg' :
                        status === 'progress' ? 'bg-indigo-500/10' :
                            'bg-green-500/10'
                    }`}>
                    <div className="flex items-center gap-2 font-bold text-theme-text">
                        <Icon size={18} />
                        {title}
                    </div>
                    <div className="flex items-center gap-2">
                        <button
                            onClick={(e) => { e.stopPropagation(); openQuickAdd(status); }}
                            className="p-1 hover:bg-theme-panel rounded-full text-theme-muted hover:text-blue-600 transition-colors"
                        >
                            <Plus size={16} />
                        </button>
                        <span className="text-xs font-semibold bg-theme-panel px-2 py-1 rounded-full border border-theme-border text-theme-muted">
                            {columnIdeas.length}
                        </span>
                    </div>
                </div>

                {/* Column Body */}
                <div className="flex-1 overflow-y-auto p-3 space-y-3 custom-scrollbar">
                    {columnIdeas.map(idea => {
                        const truncatedDesc = idea.description.length > 300
                            ? idea.description.substring(0, 300) + '...'
                            : idea.description;

                        return (
                            <div
                                key={idea.id}
                                draggable
                                onDragStart={(e) => handleDragStart(e, idea.id)}
                                onDoubleClick={(e) => {
                                    e.stopPropagation(); // Prevent column double-click
                                    openEdit(idea);
                                }}
                                className="bg-theme-panel p-3 rounded-lg shadow-sm border border-theme-border cursor-grab active:cursor-grabbing hover:shadow-md hover:border-blue-300 transition-all group relative animate-in zoom-in-95 duration-200"
                            >
                                <div className="flex justify-between items-start mb-2">
                                    <span className={`text-[10px] uppercase font-bold px-2 py-0.5 rounded-full flex items-center gap-1 ${CATEGORIES[idea.category].color}`}>
                                        {CATEGORIES[idea.category].label}
                                    </span>
                                    <div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
                                        <button
                                            onClick={(e) => { e.stopPropagation(); openEdit(idea); }}
                                            className="text-slate-300 hover:text-blue-500"
                                        >
                                            <Edit3 size={14} />
                                        </button>
                                        <button
                                            onClick={(e) => { e.stopPropagation(); handleDelete(idea.id); }}
                                            className="text-slate-300 hover:text-red-500"
                                        >
                                            <Trash2 size={14} />
                                        </button>
                                    </div>
                                </div>

                                {/* CARD CONTENT */}
                                <div className="mb-2">
                                    <h4 className="font-bold text-theme-text text-sm mb-1 leading-tight">{idea.title}</h4>
                                    {idea.description && (
                                        <p className="text-xs text-theme-muted line-clamp-3 leading-relaxed" title={idea.description.length > 300 ? "Description tronquée (voir détail)" : undefined}>
                                            {truncatedDesc}
                                        </p>
                                    )}
                                </div>

                                <div className="flex justify-between items-center text-xs text-theme-muted border-t border-theme-border pt-2 mt-2 transition-colors duration-300">
                                    <span className="flex items-center gap-1">
                                        <Clock size={10} /> {new Date(idea.createdAt).toLocaleDateString()}
                                    </span>
                                    <GripVertical size={14} className="opacity-20" />
                                </div>
                            </div>
                        );
                    })}
                    {columnIdeas.length === 0 && (
                        <div className="h-full flex flex-col items-center justify-center text-slate-300 text-sm italic border-2 border-dashed border-indigo-200 rounded-lg m-1">
                            <span className="mb-2">Vide</span>
                            <span className="text-xs opacity-70">Double-cliquez pour ajouter</span>
                        </div>
                    )}
                </div>
            </div>
        );
    };

    return (
        <div className="flex flex-col h-full bg-theme-bg p-6 gap-6 relative transition-colors duration-300 -m-8">

            {/* Header & Add Form (Top Bar) */}
            <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 bg-theme-panel p-4 rounded-xl border border-theme-border shadow-sm shrink-0 transition-colors duration-300">
                <div>
                    <h2 className="text-2xl font-bold text-theme-text flex items-center gap-2">
                        <Lightbulb className="text-yellow-500" /> Boîte à Idées
                    </h2>
                    <p className="text-theme-muted text-sm">Organisez vos tâches, idées de scènes et recherches.</p>
                </div>

                <form onSubmit={handleAddIdea} className="flex-1 w-full md:w-auto max-w-2xl flex gap-2">
                    <select
                        value={newIdeaCategory}
                        onChange={(e) => setNewIdeaCategory(e.target.value as IdeaCategory)}
                        className="bg-theme-bg border border-theme-border text-theme-text text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2.5 outline-none transition-colors duration-300"
                    >
                        {Object.entries(CATEGORIES).map(([key, val]) => (
                            <option key={key} value={key}>{val.label}</option>
                        ))}
                    </select>
                    <input
                        type="text"
                        value={newIdeaTitle}
                        onChange={(e) => setNewIdeaTitle(e.target.value)}
                        placeholder="Titre de la nouvelle idée..."
                        className="flex-1 bg-theme-bg border border-theme-border text-theme-text text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2.5 outline-none font-medium transition-colors duration-300"
                    />
                    <button
                        type="submit"
                        disabled={!newIdeaTitle.trim()}
                        className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 disabled:opacity-50 transition-colors flex items-center gap-2"
                    >
                        <Plus size={18} />
                    </button>
                </form>
            </div>

            {/* Kanban Board */}
            <div className="flex-1 grid grid-cols-1 md:grid-cols-3 gap-6 min-h-0">
                <Column title="Idées / À faire" status="todo" icon={Circle} />
                <Column title="En cours" status="progress" icon={Clock} />
                <Column title="Terminé" status="done" icon={CheckCircle} />
            </div>

            {/* EDIT / QUICK ADD MODAL */}
            {editingItem && (
                <div className="absolute inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm p-4 animate-in fade-in duration-200">
                    <div className="bg-theme-panel rounded-xl shadow-2xl w-full max-w-lg overflow-hidden flex flex-col max-h-[90%] transition-colors duration-300 border border-theme-border">
                        <div className="bg-theme-bg border-b border-theme-border p-4 flex justify-between items-center">
                            <h3 className="font-bold text-theme-text flex items-center gap-2">
                                {editingItem.id ? <Edit3 size={18} /> : <Plus size={18} />}
                                {editingItem.id ? 'Éditer la carte' : 'Ajouter une carte'}
                            </h3>
                            <button onClick={() => setEditingItem(null)} className="text-theme-muted hover:text-theme-text">
                                <X size={20} />
                            </button>
                        </div>

                        <div className="p-6 space-y-4 overflow-y-auto">
                            <div>
                                <label className="block text-xs font-bold text-theme-muted uppercase mb-1">Titre</label>
                                <input
                                    type="text"
                                    value={editingItem.title}
                                    onChange={(e) => setEditingItem({ ...editingItem, title: e.target.value })}
                                    className="w-full p-3 bg-theme-bg border border-theme-border rounded-lg focus:ring-2 focus:ring-blue-500 outline-none font-bold text-theme-text transition-colors duration-300"
                                    placeholder="Titre de la tâche ou de l'idée..."
                                    autoFocus
                                />
                            </div>

                            <div>
                                <label className="block text-xs font-bold text-theme-muted uppercase mb-1">Description</label>
                                <textarea
                                    value={editingItem.description}
                                    onChange={(e) => setEditingItem({ ...editingItem, description: e.target.value })}
                                    maxLength={MAX_DESCRIPTION_LENGTH}
                                    className="w-full p-3 bg-theme-bg border border-theme-border rounded-lg focus:ring-2 focus:ring-blue-500 outline-none min-h-[120px] text-sm text-theme-text leading-relaxed resize-none transition-colors duration-300"
                                    placeholder="Détails, notes, liens..."
                                />
                                <div className={`text-right text-xs mt-1 transition-colors ${(editingItem.description?.length || 0) >= MAX_DESCRIPTION_LENGTH ? 'text-red-500 font-bold' :
                                        (editingItem.description?.length || 0) > MAX_DESCRIPTION_LENGTH * 0.9 ? 'text-orange-500' : 'text-slate-400'
                                    }`}>
                                    {editingItem.description?.length || 0} / {MAX_DESCRIPTION_LENGTH} caractères
                                </div>
                            </div>

                            <div className="grid grid-cols-2 gap-4">
                                <div>
                                    <label className="block text-xs font-bold text-theme-muted uppercase mb-1">Catégorie</label>
                                    <select
                                        value={editingItem.category}
                                        onChange={(e) => setEditingItem({ ...editingItem, category: e.target.value as IdeaCategory })}
                                        className="w-full p-2 bg-theme-bg border border-theme-border rounded-lg text-theme-text text-sm outline-none focus:border-blue-500 transition-colors duration-300"
                                    >
                                        {Object.entries(CATEGORIES).map(([key, val]) => (
                                            <option key={key} value={key}>{val.label}</option>
                                        ))}
                                    </select>
                                </div>
                                <div>
                                    <label className="block text-xs font-bold text-theme-muted uppercase mb-1">Statut</label>
                                    <select
                                        value={editingItem.status}
                                        onChange={(e) => setEditingItem({ ...editingItem, status: e.target.value as IdeaStatus })}
                                        className="w-full p-2 bg-theme-bg border border-theme-border rounded-lg text-theme-text text-sm outline-none focus:border-blue-500 transition-colors duration-300"
                                    >
                                        {Object.entries(STATUS_LABELS).map(([key, val]) => (
                                            <option key={key} value={key}>{val}</option>
                                        ))}
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div className="p-4 border-t border-theme-border bg-theme-bg flex justify-end gap-2 shrink-0 transition-colors duration-300">
                            {editingItem.id && (
                                <button
                                    onClick={() => handleDelete(editingItem.id!)}
                                    className="mr-auto text-red-500 hover:text-red-700 text-sm font-medium px-3 py-2"
                                >
                                    Supprimer
                                </button>
                            )}
                            <button
                                onClick={() => setEditingItem(null)}
                                className="px-4 py-2 text-theme-text hover:bg-theme-panel border border-transparent rounded-lg text-sm font-medium transition-colors duration-300"
                            >
                                Annuler
                            </button>
                            <button
                                onClick={handleSaveEdit}
                                disabled={!editingItem.title?.trim()}
                                className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm font-medium shadow-sm disabled:opacity-50 flex items-center gap-2"
                            >
                                <Save size={16} /> Enregistrer
                            </button>
                        </div>
                    </div>
                </div>
            )}

        </div>
    );
};

export default IdeaBoard;