import { test, expect } from '@playwright/test';

test.describe('Note Resizing', () => {
    test('should increase note height when changing size to Large', async ({ page }) => {
        // Go to home page
        await page.goto('/');

        // Create a new note to ensure we have a clean slate
        const notesInput = page.locator('input[placeholder="Take a note..."]');
        // If text is localized, try selector
        const mainInput = page.locator('.note-input-container, [data-testid="note-input"]');

        // Just click anywhere that looks like the input bar
        // Or assume the placeholder might be localized. 
        // Best to find by visual structure if possible, but placeholder is common.
        // Let's stick to the existing notes check.

        // Wait for at least one note card
        const firstNote = page.locator('.note-card').first();
        await firstNote.waitFor({ state: 'visible', timeout: 5000 });

        // Get initial height
        const initialBox = await firstNote.boundingBox();
        if (!initialBox) throw new Error('Note card has no bounding box');
        console.log(`Initial height: ${initialBox.height}`);

        // Hover to show actions
        await firstNote.hover();

        // Click "More options" button (3 vertical dots)
        // Use selector ensuring it's the one inside THIS note
        const moreBtn = firstNote.locator('button:has(svg.lucide-more-vertical)');
        await moreBtn.waitFor({ state: 'visible' });
        await moreBtn.click();

        // Click "Large" option
        // It's the 3rd item in the second group usually. 
        // Or we can look for the maximize icon
        const largeOption = page.locator('div[role="menuitem"]:has(svg.lucide-maximize-2)').last();
        // The sizes are Small, Medium, Large. All use Maximize2 icon in the current code?
        // Let's check NoteActions code.
        // Yes: <Maximize2 className="h-4 w-4 mr-2" /> for all sizes.
        // And they are rendered in order: Small, Medium, Large.
        // So "Large" is the LAST one.

        await largeOption.waitFor({ state: 'visible' });
        await largeOption.click();

        // Wait for update
        await page.waitForTimeout(1000);

        // Get new height
        const newBox = await firstNote.boundingBox();
        if (!newBox) throw new Error('Note card has no bounding box after resize');
        console.log(`New height: ${newBox.height}`);

        // Assert
        expect(newBox.height).toBeGreaterThan(initialBox.height + 50);
    });
});