<form method="POST" action="{{ $action }}" enctype="multipart/form-data" class="space-y-6">
    @csrf

    @if ($method !== 'POST')
        @method($method)
    @endif

    <div class="grid gap-6 md:grid-cols-2">
        <div>
            <x-input-label for="symbol" value="Symbol" />
            <x-text-input id="symbol" name="symbol" type="text" class="mt-1 block w-full" value="{{ old('symbol', $trade?->symbol) }}" placeholder="BTC/USD" required />
            <x-input-error :messages="$errors->get('symbol')" class="mt-2" />
        </div>

        <div>
            <x-input-label for="type" value="Type" />
            <select id="type" name="type" class="mt-1 block w-full rounded-lg border-gray-300 dark:border-slate-700 bg-white text-slate-900 shadow-sm transition duration-200 focus:border-blue-500 focus:ring-blue-500 dark:bg-slate-900 dark:text-slate-100" required>
                <option value="buy" @selected(old('type', $trade?->type) === 'buy')>Buy</option>
                <option value="sell" @selected(old('type', $trade?->type) === 'sell')>Sell</option>
            </select>
            <x-input-error :messages="$errors->get('type')" class="mt-2" />
        </div>

        <div>
            <x-input-label for="status" value="Status" />
            <select id="status" name="status" class="mt-1 block w-full rounded-lg border-gray-300 dark:border-slate-700 bg-white text-slate-900 shadow-sm transition duration-200 focus:border-blue-500 focus:ring-blue-500 dark:bg-slate-900 dark:text-slate-100" required>
                <option value="open" @selected(old('status', $trade?->status) === 'open')>Open</option>
                <option value="closed" @selected(old('status', $trade?->status) === 'closed')>Closed</option>
                <option value="cancelled" @selected(old('status', $trade?->status) === 'cancelled')>Cancelled</option>
            </select>
            <x-input-error :messages="$errors->get('status')" class="mt-2" />
        </div>

        <div>
            <x-input-label for="quantity" value="Quantity" />
            <x-text-input id="quantity" name="quantity" type="number" step="0.00000001" min="0" class="mt-1 block w-full" value="{{ old('quantity', $trade?->quantity) }}" required />
            <x-input-error :messages="$errors->get('quantity')" class="mt-2" />
        </div>

        <div>
            <x-input-label for="entry_price" value="Entry Price" />
            <x-text-input id="entry_price" name="entry_price" type="number" step="0.00000001" min="0" class="mt-1 block w-full" value="{{ old('entry_price', $trade?->entry_price) }}" required />
            <x-input-error :messages="$errors->get('entry_price')" class="mt-2" />
        </div>

        <div>
            <x-input-label for="exit_price" value="Exit Price" />
            <x-text-input id="exit_price" name="exit_price" type="number" step="0.00000001" min="0" class="mt-1 block w-full" value="{{ old('exit_price', $trade?->exit_price) }}" />
            <x-input-error :messages="$errors->get('exit_price')" class="mt-2" />
        </div>

        <div>
            <x-input-label for="stop_loss" value="Stop Loss" />
            <x-text-input id="stop_loss" name="stop_loss" type="number" step="0.00000001" min="0" class="mt-1 block w-full" value="{{ old('stop_loss', $trade?->stop_loss) }}" />
            <x-input-error :messages="$errors->get('stop_loss')" class="mt-2" />
        </div>

        <div>
            <x-input-label for="take_profit" value="Take Profit" />
            <x-text-input id="take_profit" name="take_profit" type="number" step="0.00000001" min="0" class="mt-1 block w-full" value="{{ old('take_profit', $trade?->take_profit) }}" />
            <x-input-error :messages="$errors->get('take_profit')" class="mt-2" />
        </div>

        <div>
            <x-input-label for="profit_loss" value="Profit/Loss" />
            <x-text-input id="profit_loss" name="profit_loss" type="number" step="0.00000001" class="mt-1 block w-full" value="{{ old('profit_loss', $trade?->profit_loss) }}" />
            <x-input-error :messages="$errors->get('profit_loss')" class="mt-2" />
        </div>

        <div>
            <x-input-label for="opened_at" value="Opened At" />
            <x-text-input id="opened_at" name="opened_at" type="datetime-local" class="mt-1 block w-full" value="{{ old('opened_at', $trade?->opened_at?->format('Y-m-d\TH:i')) }}" />
            <x-input-error :messages="$errors->get('opened_at')" class="mt-2" />
        </div>

        <div>
            <x-input-label for="closed_at" value="Closed At" />
            <x-text-input id="closed_at" name="closed_at" type="datetime-local" class="mt-1 block w-full" value="{{ old('closed_at', $trade?->closed_at?->format('Y-m-d\TH:i')) }}" />
            <x-input-error :messages="$errors->get('closed_at')" class="mt-2" />
        </div>

        <div>
            <x-input-label for="emotion" value="Emotion" />
            <select id="emotion" name="emotion" class="mt-1 block w-full rounded-lg border-gray-300 bg-white text-slate-900 shadow-sm transition duration-200 focus:border-blue-500 focus:ring-blue-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100">
                <option value="">Select emotion</option>
                @foreach (($emotionTags ?? collect()) as $emotion)
                    <option value="{{ $emotion->name }}" @selected(old('emotion', $trade?->emotion) === $emotion->name)>{{ $emotion->name }}</option>
                @endforeach
            </select>
            <x-input-error :messages="$errors->get('emotion')" class="mt-2" />
        </div>

        <div>
            <x-input-label for="trading_session" value="Trading Session" />
            <select id="trading_session" name="trading_session" class="mt-1 block w-full rounded-lg border-gray-300 bg-white text-slate-900 shadow-sm transition duration-200 focus:border-blue-500 focus:ring-blue-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100">
                <option value="">Select session</option>
                @foreach (['Sydney', 'Tokyo', 'London', 'New York', 'Overlap', 'Other'] as $session)
                    <option value="{{ $session }}" @selected(old('trading_session', $trade?->trading_session) === $session)>{{ $session }}</option>
                @endforeach
            </select>
            <x-input-error :messages="$errors->get('trading_session')" class="mt-2" />
        </div>

        <div>
            <x-input-label for="screenshot" value="Screenshot" />
            <input id="screenshot" name="screenshot" type="file" accept="image/png,image/jpeg,image/webp" class="mt-1 block w-full text-sm text-slate-600 file:mr-4 file:rounded-lg file:border-0 file:bg-blue-50 file:px-4 file:py-2 file:text-sm file:font-semibold file:text-blue-700 transition duration-200 hover:file:bg-blue-100 dark:text-slate-300 dark:file:bg-blue-950/60 dark:file:text-blue-300" />
            <x-input-error :messages="$errors->get('screenshot')" class="mt-2" />

            @if ($trade?->screenshot_path)
                <label class="mt-3 flex items-center gap-2 text-sm text-slate-600 dark:text-slate-300">
                    <input type="checkbox" name="remove_screenshot" value="1" class="rounded border-gray-300 dark:border-slate-700 text-blue-600 dark:text-blue-400 shadow-sm focus:ring-blue-500">
                    Remove current screenshot
                </label>
            @endif
        </div>
    </div>

    <div class="rounded-lg border border-blue-100 bg-white p-4 dark:border-blue-900/50 dark:bg-slate-950/40">
        <h3 class="text-sm font-bold uppercase tracking-wide text-blue-700 dark:text-blue-300">Discipline Checklist</h3>
        <div class="mt-4 grid gap-3 md:grid-cols-2">
            <label class="flex items-center gap-3 rounded-lg border border-blue-50 p-3 text-sm font-semibold text-slate-700 dark:border-blue-900/40 dark:text-slate-200">
                <input type="checkbox" name="followed_risk_reward" value="1" @checked(old('followed_risk_reward', $trade?->followed_risk_reward)) class="rounded border-gray-300 text-blue-600 shadow-sm focus:ring-blue-500">
                Followed planned risk/reward
            </label>
            <label class="flex items-center gap-3 rounded-lg border border-blue-50 p-3 text-sm font-semibold text-slate-700 dark:border-blue-900/40 dark:text-slate-200">
                <input type="checkbox" name="avoided_overtrading" value="1" @checked(old('avoided_overtrading', $trade?->avoided_overtrading)) class="rounded border-gray-300 text-blue-600 shadow-sm focus:ring-blue-500">
                Avoided overtrading
            </label>
        </div>
    </div>

    <div class="rounded-lg border border-blue-100 bg-blue-50/60 p-4 dark:border-blue-900/50 dark:bg-blue-950/20">
        <h3 class="text-sm font-bold uppercase tracking-wide text-blue-700 dark:text-blue-300">Mistake Tracker</h3>
        <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">Tag mistakes honestly. This is how ViZuTrade helps you see repeated patterns.</p>
        <div class="mt-4 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
            @foreach (($mistakeTags ?? collect()) as $tag)
                <label class="flex items-center gap-2 rounded-lg border border-blue-100 bg-white p-3 text-sm font-semibold text-slate-700 dark:border-blue-900/50 dark:bg-slate-900 dark:text-slate-200">
                    <input type="checkbox" name="mistake_tags[]" value="{{ $tag->id }}" @checked(in_array($tag->id, old('mistake_tags', $trade?->mistakeTags?->pluck('id')->all() ?? []))) class="rounded border-gray-300 text-blue-600 shadow-sm focus:ring-blue-500">
                    {{ $tag->name }}
                </label>
            @endforeach
        </div>
        <x-input-error :messages="$errors->get('mistake_tags')" class="mt-2" />
    </div>

    <div class="rounded-lg border border-blue-100 bg-blue-50/60 p-4 dark:border-blue-900/50 dark:bg-blue-950/20">
        <div class="mb-3">
            <h3 class="text-sm font-bold uppercase tracking-wide text-blue-700 dark:text-blue-300">Trade Notes</h3>
            <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">Write why you entered, what you observed, and what you learned.</p>
        </div>

        <x-input-label for="notes" value="Notes" />
        <textarea id="notes" name="notes" rows="6" class="mt-1 block w-full rounded-lg border-gray-300 dark:border-slate-700 bg-white text-slate-900 shadow-sm transition duration-200 focus:border-blue-500 focus:ring-blue-500 dark:bg-slate-900 dark:text-slate-100">{{ old('notes', $trade?->notes) }}</textarea>
        <x-input-error :messages="$errors->get('notes')" class="mt-2" />

        <div class="mt-4">
            <x-input-label for="psychology_note" value="Psychology Note" />
            <textarea id="psychology_note" name="psychology_note" rows="4" class="mt-1 block w-full rounded-lg border-gray-300 bg-white text-slate-900 shadow-sm transition duration-200 focus:border-blue-500 focus:ring-blue-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100">{{ old('psychology_note', $trade?->psychology_note) }}</textarea>
            <x-input-error :messages="$errors->get('psychology_note')" class="mt-2" />
        </div>
    </div>

    <div class="flex items-center justify-end gap-3 border-t border-blue-100 dark:border-blue-900/50 pt-6">
        <a href="{{ route('trades.index') }}" class="rounded-lg border border-blue-100 px-4 py-2 text-sm font-semibold text-blue-700 transition duration-200 hover:-translate-y-0.5 hover:bg-blue-50 dark:border-blue-900/50 dark:text-blue-300 dark:hover:bg-blue-950/60">
            Cancel
        </a>

        <button type="submit" class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold text-white transition hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
            {{ $buttonText }}
        </button>
    </div>
</form>
