@extends('layouts.app')

@section('title', 'Tenant 360 - ' . $tenant->company_name)

@section('content')
<div class="space-y-6" x-data="{ activeTab: 'overview', impersonateModal: false, creditsModal: false }">

    <!-- Top 360 Header (Requirement 9) -->
    <div class="bg-white dark:bg-slate-800 rounded-3xl p-6 border border-slate-200 dark:border-slate-700/60 shadow-sm space-y-6">
        <div class="flex flex-col lg:flex-row lg:items-center justify-between gap-4">
            <div class="flex items-center space-x-4 rtl:space-x-reverse">
                <div class="w-16 h-16 rounded-2xl bg-gradient-to-tr from-sky-600 to-emerald-500 p-0.5 shadow-md shrink-0">
                    <div class="w-full h-full bg-slate-900 rounded-[14px] flex items-center justify-center font-bold text-white text-lg">
                        {{ substr($tenant->company_name, 0, 2) }}
                    </div>
                </div>

                <div>
                    <div class="flex items-center space-x-2 rtl:space-x-reverse">
                        <h1 class="text-xl font-extrabold text-slate-900 dark:text-white">{{ $tenant->company_name }}</h1>
                        <span class="px-2.5 py-0.5 rounded-full text-[10px] font-bold bg-{{ $health['color'] }}-100 text-{{ $health['color'] }}-700 dark:bg-{{ $health['color'] }}-950 dark:text-{{ $health['color'] }}-300">
                            Health: {{ $health['status'] }} ({{ $health['score'] }}/100)
                        </span>
                    </div>
                    <p class="text-xs text-slate-400 font-mono mt-0.5">Tenant ID: #TEN-{{ str_pad($tenant->id, 5, '0', STR_PAD_LEFT) }} • Legal: {{ $tenant->legal_name }} • TRN: {{ $tenant->trn ?? 'N/A' }}</p>
                </div>
            </div>

            <!-- Top Actions (Requirement 9, 42) -->
            <div class="flex items-center space-x-2 rtl:space-x-reverse flex-wrap gap-y-2">
                <button @click="impersonateModal = true" class="px-4 py-2 bg-rose-600 hover:bg-rose-500 text-white font-bold text-xs rounded-xl shadow-md transition-all flex items-center space-x-1.5 rtl:space-x-reverse">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
                    <span>Login as Tenant</span>
                </button>

                <button @click="creditsModal = true" class="px-4 py-2 bg-emerald-600 hover:bg-emerald-500 text-white font-bold text-xs rounded-xl shadow-md transition-all">
                    + Add Credits
                </button>

                <form action="{{ route('platform.tenants.update_status', $tenant->id) }}" method="POST" class="inline">
                    @csrf
                    @if($tenant->status === 'suspended')
                        <button type="submit" name="status" value="active" class="px-4 py-2 bg-emerald-600 text-white font-bold text-xs rounded-xl">Reactivate Tenant</button>
                    @else
                        <button type="submit" name="status" value="suspended" onclick="return confirm('Suspend tenant workspace?')" class="px-4 py-2 bg-slate-800 text-slate-200 hover:bg-slate-700 font-bold text-xs rounded-xl">Suspend Tenant</button>
                    @endif
                </form>
            </div>
        </div>

        <!-- 360 Tabs Navigation (Requirement 10) -->
        <div class="flex items-center space-x-2 rtl:space-x-reverse border-b border-slate-200 dark:border-slate-700 overflow-x-auto pb-2 text-xs font-bold">
            <button @click="activeTab = 'overview'" :class="activeTab === 'overview' ? 'text-sky-600 border-b-2 border-sky-600' : 'text-slate-500 hover:text-slate-800'" class="py-2 px-3 whitespace-nowrap">Overview</button>
            <button @click="activeTab = 'subscription'" :class="activeTab === 'subscription' ? 'text-sky-600 border-b-2 border-sky-600' : 'text-slate-500 hover:text-slate-800'" class="py-2 px-3 whitespace-nowrap">Subscription</button>
            <button @click="activeTab = 'features'" :class="activeTab === 'features' ? 'text-sky-600 border-b-2 border-sky-600' : 'text-slate-500 hover:text-slate-800'" class="py-2 px-3 whitespace-nowrap">Feature Overrides</button>
            <button @click="activeTab = 'usage'" :class="activeTab === 'usage' ? 'text-sky-600 border-b-2 border-sky-600' : 'text-slate-500 hover:text-slate-800'" class="py-2 px-3 whitespace-nowrap">Usage & Credits</button>
            <button @click="activeTab = 'branches'" :class="activeTab === 'branches' ? 'text-sky-600 border-b-2 border-sky-600' : 'text-slate-500 hover:text-slate-800'" class="py-2 px-3 whitespace-nowrap">Branches ({{ count($tenant->branches) }})</button>
            <button @click="activeTab = 'users'" :class="activeTab === 'users' ? 'text-sky-600 border-b-2 border-sky-600' : 'text-slate-500 hover:text-slate-800'" class="py-2 px-3 whitespace-nowrap">Users ({{ count($tenant->users) }})</button>
            <button @click="activeTab = 'invoices'" :class="activeTab === 'invoices' ? 'text-sky-600 border-b-2 border-sky-600' : 'text-slate-500 hover:text-slate-800'" class="py-2 px-3 whitespace-nowrap">Invoices & Payments</button>
            <button @click="activeTab = 'support'" :class="activeTab === 'support' ? 'text-sky-600 border-b-2 border-sky-600' : 'text-slate-500 hover:text-slate-800'" class="py-2 px-3 whitespace-nowrap">Support Desk</button>
            <button @click="activeTab = 'notes'" :class="activeTab === 'notes' ? 'text-sky-600 border-b-2 border-sky-600' : 'text-slate-500 hover:text-slate-800'" class="py-2 px-3 whitespace-nowrap">Staff Notes ({{ count($notes) }})</button>
        </div>
    </div>

    <!-- Tab 1: Overview -->
    <div x-show="activeTab === 'overview'" class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div class="bg-white dark:bg-slate-800 rounded-3xl p-6 border border-slate-200 dark:border-slate-700/60 shadow-sm space-y-4 text-xs">
            <h3 class="font-bold text-slate-900 dark:text-white uppercase tracking-wider">Company Information</h3>
            <div class="space-y-2">
                <div class="flex justify-between py-1 border-b border-slate-100 dark:border-slate-700">
                    <span class="text-slate-400">Emirate:</span>
                    <span class="font-bold text-slate-800 dark:text-slate-200">{{ $tenant->emirate }}</span>
                </div>
                <div class="flex justify-between py-1 border-b border-slate-100 dark:border-slate-700">
                    <span class="text-slate-400">Company Email:</span>
                    <span class="font-bold text-slate-800 dark:text-slate-200">{{ $tenant->email }}</span>
                </div>
                <div class="flex justify-between py-1 border-b border-slate-100 dark:border-slate-700">
                    <span class="text-slate-400">Mobile Phone:</span>
                    <span class="font-bold text-slate-800 dark:text-slate-200">{{ $tenant->mobile ?? 'N/A' }}</span>
                </div>
                <div class="flex justify-between py-1 border-b border-slate-100 dark:border-slate-700">
                    <span class="text-slate-400">Trade License:</span>
                    <span class="font-bold text-slate-800 dark:text-slate-200">{{ $tenant->trade_license_number ?? 'N/A' }}</span>
                </div>
            </div>
        </div>

        <div class="bg-white dark:bg-slate-800 rounded-3xl p-6 border border-slate-200 dark:border-slate-700/60 shadow-sm space-y-4 text-xs">
            <h3 class="font-bold text-slate-900 dark:text-white uppercase tracking-wider">Subscription & Limits Overview</h3>
            <div class="space-y-2">
                <div class="flex justify-between py-1 border-b border-slate-100 dark:border-slate-700">
                    <span class="text-slate-400">Active Plan:</span>
                    <span class="font-bold text-purple-600 dark:text-purple-400">{{ $tenant->subscription->plan->name ?? 'Professional' }}</span>
                </div>
                <div class="flex justify-between py-1 border-b border-slate-100 dark:border-slate-700">
                    <span class="text-slate-400">AI Credits Balance:</span>
                    <span class="font-bold text-sky-600">{{ number_format($aiBalance) }} Tokens</span>
                </div>
                <div class="flex justify-between py-1 border-b border-slate-100 dark:border-slate-700">
                    <span class="text-slate-400">WhatsApp Messages:</span>
                    <span class="font-bold text-emerald-600">{{ number_format($whatsappBalance) }} Credits</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Tab: Feature Overrides (Requirement 19) -->
    <div x-show="activeTab === 'features'" class="bg-white dark:bg-slate-800 rounded-3xl p-6 border border-slate-200 dark:border-slate-700/60 shadow-sm space-y-4" x-cloak>
        <h3 class="font-bold text-slate-900 dark:text-white uppercase tracking-wider text-xs">Tenant Custom Feature Overrides</h3>
        <p class="text-xs text-slate-400">Force Enable or Force Disable features for this specific tenant regardless of plan defaults.</p>

        <form action="{{ route('platform.tenants.update_overrides', $tenant->id) }}" method="POST" class="space-y-4 text-xs">
            @csrf
            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3">
                @foreach($features as $feature)
                    @php $override = $tenantOverrides->get($feature->id); @endphp
                    <div class="p-3 rounded-2xl bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-700 space-y-1">
                        <span class="font-bold text-slate-800 dark:text-slate-200">{{ $feature->name }}</span>
                        <select name="overrides[{{ $feature->id }}]" class="w-full px-2 py-1 bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-700 rounded-lg text-xs">
                            <option value="inherit" {{ !$override ? 'selected' : '' }}>Inherit Plan Default</option>
                            <option value="allow" {{ $override && $override->override_type === 'allow' ? 'selected' : '' }}>Force Enable (Allow)</option>
                            <option value="deny" {{ $override && $override->override_type === 'deny' ? 'selected' : '' }}>Force Disable (Deny)</option>
                        </select>
                    </div>
                @endforeach
            </div>

            <button type="submit" class="px-6 py-2 bg-sky-600 text-white font-bold rounded-xl text-xs">Save Custom Overrides</button>
        </form>
    </div>

    <!-- Tab: Staff Notes (Requirement 47) -->
    <div x-show="activeTab === 'notes'" class="bg-white dark:bg-slate-800 rounded-3xl p-6 border border-slate-200 dark:border-slate-700/60 shadow-sm space-y-4" x-cloak>
        <h3 class="font-bold text-slate-900 dark:text-white uppercase tracking-wider text-xs">Internal Platform Staff Notes (Private)</h3>

        <form action="{{ route('platform.tenants.add_note', $tenant->id) }}" method="POST" class="space-y-3 text-xs">
            @csrf
            <textarea name="note" required rows="2" placeholder="Add confidential internal note regarding payment commitment, customization, or sales lead..." class="w-full p-3 bg-slate-50 dark:bg-slate-900 border border-slate-300 dark:border-slate-700 rounded-xl text-slate-900 dark:text-white"></textarea>
            <button type="submit" class="px-4 py-2 bg-sky-600 text-white font-bold rounded-xl">+ Add Internal Note</button>
        </form>

        <div class="space-y-3 pt-2">
            @foreach($notes as $note)
                <div class="p-3 rounded-2xl bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-700 text-xs">
                    <p class="text-slate-800 dark:text-slate-200 font-medium">{{ $note->note }}</p>
                    <span class="text-[10px] text-slate-400 mt-1 block font-mono">{{ $note->created_at->diffForHumans() }}</span>
                </div>
            @endforeach
        </div>
    </div>

    <!-- Impersonation Modal (Requirement 42) -->
    <div x-show="impersonateModal" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 flex items-center justify-center p-4" x-cloak>
        <div class="bg-white dark:bg-slate-800 rounded-3xl max-w-md w-full p-6 border border-slate-200 dark:border-slate-700 shadow-2xl space-y-4">
            <h3 class="text-sm font-bold text-rose-600 uppercase tracking-wider">Confirm Tenant Impersonation</h3>
            <p class="text-xs text-slate-500">You are initiating session access as a tenant user. Every action performed will remain attributed to your admin account in the security audit logs.</p>

            <form action="{{ route('platform.tenants.impersonate', $tenant->id) }}" method="POST" class="space-y-4 text-xs">
                @csrf
                <div>
                    <label class="block font-bold text-slate-700 dark:text-slate-300 mb-1">Reason for Impersonation *</label>
                    <textarea name="reason" required minlength="5" rows="3" placeholder="e.g. Technical support troubleshooting for support ticket #8293..." class="w-full p-3 bg-slate-50 dark:bg-slate-900 border border-slate-300 dark:border-slate-700 rounded-xl text-slate-900 dark:text-white"></textarea>
                </div>

                <div class="flex justify-end space-x-2 rtl:space-x-reverse">
                    <button type="button" @click="impersonateModal = false" class="px-4 py-2 bg-slate-200 dark:bg-slate-700 text-slate-700 dark:text-slate-200 font-bold rounded-xl">Cancel</button>
                    <button type="submit" class="px-5 py-2 bg-rose-600 hover:bg-rose-500 text-white font-bold rounded-xl">Start Impersonation ➔</button>
                </div>
            </form>
        </div>
    </div>

    <!-- Credits Adjustment Modal (Requirement 38) -->
    <div x-show="creditsModal" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 flex items-center justify-center p-4" x-cloak>
        <div class="bg-white dark:bg-slate-800 rounded-3xl max-w-md w-full p-6 border border-slate-200 dark:border-slate-700 shadow-2xl space-y-4">
            <h3 class="text-sm font-bold text-sky-600 uppercase tracking-wider">Manual Credit Adjustment</h3>

            <form action="{{ route('platform.usage.adjust_credits') }}" method="POST" class="space-y-3 text-xs">
                @csrf
                <input type="hidden" name="tenant_id" value="{{ $tenant->id }}">

                <div>
                    <label class="block font-semibold mb-1">Wallet Type</label>
                    <select name="wallet_type" class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-900 border border-slate-300 dark:border-slate-700 rounded-xl">
                        <option value="ai">AI Tokens</option>
                        <option value="whatsapp">WhatsApp Credits</option>
                        <option value="sms">SMS Messages</option>
                    </select>
                </div>

                <div>
                    <label class="block font-semibold mb-1">Action Type</label>
                    <select name="transaction_type" class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-900 border border-slate-300 dark:border-slate-700 rounded-xl">
                        <option value="credit">Add Credits (Credit)</option>
                        <option value="debit">Remove Credits (Debit)</option>
                        <option value="bonus">Bonus Pack</option>
                    </select>
                </div>

                <div>
                    <label class="block font-semibold mb-1">Amount</label>
                    <input type="number" name="amount" required min="1" value="1000" class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-900 border border-slate-300 dark:border-slate-700 rounded-xl">
                </div>

                <div>
                    <label class="block font-semibold mb-1">Mandatory Reason *</label>
                    <input type="text" name="reason" required minlength="5" placeholder="Customer promotional bonus..." class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-900 border border-slate-300 dark:border-slate-700 rounded-xl">
                </div>

                <div class="flex justify-end space-x-2 rtl:space-x-reverse pt-2">
                    <button type="button" @click="creditsModal = false" class="px-4 py-2 bg-slate-200 dark:bg-slate-700 text-slate-700 dark:text-slate-200 font-bold rounded-xl">Cancel</button>
                    <button type="submit" class="px-5 py-2 bg-sky-600 text-white font-bold rounded-xl">Adjust Wallet Credits</button>
                </div>
            </form>
        </div>
    </div>

</div>
@endsection