{% extends "layouts/settings.html" %}
{% load static %}

{% block title %}Organization Calendar - Redea Social{% endblock %}

{% block page_header %}
<h1 class="text-xl font-semibold text-stone-900 mb-6" style="letter-spacing: -0.01em;">Organization Calendar</h1>
{% endblock %}

{% block extra_head %}
<style>
    /* Fix parent overflow clipping the calendar */
    main:has(.cross-calendar-main) > div { overflow: visible !important; }

    .cross-cal-day {
        min-height: 110px;
        border-right: 1px solid var(--color-stone-200);
        border-bottom: 1px solid var(--color-stone-200);
        padding: 6px;
        transition: background 150ms ease;
        position: relative;
    }
    .cross-cal-day:hover { background: var(--color-stone-50); }
    .cross-cal-day.today { background: #FFF7ED; }
    .cross-cal-day.past { background: var(--color-stone-100); }
    .cross-cal-day.past:hover { background: #EEEEEC; }
    .cross-cal-day.other-month { opacity: 0.4; }
    .cross-cal-day .day-num {
        font-size: 12px; font-weight: 600;
        width: 24px; height: 24px; border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        margin-bottom: 4px;
    }
    .cross-cal-day.today .day-num {
        background: #F97316; color: white;
    }
    .cross-cal-day.past .day-num { color: var(--color-stone-500); }

    .cross-post-chip {
        display: flex; align-items: center; gap: 4px;
        padding: 2px 6px; border-radius: 6px;
        font-size: 10px; font-weight: 500;
        margin-bottom: 2px; cursor: pointer;
        transition: all 150ms ease;
        text-decoration: none;
        max-width: 100%; overflow: hidden;
    }
    .cross-post-chip:hover { transform: translateX(1px); }
    .cross-post-chip .ws-dot { width: 4px; height: 4px; border-radius: 50%; flex-shrink: 0; }

    /* Status colors */
    .status-draft      { background: var(--color-stone-100); color: var(--color-stone-600); }
    .status-pending_review, .status-pending_client { background: #FFF7ED; color: #C2410C; }
    .status-scheduled  { background: #EFF6FF; color: #1D4ED8; }
    .status-published  { background: #F0FDF4; color: #15803D; }
    .status-partially_published { background: #F0FDF4; color: #15803D; }
    .status-failed     { background: #FEF2F2; color: #B91C1C; }
    .status-on_hold    { background: #F5F3FF; color: #6D28D9; }

    /* Platform icon badges */
    .pi-facebook   { background: #1877F2; }
    .pi-instagram  { background: linear-gradient(135deg, #F58529, #DD2A7B, #8134AF); }
    .pi-linkedin   { background: #0A66C2; }
    .pi-linkedin_personal { background: #0A66C2; }
    .pi-linkedin_company  { background: #0A66C2; }
    .pi-tiktok     { background: #010101; }
    .pi-youtube    { background: #FF0000; }
    .pi-pinterest  { background: #E60023; }
    .pi-threads    { background: #000000; }
    .pi-bluesky    { background: #0085FF; }
    .pi-google_business { background: #4285F4; }
    .pi-mastodon   { background: #6364FF; }

    /* Add-post button on calendar cells */
    .cal-add-btn {
        display: none;
        position: absolute; top: 4px; right: 4px;
        width: 20px; height: 20px; border-radius: 50%;
        background: #F97316; color: white; border: none;
        align-items: center; justify-content: center;
        cursor: pointer; font-size: 14px; line-height: 1;
        box-shadow: 0 2px 6px rgba(249,115,22,0.35);
        transition: transform 100ms ease, background 100ms ease;
        z-index: 5;
    }
    .cal-add-btn:hover { background: #EA580C; transform: scale(1.1); }
    .cal-add-cell:hover .cal-add-btn { display: flex; }

    /* Filter selects */
    .org-filter-select {
        appearance: none;
        font-size: 11px; font-weight: 600;
        padding: 5px 24px 5px 8px;
        border: 1px solid var(--color-stone-200);
        border-radius: 6px;
        color: var(--color-stone-600);
        background: var(--color-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2378716C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center;
        cursor: pointer;
        transition: border-color 150ms ease;
    }
    .org-filter-select:hover { border-color: var(--color-stone-400); }
    .org-filter-select:focus { outline: none; border-color: #F97316; box-shadow: 0 0 0 2px rgba(249,115,22,0.15); }
    .org-filter-select.has-icon { padding-left: 26px; }

    .org-filter-icon {
        position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
        width: 14px; height: 14px; color: var(--color-stone-400); pointer-events: none;
    }
</style>
{% endblock %}

{% block content %}
<div class="cross-calendar-main" x-data="{ viewOpen: false, wsOpen: false }">
    <!-- Toolbar -->
    <div class="bg-white border-b border-stone-200 px-6 py-3 flex items-center gap-3">
        <!-- Navigation arrows -->
        <div class="flex items-center gap-2">
            <a href="?view={{ view_type }}&date={{ prev_date }}{% for sid in selected_workspace_ids %}&workspace={{ sid }}{% endfor %}{% if request.GET.channel %}&channel={{ request.GET.channel }}{% endif %}{% if request.GET.tag %}&tag={{ request.GET.tag }}{% endif %}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}"
               class="w-7 h-7 flex items-center justify-center rounded-md text-stone-400 hover:text-stone-600 hover:bg-stone-100 transition-colors">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/></svg>
            </a>
            <a href="?view={{ view_type }}&date={{ next_date }}{% for sid in selected_workspace_ids %}&workspace={{ sid }}{% endfor %}{% if request.GET.channel %}&channel={{ request.GET.channel }}{% endif %}{% if request.GET.tag %}&tag={{ request.GET.tag }}{% endif %}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}"
               class="w-7 h-7 flex items-center justify-center rounded-md text-stone-400 hover:text-stone-600 hover:bg-stone-100 transition-colors">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/></svg>
            </a>
        </div>

        <span class="text-sm font-semibold text-stone-800">{{ period_label }}</span>

        <a href="{% url 'organizations:cross_workspace_calendar' %}?view={{ view_type }}{% for sid in selected_workspace_ids %}&workspace={{ sid }}{% endfor %}"
           class="px-3 py-1 text-xs font-semibold text-stone-600 border border-stone-200 rounded-md hover:bg-stone-50 transition-all duration-150 no-underline">
            Today
        </a>

        <!-- View dropdown (Month/Week/Day) -->
        <div class="relative" @click.away="viewOpen = false">
            <button @click="viewOpen = !viewOpen"
                    class="flex items-center gap-1.5 px-3 py-1 text-xs font-semibold text-stone-600 border border-stone-200 rounded-md hover:bg-stone-50 transition-all duration-150">
                {% if view_type == 'week' %}Week{% elif view_type == 'day' %}Day{% else %}Month{% endif %}
                <svg class="w-3 h-3 text-stone-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>
            </button>
            <div x-show="viewOpen" x-cloak
                 x-transition:enter="transition ease-out duration-100"
                 x-transition:enter-start="opacity-0 -translate-y-1"
                 x-transition:enter-end="opacity-100 translate-y-0"
                 class="absolute left-0 top-full mt-1 bg-white rounded-lg shadow-lg ring-1 ring-stone-200 py-1 z-50 min-w-[100px]">
                <a href="?view=month&date={{ target_date|date:'Y-m-d' }}{% for sid in selected_workspace_ids %}&workspace={{ sid }}{% endfor %}"
                   class="block w-full text-left px-3 py-1.5 text-xs font-medium text-stone-600 hover:bg-stone-50 transition-colors no-underline {% if view_type == 'month' %}text-orange-600 bg-orange-50{% endif %}"
                   @click="viewOpen = false">
                    Month
                </a>
                <a href="?view=week&date={{ target_date|date:'Y-m-d' }}{% for sid in selected_workspace_ids %}&workspace={{ sid }}{% endfor %}"
                   class="block w-full text-left px-3 py-1.5 text-xs font-medium text-stone-600 hover:bg-stone-50 transition-colors no-underline {% if view_type == 'week' %}text-orange-600 bg-orange-50{% endif %}"
                   @click="viewOpen = false">
                    Week
                </a>
                <a href="?view=day&date={{ target_date|date:'Y-m-d' }}{% for sid in selected_workspace_ids %}&workspace={{ sid }}{% endfor %}"
                   class="block w-full text-left px-3 py-1.5 text-xs font-medium text-stone-600 hover:bg-stone-50 transition-colors no-underline {% if view_type == 'day' %}text-orange-600 bg-orange-50{% endif %}"
                   @click="viewOpen = false">
                    Day
                </a>
            </div>
        </div>

        <div class="flex-1"></div>

        <!-- Right side: filter dropdowns -->
        <div x-data class="flex items-center gap-2">
            <!-- Status filter -->
            <div class="relative">
                <svg class="org-filter-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
                <select class="org-filter-select has-icon"
                        @change="window.location.href='?view={{ view_type }}&date={{ target_date|date:'Y-m-d' }}{% for sid in selected_workspace_ids %}&workspace={{ sid }}{% endfor %}{% if request.GET.channel %}&channel={{ request.GET.channel }}{% endif %}{% if request.GET.tag %}&tag={{ request.GET.tag }}{% endif %}' + ($event.target.value ? '&status=' + $event.target.value : '')">
                    <option value="">All Posts</option>
                    {% for value, label in status_choices %}
                    <option value="{{ value }}" {% if request.GET.status == value %}selected{% endif %}>{{ label }}</option>
                    {% endfor %}
                </select>
            </div>

            <!-- Channels filter -->
            <div class="relative">
                <svg class="org-filter-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><circle cx="12" cy="12" r="4"/><path d="M16 8v5a3 3 0 006 0v-1a10 10 0 10-3.92 7.94"/></svg>
                <select class="org-filter-select has-icon"
                        @change="window.location.href='?view={{ view_type }}&date={{ target_date|date:'Y-m-d' }}{% for sid in selected_workspace_ids %}&workspace={{ sid }}{% endfor %}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}{% if request.GET.tag %}&tag={{ request.GET.tag }}{% endif %}' + ($event.target.value ? '&channel=' + $event.target.value : '')">
                    <option value="">Channels</option>
                    {% for acc in social_accounts %}
                    <option value="{{ acc.id }}" {% if request.GET.channel == acc.id|stringformat:'s' %}selected{% endif %}>{{ acc.account_name|default:acc.account_handle }} ({{ acc.get_platform_display }})</option>
                    {% endfor %}
                </select>
            </div>

            <!-- Tags filter -->
            <div class="relative">
                <svg class="org-filter-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"/></svg>
                <select class="org-filter-select has-icon"
                        @change="window.location.href='?view={{ view_type }}&date={{ target_date|date:'Y-m-d' }}{% for sid in selected_workspace_ids %}&workspace={{ sid }}{% endfor %}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}{% if request.GET.channel %}&channel={{ request.GET.channel }}{% endif %}' + ($event.target.value ? '&tag=' + $event.target.value : '')">
                    <option value="">Tags</option>
                    {% for t in all_tags %}
                    <option value="{{ t }}" {% if request.GET.tag == t %}selected{% endif %}>#{{ t }}</option>
                    {% endfor %}
                </select>
            </div>

            <!-- Workspace multi-select dropdown -->
            <div class="relative" @click.away="wsOpen = false">
                <button @click="wsOpen = !wsOpen"
                        class="flex items-center gap-1.5 px-3 py-1 text-xs font-semibold border border-stone-200 rounded-md hover:bg-stone-50 transition-all duration-150
                               {% if selected_workspace_ids %}text-orange-600 border-orange-200 bg-orange-50{% else %}text-stone-600{% endif %}">
                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/></svg>
                    Workspaces{% if selected_workspace_ids %} ({{ selected_workspace_ids|length }}){% endif %}
                    <svg class="w-3 h-3 text-stone-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>
                </button>
                <div x-show="wsOpen" x-cloak
                     x-transition:enter="transition ease-out duration-100"
                     x-transition:enter-start="opacity-0 -translate-y-1"
                     x-transition:enter-end="opacity-100 translate-y-0"
                     class="absolute right-0 top-full mt-1 bg-white rounded-lg shadow-lg ring-1 ring-stone-200 py-1 z-50 min-w-[200px]">
                    <!-- Show all (clear filter) -->
                    <a href="?view={{ view_type }}&date={{ target_date|date:'Y-m-d' }}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}{% if request.GET.channel %}&channel={{ request.GET.channel }}{% endif %}{% if request.GET.tag %}&tag={{ request.GET.tag }}{% endif %}"
                       class="block px-3 py-1.5 text-xs font-medium transition-colors no-underline
                              {% if not selected_workspace_ids %}text-orange-600 bg-orange-50{% else %}text-stone-600 hover:bg-stone-50{% endif %}">
                        All Workspaces
                    </a>
                    <div class="border-t border-stone-100 my-1"></div>
                    {% for ws in workspaces %}
                    <a href="?view={{ view_type }}&date={{ target_date|date:'Y-m-d' }}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}{% if request.GET.channel %}&channel={{ request.GET.channel }}{% endif %}{% if request.GET.tag %}&tag={{ request.GET.tag }}{% endif %}{% if ws.id|stringformat:'s' in selected_workspace_ids %}{% for sid in selected_workspace_ids %}{% if sid != ws.id|stringformat:'s' %}&workspace={{ sid }}{% endif %}{% endfor %}{% else %}{% for sid in selected_workspace_ids %}&workspace={{ sid }}{% endfor %}&workspace={{ ws.id }}{% endif %}"
                       class="flex items-center gap-2 px-3 py-1.5 text-xs font-medium text-stone-600 hover:bg-stone-50 transition-colors no-underline">
                        <span class="w-3 h-3 rounded-full flex-shrink-0" style="background: {{ ws.primary_color|default:'#F97316' }};"></span>
                        <span class="flex-1">{{ ws.name }}</span>
                        {% if ws.id|stringformat:'s' in selected_workspace_ids or not selected_workspace_ids %}
                        <svg class="w-3.5 h-3.5 text-orange-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                        {% endif %}
                    </a>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>

    <!-- Workspace color legend -->
    <div class="px-6 py-2 bg-stone-50 border-b border-stone-200 flex items-center gap-4 flex-wrap">
        <span class="text-[10px] font-semibold text-stone-400 uppercase tracking-wide">Workspaces:</span>
        {% for ws in workspaces %}
        <span class="inline-flex items-center gap-1.5 text-[11px] text-stone-600">
            <span class="w-2.5 h-2.5 rounded-full" style="background: {{ ws.primary_color|default:'#F97316' }};"></span>
            {{ ws.name }}
        </span>
        {% endfor %}
    </div>

    <!-- Calendar content -->
    <div class="px-6 pt-4">
        {% if view_type == 'month' %}
        <!-- Day headers -->
        <div class="grid grid-cols-7 text-center mb-1">
            {% for day_name in day_names %}
            <div class="text-[11px] font-semibold text-stone-400 uppercase tracking-wide py-2">{{ day_name }}</div>
            {% endfor %}
        </div>

        <!-- Month grid -->
        <div class="border border-stone-200 rounded-xl overflow-hidden">
            {% for week in calendar_weeks %}
            <div class="grid grid-cols-7">
                {% for day in week %}
                <div class="cross-cal-day cal-add-cell {% if day.is_today %}today{% elif day.is_past %}past{% endif %} {% if not day.is_current_month %}other-month{% endif %}">
                    {% if default_workspace and not day.is_past and day.is_current_month %}
                    <a href="{% url 'composer:compose' workspace_id=default_workspace.id %}?scheduled_date={{ day.date|date:'Y-m-d' }}&scheduled_time=09:00" class="cal-add-btn" title="Create post">
                        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
                    </a>
                    {% endif %}

                    <div class="day-num">{{ day.date.day }}</div>

                    {% for pp in day.posts %}
                    <a href="{% url 'composer:compose_edit' workspace_id=pp.post.workspace_id post_id=pp.post_id %}"
                       class="cross-post-chip status-{{ pp.status }}"
                       title="{{ pp.post.workspace.name }}: {{ pp.post.caption_snippet }}">
                        <span class="ws-dot" style="background: {{ pp.post.workspace.primary_color|default:'#F97316' }};"></span>
                        <span class="w-4 h-4 rounded flex items-center justify-center pi-{{ pp.social_account.platform }} flex-shrink-0 text-white">
                            {% include "social_accounts/partials/_platform_icon.html" with platform=pp.social_account.platform size="3" %}
                        </span>
                        {% with first_media=pp.post.media_attachments.all.0 %}
                        {% if first_media and first_media.media_asset.thumbnail %}
                        <img src="{{ first_media.media_asset.thumbnail.url }}" alt="" class="w-5 h-5 rounded object-cover flex-shrink-0">
                        {% elif first_media and not first_media.media_asset.is_video %}
                        <img src="{{ first_media.media_asset.file.url }}" alt="" class="w-5 h-5 rounded object-cover flex-shrink-0">
                        {% endif %}
                        {% endwith %}
                        <span class="truncate">{{ pp.post.caption_snippet|truncatechars:28 }}</span>
                    </a>
                    {% endfor %}

                    {% if day.overflow > 0 %}
                    <span class="text-[10px] text-stone-400 font-medium pl-1">+{{ day.overflow }} more</span>
                    {% endif %}
                </div>
                {% endfor %}
            </div>
            {% endfor %}
        </div>

        {% elif view_type == 'week' %}
        {% include "organizations/partials/week_grid.html" %}

        {% elif view_type == 'day' %}
        {% include "organizations/partials/day_grid.html" %}

        {% endif %}
    </div>
</div>
{% endblock %}