<div class="challenge-create-dialog-overlay" (click)="cancel()" [class.loading]="loading">
    <div class="challenge-create-dialog" (click)="$event.stopPropagation()">
        <div class="dialog-header">
            <h2>Create Challenge</h2>
            <button type="button" class="close-btn" (click)="cancel()" [disabled]="loading">×</button>
        </div>

        <form [formGroup]="form" (ngSubmit)="submit()" class="dialog-form">
            <!-- Error Message -->
            <div *ngIf="errorMessage" class="error-message">
                {{ errorMessage }}
            </div>

            <!-- Target Username -->
            <div class="form-group">
                <label for="targetUsername">Opponent Username</label>
                <input type="text" id="targetUsername" formControlName="targetUsername"
                    placeholder="Enter opponent's username" required />
                <small *ngIf="form.get('targetUsername')?.hasError('required') && form.get('targetUsername')?.touched">
                    Username is required
                </small>
            </div>

            <!-- Player Color Selection -->
            <div class="form-group">
                <label for="color">Play as</label>
                <select id="color" formControlName="color">
                    <option value="white">White</option>
                    <option value="black">Black</option>
                    <option value="random">Random</option>
                </select>
            </div>

            <!-- Time Control Mode Selection -->
            <div class="form-group">
                <label for="timeMode">Time Control</label>
                <select id="timeMode" formControlName="timeMode">
                    <option value="blitz">Blitz</option>
                    <option value="rapid">Rapid</option>
                    <option value="classical">Classical</option>
                    <option value="unlimited">Unlimited</option>
                </select>
            </div>

            <!-- Time Presets -->
            <div class="form-group" *ngIf="selectedTimeMode !== 'unlimited'">
                <label>Presets</label>
                <div class="preset-buttons">
                    <button type="button" *ngFor="let preset of getAvailablePresets()" class="preset-btn"
                        (click)="selectPreset(preset)" [disabled]="loading">
                        {{ preset.label }}
                    </button>
                </div>
            </div>

            <!-- Custom Time Control -->
            <div class="form-group" *ngIf="selectedTimeMode !== 'unlimited'">
                <div class="form-row">
                    <div class="form-col">
                        <label for="limitMinutes">Time (minutes)</label>
                        <input type="number" id="limitMinutes" formControlName="limitMinutes" min="1" max="1000" />
                    </div>
                    <div class="form-col">
                        <label for="incrementSeconds">Increment (seconds)</label>
                        <input type="number" id="incrementSeconds" formControlName="incrementSeconds" min="0" max="300" />
                    </div>
                </div>
            </div>

            <!-- TTL (Time to Live) -->
            <div class="form-group">
                <label for="ttlSeconds">Challenge Expires In</label>
                <select id="ttlSeconds" formControlName="ttlSeconds">
                    <option *ngFor="let ttl of ttlOptions" [value]="ttl.seconds">
                        {{ ttl.label }}
                    </option>
                </select>
            </div>

            <!-- Buttons -->
            <div class="dialog-buttons">
                <button type="button" class="btn btn-secondary" (click)="cancel()" [disabled]="loading">
                    Cancel
                </button>
                <button type="submit" class="btn btn-primary" [disabled]="form.invalid || loading">
                    {{ loading ? 'Sending...' : 'Send Challenge' }}
                </button>
            </div>
        </form>
    </div>
</div>