{% extends "base/base.html" %}
{% load static %}

{% block title %}Design System Test - ThrillWiki{% endblock %}

{% block content %}
<div class="container py-responsive">
    <h1 class="mb-8">Design System Test Page</h1>
    <p class="mb-8 text-muted-foreground">
        This page validates all design system components are rendering correctly.
    </p>

    <!-- Typography Section -->
    <section class="mb-12" aria-labelledby="typography-heading">
        <h2 id="typography-heading" class="mb-4 text-2xl font-semibold">Typography</h2>
        <div class="p-6 border rounded-lg bg-card">
            <h1>Heading 1</h1>
            <h2>Heading 2</h2>
            <h3>Heading 3</h3>
            <h4>Heading 4</h4>
            <h5>Heading 5</h5>
            <h6>Heading 6</h6>
            <p class="mt-4">Regular paragraph text. <a href="#">This is a link</a>.</p>
            <p class="text-muted-foreground">Muted text for secondary information.</p>
            <p class="text-sm">Small text</p>
            <p class="text-lg">Large text</p>
            <code class="font-mono">Monospace code</code>
        </div>
    </section>

    <!-- Color Palette Section -->
    <section class="mb-12" aria-labelledby="colors-heading">
        <h2 id="colors-heading" class="mb-4 text-2xl font-semibold">Color Palette</h2>

        <h3 class="mb-2 text-lg font-medium">Primary Colors</h3>
        <div class="flex flex-wrap gap-2 mb-4">
            <div class="w-16 h-16 rounded" style="background: var(--color-primary-50);"></div>
            <div class="w-16 h-16 rounded" style="background: var(--color-primary-100);"></div>
            <div class="w-16 h-16 rounded" style="background: var(--color-primary-200);"></div>
            <div class="w-16 h-16 rounded" style="background: var(--color-primary-300);"></div>
            <div class="w-16 h-16 rounded" style="background: var(--color-primary-400);"></div>
            <div class="w-16 h-16 rounded" style="background: var(--color-primary-500);"></div>
            <div class="w-16 h-16 rounded" style="background: var(--color-primary-600);"></div>
            <div class="w-16 h-16 rounded" style="background: var(--color-primary-700);"></div>
            <div class="w-16 h-16 rounded" style="background: var(--color-primary-800);"></div>
            <div class="w-16 h-16 rounded" style="background: var(--color-primary-900);"></div>
        </div>

        <h3 class="mb-2 text-lg font-medium">Semantic Colors</h3>
        <div class="grid grid-cols-2 gap-4 md:grid-cols-4">
            <div class="p-4 rounded bg-success-500">
                <span class="text-white">Success</span>
            </div>
            <div class="p-4 rounded bg-warning-500">
                <span class="text-white">Warning</span>
            </div>
            <div class="p-4 rounded bg-error-500">
                <span class="text-white">Error</span>
            </div>
            <div class="p-4 rounded bg-info-500">
                <span class="text-white">Info</span>
            </div>
        </div>
    </section>

    <!-- Button Component Section -->
    <section class="mb-12" aria-labelledby="buttons-heading">
        <h2 id="buttons-heading" class="mb-4 text-2xl font-semibold">Buttons</h2>

        <h3 class="mb-2 text-lg font-medium">Variants</h3>
        <div class="flex flex-wrap gap-4 mb-6">
            {% include "components/ui/button.html" with text="Default" variant="default" %}
            {% include "components/ui/button.html" with text="Secondary" variant="secondary" %}
            {% include "components/ui/button.html" with text="Destructive" variant="destructive" %}
            {% include "components/ui/button.html" with text="Outline" variant="outline" %}
            {% include "components/ui/button.html" with text="Ghost" variant="ghost" %}
            {% include "components/ui/button.html" with text="Link" variant="link" %}
        </div>

        <h3 class="mb-2 text-lg font-medium">Sizes</h3>
        <div class="flex flex-wrap items-center gap-4 mb-6">
            {% include "components/ui/button.html" with text="Small" size="sm" %}
            {% include "components/ui/button.html" with text="Default" %}
            {% include "components/ui/button.html" with text="Large" size="lg" %}
        </div>

        <h3 class="mb-2 text-lg font-medium">With Icons</h3>
        <div class="flex flex-wrap items-center gap-4">
            {% include "components/ui/button.html" with text="Search" icon="search" %}
            {% include "components/ui/button.html" with text="Settings" icon="settings" variant="secondary" %}
            {% include "components/ui/button.html" with text="Delete" icon="trash" variant="destructive" %}
        </div>
    </section>

    <!-- Card Component Section -->
    <section class="mb-12" aria-labelledby="cards-heading">
        <h2 id="cards-heading" class="mb-4 text-2xl font-semibold">Cards</h2>
        <div class="grid-responsive-3">
            {% include "components/ui/card.html" with title="Card Title" description="Card description text" body_content="<p>Card body content goes here.</p>" %}
            {% include "components/ui/card.html" with title="Another Card" description="With footer" body_content="<p>More content here.</p>" footer_content="<button class='btn btn-primary'>Action</button>" %}
            {% include "components/ui/card.html" with title="Minimal Card" body_content="<p>Just content, no description.</p>" %}
        </div>
    </section>

    <!-- Input Component Section -->
    <section class="mb-12" aria-labelledby="inputs-heading">
        <h2 id="inputs-heading" class="mb-4 text-2xl font-semibold">Form Inputs</h2>
        <div class="max-w-md space-y-4">
            {% include "components/ui/input.html" with name="text-input" label="Text Input" placeholder="Enter text..." %}
            {% include "components/ui/input.html" with name="email-input" label="Email Input" type="email" placeholder="email@example.com" %}
            {% include "components/ui/input.html" with name="disabled-input" label="Disabled Input" disabled="true" value="Disabled value" %}
            {% include "components/ui/input.html" with name="textarea-input" label="Textarea" type="textarea" placeholder="Enter longer text..." %}
        </div>
    </section>

    <!-- Icon System Section -->
    <section class="mb-12" aria-labelledby="icons-heading">
        <h2 id="icons-heading" class="mb-4 text-2xl font-semibold">Icons</h2>

        <h3 class="mb-2 text-lg font-medium">Sizes</h3>
        <div class="flex items-end gap-4 mb-6">
            <div class="text-center">
                {% include "components/ui/icon.html" with name="star" size="xs" %}
                <p class="text-xs">xs</p>
            </div>
            <div class="text-center">
                {% include "components/ui/icon.html" with name="star" size="sm" %}
                <p class="text-xs">sm</p>
            </div>
            <div class="text-center">
                {% include "components/ui/icon.html" with name="star" size="md" %}
                <p class="text-xs">md</p>
            </div>
            <div class="text-center">
                {% include "components/ui/icon.html" with name="star" size="lg" %}
                <p class="text-xs">lg</p>
            </div>
            <div class="text-center">
                {% include "components/ui/icon.html" with name="star" size="xl" %}
                <p class="text-xs">xl</p>
            </div>
        </div>

        <h3 class="mb-2 text-lg font-medium">Common Icons</h3>
        <div class="flex flex-wrap gap-4">
            {% include "components/ui/icon.html" with name="search" %}
            {% include "components/ui/icon.html" with name="user" %}
            {% include "components/ui/icon.html" with name="settings" %}
            {% include "components/ui/icon.html" with name="heart" %}
            {% include "components/ui/icon.html" with name="star" %}
            {% include "components/ui/icon.html" with name="home" %}
            {% include "components/ui/icon.html" with name="menu" %}
            {% include "components/ui/icon.html" with name="close" %}
            {% include "components/ui/icon.html" with name="check" %}
            {% include "components/ui/icon.html" with name="plus" %}
            {% include "components/ui/icon.html" with name="minus" %}
            {% include "components/ui/icon.html" with name="edit" %}
            {% include "components/ui/icon.html" with name="trash" %}
            {% include "components/ui/icon.html" with name="copy" %}
            {% include "components/ui/icon.html" with name="external-link" %}
        </div>
    </section>

    <!-- Responsive Utilities Section -->
    <section class="mb-12" aria-labelledby="responsive-heading">
        <h2 id="responsive-heading" class="mb-4 text-2xl font-semibold">Responsive Utilities</h2>

        <h3 class="mb-2 text-lg font-medium">Visibility</h3>
        <div class="p-4 mb-4 border rounded-lg">
            <p class="show-mobile text-success-600">Visible on mobile only</p>
            <p class="hidden-mobile text-info-600">Hidden on mobile</p>
        </div>

        <h3 class="mb-2 text-lg font-medium">Grid Responsive</h3>
        <div class="grid-responsive-4 mb-4">
            <div class="p-4 text-center rounded bg-primary-100">1</div>
            <div class="p-4 text-center rounded bg-primary-200">2</div>
            <div class="p-4 text-center rounded bg-primary-300">3</div>
            <div class="p-4 text-center rounded bg-primary-400">4</div>
        </div>

        <h3 class="mb-2 text-lg font-medium">Stack to Row</h3>
        <div class="stack-to-row">
            <div class="flex-1 p-4 text-center rounded bg-secondary-200">Item 1</div>
            <div class="flex-1 p-4 text-center rounded bg-secondary-300">Item 2</div>
            <div class="flex-1 p-4 text-center rounded bg-secondary-400">Item 3</div>
        </div>
    </section>

    <!-- Accessibility Section -->
    <section class="mb-12" aria-labelledby="a11y-heading">
        <h2 id="a11y-heading" class="mb-4 text-2xl font-semibold">Accessibility</h2>

        <h3 class="mb-2 text-lg font-medium">Focus States</h3>
        <p class="mb-4 text-muted-foreground">Tab through these elements to see focus indicators:</p>
        <div class="flex flex-wrap gap-4 mb-6">
            <button class="btn btn-primary focus-ring">Focus Me</button>
            <a href="#" class="text-primary focus-ring">Focusable Link</a>
            <input type="text" class="input focus-ring" placeholder="Focusable Input">
        </div>

        <h3 class="mb-2 text-lg font-medium">Touch Targets</h3>
        <div class="flex gap-4">
            <button class="touch-target btn btn-outline">44px Min</button>
        </div>

        <h3 class="mb-2 text-lg font-medium">Screen Reader Text</h3>
        <div class="p-4 border rounded-lg">
            <button class="btn btn-icon">
                {% include "components/ui/icon.html" with name="settings" %}
                <span class="sr-only">Settings</span>
            </button>
            <p class="mt-2 text-sm text-muted-foreground">The button above has screen reader text "Settings"</p>
        </div>
    </section>

    <!-- Dark Mode Section -->
    <section class="mb-12" aria-labelledby="darkmode-heading">
        <h2 id="darkmode-heading" class="mb-4 text-2xl font-semibold">Dark Mode</h2>
        <p class="mb-4 text-muted-foreground">Toggle dark mode using the theme switcher in the navbar to test dark mode styling.</p>
        <div class="grid grid-cols-2 gap-4">
            <div class="p-4 rounded bg-background">
                <p class="text-foreground">Background/Foreground</p>
            </div>
            <div class="p-4 rounded bg-card">
                <p class="text-card-foreground">Card/Card Foreground</p>
            </div>
            <div class="p-4 rounded bg-muted">
                <p class="text-muted-foreground">Muted/Muted Foreground</p>
            </div>
            <div class="p-4 rounded bg-primary">
                <p class="text-primary-foreground">Primary/Primary Foreground</p>
            </div>
        </div>
    </section>

    <!-- Alerts Section -->
    <section class="mb-12" aria-labelledby="alerts-heading">
        <h2 id="alerts-heading" class="mb-4 text-2xl font-semibold">Alerts</h2>
        <div class="space-y-4">
            <div class="alert alert-default" role="alert">
                <div class="alert-title">Default Alert</div>
                <div class="alert-description">This is a default alert message.</div>
            </div>
            <div class="alert alert-success" role="alert">
                <div class="alert-title">Success</div>
                <div class="alert-description">Your action was completed successfully.</div>
            </div>
            <div class="alert alert-warning" role="alert">
                <div class="alert-title">Warning</div>
                <div class="alert-description">Please review before continuing.</div>
            </div>
            <div class="alert alert-error" role="alert">
                <div class="alert-title">Error</div>
                <div class="alert-description">Something went wrong. Please try again.</div>
            </div>
            <div class="alert alert-info" role="alert">
                <div class="alert-title">Info</div>
                <div class="alert-description">Here's some helpful information.</div>
            </div>
        </div>
    </section>

    <!-- Spacing & Layout Section -->
    <section class="mb-12" aria-labelledby="spacing-heading">
        <h2 id="spacing-heading" class="mb-4 text-2xl font-semibold">Spacing & Layout</h2>

        <h3 class="mb-2 text-lg font-medium">Container Sizes</h3>
        <div class="space-y-4">
            <div class="p-4 mx-auto border rounded container-sm bg-muted">
                <p class="text-center">container-sm (640px)</p>
            </div>
            <div class="p-4 mx-auto border rounded container-md bg-muted">
                <p class="text-center">container-md (768px)</p>
            </div>
            <div class="p-4 mx-auto border rounded container-lg bg-muted">
                <p class="text-center">container-lg (1024px)</p>
            </div>
        </div>
    </section>
</div>
{% endblock %}