<x-app-layout>
    <x-slot name="header">
        <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
            <div>
                <p class="text-sm font-semibold uppercase tracking-wide text-blue-600 dark:text-blue-300">Trading Account</p>
                <h2 class="text-2xl font-bold text-slate-950 dark:text-white">{{ $account->name }}</h2>
            </div>
            <div class="flex flex-wrap gap-2">
                <a href="{{ route('trading-accounts.edit', $account) }}" class="rounded-lg border border-blue-100 px-4 py-2 text-sm font-bold text-blue-700 transition hover:-translate-y-0.5 hover:bg-blue-50 dark:border-blue-900 dark:text-blue-300 dark:hover:bg-blue-950/60">Edit</a>
                <a href="{{ route('trading-accounts.index') }}" class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-bold text-white transition hover:-translate-y-0.5 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400">All Accounts</a>
            </div>
        </div>
    </x-slot>

    <div class="grid gap-6 lg:grid-cols-3">
        <div class="rounded-lg border border-blue-100 bg-white p-6 shadow-sm dark:border-blue-900/50 dark:bg-slate-900">
            <p class="text-sm font-semibold text-slate-500 dark:text-slate-400">Mode</p>
            <p class="mt-2 text-2xl font-bold text-slate-950 dark:text-white">{{ $account->api_connected ? 'API Mode' : 'Manual Mode' }}</p>
            <p class="mt-2 text-sm text-slate-600 dark:text-slate-400">{{ $connectionStatus['message'] }}</p>
        </div>

        <div class="rounded-lg border border-blue-100 bg-white p-6 shadow-sm dark:border-blue-900/50 dark:bg-slate-900">
            <p class="text-sm font-semibold text-slate-500 dark:text-slate-400">API Status</p>
            <p class="mt-2 text-2xl font-bold text-slate-950 dark:text-white">{{ str($account->api_status)->replace('_', ' ')->title() }}</p>
            <p class="mt-2 text-sm text-slate-600 dark:text-slate-400">Last synced: {{ $account->last_synced_at?->format('M d, Y h:i A') ?? 'Never' }}</p>
        </div>

        <div class="rounded-lg border border-blue-100 bg-white p-6 shadow-sm dark:border-blue-900/50 dark:bg-slate-900">
            <p class="text-sm font-semibold text-slate-500 dark:text-slate-400">Provider</p>
            <p class="mt-2 text-2xl font-bold text-slate-950 dark:text-white">{{ $account->api_provider ? str($account->api_provider)->replace('_', ' ')->title() : 'None' }}</p>
            <p class="mt-2 text-sm text-slate-600 dark:text-slate-400">{{ $account->api_account_id ?: 'No API account ID saved.' }}</p>
        </div>
    </div>

    <div class="mt-6 grid gap-6 lg:grid-cols-2">
        <div class="rounded-lg border border-blue-100 bg-white p-6 shadow-sm dark:border-blue-900/50 dark:bg-slate-900">
            <h3 class="text-lg font-bold text-slate-950 dark:text-white">Account Information</h3>
            <dl class="mt-5 grid gap-4 sm:grid-cols-2">
                @foreach ([
                    'Broker' => $account->broker_name,
                    'Account Number' => $account->account_number ?: 'Not added',
                    'Type' => str($account->account_type)->title(),
                    'Platform' => $account->platform ?: 'Not added',
                    'Server' => $account->server ?: 'Not added',
                    'Leverage' => $account->leverage ? '1:'.$account->leverage : 'Not added',
                ] as $label => $value)
                    <div>
                        <dt class="text-sm font-semibold text-slate-500 dark:text-slate-400">{{ $label }}</dt>
                        <dd class="mt-1 font-bold text-slate-950 dark:text-white">{{ $value }}</dd>
                    </div>
                @endforeach
            </dl>
        </div>

        <div class="rounded-lg border border-blue-100 bg-white p-6 shadow-sm dark:border-blue-900/50 dark:bg-slate-900">
            <h3 class="text-lg font-bold text-slate-950 dark:text-white">Financial Snapshot</h3>
            <div class="mt-5 grid gap-4 sm:grid-cols-2">
                @foreach ([
                    'Balance' => $account->balance,
                    'Equity' => $account->equity,
                    'Margin' => $account->margin,
                    'Free Margin' => $account->free_margin,
                ] as $label => $value)
                    <div class="rounded-lg bg-blue-50/70 p-4 dark:bg-blue-950/30">
                        <p class="text-sm font-semibold text-blue-700 dark:text-blue-300">{{ $label }}</p>
                        <p class="mt-2 text-xl font-bold text-slate-950 dark:text-white">{{ $account->currency }} {{ number_format($value, 2) }}</p>
                    </div>
                @endforeach
            </div>
        </div>
    </div>

    @if ($account->api_error)
        <div class="mt-6 rounded-lg border border-amber-200 bg-amber-50 p-4 text-sm font-semibold text-amber-800 dark:border-amber-900/60 dark:bg-amber-950/40 dark:text-amber-200">
            {{ $account->api_error }}
        </div>
    @endif

    <div class="mt-6 flex flex-wrap gap-3">
        <form method="POST" action="{{ route('trading-accounts.connect', $account) }}">
            @csrf
            <button type="submit" class="rounded-lg border border-blue-100 px-4 py-2 text-sm font-bold text-blue-700 transition hover:-translate-y-0.5 hover:bg-blue-50 dark:border-blue-900 dark:text-blue-300 dark:hover:bg-blue-950/60">Check API Connection</button>
        </form>

        <form method="POST" action="{{ route('trading-accounts.sync', $account) }}">
            @csrf
            <button type="submit" class="rounded-lg border border-blue-100 px-4 py-2 text-sm font-bold text-blue-700 transition hover:-translate-y-0.5 hover:bg-blue-50 dark:border-blue-900 dark:text-blue-300 dark:hover:bg-blue-950/60">Sync Account</button>
        </form>

        @if ($account->api_connected)
            <form method="POST" action="{{ route('trading-accounts.disconnect', $account) }}">
                @csrf
                <button type="submit" class="rounded-lg border border-slate-200 px-4 py-2 text-sm font-bold text-slate-700 transition hover:-translate-y-0.5 hover:bg-slate-50 dark:border-slate-700 dark:text-slate-200 dark:hover:bg-slate-800">Return to Manual Mode</button>
            </form>
        @endif

        <form method="POST" action="{{ route('trading-accounts.destroy', $account) }}" onsubmit="return confirm('Delete this trading account?');">
            @csrf
            @method('DELETE')
            <button type="submit" class="rounded-lg border border-red-200 px-4 py-2 text-sm font-bold text-red-700 transition hover:-translate-y-0.5 hover:bg-red-50 dark:border-red-900/60 dark:text-red-300 dark:hover:bg-red-950/40">Delete</button>
        </form>
    </div>
</x-app-layout>
