@extends('layouts.admin')
@section('title', 'Social composer')
@section('content')
@php
  $selectedIds = collect(old('account_ids', $publishable->pluck('id')->take(1)->all()))->map(fn ($id) => (int) $id)->all();
@endphp
<x-admin.page
    title="Composer"
    subtitle="Select accounts, attach media, then draft, schedule, or publish now. Constraints fail closed — no silent truncation."
>
    <x-slot:actions>
        @if($sandbox)
            <span class="admin-btn pointer-events-none">Sandbox mode</span>
        @endif
        <a href="{{ route('admin.social.posts.index') }}" class="admin-btn">Posts library</a>
        <a href="{{ route('admin.social.calendar') }}" class="admin-btn">Calendar</a>
    </x-slot:actions>

    @if(session('status'))
        <div class="mb-4 rounded-lg border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-900">{{ session('status') }}</div>
    @endif
    @if($errors->any())
        <div class="mb-4 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800">{{ $errors->first() }}</div>
    @endif

    @if($publishable->isEmpty())
        <div class="rounded-xl border border-dashed border-[var(--color-admin-border)] bg-white px-6 py-12 text-center">
            <h2 class="text-base font-semibold">Connect a publishable account first</h2>
            <p class="mt-2 text-sm text-[#6d7175]">Composer only lists accounts entitled for <code>publish</code>.</p>
            <a href="{{ route('admin.social.accounts.connect') }}" class="admin-btn admin-btn-primary mt-4 inline-flex">Connect account</a>
        </div>
    @else
        <form method="post" action="{{ route('admin.social.composer.store') }}" id="social-composer-form" class="grid gap-5 xl:grid-cols-[minmax(0,1fr)_20rem]">
            @csrf
            <div class="space-y-5">
                <div class="rounded-xl border border-[var(--color-admin-border)] bg-white p-5 shadow-[var(--admin-shadow)]">
                    <h2 class="text-sm font-semibold">Target accounts</h2>
                    <div class="mt-3 space-y-2">
                        @foreach($publishable as $account)
                            <label class="flex items-start gap-3 rounded-lg border border-[var(--color-admin-border)] px-3 py-2.5 text-sm has-[:checked]:border-[#2c6ecb] has-[:checked]:bg-[#f0f5ff]">
                                <input
                                    type="checkbox"
                                    name="account_ids[]"
                                    value="{{ $account->id }}"
                                    class="mt-0.5"
                                    data-network="{{ strtolower($account->network) }}"
                                    data-high-risk="{{ $account->high_risk ? '1' : '0' }}"
                                    @checked(in_array($account->id, $selectedIds, true))
                                >
                                <span>
                                    <span class="font-medium">{{ $account->name }}</span>
                                    <span class="block text-xs text-[#6d7175] capitalize">{{ $account->network }}@if($account->high_risk) · high risk (approval required)@endif</span>
                                </span>
                            </label>
                        @endforeach
                    </div>
                </div>

                <div class="rounded-xl border border-[var(--color-admin-border)] bg-white p-5 shadow-[var(--admin-shadow)]">
                    <label class="block text-sm font-semibold" for="body_text">Post body</label>
                    <textarea
                        id="body_text"
                        name="body_text"
                        rows="7"
                        required
                        class="mt-2 w-full rounded-lg border border-[var(--color-admin-border)] px-3 py-2 text-sm"
                        data-composer-body
                    >{{ old('body_text') }}</textarea>
                    <div class="mt-2 space-y-1 text-xs" data-length-meters></div>
                </div>

                <div class="rounded-xl border border-[var(--color-admin-border)] bg-white p-5 shadow-[var(--admin-shadow)]">
                    <x-admin.media-field
                        name="media_asset_ids"
                        mode="multiple"
                        label="Insert media"
                        help="Instagram / Pinterest require media; TikTok / YouTube require video."
                        :selected="$selectedMedia"
                        :max="10"
                    />
                </div>

                <div class="rounded-xl border border-[var(--color-admin-border)] bg-white p-5 shadow-[var(--admin-shadow)]">
                    <label class="block text-sm font-semibold">Schedule for later</label>
                    <input type="datetime-local" name="scheduled_at" value="{{ old('scheduled_at') }}" class="mt-2 w-full rounded-lg border border-[var(--color-admin-border)] px-3 py-2 text-sm">
                    <p class="mt-1 text-xs text-[#6d7175]">Used when you choose Schedule. Publish now ignores this field.</p>
                </div>
            </div>

            <aside class="space-y-3">
                <div class="rounded-xl border border-[var(--color-admin-border)] bg-white p-4 shadow-[var(--admin-shadow)] space-y-2">
                    <p class="text-xs text-[#6d7175]" data-approval-hint>Select accounts to see approval requirements.</p>
                    <button type="submit" name="intent" value="draft" class="admin-btn w-full">Save draft</button>
                    <button type="submit" name="intent" value="schedule" class="admin-btn w-full">Schedule</button>
                    <button type="submit" name="intent" value="publish_now" class="admin-btn admin-btn-primary w-full">Publish now</button>
                </div>
                <div class="rounded-xl border border-[var(--color-admin-border)] bg-white p-4 shadow-[var(--admin-shadow)] text-xs text-[#6d7175]">
                    <div class="font-semibold text-[#202223]">Network rules</div>
                    <ul class="mt-2 space-y-1">
                        <li>X: 280 characters hard max</li>
                        <li>Instagram / Pinterest: media required</li>
                        <li>TikTok / YouTube: video required</li>
                    </ul>
                </div>
            </aside>
        </form>
    @endif
</x-admin.page>

@php
  $rulesJson = json_encode($rules);
@endphp
@push('scripts')
<script>
(() => {
  const rules = {!! $rulesJson !!};
  const body = document.querySelector('[data-composer-body]');
  const meters = document.querySelector('[data-length-meters]');
  const hint = document.querySelector('[data-approval-hint]');
  if (!body || !meters) return;

  const selectedNetworks = () =>
    [...document.querySelectorAll('input[name="account_ids[]"]:checked')]
      .map((el) => el.dataset.network);

  const render = () => {
    const networks = selectedNetworks();
    const len = body.value.length;
    meters.innerHTML = networks.map((n) => {
      const max = rules[n]?.max_length ?? 5000;
      const over = len > max;
      return `<div class="${over ? 'text-red-600' : 'text-[#6d7175]'}">${n}: ${len} / ${max}${rules[n]?.require_media ? ' · media required' : ''}${rules[n]?.require_video ? ' · video required' : ''}</div>`;
    }).join('') || '<div class="text-[#6d7175]">Select at least one account.</div>';

    const highRisk = [...document.querySelectorAll('input[name="account_ids[]"]:checked')]
      .some((el) => el.dataset.highRisk === '1');
    if (hint) {
      hint.textContent = highRisk
        ? 'High-risk account selected — schedule/publish will request four-eyes approval.'
        : 'No high-risk accounts selected. Entitled publish can go live when due.';
    }
  };

  body.addEventListener('input', render);
  document.querySelectorAll('input[name="account_ids[]"]').forEach((el) => el.addEventListener('change', render));
  render();
})();
</script>
@endpush
@endsection