<?php

namespace Mtc\Plugins\BlockManager\Tests\Unit;

use Mtc\Plugins\BlockManager\Services\ContainerCssCompiler;
use Mtc\Plugins\BlockManager\Services\DesignTokenService;
use Tests\TestCase;

class ContainerCssCompilerTest extends TestCase
{
    private ContainerCssCompiler $compiler;

    protected function setUp(): void
    {
        parent::setUp();
        $this->compiler = app(ContainerCssCompiler::class);
    }

    private function props(): array
    {
        return [
            'base' => [
                'default' => [
                    'desktop' => [
                        'layout' => [
                            'display' => ['raw' => 'flex'],
                            'gap'     => ['raw' => '24px'],
                        ],
                        'box' => [
                            'padding_x' => ['raw' => '16'],   // bare number → px in resolve mode
                        ],
                        'background' => [
                            'color' => ['token' => '@primary_color'],
                        ],
                    ],
                    'mobile' => [
                        'layout' => [
                            'flex_direction' => ['raw' => 'column'],
                        ],
                    ],
                ],
            ],
        ];
    }

    public function test_resolve_mode_produces_literal_values_and_pixel_media(): void
    {
        $out = $this->compiler->compile($this->props(), '.bm-ci-x', true);
        $css = $out['css'];

        $this->assertStringContainsString('.bm-ci-x {', $css);
        $this->assertStringContainsString('display: flex;', $css);
        $this->assertStringContainsString('gap: 24px;', $css);
        // bare 16 → 16px on a length property
        $this->assertStringContainsString('padding-left: 16px;', $css);
        $this->assertStringContainsString('padding-right: 16px;', $css);
        // token resolved to its literal value from variables.less
        $this->assertStringContainsString('background-color: #0f55c4;', $css);
        // mobile cell → literal-px media query
        $this->assertStringContainsString('@media (max-width: 640px)', $css);
        $this->assertStringContainsString('flex-direction: column;', $css);
        $this->assertStringNotContainsString('@primary_color', $css);
    }

    public function test_preserve_mode_keeps_tokens_and_less_media_vars(): void
    {
        $out = $this->compiler->compile($this->props(), '.bm-ci-x', false);
        $css = $out['css'];

        // token preserved as a LESS variable
        $this->assertStringContainsString('background-color: @primary_color;', $css);
        // media uses the LESS width variable
        $this->assertStringContainsString('@media (max-width: @mobile_width)', $css);
        // preserve mode does not append px to bare numbers
        $this->assertStringContainsString('padding-left: 16;', $css);
    }

    public function test_columns_integer_expands_to_repeat(): void
    {
        $props = ['base' => ['default' => ['desktop' => [
            'layout' => ['display' => ['raw' => 'grid'], 'columns' => ['raw' => '3']],
        ]]]];
        $css = $this->compiler->compile($props, '.bm-ci-g', true)['css'];
        $this->assertStringContainsString('grid-template-columns: repeat(3, 1fr);', $css);
    }

    public function test_empty_props_produce_empty_css(): void
    {
        $this->assertSame('', $this->compiler->compile([], '.bm-ci-e', true)['css']);
    }
}
