/**
 * FULL INVENTORY SYSTEM
 * 24 slots total: 9 hotbar + 15 backpack
 * Press I to open/close
 */
class FullInventoryUI {
    constructor(scene) {
        this.scene = scene;
        this.isOpen = false;

        // Create inventory panel (hidden by default)
        this.createInventoryPanel();

        // Keyboard toggle (I key)
        scene.input.keyboard.on('keydown-I', () => {
            this.toggle();
        });

        console.log('🎒 Full Inventory UI created (Press I to open)');
    }

    createInventoryPanel() {
        const uiScene = this.scene.scene.get('UIScene');
        if (!uiScene) return;

        const centerX = uiScene.scale.width / 2;
        const centerY = uiScene.scale.height / 2;

        // Container
        this.container = uiScene.add.container(centerX, centerY);
        this.container.setDepth(50000); // Above everything
        this.container.setScrollFactor(0);
        this.container.setVisible(false);

        // Semi-transparent background overlay
        const overlay = uiScene.add.rectangle(0, 0,
            uiScene.scale.width * 2,
            uiScene.scale.height * 2,
            0x000000, 0.7);
        overlay.setInteractive(); // Block clicks
        this.container.add(overlay);

        // Main panel background
        const panelWidth = 400;
        const panelHeight = 500;

        const bg = uiScene.add.graphics();
        bg.fillStyle(0x2a4a2a, 0.95); // Dark green
        bg.fillRoundedRect(-panelWidth / 2, -panelHeight / 2, panelWidth, panelHeight, 16);
        bg.lineStyle(4, 0x90EE90, 1); // Light green border
        bg.strokeRoundedRect(-panelWidth / 2, -panelHeight / 2, panelWidth, panelHeight, 16);
        this.container.add(bg);

        // Title
        const title = uiScene.add.text(0, -panelHeight / 2 + 20, '🎒 INVENTORY', {
            fontSize: '28px',
            fontFamily: 'Arial',
            fill: '#FFD700',
            fontStyle: 'bold'
        }).setOrigin(0.5);
        this.container.add(title);

        // Subtitle
        const subtitle = uiScene.add.text(0, -panelHeight / 2 + 50, '24 Slots Total', {
            fontSize: '14px',
            fill: '#aaaaaa'
        }).setOrigin(0.5);
        this.container.add(subtitle);

        // Hotbar section (6 slots)
        const hotbarLabel = uiScene.add.text(-panelWidth / 2 + 20, -panelHeight / 2 + 80,
            'HOTBAR (1-6):', {
            fontSize: '16px',
            fill: '#FFD700',
            fontStyle: 'bold'
        });
        this.container.add(hotbarLabel);

        // Draw hotbar slots
        this.hotbarSlots = [];
        const slotSize = 50;
        const slotSpacing = 10;
        const startX = -panelWidth / 2 + 20;
        const hotbarY = -panelHeight / 2 + 110;

        for (let i = 0; i < 6; i++) {
            const x = startX + (i % 6) * (slotSize + slotSpacing);
            const slot = this.createSlot(uiScene, x, hotbarY, slotSize, i);
            this.hotbarSlots.push(slot);
            this.container.add(slot.bg);
            this.container.add(slot.text);
        }

        // Backpack section (15 slots in 3 rows of 5)
        const backpackLabel = uiScene.add.text(-panelWidth / 2 + 20, hotbarY + 80,
            'BACKPACK:', {
            fontSize: '16px',
            fill: '#FFD700',
            fontStyle: 'bold'
        });
        this.container.add(backpackLabel);

        this.backpackSlots = [];
        const backpackStartY = hotbarY + 110;

        for (let i = 0; i < 18; i++) {
            const row = Math.floor(i / 6);
            const col = i % 6;
            const x = startX + col * (slotSize + slotSpacing);
            const y = backpackStartY + row * (slotSize + slotSpacing);
            const slot = this.createSlot(uiScene, x, y, slotSize, i + 6);
            this.backpackSlots.push(slot);
            this.container.add(slot.bg);
            this.container.add(slot.text);
        }

        // Close button
        const closeBtn = uiScene.add.text(0, panelHeight / 2 - 40, '[ CLOSE (I) ]', {
            fontSize: '18px',
            color: '#00ff00',
            backgroundColor: '#003300',
            padding: { x: 20, y: 10 },
            fontStyle: 'bold'
        }).setOrigin(0.5);

        closeBtn.setInteractive({ useHandCursor: true });
        closeBtn.on('pointerover', () => closeBtn.setScale(1.1));
        closeBtn.on('pointerout', () => closeBtn.setScale(1.0));
        closeBtn.on('pointerdown', () => this.toggle());
        this.container.add(closeBtn);

        // Instructions
        const instructions = uiScene.add.text(0, panelHeight / 2 - 80,
            'Click slot to select • Press I to close', {
            fontSize: '12px',
            fill: '#888888'
        }).setOrigin(0.5);
        this.container.add(instructions);
    }

