"use client";

import { useState, useCallback, useEffect, useRef } from "react";
import { CanvasTemplate } from "@/lib/canvas-data";
import { useCanvasStore } from "@/lib/store";

interface WhiteboardItem {
    id: string;
    type: "keyword" | "question";
    text: string;
    x: number; // percentage from left
    y: number; // percentage from top
}

interface WhiteboardCanvasProps {
    canvas: CanvasTemplate;
    className?: string;
    teamName?: string;
}

const COLORS = {
    keyword: {
        bg: "#fef3c7", // amber-100
        border: "#f97316", // orange-500
        text: "#9a3412", // orange-800
        label: "Mot-clé",
    },
    question: {
        bg: "#ede9fe", // violet-100
        border: "#8b5cf6", // violet-500
        text: "#5b21b6", // violet-800
        label: "Question",
    },
};

export function WhiteboardCanvas({ canvas, className = "", teamName }: WhiteboardCanvasProps) {
    const { getCanvas, updateCanvasField } = useCanvasStore();
    const canvasData = getCanvas(canvas.id);

    // Parse stored items
    const savedItems = canvasData?.fields["whiteboard-items"];
    const initialItems: WhiteboardItem[] = savedItems
        ? (typeof savedItems === "string" ? JSON.parse(savedItems) : savedItems)
        : [];

    const [items, setItems] = useState<WhiteboardItem[]>(initialItems);
    const [activeMode, setActiveMode] = useState<"keyword" | "question">("keyword");
    const [editingId, setEditingId] = useState<string | null>(null);
    const [draggingId, setDraggingId] = useState<string | null>(null);
    const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });
    const boardRef = useRef<HTMLDivElement>(null);

    // Sync with store when it changes externally
    useEffect(() => {
        if (savedItems) {
            const parsed = typeof savedItems === "string" ? JSON.parse(savedItems) : savedItems;
            setItems(parsed);
        }
    }, [savedItems]);

    // Save items to store
    const saveItems = useCallback((newItems: WhiteboardItem[]) => {
        setItems(newItems);
        updateCanvasField(canvas.id, "whiteboard-items", JSON.stringify(newItems));
    }, [canvas.id, updateCanvasField]);

    // Add new item on board click
    const handleBoardClick = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
        if (editingId || draggingId) return;

        const target = e.target as HTMLElement;
        if (target.closest(".whiteboard-item")) return;

        const board = boardRef.current;
        if (!board) return;

        const rect = board.getBoundingClientRect();
        const x = ((e.clientX - rect.left) / rect.width) * 100;
        const y = ((e.clientY - rect.top) / rect.height) * 100;

        const newItem: WhiteboardItem = {
            id: `item-${Date.now()}`,
            type: activeMode,
            text: activeMode === "keyword" ? "Nouveau mot-clé" : "Nouvelle question ?",
            x: Math.max(5, Math.min(85, x)),
            y: Math.max(5, Math.min(90, y)),
        };

        saveItems([...items, newItem]);
        setEditingId(newItem.id);
    }, [activeMode, editingId, draggingId, items, saveItems]);

    // Handle item drag start
    const handleDragStart = useCallback((e: React.MouseEvent, item: WhiteboardItem) => {
        e.stopPropagation();
        const itemEl = e.currentTarget as HTMLElement;
        const rect = itemEl.getBoundingClientRect();
        setDragOffset({
            x: e.clientX - rect.left,
            y: e.clientY - rect.top,
        });
        setDraggingId(item.id);
    }, []);

    // Handle mouse move during drag
    const handleMouseMove = useCallback((e: React.MouseEvent) => {
        if (!draggingId || !boardRef.current) return;

        const board = boardRef.current;
        const rect = board.getBoundingClientRect();
        const x = ((e.clientX - rect.left - dragOffset.x) / rect.width) * 100;
        const y = ((e.clientY - rect.top - dragOffset.y) / rect.height) * 100;

        setItems(prev => prev.map(item =>
            item.id === draggingId
                ? { ...item, x: Math.max(0, Math.min(90, x)), y: Math.max(0, Math.min(95, y)) }
                : item
        ));
    }, [draggingId, dragOffset]);

    // Handle drag end
    const handleMouseUp = useCallback(() => {
        if (draggingId) {
            saveItems(items);
            setDraggingId(null);
        }
    }, [draggingId, items, saveItems]);

    // Update item text
    const handleTextChange = useCallback((id: string, text: string) => {
        const newItems = items.map(item =>
            item.id === id ? { ...item, text } : item
        );
        setItems(newItems);
    }, [items]);

    // Finish editing
    const handleTextBlur = useCallback((id: string) => {
        setEditingId(null);
        saveItems(items);
    }, [items, saveItems]);

    // Delete item
    const handleDelete = useCallback((id: string, e: React.MouseEvent) => {
        e.stopPropagation();
        saveItems(items.filter(item => item.id !== id));
    }, [items, saveItems]);

    return (
        <div
            className={`bg-white flex flex-col h-full ${className}`}
            onMouseMove={handleMouseMove}
            onMouseUp={handleMouseUp}
            onMouseLeave={handleMouseUp}
        >
            {/* Mode Toggle */}
            <div className="px-6 py-3 border-b border-gray-200 flex items-center gap-4 shrink-0">
                <span className="text-sm text-gray-600 font-medium">Mode :</span>
                <div className="flex gap-2">
                    <button
                        onClick={() => setActiveMode("keyword")}
                        className={`px-4 py-2 rounded-lg text-sm font-medium transition-all ${activeMode === "keyword"
                            ? "bg-orange-500 text-white shadow-md"
                            : "bg-orange-100 text-orange-700 hover:bg-orange-200"
                            }`}
                    >
                        🏷️ Mot-clé
                    </button>
                    <button
                        onClick={() => setActiveMode("question")}
                        className={`px-4 py-2 rounded-lg text-sm font-medium transition-all ${activeMode === "question"
                            ? "bg-violet-500 text-white shadow-md"
                            : "bg-violet-100 text-violet-700 hover:bg-violet-200"
                            }`}
                    >
                        ❓ Question
                    </button>
                </div>
                <span className="text-xs text-gray-400 ml-auto">
                    Cliquez sur le tableau pour ajouter un élément
                </span>
            </div>

            {/* Whiteboard Area */}
            <div
                ref={boardRef}
                onClick={handleBoardClick}
                className="flex-1 relative bg-gradient-to-br from-gray-50 to-gray-100 cursor-crosshair overflow-hidden"
                style={{
                    backgroundImage: `
            radial-gradient(circle, #d1d5db 1px, transparent 1px)
          `,
                    backgroundSize: "20px 20px",
                }}
            >
                {items.map((item) => {
                    const colors = COLORS[item.type];
                    const isEditing = editingId === item.id;
                    const isDragging = draggingId === item.id;

                    return (
                        <div
                            key={item.id}
                            className={`whiteboard-item group absolute p-3 rounded-lg shadow-md cursor-move select-none transition-shadow ${isDragging ? "shadow-xl z-50" : "hover:shadow-lg z-10"
                                }`}
                            style={{
                                left: `${item.x}%`,
                                top: `${item.y}%`,
                                backgroundColor: colors.bg,
                                borderLeft: `4px solid ${colors.border}`,
                                maxWidth: "200px",
                                minWidth: "100px",
                            }}
                            onMouseDown={(e) => !isEditing && handleDragStart(e, item)}
                        >
                            {/* Delete button - visible on hover */}
                            <button
                                onClick={(e) => handleDelete(item.id, e)}
                                className={`absolute -top-3 -right-3 w-7 h-7 bg-red-500 hover:bg-red-600 text-white rounded-full text-base font-bold flex items-center justify-center shadow-lg transition-all hover:scale-110 ${isDragging ? "opacity-0" : "opacity-0 group-hover:opacity-100"
                                    }`}
                                onMouseDown={(e) => e.stopPropagation()}
                                title="Supprimer"
                            >
                                ×
                            </button>

                            {/* Type label */}
                            <div
                                className="text-[10px] font-medium mb-1 uppercase tracking-wide"
                                style={{ color: colors.border }}
                            >
                                {colors.label}
                            </div>

                            {/* Text content */}
                            {isEditing ? (
                                <textarea
                                    autoFocus
                                    value={item.text}
                                    onChange={(e) => handleTextChange(item.id, e.target.value)}
                                    onBlur={() => handleTextBlur(item.id)}
                                    onKeyDown={(e) => {
                                        if (e.key === "Enter" && !e.shiftKey) {
                                            e.preventDefault();
                                            handleTextBlur(item.id);
                                        }
                                    }}
                                    className="w-full bg-transparent border-none outline-none resize-none text-sm"
                                    style={{ color: colors.text }}
                                    rows={2}
                                    onMouseDown={(e) => e.stopPropagation()}
                                />
                            ) : (
                                <div
                                    className="text-sm cursor-text"
                                    style={{ color: colors.text }}
                                    onDoubleClick={() => setEditingId(item.id)}
                                >
                                    {item.text}
                                </div>
                            )}
                        </div>
                    );
                })}

                {/* Empty state */}
                {items.length === 0 && (
                    <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
                        <div className="text-center text-gray-400">
                            <div className="text-4xl mb-3">📝</div>
                            <p className="text-lg font-medium">Tableau vide</p>
                            <p className="text-sm">Cliquez n'importe où pour ajouter un élément</p>
                        </div>
                    </div>
                )}
            </div>

            {/* Footer */}
            <div className="px-6 py-2 border-t-2 border-[#d1d5dc] flex justify-between items-center shrink-0">
                <span className="text-[12px] text-[#6a7282]">Équipe : {teamName || ''}</span>
                <span className="text-[12px] text-[#6a7282]">© Mathieu Aguesse 2026</span>
                <span className="text-[12px] text-[#6a7282]">Date :</span>
            </div>
        </div>
    );
}