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

{% block title %}Connect your accounts - {{ org.name }}{% endblock %}

{% block auth_content %}
<div style="width: 100%; max-width: 640px; padding: 0 16px;">

    <!-- Header card -->
    <div style="text-align: center; margin-bottom: 32px;">
        <!-- Org identity -->
        <div style="
            width: 56px; height: 56px;
            background: var(--primary);
            border-radius: var(--radius-xl);
            display: inline-flex; align-items: center; justify-content: center;
            color: white; font-weight: 700; font-size: 1.25rem;
            box-shadow: var(--shadow-primary);
            margin-bottom: 20px;
        ">{{ org.name|make_list|first|upper }}</div>

        <h1 style="
            font-family: var(--font-display);
            font-size: clamp(1.5rem, 3.5vw, 1.875rem);
            font-weight: 700;
            color: var(--text-primary);
            letter-spacing: -0.02em;
            line-height: 1.2;
            margin-bottom: 8px;
        ">Connect your social accounts</h1>
        <p style="
            font-size: 0.9375rem;
            color: var(--text-secondary);
            line-height: 1.6;
        ">to <strong style="color: var(--text-primary); font-weight: 600;">{{ workspace.name }}</strong> on {{ org.name }}</p>
    </div>

    <!-- Error message -->
    {% if error %}
    <div style="
        background: var(--error-50);
        border: 1px solid rgba(239,68,68,0.15);
        border-radius: var(--radius-lg);
        padding: 12px 16px;
        margin-bottom: 20px;
        display: flex; align-items: center; gap: 10px;
        font-size: 0.8125rem; color: var(--error-700);
    ">
        <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink: 0;"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
        {{ error }}
    </div>
    {% endif %}

    <!-- Platform grid -->
    <div style="
        background: var(--surface-0);
        border: 1px solid var(--border);
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-sm);
        overflow: hidden;
        margin-bottom: 24px;
    ">
        {% for value, label in platform_choices %}
        {% if value in configured_platforms %}
        <div style="
            padding: 16px 20px;
            {% if not forloop.last %}border-bottom: 1px solid var(--surface-2);{% endif %}
            display: flex; align-items: center; gap: 14px;
        ">
            <!-- Platform icon -->
            <div style="
                width: 40px; height: 40px; flex-shrink: 0;
                border-radius: var(--radius-lg);
                display: flex; align-items: center; justify-content: center;
            " class="
                {% if value == 'facebook' %}bg-blue-50 text-blue-600
                {% elif value == 'instagram' %}bg-gradient-to-br from-purple-50 to-pink-50 text-pink-600
                {% elif value == 'linkedin_personal' %}bg-blue-50 text-blue-700
                {% elif value == 'linkedin_company' %}bg-blue-50 text-blue-700
                {% elif value == 'tiktok' %}bg-stone-900 text-white
                {% elif value == 'youtube' %}bg-red-50 text-red-600
                {% elif value == 'pinterest' %}bg-red-50 text-red-500
                {% elif value == 'threads' %}bg-stone-100 text-stone-800
                {% elif value == 'bluesky' %}bg-sky-50 text-sky-500
                {% elif value == 'google_business' %}bg-blue-50 text-blue-500
                {% elif value == 'mastodon' %}bg-indigo-50 text-indigo-600
                {% endif %}
            ">
                {% include "social_accounts/partials/_platform_icon.html" with platform=value size="5" %}
            </div>

            <!-- Platform info -->
            <div style="flex: 1; min-width: 0;">
                <div style="font-size: 0.875rem; font-weight: 600; color: var(--text-primary);">{{ label }}</div>
                <div style="font-size: 0.75rem; color: var(--text-tertiary); margin-top: 1px;">
                    {% if value == 'facebook' %}Pages &amp; Groups
                    {% elif value == 'instagram' %}Business &amp; Creator
                    {% elif value == 'linkedin_personal' %}Personal profile
                    {% elif value == 'linkedin_company' %}Company pages
                    {% elif value == 'tiktok' %}Video content
                    {% elif value == 'youtube' %}Videos &amp; Shorts
                    {% elif value == 'pinterest' %}Pins &amp; Boards
                    {% elif value == 'threads' %}Text &amp; Media
                    {% elif value == 'bluesky' %}AT Protocol
                    {% elif value == 'google_business' %}Local posts
                    {% elif value == 'mastodon' %}Federated social
                    {% endif %}
                </div>
            </div>

            <!-- Connect button or connected state -->
            {% if value in connected_accounts %}
            <div style="display: flex; align-items: center; gap: 8px;">
                <span style="font-size: 0.8125rem; font-weight: 500; color: var(--success-700);">
                    Connected
                </span>
                <div style="
                    width: 28px; height: 28px;
                    background: var(--success-50);
                    border-radius: var(--radius-full);
                    display: flex; align-items: center; justify-content: center;
                ">
                    <svg width="14" height="14" fill="none" stroke="var(--success-500)" viewBox="0 0 24 24" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                        <polyline points="20 6 9 17 4 12"/>
                    </svg>
                </div>
            </div>
            {% else %}
            {% if value == 'bluesky' %}
            <!-- Bluesky: inline form (no OAuth) -->
            <div x-data="{ showForm: false }" style="flex-shrink: 0;">
                <button @click="showForm = !showForm"
                        class="btn-primary-hover"
                        style="
                    display: inline-flex; align-items: center; gap: 6px;
                    padding: 7px 16px;
                    font-size: 0.75rem; font-weight: 600;
                    color: white; background: var(--primary);
                    border: none; border-radius: var(--radius-full);
                    cursor: pointer;
                    box-shadow: var(--shadow-primary);
                    transition: all 200ms ease;
                ">
                    Connect
                    <svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M14 5l7 7m0 0l-7 7m7-7H3"/></svg>
                </button>
                <div x-show="showForm" x-cloak style="
                    position: fixed; inset: 0; z-index: 50;
                    display: flex; align-items: center; justify-content: center;
                    background: rgba(0,0,0,0.4); padding: 16px;
                " @click.self="showForm = false">
                    <form method="post" action="{% url 'onboarding:connection_bluesky' token=link.token %}" style="
                        background: var(--surface-0);
                        border-radius: var(--radius-xl);
                        padding: 24px;
                        width: 100%; max-width: 380px;
                        box-shadow: var(--shadow-xl);
                    ">
                        {% csrf_token %}
                        <h3 style="font-size: 0.9375rem; font-weight: 600; color: var(--text-primary); margin-bottom: 16px;">Connect Bluesky</h3>
                        <div style="margin-bottom: 12px;">
                            <label style="font-size: 0.8125rem; font-weight: 600; color: var(--text-primary); display: block; margin-bottom: 4px;">Handle</label>
                            <input type="text" name="handle" placeholder="you.bsky.social" required style="
                                width: 100%; padding: 9px 12px;
                                font-size: 0.875rem; font-family: var(--font-body);
                                border: 1.5px solid var(--border);
                                border-radius: var(--radius-lg);
                                background: var(--surface-0);
                                color: var(--text-primary);
                                outline: none;
                            ">
                        </div>
                        <div style="margin-bottom: 16px;">
                            <label style="font-size: 0.8125rem; font-weight: 600; color: var(--text-primary); display: block; margin-bottom: 4px;">App Password</label>
                            <input type="password" name="app_password" required style="
                                width: 100%; padding: 9px 12px;
                                font-size: 0.875rem; font-family: var(--font-body);
                                border: 1.5px solid var(--border);
                                border-radius: var(--radius-lg);
                                background: var(--surface-0);
                                color: var(--text-primary);
                                outline: none;
                            ">
                            <p style="font-size: 0.6875rem; color: var(--text-tertiary); margin-top: 4px;">Generate at Settings &rarr; App Passwords on Bluesky</p>
                        </div>
                        <div style="display: flex; gap: 8px; justify-content: flex-end;">
                            <button type="button" @click="showForm = false" style="
                                padding: 8px 16px; font-size: 0.8125rem; font-weight: 600;
                                background: var(--surface-0); color: var(--text-primary);
                                border: 1px solid var(--border); border-radius: var(--radius-full);
                                cursor: pointer;
                            ">Cancel</button>
                            <button type="submit" style="
                                padding: 8px 16px; font-size: 0.8125rem; font-weight: 600;
                                background: var(--primary); color: white;
                                border: none; border-radius: var(--radius-full);
                                cursor: pointer; box-shadow: var(--shadow-primary);
                            ">Connect</button>
                        </div>
                    </form>
                </div>
            </div>
            {% elif value == 'mastodon' %}
            <!-- Mastodon: instance URL form -->
            <div x-data="{ showForm: false }" style="flex-shrink: 0;">
                <button @click="showForm = !showForm"
                        class="btn-primary-hover"
                        style="
                    display: inline-flex; align-items: center; gap: 6px;
                    padding: 7px 16px;
                    font-size: 0.75rem; font-weight: 600;
                    color: white; background: var(--primary);
                    border: none; border-radius: var(--radius-full);
                    cursor: pointer;
                    box-shadow: var(--shadow-primary);
                    transition: all 200ms ease;
                ">
                    Connect
                    <svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M14 5l7 7m0 0l-7 7m7-7H3"/></svg>
                </button>
                <div x-show="showForm" x-cloak style="
                    position: fixed; inset: 0; z-index: 50;
                    display: flex; align-items: center; justify-content: center;
                    background: rgba(0,0,0,0.4); padding: 16px;
                " @click.self="showForm = false">
                    <form method="post" action="{% url 'onboarding:connection_mastodon' token=link.token %}" style="
                        background: var(--surface-0);
                        border-radius: var(--radius-xl);
                        padding: 24px;
                        width: 100%; max-width: 380px;
                        box-shadow: var(--shadow-xl);
                    ">
                        {% csrf_token %}
                        <h3 style="font-size: 0.9375rem; font-weight: 600; color: var(--text-primary); margin-bottom: 16px;">Connect Mastodon</h3>
                        <div style="margin-bottom: 16px;">
                            <label style="font-size: 0.8125rem; font-weight: 600; color: var(--text-primary); display: block; margin-bottom: 4px;">Instance URL</label>
                            <input type="text" name="instance_url" placeholder="mastodon.social" required style="
                                width: 100%; padding: 9px 12px;
                                font-size: 0.875rem; font-family: var(--font-body);
                                border: 1.5px solid var(--border);
                                border-radius: var(--radius-lg);
                                background: var(--surface-0);
                                color: var(--text-primary);
                                outline: none;
                            ">
                        </div>
                        <div style="display: flex; gap: 8px; justify-content: flex-end;">
                            <button type="button" @click="showForm = false" style="
                                padding: 8px 16px; font-size: 0.8125rem; font-weight: 600;
                                background: var(--surface-0); color: var(--text-primary);
                                border: 1px solid var(--border); border-radius: var(--radius-full);
                                cursor: pointer;
                            ">Cancel</button>
                            <button type="submit" style="
                                padding: 8px 16px; font-size: 0.8125rem; font-weight: 600;
                                background: var(--primary); color: white;
                                border: none; border-radius: var(--radius-full);
                                cursor: pointer; box-shadow: var(--shadow-primary);
                            ">Connect</button>
                        </div>
                    </form>
                </div>
            </div>
            {% else %}
            <!-- Standard OAuth platforms -->
            <form method="post" action="{% url 'onboarding:connection_oauth_start' token=link.token %}" style="flex-shrink: 0;">
                {% csrf_token %}
                <input type="hidden" name="platform" value="{{ value }}">
                <button type="submit"
                        class="btn-primary-hover"
                        style="
                    display: inline-flex; align-items: center; gap: 6px;
                    padding: 7px 16px;
                    font-size: 0.75rem; font-weight: 600;
                    color: white; background: var(--primary);
                    border: none; border-radius: var(--radius-full);
                    cursor: pointer;
                    box-shadow: var(--shadow-primary);
                    transition: all 200ms ease;
                ">
                    Connect
                    <svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M14 5l7 7m0 0l-7 7m7-7H3"/></svg>
                </button>
            </form>
            {% endif %}
            {% endif %}
        </div>
        {% endif %}
        {% endfor %}
    </div>

    <!-- Connected count summary + Done button -->
    {% if connected_accounts %}
    <div style="
        background: var(--success-50);
        border: 1px solid rgba(34,197,94,0.15);
        border-radius: var(--radius-lg);
        padding: 14px 18px;
        margin-bottom: 20px;
        display: flex; align-items: center; gap: 10px;
        font-size: 0.8125rem; color: var(--success-700); font-weight: 500;
    ">
        <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink: 0;"><path d="M22 11.08V12a10 10 0 11-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
        {{ connected_accounts|length }} account{{ connected_accounts|length|pluralize }} connected
    </div>
    {% endif %}

    <form method="post" action="{% url 'onboarding:connection_done' token=link.token %}">
        {% csrf_token %}
        <button type="submit"
                class="btn-primary-lift"
                style="
            width: 100%;
            display: inline-flex; align-items: center; justify-content: center; gap: 8px;
            padding: 14px 28px;
            font-size: 0.9375rem; font-weight: 600; font-family: var(--font-body);
            color: white; background: var(--primary);
            border: none; border-radius: var(--radius-full);
            cursor: pointer;
            box-shadow: var(--shadow-primary);
            transition: all 200ms ease;
        ">
            Done &mdash; Notify {{ org.name }}
            <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 2L11 13"/><path d="M22 2l-7 20-4-9-9-4 20-7z"/></svg>
        </button>
    </form>

    <!-- Footer help -->
    <div style="text-align: center; margin-top: 28px;">
        <p style="font-size: 0.75rem; color: var(--text-ghost); line-height: 1.6;">
            Need help? Contact <strong style="color: var(--text-tertiary);">{{ org.name }}</strong>
        </p>
        <p style="font-size: 0.6875rem; color: var(--text-ghost); margin-top: 4px;">
            This link expires {{ link.expires_at|date:"M j, Y" }}
        </p>
    </div>
</div>
{% endblock %}