@extends('layouts.trading')

@section('content')
<div class="grid gap-6 xl:grid-cols-2">
    {{-- Credentials --}}
    <div class="trade-card">
        <h2 class="mb-2 text-xl font-bold text-white">FlatTrade API Credentials</h2>
        <p class="mb-4 text-sm text-slate-400">
            @if ($isAdminFeed)
                As admin, your saved credentials are used for the <strong class="text-white">shared WebSocket market feed</strong> (ticks, option chain, Greeks) for all users.
            @else
                Your credentials are used only for <strong class="text-white">your orders, balance, positions and P&L</strong>. Market data comes from the admin feed.
            @endif
        </p>

        <form method="POST" action="{{ route('broker.credentials') }}" class="space-y-4">
            @csrf
            <div>
                <label class="mb-1 block text-sm text-slate-400">API Key</label>
                <input type="text" name="api_key" value="{{ old('api_key', $broker?->api_key) }}"
                       class="w-full rounded-xl border-trade-border bg-trade-panel px-4 py-2.5 text-white"
                       placeholder="Your FlatTrade API Key" required>
            </div>
            <div>
                <label class="mb-1 block text-sm text-slate-400">API Secret</label>
                <input type="password" name="api_secret"
                       class="w-full rounded-xl border-trade-border bg-trade-panel px-4 py-2.5 text-white"
                       placeholder="{{ $broker?->api_secret ? '•••••••• (saved — enter to replace)' : 'Your FlatTrade API Secret' }}"
                       {{ $broker?->api_secret ? '' : 'required' }}>
                @if ($broker?->api_secret)
                    <p class="mt-1 text-xs text-slate-500">Leave blank to keep existing secret, or enter a new one.</p>
                @endif
            </div>
            <button type="submit" class="trade-btn-primary">Save Credentials</button>
        </form>

        <p class="mt-4 text-xs text-slate-500">
            Redirect URL for FlatTrade API settings:
            <code class="text-emerald-300">{{ config('flattrade.redirect_uri') }}</code>
        </p>
    </div>

    {{-- Connection + synced data --}}
    <div class="trade-card">
        <h2 class="mb-4 text-xl font-bold text-white">Connection &amp; Synced Account</h2>

        <div class="rounded-xl border border-trade-border bg-trade-panel p-4">
            <div class="flex items-center justify-between">
                <div>
                    <div class="text-sm text-slate-400">Status</div>
                    <div class="text-lg font-semibold {{ $broker?->is_connected ? 'text-emerald-400' : 'text-rose-400' }}">
                        {{ $broker?->is_connected ? 'Connected' : 'Not Connected' }}
                    </div>
                </div>
                @if ($broker?->client_id)
                    <div class="text-right text-sm text-slate-400">
                        <div>Client: {{ $broker->client_id }}</div>
                        @if ($broker->is_market_feed_provider)
                            <div class="mt-1 text-xs text-trade-accent">Market feed provider</div>
                        @endif
                    </div>
                @endif
            </div>
            @if ($broker?->token_expires_at)
                <div class="mt-2 text-xs text-slate-500">Token expires: {{ $broker->token_expires_at->format('d M Y H:i') }}</div>
            @endif
            @if ($broker?->last_synced_at)
                <div class="text-xs text-slate-500">Last sync: {{ $broker->last_synced_at->diffForHumans() }}</div>
            @endif
        </div>

        @if ($broker?->is_connected)
            <div class="mt-4 grid grid-cols-2 gap-3 text-sm">
                <div class="rounded-xl bg-trade-panel p-3">
                    <div class="text-slate-500">Available Balance</div>
                    <div class="text-lg font-bold text-white">₹{{ number_format($broker->available_balance, 2) }}</div>
                </div>
                <div class="rounded-xl bg-trade-panel p-3">
                    <div class="text-slate-500">Margin Used</div>
                    <div class="text-lg font-bold text-white">₹{{ number_format($broker->margin_used, 2) }}</div>
                </div>
                <div class="rounded-xl bg-trade-panel p-3">
                    <div class="text-slate-500">Unrealized P&L</div>
                    <div class="text-lg font-bold {{ $broker->unrealized_pnl_total >= 0 ? 'pnl-positive' : 'pnl-negative' }}">
                        ₹{{ number_format($broker->unrealized_pnl_total, 2) }}
                    </div>
                </div>
                <div class="rounded-xl bg-trade-panel p-3">
                    <div class="text-slate-500">Realized P&L</div>
                    <div class="text-lg font-bold {{ $broker->realized_pnl_total >= 0 ? 'pnl-positive' : 'pnl-negative' }}">
                        ₹{{ number_format($broker->realized_pnl_total, 2) }}
                    </div>
                </div>
            </div>
        @endif

        <div class="mt-6 flex flex-wrap gap-3">
            @if ($canConnect)
                <a href="{{ route('broker.connect') }}" class="trade-btn-primary">Connect OAuth</a>
            @else
                <button disabled class="trade-btn-primary opacity-50 cursor-not-allowed">Connect OAuth</button>
            @endif
            @if ($broker?->is_connected)
                <form method="POST" action="{{ route('broker.sync') }}">@csrf<button type="submit" class="trade-btn-ghost">Sync Now</button></form>
                <form method="POST" action="{{ route('broker.disconnect') }}">@csrf<button type="submit" class="trade-btn-danger">Disconnect</button></form>
            @endif
        </div>

        @if ($errors->has('broker'))
            <div class="mt-4 rounded-xl border border-rose-500/30 bg-rose-500/10 p-4 text-sm text-rose-300">{{ $errors->first('broker') }}</div>
        @endif
    </div>
</div>
@endsection