@extends('layouts.app')

@section('content')
@php
    $isEdit = isset($tonearm) && $tonearm->exists;
    $formAction = $isEdit ? route('tonearms.update', $tonearm) : route('tonearms.store');
    $pageTitle = $isEdit ? 'Edit Tonearm' : 'Add Tonearm';
    $selectedRole = old('role', $tonearm->role ?? '');
    $presetRoles = ['Stereo', 'Mono', '78', 'Other'];
    $isCustomRole = $selectedRole && !in_array($selectedRole, $presetRoles, true);
@endphp

<div class="sca-app">
    <style>
        :root {
            --sca-yellow: #FFB81C;
            --sca-black: #000000;
            --sca-white: #FFFFFF;
            --sca-font-display: Georgia, serif;
            --sca-font-ui: Arial, Helvetica, sans-serif;
        }
        .sca-app { min-height: 100vh; background: var(--sca-white); color: var(--sca-black); font-family: var(--sca-font-ui); }
        .sca-shell { max-width: 1120px; margin: 0 auto; padding: 24px; }
        .sca-top-rule, .sca-section-rule { height: 6px; background: var(--sca-yellow); border: 1px solid var(--sca-black); border-radius: 999px; }
        .sca-top-rule { margin-bottom: 24px; }
        .sca-header { display: grid; gap: 18px; margin-bottom: 28px; }
        .sca-wordmark { max-width: min(760px, 100%); height: auto; display: block; }
        .sca-display-title { font-family: var(--sca-font-display); font-size: 30px; line-height: 1; font-weight: 700; margin: 16px 0 0 0; }
        .sca-meta { font-size: 14px; line-height: 1.5; color: rgba(0,0,0,.72); }
        .sca-page-grid { display: grid; gap: 24px; }
        .sca-panel { border: 1px solid var(--sca-black); border-radius: 14px; background: var(--sca-white); overflow: hidden; }
        .sca-panel-accent { background: var(--sca-yellow); }
        .sca-panel-head { padding: 14px 14px 0 14px; display: grid; gap: 10px; }
        .sca-panel-body { padding: 14px; display: grid; gap: 14px; }
        .sca-panel-title { font-family: var(--sca-font-display); font-size: 18px; line-height: 1; font-weight: 700; margin: 0; }
        .sca-form-grid { display: grid; gap: 16px; }
        .sca-two-col { display: grid; gap: 14px; }
        .sca-field { display: grid; gap: 8px; }
        .sca-label { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0; }
        .sca-input, .sca-select, .sca-textarea { width: 100%; box-sizing: border-box; display: block; border: 1px solid var(--sca-black); border-radius: 10px; background: var(--sca-white); color: var(--sca-black); font-family: var(--sca-font-ui); font-size: 16px; font-weight: 500; }
        .sca-input, .sca-select { min-height: 48px; padding: 12px 14px; }
        .sca-textarea { min-height: 112px; padding: 12px 14px; resize: vertical; }
        .sca-input:focus-visible, .sca-select:focus-visible, .sca-textarea:focus-visible, .sca-btn:focus-visible { outline: 2px solid var(--sca-black); outline-offset: 2px; }
        .sca-btn-row { display: grid; gap: 12px; }
        .sca-btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; padding: 12px 18px; border: 1px solid var(--sca-black); border-radius: 999px; font-family: var(--sca-font-ui); font-size: 16px; font-weight: 600; cursor: pointer; text-decoration: none; }
        .sca-btn-primary { background: var(--sca-black); color: var(--sca-white); }
        .sca-btn-secondary { background: var(--sca-white); color: var(--sca-black); }
        .sca-alert { border: 1px solid var(--sca-black); border-radius: 10px; padding: 12px 14px; background: #fff1f1; color: #7a0000; font-size: 14px; }
        .sca-success { border: 1px solid var(--sca-black); border-radius: 10px; padding: 12px 14px; background: #eefbe9; color: #173d10; font-size: 14px; }
        @media (min-width: 900px) { .sca-two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sca-btn-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    </style>

    <div class="sca-shell">
        <div class="sca-top-rule"></div>

        <header class="sca-header">
            <div>
                <img class="sca-wordmark" src="{{ asset('images/SCA_wordmark.png') }}" alt="Secret Chord Analogue">
                <h1 class="sca-display-title">{{ $pageTitle }}</h1>
            </div>
            <div class="sca-meta">
                Define tonearm assignment, playback role, and cartridge pairing using the same structured workflow as the Play Log and Albums screens.
            </div>

            @if(session('status'))
                <div class="sca-success">{{ session('status') }}</div>
            @endif

            @if($errors->any())
                <div class="sca-alert">
                    <strong>Please correct the following:</strong>
                    <ul style="margin:8px 0 0 18px; padding:0;">
                        @foreach($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
        </header>

        <form method="POST" action="{{ $formAction }}">
            @csrf
            @if($isEdit)
                @method('PUT')
            @endif

            <div class="sca-page-grid">
                <section class="sca-panel sca-panel-accent">
                    <div class="sca-panel-head">
                        <div class="sca-panel-title">Tonearm Details</div>
                        <div class="sca-section-rule"></div>
                    </div>
                    <div class="sca-panel-body">
                        <div class="sca-form-grid">
                            <div class="sca-two-col">
                                <div class="sca-field">
                                    <label class="sca-label">Name</label>
                                    <input type="text" name="name" class="sca-input" value="{{ old('name', $tonearm->name ?? '') }}" required>
                                </div>

                                <div class="sca-field">
                                    <label class="sca-label">Assigned Turntable</label>
                                    <select name="turntable_id" class="sca-select">
                                        <option value="">— None —</option>
                                        @foreach(($turntables ?? []) as $turntable)
                                            <option value="{{ $turntable->id }}" @selected(old('turntable_id', $tonearm->turntable_id ?? null) == $turntable->id)>
                                                {{ $turntable->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="sca-two-col">
                                <div class="sca-field">
                                    <label class="sca-label">Playback Role</label>
                                    <select id="role" name="role" class="sca-select">
                                        <option value="">— Select Role —</option>
                                        @foreach($presetRoles as $role)
                                            <option value="{{ $role }}" @selected(!$isCustomRole && $selectedRole === $role)>{{ $role }}</option>
                                        @endforeach
                                        <option value="Custom" @selected($isCustomRole || old('role') === 'Custom')>Custom</option>
                                    </select>
                                </div>

                                <div class="sca-field" id="role_custom_wrapper" style="display: {{ $isCustomRole || old('role') === 'Custom' ? 'grid' : 'none' }};">
                                    <label class="sca-label">Custom Role</label>
                                    <input type="text" name="role_custom" class="sca-input" value="{{ old('role_custom', $isCustomRole ? $selectedRole : '') }}" placeholder="Enter custom role">
                                </div>
                            </div>

                            <div class="sca-field">
                                <label class="sca-label">Installed Cartridge</label>
                                <select name="cartridge_id" class="sca-select">
                                    <option value="">— None —</option>
                                    @foreach(($cartridges ?? []) as $cartridge)
                                        <option value="{{ $cartridge->id }}" @selected(old('cartridge_id', $tonearm->cartridge?->id ?? null) == $cartridge->id)>
                                            {{ $cartridge->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                </section>

                <section class="sca-panel sca-panel-accent">
                    <div class="sca-panel-head">
                        <div class="sca-panel-title">Build & Notes</div>
                        <div class="sca-section-rule"></div>
                    </div>
                    <div class="sca-panel-body">
                        <div class="sca-two-col">
                            <div class="sca-field">
                                <label class="sca-label">Manufacturer</label>
                                <input type="text" name="manufacturer" class="sca-input" value="{{ old('manufacturer', $tonearm->manufacturer ?? '') }}">
                            </div>

                            <div class="sca-field">
                                <label class="sca-label">Model</label>
                                <input type="text" name="model" class="sca-input" value="{{ old('model', $tonearm->model ?? '') }}">
                            </div>
                        </div>

                        <div class="sca-field">
                            <label class="sca-label">Notes</label>
                            <textarea name="notes" class="sca-textarea">{{ old('notes', $tonearm->notes ?? '') }}</textarea>
                        </div>
                    </div>
                </section>

                <section class="sca-panel sca-panel-accent">
                    <div class="sca-panel-head">
                        <div class="sca-panel-title">Actions</div>
                        <div class="sca-section-rule"></div>
                    </div>
                    <div class="sca-panel-body">
                        <div class="sca-btn-row">
                            <button type="submit" class="sca-btn sca-btn-primary">{{ $isEdit ? 'Save Tonearm Changes' : 'Create Tonearm' }}</button>
                            <a href="{{ route('tonearms.index') }}" class="sca-btn sca-btn-secondary">Cancel</a>
                        </div>
                    </div>
                </section>
            </div>
        </form>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const roleSelect = document.getElementById('role');
    const roleCustomWrapper = document.getElementById('role_custom_wrapper');

    function refreshRoleState() {
        if (!roleSelect || !roleCustomWrapper) {
            return;
        }

        roleCustomWrapper.style.display = roleSelect.value === 'Custom' ? 'grid' : 'none';
    }

    if (roleSelect) {
        roleSelect.addEventListener('change', refreshRoleState);
        refreshRoleState();
    }
});
</script>
@endsection