import { useEffect } from "react";
import { useShortcutContext } from "../contexts/ShortcutContext";
import { ShortcutDefinition } from "../hooks/useKeyboardShortcuts";

interface ShortcutItemProps {
    shortcut: ShortcutDefinition;
}

function ShortcutItem({ shortcut }: ShortcutItemProps) {
    const getKeyCombo = () => {
        const parts: string[] = [];
        if (shortcut.meta) parts.push("⌘");
        if (shortcut.ctrl) parts.push("⌃");
        if (shortcut.alt) parts.push("⌥");
        if (shortcut.shift) parts.push("⇧");

        // Display key nicely
        let displayKey = shortcut.key;
        if (displayKey === "Space") displayKey = "␣";
        if (displayKey === "ArrowLeft") displayKey = "←";
        if (displayKey === "ArrowRight") displayKey = "→";
        if (displayKey === "ArrowUp") displayKey = "↑";
        if (displayKey === "ArrowDown") displayKey = "↓";
        if (displayKey === "Escape") displayKey = "Esc";

        parts.push(displayKey);

        return parts.join(" ");
    };

    return (
        <div
            style={{
                display: "flex",
                justifyContent: "space-between",
                alignItems: "center",
                padding: "8px 0",
                borderBottom: "1px solid rgba(255, 255, 255, 0.05)",
            }}
        >
            <span style={{ color: "var(--text-main)", fontSize: "13px" }}>
                {shortcut.description}
            </span>
            <kbd
                style={{
                    background: "rgba(255, 255, 255, 0.05)",
                    padding: "4px 10px",
                    borderRadius: "4px",
                    fontSize: "12px",
                    fontFamily: "monospace",
                    border: "1px solid rgba(255, 255, 255, 0.1)",
                    color: "var(--accent)",
                    fontWeight: 600,
                }}
            >
                {getKeyCombo()}
            </kbd>
        </div>
    );
}

function ShortcutHelp() {
    const { categories, showHelp, setShowHelp } = useShortcutContext();

    // Close on Escape
    useEffect(() => {
        if (!showHelp) return;

        const handler = (e: KeyboardEvent) => {
            if (e.key === "Escape") {
                setShowHelp(false);
            }
        };

        window.addEventListener("keydown", handler);
        return () => window.removeEventListener("keydown", handler);
    }, [showHelp, setShowHelp]);

    if (!showHelp) return null;

    return (
        <>
            {/* Backdrop */}
            <div
                onClick={() => setShowHelp(false)}
                style={{
                    position: "fixed",
                    inset: 0,
                    background: "rgba(0, 0, 0, 0.7)",
                    backdropFilter: "blur(8px)",
                    zIndex: 9998,
                    animation: "fadeIn 0.2s ease",
                }}
            />

            {/* Modal */}
            <div
                style={{
                    position: "fixed",
                    top: "50%",
                    left: "50%",
                    transform: "translate(-50%, -50%)",
                    width: "90%",
                    maxWidth: "600px",
                    maxHeight: "80vh",
                    background: "var(--bg-deep)",
                    border: "1px solid rgba(255, 255, 255, 0.1)",
                    borderRadius: "16px",
                    boxShadow: "0 25px 70px rgba(0, 0, 0, 0.7)",
                    zIndex: 9999,
                    overflow: "hidden",
                    animation: "slideUp 0.3s ease",
                }}
            >
                {/* Header */}
                <div
                    style={{
                        padding: "24px",
                        borderBottom: "1px solid rgba(255, 255, 255, 0.05)",
                        background: "rgba(255, 255, 255, 0.02)",
                    }}
                >
                    <div
                        style={{
                            display: "flex",
                            justifyContent: "space-between",
                            alignItems: "center",
                        }}
                    >
                        <h2
                            style={{
                                fontSize: "20px",
                                fontWeight: 700,
                                color: "var(--text-main)",
                                margin: 0,
                            }}
                        >
                            Keyboard Shortcuts
                        </h2>
                        <button
                            onClick={() => setShowHelp(false)}
                            style={{
                                background: "rgba(255, 255, 255, 0.05)",
                                border: "1px solid rgba(255, 255, 255, 0.1)",
                                color: "var(--text-dim)",
                                padding: "6px 12px",
                                borderRadius: "6px",
                                cursor: "pointer",
                                fontSize: "12px",
                                fontWeight: 600,
                            }}
                        >
                            Esc
                        </button>
                    </div>
                </div>

                {/* Content */}
                <div
                    style={{
                        padding: "24px",
                        overflowY: "auto",
                        maxHeight: "calc(80vh - 90px)",
                    }}
                >
                    {categories.length === 0 ? (
                        <div
                            style={{
                                textAlign: "center",
                                padding: "40px",
                                color: "var(--text-dim)",
                            }}
                        >
                            No shortcuts available in this view
                        </div>
                    ) : (
                        categories.map((category) => (
                            <div key={category.name} style={{ marginBottom: "32px" }}>
                                <h3
                                    style={{
                                        fontSize: "11px",
                                        fontWeight: 800,
                                        color: "var(--accent)",
                                        textTransform: "uppercase",
                                        letterSpacing: "0.1em",
                                        marginBottom: "12px",
                                    }}
                                >
                                    {category.name}
                                </h3>
                                <div>
                                    {Object.entries(category.shortcuts).map(([id, shortcut]) => (
                                        <ShortcutItem key={id} shortcut={shortcut} />
                                    ))}
                                </div>
                            </div>
                        ))
                    )}
                </div>
            </div>

            <style>{`
                @keyframes fadeIn {
                    from { opacity: 0; }
                    to { opacity: 1; }
                }
                
                @keyframes slideUp {
                    from {
                        opacity: 0;
                        transform: translate(-50%, -45%);
                    }
                    to {
                        opacity: 1;
                        transform: translate(-50%, -50%);
                    }
                }
            `}</style>
        </>
    );
}

export default ShortcutHelp;