{% extends 'layout.html.twig' %}

{% block title %}User Search - Decent Newsroom{% endblock %}

{% block body %}
<div class="user-search-page">
    <div class="container">
        <header class="page-header">
            <h1>Search Users</h1>
            <p class="subtitle">Find writers, contributors, and Nostr users</p>
        </header>

        <div class="search-box">
            <form action="{{ path('users_search_page') }}" method="get" class="search-form">
                <div class="input-group">
                    <input
                        type="text"
                        name="q"
                        value="{{ query }}"
                        placeholder="Search by name, display name, NIP-05, or about..."
                        class="search-input"
                        autofocus
                    >
                    <button type="submit" class="search-button">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <circle cx="11" cy="11" r="8"></circle>
                            <path d="m21 21-4.35-4.35"></path>
                        </svg>
                        Search
                    </button>
                </div>
            </form>
        </div>

        {% if query %}
            <div class="search-results">
                <div class="results-header">
                    <h2>
                        {% if resultsCount > 0 %}
                            Found {{ resultsCount }} user{{ resultsCount != 1 ? 's' : '' }}
                        {% else %}
                            No users found
                        {% endif %}
                    </h2>
                    {% if resultsCount > 0 %}
                        <p class="results-info">Search query: <strong>{{ query }}</strong></p>
                    {% endif %}
                </div>

                {% if users|length > 0 %}
                    <div class="users-grid">
                        {% for user in users %}
                            <div class="user-card">
                                <div class="user-avatar">
                                    {% if user.picture %}
                                        <img src="{{ user.picture }}" alt="{{ user.displayName ?? user.name ?? 'User' }}" loading="lazy">
                                    {% else %}
                                        <div class="avatar-placeholder">
                                            {{ (user.displayName ?? user.name ?? user.npub[:8])|slice(0, 2)|upper }}
                                        </div>
                                    {% endif %}
                                </div>
                                <div class="user-info">
                                    <h3 class="user-name">
                                        {{ user.displayName ?? user.name ?? 'Anonymous' }}
                                    </h3>
                                    {% if user.nip05 %}
                                        <p class="user-nip05">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                                <path d="M9 11a3 3 0 1 0 6 0a3 3 0 0 0 -6 0"></path>
                                                <path d="M17.657 16.657l-4.243 4.243a2 2 0 0 1 -2.827 0l-4.244 -4.243a8 8 0 1 1 11.314 0z"></path>
                                            </svg>
                                            {{ user.nip05 }}
                                        </p>
                                    {% endif %}
                                    {% if user.about %}
                                        <p class="user-about">
                                            {{ user.about|length > 120 ? user.about|slice(0, 120) ~ '...' : user.about }}
                                        </p>
                                    {% endif %}
                                    <div class="user-meta">
                                        <span class="user-npub" title="{{ user.npub }}">
                                            {{ user.npub[:12] }}...{{ user.npub[-8:] }}
                                        </span>
                                        {% if user.website %}
                                            <a href="{{ user.website }}" target="_blank" rel="noopener noreferrer" class="user-website">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                                    <circle cx="12" cy="12" r="10"></circle>
                                                    <line x1="2" y1="12" x2="22" y2="12"></line>
                                                    <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
                                                </svg>
                                                Website
                                            </a>
                                        {% endif %}
                                        {% if user.lud16 %}
                                            <span class="user-lightning" title="Lightning: {{ user.lud16 }}">
                                                ⚡
                                            </span>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                {% else %}
                    <div class="no-results">
                        <p>No users found matching "{{ query }}"</p>
                        <p class="help-text">Try different keywords or check your spelling</p>
                    </div>
                {% endif %}
            </div>
        {% else %}
            <div class="search-suggestions">
                <h3>Quick Links</h3>
                <div class="suggestion-links">
                    <a href="{{ path('featured_writers_page') }}" class="suggestion-card">
                        <h4>Featured Writers</h4>
                        <p>Browse our featured contributors</p>
                    </a>
                </div>
            </div>
        {% endif %}
    </div>
</div>

<style>
.user-search-page {
    padding: 2rem 0;
    min-height: 60vh;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.page-header {
    text-align: center;
    margin-bottom: 2rem;
}

.page-header h1 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.subtitle {
    color: #666;
    font-size: 1.1rem;
}

.search-box {
    max-width: 700px;
    margin: 0 auto 3rem;
}

.search-form {
    width: 100%;
}

.input-group {
    display: flex;
    gap: 0.5rem;
}

.search-input {
    flex: 1;
    padding: 1rem;
    font-size: 1rem;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    transition: border-color 0.2s;
}

.search-input:focus {
    outline: none;
    border-color: #007bff;
}

.search-button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    transition: background 0.2s;
}

.search-button:hover {
    background: #0056b3;
}

.results-header {
    margin-bottom: 2rem;
}

.results-header h2 {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
}

.results-info {
    color: #666;
    font-size: 0.95rem;
}

.users-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.user-card {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 1.5rem;
    transition: box-shadow 0.2s, transform 0.2s;
}

.user-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.user-avatar {
    width: 80px;
    height: 80px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    overflow: hidden;
}

.user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
}

.user-info {
    text-align: center;
}

.user-name {
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.user-nip05 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    color: #28a745;
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
}

.user-about {
    color: #555;
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 1rem;
}

.user-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    align-items: center;
    font-size: 0.85rem;
    color: #777;
    padding-top: 0.75rem;
    border-top: 1px solid #f0f0f0;
}

.user-npub {
    font-family: monospace;
    background: #f5f5f5;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.user-website {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: #007bff;
    text-decoration: none;
}

.user-website:hover {
    text-decoration: underline;
}

.user-lightning {
    font-size: 1.2rem;
}

.no-results {
    text-align: center;
    padding: 3rem;
    color: #666;
}

.help-text {
    color: #999;
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

.search-suggestions {
    margin-top: 3rem;
}

.search-suggestions h3 {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}

.suggestion-links {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.5rem;
}

.suggestion-card {
    display: block;
    padding: 2rem;
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s;
}

.suggestion-card:hover {
    background: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.suggestion-card h4 {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    color: #007bff;
}

.suggestion-card p {
    color: #666;
    font-size: 0.95rem;
}

@media (max-width: 768px) {
    .page-header h1 {
        font-size: 2rem;
    }

    .users-grid {
        grid-template-columns: 1fr;
    }

    .input-group {
        flex-direction: column;
    }

    .search-button {
        justify-content: center;
    }
}

[data-theme="dark"] .user-card,
[data-theme="dark"] .suggestion-card {
    background: #2d3748;
    border-color: #4a5568;
}

[data-theme="dark"] .search-input {
    background: #2d3748;
    border-color: #4a5568;
    color: white;
}

[data-theme="dark"] .user-npub {
    background: #1a202c;
}

[data-theme="dark"] .user-meta {
    border-color: #4a5568;
}
</style>
{% endblock %}