{% extends "base.html" %}

{% block content %}
<h2 class="section-title">Поиск</h2>

<form action="{{ url_for('search') }}" method="GET" class="mb-3" style="width: 100%;">
    <div style="display: flex; gap: 20px; width: 100%;">
        <input type="text" name="q" value="{{ query }}" 
               placeholder="Поиск по названию или данным..." 
               style="flex-grow: 1; width: calc(100% - 160px); padding: 15px 20px; font-size: 16px; border: 2px solid #1A1A1A; font-family: 'Oswald', sans-serif; background: #F5F0E6;">
        <button class="btn btn-primary" type="submit" style="padding: 15px 40px; flex-shrink: 0;">Найти</button>
    </div>
</form>

{% if results %}
<div class="info-block mb-3">
    <p>Найдено работ: <strong>{{ results|length }}</strong> по запросу «{{ query }}»</p>
</div>

<div class="grid grid-3">
    {% for art in results %}
    <div class="card">
        <div class="card-header">#{{ art.id }}</div>
        <div class="card-body">
            <h5 class="card-title">{{ art.title }}</h5>
            <div class="art-preview mb-2" style="height: 160px;">
                <canvas id="search-art-{{ art.id }}" width="350" height="160"></canvas>
            </div>
            <div class="text-price mb-2">
                {{ art.price }} <span>₽</span>
            </div>
            {% if art.owner_id != session.user_id %}
                <a href="{{ url_for('buy_artwork', artwork_id=art.id) }}" class="btn btn-primary">Купить</a>
            {% else %}
                <span class="badge badge-success">Ваша работа</span>
            {% endif %}
        </div>
    </div>
    {% endfor %}
</div>
{% elif query %}
<div class="info-block">
    <p>По запросу «<strong>{{ query }}</strong>» ничего не найдено.</p>
</div>
{% else %}
<div class="info-block">
    <p>Введите поисковый запрос для поиска работ.</p>
</div>
{% endif %}

<script>
const searchResultsData = {{ results|tojson }};

function drawArt(canvas, artData) {
    try {
        const ctx = canvas.getContext('2d');
        const shapes = JSON.parse(artData);
        
        ctx.fillStyle = '#F5F0E6';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        
        const scale = canvas.width / 100;
        
        shapes.forEach(shape => {
            ctx.save();
            ctx.fillStyle = shape.color;
            ctx.strokeStyle = shape.color;
            ctx.lineWidth = 3;
            
            const x = shape.x * scale;
            const y = shape.y * scale;
            const w = shape.width * scale;
            const h = shape.height * scale;
            const angle = (shape.angle || 0) * Math.PI / 180;
            
            const cx = x + w / 2;
            const cy = y + h / 2;
            
            if (shape.type === 'rectangle' || shape.type === 'rotated_rect') {
                ctx.translate(cx, cy);
                ctx.rotate(angle);
                ctx.fillRect(-w/2, -h/2, w, h);
            } else if (shape.type === 'circle') {
                ctx.beginPath();
                ctx.arc(cx, cy, Math.min(w, h) / 2, 0, Math.PI * 2);
                ctx.fill();
            } else if (shape.type === 'triangle') {
                ctx.translate(cx, cy);
                ctx.rotate(angle);
                ctx.beginPath();
                ctx.moveTo(0, -h/2);
                ctx.lineTo(w/2, h/2);
                ctx.lineTo(-w/2, h/2);
                ctx.closePath();
                ctx.fill();
            } else if (shape.type === 'line') {
                ctx.translate(cx, cy);
                ctx.rotate(angle);
                ctx.beginPath();
                ctx.moveTo(-w/2, 0);
                ctx.lineTo(w/2, 0);
                ctx.lineWidth = h || 4;
                ctx.stroke();
            }
            ctx.restore();
        });
    } catch (e) {
        console.error('Error:', e);
    }
}

document.addEventListener('DOMContentLoaded', function() {
    searchResultsData.forEach(art => {
        const canvas = document.getElementById('search-art-' + art.id);
        if (canvas && art.data) {
            drawArt(canvas, art.data);
        }
    });
});
</script>
{% endblock %}