    createSlot(scene, x, y, size, index) {
        // Background
        const bg = scene.add.graphics();
        bg.fillStyle(0x4a3520, 0.8); // Brown
        bg.fillRoundedRect(x, y, size, size, 4);
        bg.lineStyle(2, 0x8B4513, 1);
        bg.strokeRoundedRect(x, y, size, size, 4);

        // Slot number
        const text = scene.add.text(x + size / 2, y + size / 2, `${index + 1}`, {
            fontSize: '12px',
            fill: '#ffffff'
        }).setOrigin(0.5);

        // Make interactive
        const hitArea = new Phaser.Geom.Rectangle(x, y, size, size);
        bg.setInteractive(hitArea, Phaser.Geom.Rectangle.Contains);
        bg.on('pointerdown', () => {
            this.selectSlot(index);
        });
        bg.on('pointerover', () => {
            bg.clear();
            bg.fillStyle(0x6a5520, 0.9); // Lighter brown
            bg.fillRoundedRect(x, y, size, size, 4);
            bg.lineStyle(2, 0xFFD700, 1); // Gold border
            bg.strokeRoundedRect(x, y, size, size, 4);
        });
        bg.on('pointerout', () => {
            bg.clear();
            bg.fillStyle(0x4a3520, 0.8);
            bg.fillRoundedRect(x, y, size, size, 4);
            bg.lineStyle(2, 0x8B4513, 1);
            bg.strokeRoundedRect(x, y, size, size, 4);
        });

        return { bg, text, index };
    }

    selectSlot(index) {
        console.log(`📦 Selected slot ${index + 1}`);

        // Update UIScene selected slot
        const uiScene = this.scene.scene.get('UIScene');
        if (uiScene && uiScene.selectSlot) {
            uiScene.selectSlot(index);
        }

        // Close inventory if hotbar slot (0-5)
        if (index < 6) {
            this.toggle();
        }
    }

    toggle() {
        this.isOpen = !this.isOpen;

        if (this.container) {
            this.container.setVisible(this.isOpen);
        }

        console.log(`🎒 Inventory: ${this.isOpen ? 'OPEN' : 'CLOSED'}`);

        // Pause game when open
        if (this.scene.physics) {
            this.scene.physics.world.isPaused = this.isOpen;
        }
    }

    update() {
        if (!this.isOpen) return;

        // Update slot contents from inventory system
        const inv = this.scene.inventorySystem;
        if (!inv || !inv.slots) return;

        // Update hotbar slots (0-5)
        this.hotbarSlots.forEach((slot, i) => {
            const invSlot = inv.slots[i];
            if (invSlot && invSlot.item) {
                slot.text.setText(`${invSlot.item.id}\n×${invSlot.quantity || 1}`);
                slot.text.setFontSize('10px');
            } else {
                slot.text.setText(`${i + 1}`);
                slot.text.setFontSize('12px');
            }
        });

        // Update backpack slots (6-23)
        this.backpackSlots.forEach((slot, i) => {
            const invSlot = inv.slots[i + 6];
            if (invSlot && invSlot.item) {
                slot.text.setText(`${invSlot.item.id}\n×${invSlot.quantity || 1}`);
                slot.text.setFontSize('10px');
            } else {
                slot.text.setText(`${i + 10}`);
                slot.text.setFontSize('12px');
            }
        });
    }
}