// ============================================================
// ViewportControls — 画布浮层控件
//
// 合并 PagerOverlay + ZoomOverlay + ModeSwitch 三个控件。
// 统一放置于画布视口底部，通过 position: absolute 定位。
// ============================================================

import { Button } from 'antd';
import {
    LeftOutlined,
    RightOutlined,
    ZoomInOutlined,
    ZoomOutOutlined,
    ExpandOutlined,
    EyeOutlined,
    CheckSquareOutlined,
    MenuOutlined,
} from '@ant-design/icons';
import { useTheme } from '@/app/providers/ThemeProvider';
import { useCanvasStore } from '../../stores/useCanvasStore';
import { useCanvasInteraction } from '../../hooks/useCanvasInteraction';
import { gridPageInfo, singlePageInfo } from '../../utils/layout';
import { MAX_ITEMS_PER_PAGE } from '../../utils/constants';

// ── 分页控件 ──

export function PagerOverlay() {
    const { isDark } = useTheme();
    const items = useCanvasStore((s) => s.items);
    const currentPage = useCanvasStore((s) => s.currentPage);
    const layoutMode = useCanvasStore((s) => s.layoutMode);
    const cols = useCanvasStore((s) => s.cols);
    const rowsPerPage = useCanvasStore((s) => s.rowsPerPage);
    const singleRowsPerPage = useCanvasStore((s) => s.singleRowsPerPage);
    const gotoPage = useCanvasStore((s) => s.gotoPage);

    const totalPages =
        layoutMode === 'grid'
            ? gridPageInfo(items.length, cols, rowsPerPage, currentPage).totalPages
            : singlePageInfo(items, singleRowsPerPage, currentPage).totalPages;

    const perPageText =
        layoutMode === 'grid'
            ? `${Math.min(cols * rowsPerPage, MAX_ITEMS_PER_PAGE)}`
            : `${singleRowsPerPage} 组`;

    if (totalPages <= 1) return null;

    return (
        <div
            style={{
                position: 'absolute',
                bottom: 36,
                left: '50%',
                transform: 'translateX(-50%)',
                display: 'flex',
                alignItems: 'center',
                gap: 6,
                padding: '4px 12px',
                borderRadius: 20,
                background: isDark ? 'rgba(30, 27, 75, 0.9)' : 'rgba(255, 255, 255, 0.9)',
                border: `1px solid ${isDark ? '#3E3A6A' : '#E5E7EB'}`,
                boxShadow: '0 2px 8px rgba(0,0,0,0.12)',
                backdropFilter: 'blur(4px)',
            }}
        >
            <Button
                type="text"
                size="small"
                icon={<LeftOutlined />}
                disabled={currentPage <= 1}
                onClick={() => gotoPage(currentPage - 1)}
            />
            <span
                style={{
                    fontSize: 13,
                    fontWeight: 500,
                    color: isDark ? '#E8E6F0' : '#1E1B4B',
                    minWidth: 80,
                    textAlign: 'center',
                }}
            >
                {currentPage} / {totalPages}
            </span>
            <Button
                type="text"
                size="small"
                icon={<RightOutlined />}
                disabled={currentPage >= totalPages}
                onClick={() => gotoPage(currentPage + 1)}
            />
            <span
                style={{
                    fontSize: 11,
                    color: isDark ? '#6E6B90' : '#9CA3AF',
                    borderLeft: `1px solid ${isDark ? '#3E3A6A' : '#E5E7EB'}`,
                    paddingLeft: 8,
                }}
            >
                {items.length} 项 · {perPageText}/页
            </span>
        </div>
    );
}

// ── 缩放控件 ──

export function ZoomOverlay() {
    const { isDark } = useTheme();
    const zoom = useCanvasStore((s) => s.zoom);
    const setZoom = useCanvasStore((s) => s.setZoom);

    const zoomPercent = Math.round(zoom * 100);

    return (
        <div
            style={{
                position: 'absolute',
                bottom: 36,
                right: 16,
                display: 'flex',
                alignItems: 'center',
                gap: 2,
                padding: '2px 4px',
                borderRadius: 8,
                background: isDark ? 'rgba(30, 27, 75, 0.9)' : 'rgba(255, 255, 255, 0.9)',
                border: `1px solid ${isDark ? '#3E3A6A' : '#E5E7EB'}`,
                boxShadow: '0 2px 8px rgba(0,0,0,0.12)',
                backdropFilter: 'blur(4px)',
            }}
        >
            <Button
                type="text"
                size="small"
                icon={<ZoomOutOutlined />}
                disabled={zoom <= 0.02}
                onClick={() => setZoom(zoom - 0.1)}
            />
            <span
                style={{
                    fontSize: 13,
                    fontWeight: 600,
                    color: isDark ? '#E8E6F0' : '#1E1B4B',
                    minWidth: 44,
                    textAlign: 'center',
                    cursor: 'pointer',
                }}
                onClick={() => setZoom(1.0)}
                title="重置为 100%"
            >
                {zoomPercent}%
            </span>
            <Button
                type="text"
                size="small"
                icon={<ZoomInOutlined />}
                disabled={zoom >= 16.0}
                onClick={() => setZoom(zoom + 0.1)}
            />
            <Button
                type="text"
                size="small"
                icon={<ExpandOutlined />}
                onClick={() => setZoom(1.0)}
                title="重置为 100%"
            />
        </div>
    );
}

// ── 模式切换 ──

export function ModeSwitch() {
    const { isDark } = useTheme();
    const { interactionMode, switchMode } = useCanvasInteraction();

    const modes = [
        { key: 'BROWSE' as const, icon: <EyeOutlined />, label: '浏览', shortcut: 'V' },
        { key: 'SELECT' as const, icon: <CheckSquareOutlined />, label: '选择', shortcut: 'S' },
        { key: 'REORDER' as const, icon: <MenuOutlined />, label: '排序', shortcut: 'R' },
    ];

    return (
        <div
            style={{
                position: 'absolute',
                bottom: 36,
                right: 160,
                display: 'flex',
                gap: 2,
                padding: '2px 4px',
                borderRadius: 8,
                background: isDark ? 'rgba(30, 27, 75, 0.9)' : 'rgba(255, 255, 255, 0.9)',
                border: `1px solid ${isDark ? '#3E3A6A' : '#E5E7EB'}`,
                boxShadow: '0 2px 8px rgba(0,0,0,0.12)',
                backdropFilter: 'blur(4px)',
            }}
        >
            {modes.map(({ key, icon, label, shortcut }) => (
                <Button
                    key={key}
                    type={interactionMode === key ? 'primary' : 'text'}
                    size="small"
                    icon={icon}
                    onClick={() => switchMode(key)}
                    title={`${label}模式 (${shortcut})`}
                    style={{
                        fontSize: 12,
                        fontWeight: interactionMode === key ? 600 : 400,
                    }}
                >
                    <span style={{ marginLeft: 2, fontSize: 11 }}>{shortcut}</span>
                </Button>
            ))}
        </div>
    );
}
