@extends('layouts.app')
@section('title', 'Toko Saya')

@php
    $isImgUrl = fn ($v) => $v && \Illuminate\Support\Str::startsWith($v, ['http','/','data:']);
    $modBadge = fn ($s) => match ($s) {
        'approved' => 'bg-emerald-100 text-emerald-700',
        'rejected' => 'bg-rose-100 text-rose-700',
        default => 'bg-amber-100 text-amber-700',
    };
@endphp

@section('content')
<div class="max-w-7xl mx-auto px-4 py-8">
    <div class="flex flex-col lg:flex-row gap-8">
        @include('account.partials.sidebar')
        <div class="flex-1 space-y-6 min-w-0">
            <div class="flex flex-wrap items-end justify-between gap-3">
                <div>
                    <h1 class="text-2xl font-extrabold">Toko Saya</h1>
                    <p class="text-slate-500 text-sm mt-0.5">Kelola etalase, listing desain, penjualan, dan promosi seller.</p>
                </div>
                @if ($store)
                    <a href="{{ route('page.storefront', $store) }}" target="_blank" class="text-sm font-semibold text-brand-600">Etalase publik →</a>
                @endif
            </div>

            @if (session('success'))
                <div class="rounded-xl bg-emerald-50 border border-emerald-200 text-emerald-800 px-4 py-3 text-sm">{{ session('success') }}</div>
            @endif
            @if (session('error'))
                <div class="rounded-xl bg-rose-50 border border-rose-200 text-rose-800 px-4 py-3 text-sm">{{ session('error') }}</div>
            @endif
            @if ($errors->any())
                <div class="rounded-xl bg-rose-50 border border-rose-200 text-rose-800 px-4 py-3 text-sm"><ul class="list-disc list-inside">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul></div>
            @endif

            @if (! $store)
                <div class="bg-white border border-slate-100 rounded-2xl p-6">
                    <h2 class="font-bold text-lg">Buka Toko Sendiri</h2>
                    <p class="text-slate-500 text-sm mt-1 max-w-xl">Jual desain di marketplace. Platform mengurus produksi, pembayaran &amp; pengiriman — kamu terima royalti hingga 100%.</p>
                    <form method="POST" action="{{ route('account.store.create') }}" enctype="multipart/form-data" class="mt-5 grid sm:grid-cols-2 gap-4">
                        @csrf
                        <div class="sm:col-span-2">
                            <label class="text-sm font-medium text-slate-600">Nama toko *</label>
                            <input name="name" value="{{ old('name') }}" required class="mt-1 w-full rounded-lg border border-slate-200 px-3 py-2.5 text-sm">
                        </div>
                        <div class="sm:col-span-2">
                            <label class="text-sm font-medium text-slate-600">Deskripsi</label>
                            <textarea name="description" rows="3" class="mt-1 w-full rounded-lg border border-slate-200 px-3 py-2.5 text-sm">{{ old('description') }}</textarea>
                        </div>
                        <div>
                            <label class="text-sm font-medium text-slate-600">Royalti default (%) *</label>
                            <input type="number" name="royalty_percent" min="0" max="100" value="{{ old('royalty_percent', 10) }}" required class="mt-1 w-full rounded-lg border border-slate-200 px-3 py-2.5 text-sm">
                            <p class="text-xs text-slate-400 mt-1">Persentase dari nilai item yang masuk saldo komisi Anda.</p>
                        </div>
                        <div>
                            <label class="text-sm font-medium text-slate-600">Banner toko (opsional)</label>
                            <input type="file" name="banner" accept="image/*" class="mt-1 w-full text-sm">
                        </div>
                        <div class="sm:col-span-2">
                            <button class="bg-brand-600 hover:bg-brand-700 text-white font-bold px-6 py-3 rounded-xl">Buka Toko</button>
                        </div>
                    </form>
                </div>
            @else
                <div class="flex flex-wrap gap-2">
                    @foreach ([
                        'overview' => 'Ringkasan',
                        'products' => 'Produk Toko',
                        'sales' => 'Penjualan',
                        'promo' => 'Promosi',
                        'settings' => 'Pengaturan',
                    ] as $key => $label)
                        <a href="{{ route('account.store', ['tab' => $key]) }}"
                           class="px-3 py-1.5 rounded-full text-sm font-semibold {{ $tab === $key ? 'bg-brand-600 text-white' : 'bg-white border border-slate-200 text-slate-600' }}">{{ $label }}</a>
                    @endforeach
                    <a href="{{ route('account.earnings') }}" class="px-3 py-1.5 rounded-full text-sm font-semibold bg-white border border-slate-200 text-emerald-700">Komisi &amp; Payout →</a>
                </div>

                @if ($tab === 'overview')
                    <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-3">
                        <div class="bg-white border border-slate-100 rounded-2xl p-4">
                            <p class="text-xs text-slate-400">Listing aktif</p>
                            <p class="text-2xl font-extrabold mt-1">{{ $stats['listings'] }}</p>
                        </div>
                        <div class="bg-white border border-slate-100 rounded-2xl p-4">
                            <p class="text-xs text-slate-400">Menunggu moderasi</p>
                            <p class="text-2xl font-extrabold mt-1 text-amber-600">{{ $stats['pending'] }}</p>
                        </div>
                        <div class="bg-white border border-slate-100 rounded-2xl p-4">
                            <p class="text-xs text-slate-400">Order masuk</p>
                            <p class="text-2xl font-extrabold mt-1">{{ $stats['orders'] }}</p>
                        </div>
                        <div class="bg-white border border-slate-100 rounded-2xl p-4">
                            <p class="text-xs text-slate-400">Saldo komisi tersedia</p>
                            <p class="text-2xl font-extrabold mt-1 text-emerald-600">@rupiah($balance)</p>
                        </div>
                    </div>

                    <div class="bg-white border border-slate-100 rounded-2xl p-5">
                        <div class="flex items-start justify-between gap-3">
                            <div>
                                <div class="flex items-center gap-2 flex-wrap">
                                    <h2 class="font-bold text-lg">{{ $store->name }}</h2>
                                    <span class="text-xs px-2 py-0.5 rounded-full {{ $store->is_active ? 'bg-emerald-100 text-emerald-700' : 'bg-slate-200 text-slate-600' }}">{{ $store->is_active ? 'Aktif' : 'Nonaktif' }}</span>
                                </div>
                                <p class="text-sm text-slate-500 mt-1">{{ $store->description ?: 'Belum ada deskripsi toko.' }}</p>
                                <p class="text-xs text-slate-400 mt-2">Royalti {{ $store->royalty_percent }}% · slug <code class="bg-slate-50 px-1 rounded">{{ $store->slug }}</code></p>
                            </div>
                            <a href="{{ route('account.store', ['tab' => 'settings']) }}" class="text-sm font-semibold text-brand-600 shrink-0">Edit →</a>
                        </div>
                        @if ($store->bannerUrl())
                            <img src="{{ $store->bannerUrl() }}" alt="" class="mt-4 w-full h-36 object-cover rounded-xl">
                        @endif
                    </div>

                    <div class="grid lg:grid-cols-2 gap-4">
                        <div class="bg-white border border-slate-100 rounded-2xl p-5">
                            <div class="flex items-center justify-between mb-3">
                                <h3 class="font-bold">Desain terbaru</h3>
                                <a href="{{ route('account.store', ['tab' => 'products']) }}" class="text-xs font-semibold text-brand-600">Semua</a>
                            </div>
                            <div class="space-y-2">
                                @forelse ($designs as $design)
                                    <div class="flex items-center gap-3">
                                        <div class="w-12 h-12 rounded-lg bg-slate-100 overflow-hidden shrink-0 grid place-items-center">
                                            @if ($isImgUrl($design->preview_data))<img src="{{ $design->preview_data }}" class="w-full h-full object-cover">@else<x-icon name="palette" class="w-5 h-5 text-slate-300"/>@endif
                                        </div>
                                        <div class="min-w-0 flex-1">
                                            <p class="text-sm font-semibold truncate">{{ $design->name }}</p>
                                            <p class="text-xs text-slate-400">{{ $design->product->name ?? '-' }}</p>
                                        </div>
                                        @if ($design->store_id)
                                            <span class="text-[10px] px-2 py-0.5 rounded-full {{ $modBadge($design->moderation_status) }}">{{ $design->moderationLabel() }}</span>
                                        @endif
                                    </div>
                                @empty
                                    <p class="text-sm text-slate-400">Belum ada desain. <a href="{{ route('catalog.index') }}" class="text-brand-600 font-semibold">Buat di editor</a></p>
                                @endforelse
                            </div>
                        </div>
                        <div class="bg-white border border-slate-100 rounded-2xl p-5">
                            <div class="flex items-center justify-between mb-3">
                                <h3 class="font-bold">Performa produk</h3>
                                <a href="{{ route('account.store', ['tab' => 'sales']) }}" class="text-xs font-semibold text-brand-600">Penjualan</a>
                            </div>
                            <div class="space-y-2">
                                @forelse ($topProducts as $row)
                                    <div class="flex items-center justify-between gap-2 text-sm">
                                        <p class="font-semibold truncate">{{ $row->design->name ?? 'Desain #'.$row->design_id }}</p>
                                        <p class="text-slate-500 shrink-0">{{ $row->sold_qty }} pcs · @rupiah($row->revenue)</p>
                                    </div>
                                @empty
                                    <p class="text-sm text-slate-400">Belum ada penjualan dari toko Anda.</p>
                                @endforelse
                            </div>
                            <div class="mt-4 pt-3 border-t border-slate-50 text-xs text-slate-500 flex justify-between">
                                <span>GMV (paid+)</span>
                                <span class="font-semibold text-slate-700">@rupiah($stats['gmv'])</span>
                            </div>
                            <div class="text-xs text-slate-500 flex justify-between mt-1">
                                <span>Total komisi</span>
                                <span class="font-semibold text-emerald-600">@rupiah($stats['commission'])</span>
                            </div>
                        </div>
                    </div>
                @endif

                @if ($tab === 'products')
                    <div class="flex flex-wrap gap-2">
                        <a href="{{ route('account.store', ['tab' => 'products']) }}" class="px-3 py-1.5 rounded-full text-xs font-semibold {{ ! $status ? 'bg-slate-900 text-white' : 'bg-white border border-slate-200' }}">Semua ({{ $productCounts['all'] + ($productCounts['draft'] ?? 0) }})</a>
                        <a href="{{ route('account.store', ['tab' => 'products', 'status' => 'ready']) }}" class="px-3 py-1.5 rounded-full text-xs font-semibold {{ $status === 'ready' ? 'bg-slate-900 text-white' : 'bg-white border border-slate-200' }}">Siap jual</a>
                        <a href="{{ route('account.store', ['tab' => 'products', 'status' => 'pending']) }}" class="px-3 py-1.5 rounded-full text-xs font-semibold {{ $status === 'pending' ? 'bg-slate-900 text-white' : 'bg-white border border-slate-200' }}">Moderasi ({{ $productCounts['pending'] }})</a>
                        <a href="{{ route('account.store', ['tab' => 'products', 'status' => 'approved']) }}" class="px-3 py-1.5 rounded-full text-xs font-semibold {{ $status === 'approved' ? 'bg-slate-900 text-white' : 'bg-white border border-slate-200' }}">Aktif ({{ $productCounts['approved'] }})</a>
                        <a href="{{ route('account.store', ['tab' => 'products', 'status' => 'rejected']) }}" class="px-3 py-1.5 rounded-full text-xs font-semibold {{ $status === 'rejected' ? 'bg-slate-900 text-white' : 'bg-white border border-slate-200' }}">Ditolak ({{ $productCounts['rejected'] }})</a>
                        <a href="{{ route('catalog.index') }}" class="ml-auto px-3 py-1.5 rounded-full text-xs font-semibold bg-brand-600 text-white">+ Tambah via editor</a>
                    </div>

                    @if ($designs->count())
                        <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
                            @foreach ($designs as $design)
                                <div class="bg-white border border-slate-100 rounded-2xl overflow-hidden" x-data="{ open:false }">
                                    <div class="aspect-square bg-slate-100 grid place-items-center overflow-hidden">
                                        @if ($isImgUrl($design->preview_data))<img src="{{ $design->preview_data }}" class="w-full h-full object-cover">@else<x-icon name="palette" class="w-12 h-12 text-slate-300"/>@endif
                                    </div>
                                    <div class="p-3">
                                        <p class="font-semibold text-sm truncate">{{ $design->name }}</p>
                                        <p class="text-xs text-slate-400">{{ $design->product->name ?? '' }}</p>
                                        @if ($design->is_sellable || ($design->store_id && $design->moderation_status === 'pending'))
                                            <div class="flex items-center justify-between mt-2">
                                                <span class="text-xs px-2 py-0.5 rounded-full {{ $modBadge($design->moderation_status) }}">{{ $design->moderationLabel() }}</span>
                                                @if ($design->is_sellable && $design->moderation_status === 'approved')
                                                    <form method="POST" action="{{ route('account.store.unpublish', $design) }}" onsubmit="return confirm('Tarik desain ini dari marketplace?')">
                                                        @csrf @method('DELETE')
                                                        <button class="text-xs text-rose-600 font-semibold">Tarik</button>
                                                    </form>
                                                @endif
                                            </div>
                                            @if ($design->moderation_status === 'pending')
                                                <p class="text-[11px] text-amber-700 mt-1">Menunggu review moderator.</p>
                                            @endif
                                            @if ($design->moderation_status === 'approved' && $design->is_sellable)
                                                <a href="{{ route('page.storefront', $store) }}" class="inline-block mt-2 text-[11px] font-semibold text-brand-600">Preview marketplace</a>
                                            @endif
                                        @else
                                            @if ($design->moderation_status === 'rejected' && $design->moderation_note)
                                                <p class="text-[11px] text-rose-600 mt-2 bg-rose-50 border border-rose-100 rounded-lg px-2 py-1">Ditolak: {{ $design->moderation_note }}</p>
                                            @endif
                                            <button type="button" @click="open=!open" class="mt-2 w-full text-xs font-semibold text-white bg-brand-600 hover:bg-brand-700 rounded-full py-1.5">{{ $design->moderation_status === 'rejected' ? 'Ajukan ulang' : 'Jual desain ini' }}</button>
                                            <form x-show="open" x-cloak method="POST" action="{{ route('account.store.publish', $design) }}" class="mt-2 space-y-2">
                                                @csrf
                                                <input type="number" name="sale_price" min="0" value="{{ $design->sale_price }}" placeholder="Markup harga (opsional)" class="w-full rounded-lg border border-slate-200 px-2.5 py-1.5 text-xs">
                                                <input name="tags" value="{{ $design->tags }}" placeholder="Tag (mis. anime, lucu)" class="w-full rounded-lg border border-slate-200 px-2.5 py-1.5 text-xs">
                                                <textarea name="description" rows="2" placeholder="Deskripsi listing" class="w-full rounded-lg border border-slate-200 px-2.5 py-1.5 text-xs">{{ $design->description }}</textarea>
                                                <button class="w-full text-xs font-semibold text-white bg-emerald-600 hover:bg-emerald-700 rounded-full py-1.5">Ajukan ke Marketplace</button>
                                            </form>
                                        @endif
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <div class="bg-white border border-slate-100 rounded-2xl p-10 text-center">
                            <x-icon name="palette" class="w-12 h-12 mx-auto text-slate-300 mb-3"/>
                            <p class="font-semibold">Belum ada desain di filter ini</p>
                            <p class="text-slate-500 text-sm mt-1">Buat desain di editor lalu ajukan ke marketplace.</p>
                            <a href="{{ route('catalog.index') }}" class="inline-block mt-4 bg-brand-600 text-white px-5 py-2.5 rounded-full text-sm font-semibold">Buat desain</a>
                        </div>
                    @endif
                @endif

                @if ($tab === 'sales')
                    <div class="grid sm:grid-cols-3 gap-3">
                        <div class="bg-white border border-slate-100 rounded-2xl p-4">
                            <p class="text-xs text-slate-400">Order masuk</p>
                            <p class="text-2xl font-extrabold">{{ $stats['orders'] }}</p>
                        </div>
                        <div class="bg-white border border-slate-100 rounded-2xl p-4">
                            <p class="text-xs text-slate-400">GMV</p>
                            <p class="text-2xl font-extrabold">@rupiah($stats['gmv'])</p>
                        </div>
                        <div class="bg-white border border-slate-100 rounded-2xl p-4">
                            <p class="text-xs text-slate-400">Komisi terkumpul</p>
                            <p class="text-2xl font-extrabold text-emerald-600">@rupiah($stats['commission'])</p>
                        </div>
                    </div>

                    <div class="bg-white border border-slate-100 rounded-2xl overflow-hidden">
                        <div class="px-5 pt-5 flex items-center justify-between">
                            <h2 class="font-bold">Order produk toko</h2>
                            <p class="text-xs text-slate-400">Fulfillment dikelola platform (read-only)</p>
                        </div>
                        <table class="w-full text-sm mt-3">
                            <thead class="bg-slate-50 text-slate-500 text-left">
                                <tr>
                                    <th class="px-5 py-2.5">Order</th>
                                    <th class="px-5 py-2.5">Item toko</th>
                                    <th class="px-5 py-2.5">Status</th>
                                    <th class="px-5 py-2.5 text-right">Nilai item</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($sales as $order)
                                    <tr class="border-t border-slate-50">
                                        <td class="px-5 py-3">
                                            <p class="font-semibold">{{ $order->order_code }}</p>
                                            <p class="text-xs text-slate-400">{{ $order->created_at->format('d/m/Y H:i') }}</p>
                                        </td>
                                        <td class="px-5 py-3 text-slate-600">
                                            @foreach ($order->items as $item)
                                                <p>{{ $item->design->name ?? $item->product_name }} × {{ $item->qty }}</p>
                                            @endforeach
                                        </td>
                                        <td class="px-5 py-3"><span class="text-xs px-2 py-0.5 rounded-full bg-slate-100">{{ $order->statusLabel() }}</span></td>
                                        <td class="px-5 py-3 text-right font-semibold">@rupiah($order->items->sum('line_total'))</td>
                                    </tr>
                                @empty
                                    <tr><td colspan="4" class="px-5 py-10 text-center text-slate-400">Belum ada order masuk ke toko Anda.</td></tr>
                                @endforelse
                            </tbody>
                        </table>
                        @if ($sales)<div class="p-4">{{ $sales->links() }}</div>@endif
                    </div>

                    @if ($topProducts->count())
                        <div class="bg-white border border-slate-100 rounded-2xl p-5">
                            <h2 class="font-bold mb-3">Top produk</h2>
                            <div class="space-y-2">
                                @foreach ($topProducts as $row)
                                    <div class="flex justify-between text-sm gap-3">
                                        <span class="font-semibold truncate">{{ $row->design->name ?? '#' . $row->design_id }}</span>
                                        <span class="text-slate-500 shrink-0">{{ $row->sold_qty }} terjual · @rupiah($row->revenue)</span>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endif
                @endif

                @if ($tab === 'promo')
                    <div class="bg-white border border-slate-100 rounded-2xl p-6 space-y-5">
                        <div>
                            <h2 class="font-bold text-lg">Link promosi toko</h2>
                            <p class="text-sm text-slate-500 mt-1">Bagikan link etalase ke sosial media / marketplace eksternal.</p>
                        </div>
                        <div>
                            <label class="text-xs text-slate-500">URL toko</label>
                            <div class="mt-1 flex gap-2">
                                <input id="store-url" readonly value="{{ route('page.storefront', $store) }}" class="flex-1 rounded-lg border border-slate-200 px-3 py-2.5 text-sm bg-slate-50">
                                <button type="button" onclick="navigator.clipboard.writeText(document.getElementById('store-url').value)" class="bg-brand-600 text-white text-sm font-semibold px-4 py-2 rounded-xl">Salin</button>
                            </div>
                        </div>
                        <div>
                            <label class="text-xs text-slate-500">URL marketplace</label>
                            <div class="mt-1 flex gap-2">
                                <input id="shop-url" readonly value="{{ route('page.shop') }}" class="flex-1 rounded-lg border border-slate-200 px-3 py-2.5 text-sm bg-slate-50">
                                <button type="button" onclick="navigator.clipboard.writeText(document.getElementById('shop-url').value)" class="bg-slate-800 text-white text-sm font-semibold px-4 py-2 rounded-xl">Salin</button>
                            </div>
                        </div>
                        <div class="rounded-xl bg-brand-50 border border-brand-100 px-4 py-3 text-sm text-brand-800">
                            Tip: pastikan listing berstatus <strong>Disetujui</strong> agar tampil di marketplace publik. Cairkan komisi lewat menu Komisi &amp; Payout setelah saldo mencapai threshold.
                        </div>
                        <div class="flex flex-wrap gap-3">
                            <a href="{{ route('page.storefront', $store) }}" target="_blank" class="bg-brand-600 text-white text-sm font-semibold px-4 py-2.5 rounded-xl">Buka etalase</a>
                            <a href="{{ route('account.earnings') }}" class="bg-white border border-slate-200 text-sm font-semibold px-4 py-2.5 rounded-xl">Ke komisi</a>
                            <a href="{{ route('account.bank-accounts') }}" class="bg-white border border-slate-200 text-sm font-semibold px-4 py-2.5 rounded-xl">Rekening pencairan</a>
                        </div>
                    </div>
                @endif

                @if ($tab === 'settings')
                    <form method="POST" action="{{ route('account.store.update') }}" enctype="multipart/form-data" class="bg-white border border-slate-100 rounded-2xl p-6 grid sm:grid-cols-2 gap-4">
                        @csrf @method('PATCH')
                        <div class="sm:col-span-2">
                            <label class="text-sm font-medium text-slate-600">Nama toko *</label>
                            <input name="name" value="{{ old('name', $store->name) }}" required class="mt-1 w-full rounded-lg border border-slate-200 px-3 py-2.5 text-sm">
                        </div>
                        <div class="sm:col-span-2">
                            <label class="text-sm font-medium text-slate-600">Slug URL</label>
                            <div class="mt-1 flex items-center gap-2">
                                <span class="text-xs text-slate-400 shrink-0">/shop/</span>
                                <input name="slug" value="{{ old('slug', $store->slug) }}" pattern="[a-z0-9]+(?:-[a-z0-9]+)*" class="flex-1 rounded-lg border border-slate-200 px-3 py-2.5 text-sm">
                            </div>
                        </div>
                        <div class="sm:col-span-2">
                            <label class="text-sm font-medium text-slate-600">Deskripsi</label>
                            <textarea name="description" rows="3" class="mt-1 w-full rounded-lg border border-slate-200 px-3 py-2.5 text-sm">{{ old('description', $store->description) }}</textarea>
                        </div>
                        <div>
                            <label class="text-sm font-medium text-slate-600">Royalti (%) *</label>
                            <input type="number" name="royalty_percent" min="0" max="100" value="{{ old('royalty_percent', $store->royalty_percent) }}" required class="mt-1 w-full rounded-lg border border-slate-200 px-3 py-2.5 text-sm">
                        </div>
                        <div>
                            <label class="text-sm font-medium text-slate-600">Banner</label>
                            <input type="file" name="banner" accept="image/*" class="mt-1 w-full text-sm">
                            @if ($store->bannerUrl())
                                <img src="{{ $store->bannerUrl() }}" class="mt-2 h-20 rounded-lg object-cover">
                                <label class="mt-2 flex items-center gap-2 text-xs text-rose-600"><input type="checkbox" name="remove_banner" value="1"> Hapus banner</label>
                            @endif
                        </div>
                        <label class="flex items-center gap-2 text-sm text-slate-600 sm:col-span-2">
                            <input type="hidden" name="is_active" value="0">
                            <input type="checkbox" name="is_active" value="1" @checked(old('is_active', $store->is_active)) class="rounded border-slate-300"> Toko aktif (tampil di marketplace)
                        </label>
                        <div class="sm:col-span-2">
                            <button class="bg-brand-600 hover:bg-brand-700 text-white font-bold px-6 py-2.5 rounded-xl">Simpan pengaturan</button>
                        </div>
                    </form>
                @endif
            @endif
        </div>
    </div>
</div>
@endsection