import { useRef, useState } from 'react';
import {
    IconPointer, IconHandStop, IconChevronDown, IconLetterT, IconVariable,
    IconPhoto, IconQrcode, IconBarcode, IconPhotoScan, IconCheck, IconTextOrientation,
    IconTable, IconMagnet, IconLoader2, IconUpload, IconLink, IconFrame,
    IconBallpen, IconPencil,
} from '@tabler/icons-react';
import {
    DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem,
    DropdownMenuShortcut, DropdownMenuSeparator, DropdownMenuLabel,
} from '@/components/ui/dropdown-menu';
import ImageLinkDialog from '../ui/ImageLinkDialog';
import { usePrintEditorStore } from '../state/usePrintEditorStore';
import { ELEMENT_TYPES, SIZE_PRESETS } from '../schema/documentSchema';
import { SHAPE_GROUPS, shapesInGroup } from '../schema/shapeLibrary';
import { TEXT_PATH_INSERT } from '../utils/textPathLayout';
import { shapeGlyphIcon } from '../ui/shapeGlyph';
import { filesToImagePayloads } from '../utils/imageFiles';

/** Shape menu, straight from the catalogue — one entry per shape, grouped. */
const SHAPE_MENU = SHAPE_GROUPS
    .map((group) => ({
        ...group,
        items: shapesInGroup(group.id).map((def) => ({
            key: def.key,
            label: def.label,
            shortcut: def.shortcut,
            Icon: shapeGlyphIcon(def.key),
        })),
    }))
    .filter((group) => group.items.length);

const SHAPES = SHAPE_MENU.flatMap((group) => group.items);

/**
 * The two drawing tools. Unlike every other entry in this toolbar they do not
 * INSERT anything on click — they arm the canvas, and the shape appears where
 * the hand draws it (see CanvasViewport's pen / pencil section).
 */
const DRAW_ITEMS = [
    { key: 'pen', label: 'Pen', shortcut: 'P', Icon: IconBallpen },
    { key: 'pencil', label: 'Pencil', shortcut: '⇧P', Icon: IconPencil },
];

const TEXT_ITEMS = [
    { key: 'text', label: 'Text', shortcut: 'T', Icon: IconLetterT, overrides: null },
    {
        key: 'textPath', label: 'Text on path', Icon: IconTextOrientation,
        overrides: TEXT_PATH_INSERT,
    },
];

const DATA_ITEMS = [
    { key: 'qrcode', label: 'QR code', Icon: IconQrcode, type: ELEMENT_TYPES.QRCODE },
    {
        key: 'qrlogo',
        label: 'QR code with logo',
        Icon: IconPhotoScan,
        type: ELEMENT_TYPES.QRCODE,
        // Inserting it asks for the picture straight away — a QR-with-logo tool
        // that drops a plain QR and leaves you hunting the panel is not a tool.
        withLogo: true,
        overrides: { name: 'QR + logo' },
    },
    { key: 'barcode', label: 'Barcode', Icon: IconBarcode, type: ELEMENT_TYPES.BARCODE },
    { key: 'table', label: 'Table', Icon: IconTable, type: ELEMENT_TYPES.TABLE },
];

function ToolButton({ label, active = false, disabled = false, onClick, variant = 'tool', children }) {
    const activeCls = variant === 'toggle'
        ? 'text-[#4dabff] bg-white/10'
        : 'bg-[#0d99ff] text-white';
    return (
        <button
            type="button"
            title={label}
            aria-label={label}
            aria-pressed={active}
            disabled={disabled}
            onClick={onClick}
            className={`h-8 w-8 shrink-0 flex items-center justify-center rounded-[6px] transition-colors
                disabled:opacity-40
                ${active ? activeCls : 'text-white/85 hover:bg-white/10'}`}
        >
            {children}
        </button>
    );
}

function DropChevron({ label }) {
    return (
        <button
            type="button"
            title={label}
            className="h-8 w-3.5 -ml-0.5 shrink-0 flex items-center justify-center rounded-[4px] text-white/50 hover:text-white hover:bg-white/10"
        >
            <IconChevronDown size={9} stroke={2.5} />
        </button>
    );
}

const menuCls = 'min-w-44 rounded-[10px] border-transparent bg-[#1e1e1e] text-white shadow-2xl py-1';
const menuItemCls = 'text-[11px] text-white/90 px-2.5 py-1.5 mx-1 rounded-[5px] cursor-pointer focus:bg-[#0d99ff] focus:text-white gap-2';

/**
 * Figma-style floating toolbar — dark pill centered at the bottom of the canvas.
 * Move/Hand tools, insert groups (admin), snap toggle.
 */
