@extends('layouts.app')

@section('content')
@php
    $isEdit = isset($cartridge) && $cartridge->exists;
    $formAction = $isEdit ? route('cartridges.update', $cartridge) : route('cartridges.store');
    $pageTitle = $isEdit ? 'Edit Cartridge' : 'Add Cartridge';
    $state = $usageSummary['service_state'] ?? 'Unknown';
@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: 1240px; 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-main-column, .sca-side-column { display: grid; gap: 24px; align-content: start; }
        .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-btn-small { width: auto; min-height: 38px; padding: 8px 12px; border-radius: 999px; }
        .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; }
        .sca-kpi-grid { display: grid; gap: 12px; }
        .sca-kpi-card { border: 1px solid var(--sca-black); border-radius: 10px; background: rgba(255,255,255,.92); padding: 12px; }
        .sca-kpi-label { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; }
        .sca-kpi-value { font-family: var(--sca-font-display); font-size: 26px; line-height: 1; font-weight: 700; }
        .sca-badge { display: inline-flex; align-items: center; min-height: 26px; padding: 4px 10px; border: 1px solid var(--sca-black); border-radius: 999px; font-size: 12px; font-weight: 600; }
        .sca-table-wrap { overflow-x: auto; border: 1px solid var(--sca-black); border-radius: 10px; background: rgba(255,255,255,.92); }
        .sca-table { width: 100%; border-collapse: collapse; }
        .sca-table th, .sca-table td { padding: 12px 10px; text-align: left; border-bottom: 1px solid rgba(0,0,0,.15); vertical-align: top; font-size: 14px; }
        .sca-table th { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
        .sca-table tr:last-child td { border-bottom: 0; }
        .sca-mini-form { border: 1px solid var(--sca-black); border-radius: 10px; padding: 14px; background: rgba(255,255,255,.92); display: grid; gap: 14px; }
        @media (min-width: 980px) {
            .sca-page-grid { grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); }
            .sca-two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .sca-kpi-grid { 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">
                Track cartridge assignment, service thresholds, and maintenance history with the same structured presentation used on Play Log and Albums.
            </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>

        <div class="sca-page-grid">
            <div class="sca-main-column">
                @if(isset($usageSummary))
                    <section class="sca-panel sca-panel-accent">
                        <div class="sca-panel-head">
                            <div class="sca-panel-title">Usage Summary</div>
                            <div class="sca-section-rule"></div>
                        </div>
                        <div class="sca-panel-body">
                            <div class="sca-kpi-grid">
                                <div class="sca-kpi-card">
                                    <div class="sca-kpi-label">Total Hours</div>
                                    <div class="sca-kpi-value">{{ $usageSummary['total_hours'] }}</div>
                                </div>
                                <div class="sca-kpi-card">
                                    <div class="sca-kpi-label">Hours Since Service</div>
                                    <div class="sca-kpi-value">{{ $usageSummary['hours_since_service'] }}</div>
                                </div>
                                <div class="sca-kpi-card">
                                    <div class="sca-kpi-label">Service Threshold</div>
                                    <div class="sca-kpi-value">{{ $usageSummary['service_threshold_hours'] }}</div>
                                </div>
                                <div class="sca-kpi-card">
                                    <div class="sca-kpi-label">Remaining Hours</div>
                                    <div class="sca-kpi-value">{{ $usageSummary['remaining_hours'] }}</div>
                                </div>
                            </div>
                            <div style="display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;">
                                <div class="sca-meta">
                                    Last service: {{ $usageSummary['last_serviced_on'] ?? '—' }} · {{ $usageSummary['last_service_type'] ?? '—' }}
                                </div>
                                <span class="sca-badge" style="background: {{ $state === 'Optimal' ? '#fff' : ($state === 'Approaching Service' ? '#FFB81C' : ($state === 'Due for Service' ? '#fff' : '#000')) }}; color: {{ $state === 'Overdue' ? '#fff' : '#000' }};">
                                    {{ $state }}
                                </span>
                            </div>
                        </div>
                    </section>
                @endif

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

                    <div class="sca-page-grid" style="grid-template-columns:1fr;">
                        <section class="sca-panel sca-panel-accent">
                            <div class="sca-panel-head">
                                <div class="sca-panel-title">Cartridge Details</div>
                                <div class="sca-section-rule"></div>
                            </div>
                            <div class="sca-panel-body">
                                <div class="sca-form-grid">
                                    <div class="sca-field">
                                        <label class="sca-label">Name</label>
                                        <input type="text" name="name" class="sca-input" value="{{ old('name', $cartridge->name ?? '') }}" required>
                                    </div>

                                    <div class="sca-two-col">
                                        <div class="sca-field">
                                            <label class="sca-label">Cartridge Type</label>
                                            <select name="cartridge_type" class="sca-select">
                                                <option value="">— Select Cartridge Type —</option>
                                                @foreach(['Moving Magnet', 'Moving Coil', 'Moving Iron', 'Optical', 'Other'] as $type)
                                                    <option value="{{ $type }}" @selected(old('cartridge_type', $cartridge->cartridge_type ?? '') === $type)>{{ $type }}</option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="sca-field">
                                            <label class="sca-label">Playback Role</label>
                                            <select name="playback_role" class="sca-select">
                                                <option value="">— Select Playback Role —</option>
                                                @foreach(['Stereo', 'Mono', '78', 'Other'] as $role)
                                                    <option value="{{ $role }}" @selected(old('playback_role', $cartridge->playback_role ?? '') === $role)>{{ $role }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>

                                    <div class="sca-two-col">
                                        <div class="sca-field">
                                            <label class="sca-label">Installed On Tonearm</label>
                                            <select name="tonearm_id" class="sca-select">
                                                <option value="">— Not Installed —</option>
                                                @foreach(($tonearms ?? []) as $tonearm)
                                                    <option value="{{ $tonearm->id }}" @selected(old('tonearm_id', $cartridge->tonearm_id ?? '') == $tonearm->id)>
                                                        {{ $tonearm->name }}{{ $tonearm->role ? ' (' . $tonearm->role . ')' : '' }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="sca-field">
                                            <label class="sca-label">Status</label>
                                            <select name="status" class="sca-select">
                                                @foreach(['Active', 'Installed', 'Spare', 'Retipped', 'Archived'] as $status)
                                                    <option value="{{ $status }}" @selected(old('status', $cartridge->status ?? 'Active') === $status)>{{ $status }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>

                                    <div class="sca-two-col">
                                        <div class="sca-field">
                                            <label class="sca-label">Service Threshold Hours</label>
                                            <input type="number" name="retip_threshold_hours" class="sca-input" value="{{ old('retip_threshold_hours', $cartridge->retip_threshold_hours ?? 1000) }}">
                                        </div>

                                        <div class="sca-field">
                                            <label class="sca-label">Notes</label>
                                            <textarea name="notes" class="sca-textarea">{{ old('notes', $cartridge->notes ?? '') }}</textarea>
                                        </div>
                                    </div>
                                </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 Cartridge Changes' : 'Create Cartridge' }}</button>
                                    <a href="{{ route('cartridges.index') }}" class="sca-btn sca-btn-secondary">Cancel</a>
                                </div>
                            </div>
                        </section>
                    </div>
                </form>
            </div>

            @if($isEdit)
                <div class="sca-side-column">
                    <section class="sca-panel sca-panel-accent">
                        <div class="sca-panel-head">
                            <div class="sca-panel-title">Add Service Event</div>
                            <div class="sca-section-rule"></div>
                        </div>
                        <div class="sca-panel-body">
                            <form method="POST" action="{{ route('cartridges.service-events.store', $cartridge) }}" class="sca-mini-form">
                                @csrf
                                <div class="sca-field">
                                    <label class="sca-label">Service Date</label>
                                    <input type="date" name="serviced_on" class="sca-input" value="{{ old('serviced_on') }}">
                                </div>

                                <div class="sca-field">
                                    <label class="sca-label">Service Type</label>
                                    <select name="service_type" class="sca-select">
                                        <option value="">— Select Service Type —</option>
                                        @foreach(['Stylus Replaced', 'Retipped', 'Retipped + Cantilever Replaced', 'Other'] as $serviceType)
                                            <option value="{{ $serviceType }}" @selected(old('service_type') === $serviceType)>{{ $serviceType }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="sca-field">
                                    <label class="sca-label">Stylus Shape</label>
                                    <select name="stylus_shape" class="sca-select">
                                        <option value="">— Select Stylus Shape —</option>
                                        @foreach(['Conical', 'Elliptical', 'Line Contact', 'MicroLine', 'Shibata', 'Other'] as $shape)
                                            <option value="{{ $shape }}" @selected(old('stylus_shape') === $shape)>{{ $shape }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="sca-field">
                                    <label class="sca-label">Cantilever Replaced?</label>
                                    <select name="cantilever_replaced" class="sca-select">
                                        <option value="0" @selected(old('cantilever_replaced') == '0')>No</option>
                                        <option value="1" @selected(old('cantilever_replaced') == '1')>Yes</option>
                                    </select>
                                </div>

                                <div class="sca-field">
                                    <label class="sca-label">Service Detail</label>
                                    <input type="text" name="service_detail" class="sca-input" value="{{ old('service_detail') }}" placeholder="Optional detail">
                                </div>

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

                                <button type="submit" class="sca-btn sca-btn-primary">Add Service Event</button>
                            </form>
                        </div>
                    </section>

                    <section class="sca-panel sca-panel-accent">
                        <div class="sca-panel-head">
                            <div class="sca-panel-title">Service History</div>
                            <div class="sca-section-rule"></div>
                        </div>
                        <div class="sca-panel-body">
                            <div class="sca-table-wrap">
                                <table class="sca-table">
                                    <thead>
                                        <tr>
                                            <th>Date</th>
                                            <th>Type</th>
                                            <th>Stylus</th>
                                            <th>Cantilever</th>
                                            <th>Detail</th>
                                            <th></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse($cartridge->serviceEvents as $serviceEvent)
                                            <tr>
                                                <td>{{ optional($serviceEvent->serviced_on)->format('Y-m-d') }}</td>
                                                <td>{{ $serviceEvent->service_type }}</td>
                                                <td>{{ $serviceEvent->stylus_shape ?? '—' }}</td>
                                                <td>{{ $serviceEvent->cantilever_replaced ? 'Yes' : 'No' }}</td>
                                                <td>
                                                    {{ $serviceEvent->service_detail ?? '—' }}
                                                    @if($serviceEvent->notes)
                                                        <div class="sca-meta" style="margin-top:4px;">{{ $serviceEvent->notes }}</div>
                                                    @endif
                                                </td>
                                                <td>
                                                    <form method="POST" action="{{ route('cartridges.service-events.destroy', [$cartridge, $serviceEvent]) }}" onsubmit="return confirm('Delete this service event?');">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button type="submit" class="sca-btn sca-btn-secondary sca-btn-small">Delete</button>
                                                    </form>
                                                </td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="6">No service events recorded yet.</td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </section>
                </div>
            @endif
        </div>
    </div>
</div>
@endsection