<?php

use Illuminate\Support\Facades\File;

beforeEach(function () {
    $this->cssPath = resource_path('css/app.css');
    $this->cssContent = File::get($this->cssPath);
});

describe('Typography System', function () {
    describe('Google Fonts Import', function () {
        test('imports Cairo font for Arabic', function () {
            expect($this->cssContent)->toContain('family=Cairo');
        });

        test('imports Montserrat font for English', function () {
            expect($this->cssContent)->toContain('family=Montserrat');
        });

        test('imports required font weights (300, 400, 600, 700)', function () {
            expect($this->cssContent)->toContain('wght@300;400;600;700');
        });

        test('uses font-display swap for performance', function () {
            expect($this->cssContent)->toContain('display=swap');
        });

        test('Google Fonts import appears before tailwindcss import', function () {
            $googleFontsPosition = strpos($this->cssContent, 'fonts.googleapis.com');
            $tailwindPosition = strpos($this->cssContent, "@import 'tailwindcss'");

            expect($googleFontsPosition)->toBeLessThan($tailwindPosition);
        });
    });

    describe('Font Family Variables', function () {
        test('defines Arabic font family variable', function () {
            expect($this->cssContent)->toContain("--font-arabic: 'Cairo'");
        });

        test('defines English font family variable', function () {
            expect($this->cssContent)->toContain("--font-english: 'Montserrat'");
        });

        test('includes fallback fonts for Arabic', function () {
            expect($this->cssContent)->toContain("'Cairo', 'Tajawal'");
        });

        test('includes fallback fonts for English', function () {
            expect($this->cssContent)->toContain("'Montserrat', 'Lato'");
        });
    });

    describe('Font Size Variables', function () {
        test('defines xs font size (0.75rem / 12px)', function () {
            expect($this->cssContent)->toContain('--font-size-xs: 0.75rem');
        });

        test('defines sm font size (0.875rem / 14px)', function () {
            expect($this->cssContent)->toContain('--font-size-sm: 0.875rem');
        });

        test('defines base font size (1rem / 16px)', function () {
            expect($this->cssContent)->toContain('--font-size-base: 1rem');
        });

        test('defines lg font size (1.125rem / 18px)', function () {
            expect($this->cssContent)->toContain('--font-size-lg: 1.125rem');
        });

        test('defines xl font size (1.25rem / 20px)', function () {
            expect($this->cssContent)->toContain('--font-size-xl: 1.25rem');
        });

        test('defines 2xl font size for H3 (1.5rem / 24px)', function () {
            expect($this->cssContent)->toContain('--font-size-2xl: 1.5rem');
        });

        test('defines 3xl font size for H2 (2rem / 32px)', function () {
            expect($this->cssContent)->toContain('--font-size-3xl: 2rem');
        });

        test('defines 4xl font size for H1 (2.5rem / 40px)', function () {
            expect($this->cssContent)->toContain('--font-size-4xl: 2.5rem');
        });
    });

    describe('Dynamic Font Selection', function () {
        test('applies Arabic font family for ar language', function () {
            expect($this->cssContent)->toContain('html[lang="ar"] body');
            expect($this->cssContent)->toMatch('/html\[lang="ar"\] body\s*\{\s*font-family:\s*var\(--font-arabic\)/');
        });

        test('applies English font family for en language', function () {
            expect($this->cssContent)->toContain('html[lang="en"] body');
            expect($this->cssContent)->toMatch('/html\[lang="en"\] body\s*\{\s*font-family:\s*var\(--font-english\)/');
        });
    });

    describe('Line Heights', function () {
        test('sets body line height to 1.6', function () {
            expect($this->cssContent)->toMatch('/body\s*\{[^}]*line-height:\s*1\.6/');
        });

        test('sets heading line height to 1.3', function () {
            expect($this->cssContent)->toMatch('/h1,\s*h2,\s*h3,\s*h4,\s*h5,\s*h6\s*\{[^}]*line-height:\s*1\.3/');
        });
    });

    describe('Font Hierarchy', function () {
        test('H1 uses 4xl size and bold weight (700)', function () {
            expect($this->cssContent)->toMatch('/h1\s*\{[^}]*font-size:\s*var\(--font-size-4xl\)/');
            expect($this->cssContent)->toMatch('/h1\s*\{[^}]*font-weight:\s*700/');
        });

        test('H2 uses 3xl size and semibold weight (600)', function () {
            expect($this->cssContent)->toMatch('/h2\s*\{[^}]*font-size:\s*var\(--font-size-3xl\)/');
            expect($this->cssContent)->toMatch('/h2\s*\{[^}]*font-weight:\s*600/');
        });

        test('H3 uses 2xl size and semibold weight (600)', function () {
            expect($this->cssContent)->toMatch('/h3\s*\{[^}]*font-size:\s*var\(--font-size-2xl\)/');
            expect($this->cssContent)->toMatch('/h3\s*\{[^}]*font-weight:\s*600/');
        });

        test('small text uses sm font size', function () {
            expect($this->cssContent)->toMatch('/small,\s*\.text-sm\s*\{[^}]*font-size:\s*var\(--font-size-sm\)/');
        });
    });
});