export default function BottomToolbar() {
    const { tool, setTool, addElement, addFrame, mode, snapEnabled, toggleSnap } = usePrintEditorStore();
    const fileRef = useRef(null);
    const qrLogoRef = useRef(null);
    const qrLogoTarget = useRef(null);
    const [uploading, setUploading] = useState(false);
    const [lastShape, setLastShape] = useState(SHAPES[0]);
    const [lastDraw, setLastDraw] = useState(DRAW_ITEMS[0]);
    const [lastText, setLastText] = useState(TEXT_ITEMS[0]);
    const [lastData, setLastData] = useState(DATA_ITEMS[0]);
    const [linkOpen, setLinkOpen] = useState(false);

    const onImagesSelected = async (e) => {
        // Copy FileList BEFORE clearing input — FileList is live and empties on reset
        const files = Array.from(e.target.files || []);
        e.target.value = '';
        if (!files.length) return;
        setUploading(true);
        try {
            const payloads = await filesToImagePayloads(files, { maxSide: 280 });
            if (!payloads.length) {
                console.warn('[print-editor] No readable image files selected', files.map((f) => f.name));
                return;
            }
            usePrintEditorStore.getState().addElements(payloads.map((p) => ({
                type: ELEMENT_TYPES.IMAGE, src: p.src, name: p.name, width: p.width, height: p.height,
            })));
        } catch (err) {
            console.error('[print-editor] Image upload failed', err);
        } finally {
            setUploading(false);
        }
    };

    const addShape = (shape) => {
        setLastShape(shape);
        addElement(ELEMENT_TYPES.SHAPE, { shape: shape.key });
    };
    const addText = (item) => {
        setLastText(item);
        addElement(ELEMENT_TYPES.TEXT, item.overrides || {});
    };
    const addData = (item) => {
        setLastData(item);
        const el = addElement(item.type, item.overrides || {});
        if (item.withLogo && el) {
            qrLogoTarget.current = el.id;
            // Radix closes the menu and moves focus during select; opening the
            // picker in that same tick gets swallowed.
            setTimeout(() => qrLogoRef.current?.click(), 0);
        }
    };

    /** The picked file becomes the QR's own `src`, which IS its logo. */
    const onQrLogoSelected = async (e) => {
        const [file] = Array.from(e.target.files || []);
        e.target.value = '';
        const id = qrLogoTarget.current;
        qrLogoTarget.current = null;
        if (!file || !id) return;
        try {
            const [payload] = await filesToImagePayloads([file], { maxSide: 512 });
            if (payload?.src) usePrintEditorStore.getState().updateElement(id, { src: payload.src });
        } catch (err) {
            console.error('[print-editor] QR logo upload failed', err);
        }
    };

    const LastShapeIcon = lastShape.Icon;
    const LastDrawIcon = lastDraw.Icon;
    const LastTextIcon = lastText.Icon;
    const LastDataIcon = lastData.Icon;

    return (
        <>
        <div className="absolute bottom-4 left-1/2 -translate-x-1/2 z-30 pointer-events-none">
            <div className="pointer-events-auto flex items-center gap-0.5 px-1.5 py-1.5 rounded-[13px] bg-[#1e1e1e] shadow-[0_2px_14px_rgba(0,0,0,0.35),0_0_0_0.5px_rgba(255,255,255,0.08)]">
                <input ref={fileRef} type="file" accept="image/*" multiple className="hidden" onChange={onImagesSelected} />
                <input ref={qrLogoRef} type="file" accept="image/*" className="hidden" onChange={onQrLogoSelected} />

                {/* Move / Hand */}
                <div className="flex items-center">
                    <ToolButton
                        label={tool === 'pan' ? 'Hand tool (H)' : 'Move (V)'}
                        active={tool === 'select' || tool === 'pan'}
                        onClick={() => setTool(tool === 'pan' ? 'pan' : 'select')}
                    >
                        {tool === 'pan' ? <IconHandStop size={16} stroke={1.75} /> : <IconPointer size={15} stroke={1.75} />}
                    </ToolButton>
                    <DropdownMenu>
                        <DropdownMenuTrigger asChild>
                            <span><DropChevron label="Move tools" /></span>
                        </DropdownMenuTrigger>
                        <DropdownMenuContent side="top" sideOffset={10} className={menuCls}>
                            <DropdownMenuItem className={menuItemCls} onClick={() => setTool('select')}>
                                <IconPointer size={13} /> Move
                                <DropdownMenuShortcut className="text-[10px] text-white/40">V</DropdownMenuShortcut>
                            </DropdownMenuItem>
                            <DropdownMenuItem className={menuItemCls} onClick={() => setTool('pan')}>
                                <IconHandStop size={13} /> Hand tool
                                <DropdownMenuShortcut className="text-[10px] text-white/40">H</DropdownMenuShortcut>
                            </DropdownMenuItem>
                        </DropdownMenuContent>
                    </DropdownMenu>
                </div>

                {mode === 'admin' && (
                    <>
                        <span className="w-px h-5 bg-white/15 mx-1" />

                        {/* Frame — a new artboard beside the existing ones, with its own
                            size preset, background and export. */}
                        <div className="flex items-center">
                            <ToolButton label="Add frame (F)" onClick={() => addFrame()}>
                                <IconFrame size={16} stroke={1.75} />
                            </ToolButton>
                            <DropdownMenu>
                                <DropdownMenuTrigger asChild>
                                    <span><DropChevron label="Frame tools" /></span>
                                </DropdownMenuTrigger>
                                <DropdownMenuContent side="top" sideOffset={10} className={menuCls}>
                                    <DropdownMenuItem className={menuItemCls} onClick={() => addFrame()}>
                                        <span className="w-3 shrink-0"><IconCheck size={11} /></span>
                                        <IconFrame size={13} /> Frame
                                        <DropdownMenuShortcut className="text-[10px] text-white/40">F</DropdownMenuShortcut>
                                    </DropdownMenuItem>
                                    {SIZE_PRESETS.filter((p) => p.id !== 'custom').map((p) => (
                                        <DropdownMenuItem
                                            key={p.id}
                                            className={menuItemCls}
                                            onClick={() => addFrame({ width: p.width, height: p.height, presetId: p.id })}
                                        >
                                            <span className="w-3 shrink-0" />
                                            <IconFrame size={13} /> {p.label}
                                            <DropdownMenuShortcut className="text-[10px] text-white/40">
                                                {p.width}×{p.height}
                                            </DropdownMenuShortcut>
                                        </DropdownMenuItem>
                                    ))}
                                </DropdownMenuContent>
                            </DropdownMenu>
                        </div>

                        {/* Shapes */}
                        <div className="flex items-center">
                            <ToolButton label={`Insert ${lastShape.label}`} onClick={() => addShape(lastShape)}>
                                <LastShapeIcon size={15} stroke={1.75} />
                            </ToolButton>
                            <DropdownMenu>
                                <DropdownMenuTrigger asChild>
                                    <span><DropChevron label="Shape tools" /></span>
                                </DropdownMenuTrigger>
                                <DropdownMenuContent
                                    side="top"
                                    sideOffset={10}
                                    className={`${menuCls} max-h-[70vh] overflow-y-auto fig-scroll`}
                                >
                                    {SHAPE_MENU.map((group, gi) => (
                                        <div key={group.id}>
                                            {gi > 0 && <DropdownMenuSeparator className="bg-white/10" />}
                                            <DropdownMenuLabel className="px-2.5 py-1 text-[9px] font-semibold uppercase tracking-wide text-white/35">
                                                {group.label}
                                            </DropdownMenuLabel>
                                            {group.items.map((s) => (
                                                <DropdownMenuItem key={s.key} className={menuItemCls} onClick={() => addShape(s)}>
                                                    <span className="w-3 shrink-0">
                                                        {lastShape.key === s.key && <IconCheck size={11} />}
                                                    </span>
                                                    <s.Icon size={13} /> {s.label}
                                                    {s.shortcut && (
                                                        <DropdownMenuShortcut className="text-[10px] text-white/40">
                                                            {s.shortcut}
                                                        </DropdownMenuShortcut>
                                                    )}
                                                </DropdownMenuItem>
                                            ))}
                                        </div>
                                    ))}
                                </DropdownMenuContent>
                            </DropdownMenu>
                        </div>

                        {/* Pen / pencil — these ARM the canvas rather than inserting */}
                        <div className="flex items-center">
                            <ToolButton
                                label={`${lastDraw.label} (${lastDraw.shortcut}) — draw on the canvas`}
                                active={tool === lastDraw.key}
                                onClick={() => setTool(tool === lastDraw.key ? 'select' : lastDraw.key)}
                            >
                                <LastDrawIcon size={15} stroke={1.75} />
                            </ToolButton>
                            <DropdownMenu>
                                <DropdownMenuTrigger asChild>
                                    <span><DropChevron label="Drawing tools" /></span>
                                </DropdownMenuTrigger>
                                <DropdownMenuContent side="top" sideOffset={10} className={menuCls}>
                                    {DRAW_ITEMS.map((d) => (
                                        <DropdownMenuItem
                                            key={d.key}
                                            className={menuItemCls}
                                            onClick={() => { setLastDraw(d); setTool(d.key); }}
                                        >
                                            <span className="w-3 shrink-0">
                                                {tool === d.key && <IconCheck size={11} />}
                                            </span>
                                            <d.Icon size={13} /> {d.label}
                                            <DropdownMenuShortcut className="text-[10px] text-white/40">
                                                {d.shortcut}
                                            </DropdownMenuShortcut>
                                        </DropdownMenuItem>
                                    ))}
                                </DropdownMenuContent>
                            </DropdownMenu>
                        </div>

                        {/* Image — click uploads, chevron offers upload / from link */}
                        <div className="flex items-center">
                            <ToolButton
                                label="Place image…"
                                disabled={uploading}
                                onClick={() => fileRef.current?.click()}
                            >
                                {uploading
                                    ? <IconLoader2 size={15} className="animate-spin" />
                                    : <IconPhoto size={15} stroke={1.75} />}
                            </ToolButton>
                            <DropdownMenu>
                                <DropdownMenuTrigger asChild>
                                    <span><DropChevron label="Image options" /></span>
                                </DropdownMenuTrigger>
                                <DropdownMenuContent side="top" sideOffset={10} className={menuCls}>
                                    <DropdownMenuItem
                                        className={menuItemCls}
                                        onSelect={() => setTimeout(() => fileRef.current?.click(), 0)}
                                    >
                                        <IconUpload size={13} /> Upload from device
                                    </DropdownMenuItem>
                                    <DropdownMenuItem
                                        className={menuItemCls}
                                        // Radix closes the menu and restores focus during select.
                                        // Opening in that same tick can be swallowed — defer past it.
                                        onSelect={() => setTimeout(() => setLinkOpen(true), 0)}
                                    >
                                        <IconLink size={13} /> Image from link
                                    </DropdownMenuItem>
                                </DropdownMenuContent>
                            </DropdownMenu>
                        </div>

                        {/* Text — plain block, or bound to a curve */}
                        <div className="flex items-center">
                            <ToolButton
                                label={`Insert ${lastText.label}${lastText.shortcut ? ` (${lastText.shortcut})` : ''}`}
                                onClick={() => addText(lastText)}
                            >
                                <LastTextIcon size={15} stroke={1.75} />
                            </ToolButton>
                            <DropdownMenu>
                                <DropdownMenuTrigger asChild>
                                    <span><DropChevron label="Text tools" /></span>
                                </DropdownMenuTrigger>
                                <DropdownMenuContent side="top" sideOffset={10} className={menuCls}>
                                    {TEXT_ITEMS.map((t) => (
                                        <DropdownMenuItem key={t.key} className={menuItemCls} onClick={() => addText(t)}>
                                            <span className="w-3 shrink-0">
                                                {lastText.key === t.key && <IconCheck size={11} />}
                                            </span>
                                            <t.Icon size={13} /> {t.label}
                                            {t.shortcut && (
                                                <DropdownMenuShortcut className="text-[10px] text-white/40">
                                                    {t.shortcut}
                                                </DropdownMenuShortcut>
                                            )}
                                        </DropdownMenuItem>
                                    ))}
                                </DropdownMenuContent>
                            </DropdownMenu>
                        </div>

                        {/* Placeholder */}
                        <ToolButton label="Insert placeholder field" onClick={() => addElement(ELEMENT_TYPES.PLACEHOLDER)}>
                            <IconVariable size={16} stroke={1.75} />
                        </ToolButton>

                        {/* QR / Barcode / Table */}
                        <div className="flex items-center">
                            <ToolButton label={`Insert ${lastData.label}`} onClick={() => addData(lastData)}>
                                <LastDataIcon size={15} stroke={1.75} />
                            </ToolButton>
                            <DropdownMenu>
                                <DropdownMenuTrigger asChild>
                                    <span><DropChevron label="Data elements" /></span>
                                </DropdownMenuTrigger>
                                <DropdownMenuContent side="top" sideOffset={10} className={menuCls}>
                                    {DATA_ITEMS.map((d) => (
                                        <DropdownMenuItem key={d.key} className={menuItemCls} onSelect={() => addData(d)}>
                                            <span className="w-3 shrink-0">
                                                {lastData.key === d.key && <IconCheck size={11} />}
                                            </span>
                                            <d.Icon size={13} /> {d.label}
                                        </DropdownMenuItem>
                                    ))}
                                </DropdownMenuContent>
                            </DropdownMenu>
                        </div>
                    </>
                )}

                <span className="w-px h-5 bg-white/15 mx-1" />

                {/* Snap toggle */}
                <ToolButton
                    label={snapEnabled
                        ? 'Snap to geometry: on — objects stick to guides while dragging'
                        : 'Snap to geometry: off'}
                    active={snapEnabled}
                    variant="toggle"
                    onClick={toggleSnap}
                >
                    <IconMagnet size={15} stroke={1.75} />
                </ToolButton>
            </div>
        </div>

        <ImageLinkDialog open={linkOpen} onClose={() => setLinkOpen(false)} />
        </>
    );
}