@extends('layouts.admin')

@section('title', 'Sage compatibility — '.config('app.name'))
@section('page_title', 'Sage compatibility')

@section('breadcrumbs')
    <li class="breadcrumb-item active">Sage compatibility</li>
@endsection

@section('content')
    <section class="card mb-3">
        <div class="card-header d-flex justify-content-between align-items-center flex-wrap gap-2">
            <div>
                <h5 class="mb-0">Products</h5>
                <p class="text-muted small mb-0">{{ $prefixStats->count() }} prefixes · {{ $totalRows }} version pairs</p>
            </div>
            <a class="btn btn-sm btn-outline-secondary" href="{{ route('admin.compatibility.categories.index') }}">Download categories</a>
        </div>
        <div class="card-body">
            <div class="compat-admin-chips" role="list">
                <a
                    href="{{ route('admin.compatibility.index', array_filter([
                        'q' => $q ?: null,
                        'supported' => $supported !== '' ? $supported : null,
                        'configured' => $configured !== '' ? $configured : null,
                        'per_page' => $perPage !== 40 ? $perPage : null,
                    ])).'#matrix' }}"
                    class="compat-admin-chip {{ $prefix === '' ? 'is-active' : '' }}"
                    role="listitem"
                >
                    <strong>All products</strong>
                    <span>{{ $totalRows }} rows</span>
                </a>
                @foreach ($prefixStats as $stat)
                    @php
                        $key = strtolower(trim((string) $stat->product_prefix));
                        $name = $productNames[$key] ?? null;
                    @endphp
                    <a
                        href="{{ route('admin.compatibility.index', array_filter([
                            'prefix' => $stat->product_prefix,
                            'q' => $q ?: null,
                            'supported' => $supported !== '' ? $supported : null,
                            'configured' => $configured !== '' ? $configured : null,
                            'per_page' => $perPage !== 40 ? $perPage : null,
                        ])).'#matrix' }}"
                        class="compat-admin-chip {{ $prefix === $stat->product_prefix ? 'is-active' : '' }}"
                        role="listitem"
                        title="{{ $name ?: $stat->product_prefix }}"
                    >
                        <strong>{{ strtoupper($stat->product_prefix) }}</strong>
                        @if ($name)
                            <span class="compat-admin-chip__name">{{ $name }}</span>
                        @endif
                        <span>{{ (int) $stat->supported_count }} supported · {{ (int) $stat->total }} total</span>
                    </a>
                @endforeach
            </div>
        </div>
    </section>

    <details class="card mb-3 compat-admin-add" @if ($errors->any()) open @endif>
        <summary class="card-header compat-admin-add__summary">
            <h5 class="mb-0">Add compatibility row</h5>
            <span class="text-muted small">New product / Sage version pair</span>
        </summary>
        <div class="card-body">
            <form method="POST" action="{{ route('admin.compatibility.store') }}" class="compat-admin-add__form">
                @csrf
                <div>
                    <label class="form-label" for="compat-prefix">Product prefix</label>
                    <input id="compat-prefix" name="product_prefix" class="form-control" required maxlength="20" value="{{ old('product_prefix', $prefix) }}" list="compat-prefix-list" placeholder="e.g. ao">
                    <datalist id="compat-prefix-list">
                        @foreach ($prefixStats as $stat)
                            <option value="{{ $stat->product_prefix }}"></option>
                        @endforeach
                    </datalist>
                </div>
                <div>
                    <label class="form-label" for="compat-pver">Product version</label>
                    <input id="compat-pver" name="product_version" class="form-control" maxlength="50" value="{{ old('product_version') }}" placeholder="e.g. 2026H">
                </div>
                <div>
                    <label class="form-label" for="compat-sver">Sage version</label>
                    <input id="compat-sver" name="sage_version" class="form-control" maxlength="50" value="{{ old('sage_version') }}" placeholder="e.g. 2026">
                </div>
                <div class="compat-admin-add__checks">
                    <label class="form-check">
                        <input class="form-check-input" type="checkbox" name="is_currently_supported" value="1" @checked(old('is_currently_supported'))>
                        <span class="form-check-label">Supported</span>
                    </label>
                    <label class="form-check">
                        <input class="form-check-input" type="checkbox" name="is_configured" value="1" @checked(old('is_configured', true))>
                        <span class="form-check-label">Configured</span>
                    </label>
                </div>
                <div>
                    <button class="btn btn-primary w-100" type="submit">Add row</button>
                </div>
            </form>
        </div>
    </details>

    <section class="card" id="matrix">
        <div class="card-header compat-admin-matrix-head">
            <div>
                <h5 class="mb-0">Compatibility matrix</h5>
                <p class="text-muted small mb-0">
                    Showing {{ $rows->firstItem() ?: 0 }}–{{ $rows->lastItem() ?: 0 }} of {{ $filteredCount }}
                    @if ($prefix !== '' || $q !== '' || $supported !== '' || $configured !== '')
                        (filtered)
                    @endif
                </p>
            </div>
        </div>
        <div class="card-body">
            <form class="compat-admin-filters" method="GET" action="{{ route('admin.compatibility.index') }}#matrix">
                <div>
                    <label class="form-label" for="compat-q">Search</label>
                    <input id="compat-q" type="search" name="q" value="{{ $q }}" class="form-control" placeholder="Prefix / product / Sage version" autocomplete="off">
                </div>
                <div>
                    <label class="form-label" for="compat-filter-prefix">Prefix</label>
                    <select id="compat-filter-prefix" name="prefix" class="form-select">
                        <option value="">All prefixes</option>
                        @foreach ($prefixStats as $stat)
                            <option value="{{ $stat->product_prefix }}" @selected($prefix === $stat->product_prefix)>
                                {{ strtoupper($stat->product_prefix) }} ({{ (int) $stat->total }})
                            </option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="form-label" for="compat-supported">Supported</label>
                    <select id="compat-supported" name="supported" class="form-select">
                        <option value="">All</option>
                        <option value="1" @selected($supported === '1')>Supported only</option>
                        <option value="0" @selected($supported === '0')>Not supported</option>
                    </select>
                </div>
                <div>
                    <label class="form-label" for="compat-configured">Configured</label>
                    <select id="compat-configured" name="configured" class="form-select">
                        <option value="">All</option>
                        <option value="1" @selected($configured === '1')>Configured</option>
                        <option value="0" @selected($configured === '0')>Not configured</option>
                    </select>
                </div>
                <div>
                    <label class="form-label" for="compat-per-page">Per page</label>
                    <select id="compat-per-page" name="per_page" class="form-select">
                        @foreach ([25, 40, 50, 100] as $size)
                            <option value="{{ $size }}" @selected($perPage === $size)>{{ $size }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="compat-admin-filters__actions">
                    <button class="btn btn-primary" type="submit">Apply</button>
                    @if ($q !== '' || $prefix !== '' || $supported !== '' || $configured !== '' || $perPage !== 40)
                        <a class="btn btn-outline-secondary" href="{{ route('admin.compatibility.index') }}#matrix">Clear</a>
                    @endif
                </div>
            </form>

            <div class="compat-admin-table" role="table" aria-label="Compatibility matrix">
                <div class="compat-admin-table__head" role="row">
                    <span role="columnheader">ID</span>
                    <span role="columnheader">Prefix</span>
                    <span role="columnheader">Product version</span>
                    <span role="columnheader">Sage version</span>
                    <span role="columnheader">Supported</span>
                    <span role="columnheader">Configured</span>
                    <span role="columnheader">Tiles</span>
                    <span role="columnheader">Actions</span>
                </div>

                @forelse ($rows as $row)
                    <form method="POST" action="{{ route('admin.compatibility.update', $row) }}" class="compat-admin-row" role="row">
                        @csrf
                        @method('PUT')
                        <span class="text-muted" role="cell">#{{ $row->id }}</span>
                        <span role="cell"><input name="product_prefix" class="form-control form-control-sm" value="{{ $row->product_prefix }}" required aria-label="Prefix for row {{ $row->id }}"></span>
                        <span role="cell"><input name="product_version" class="form-control form-control-sm" value="{{ $row->product_version }}" aria-label="Product version for row {{ $row->id }}"></span>
                        <span role="cell"><input name="sage_version" class="form-control form-control-sm" value="{{ $row->sage_version }}" aria-label="Sage version for row {{ $row->id }}"></span>
                        <span role="cell">
                            <label class="form-check compat-admin-row__check mb-0">
                                <input class="form-check-input" type="checkbox" name="is_currently_supported" value="1" @checked($row->is_currently_supported)>
                                <span class="form-check-label">Yes</span>
                            </label>
                        </span>
                        <span role="cell">
                            <label class="form-check compat-admin-row__check mb-0">
                                <input class="form-check-input" type="checkbox" name="is_configured" value="1" @checked($row->is_configured)>
                                <span class="form-check-label">Yes</span>
                            </label>
                        </span>
                        <span role="cell" class="text-muted small">{{ $row->version_contents_count }}</span>
                        <span class="compat-admin-row__actions" role="cell">
                            <a class="btn btn-sm btn-primary" href="{{ route('admin.compatibility.show', $row) }}">Edit tiles</a>
                            <button class="btn btn-sm btn-outline-primary" type="submit">Save</button>
                            <button class="btn btn-sm btn-outline-danger" type="submit" form="del-compat-{{ $row->id }}" onclick="return confirm('Delete row #{{ $row->id }}?')">Delete</button>
                        </span>
                    </form>
                    <form id="del-compat-{{ $row->id }}" method="POST" action="{{ route('admin.compatibility.destroy', $row) }}" class="d-none">
                        @csrf
                        @method('DELETE')
                    </form>
                @empty
                    <p class="text-center text-muted mb-0 py-4">
                        No rows match these filters.
                        <a href="{{ route('admin.compatibility.index') }}#matrix">Clear filters</a>
                        or import with <code>systronics:import-legacy --only=compatibility</code>.
                    </p>
                @endforelse
            </div>

            <div class="compat-admin-pager">
                {{ $rows->links() }}
            </div>
        </div>
    </section>
@endsection

@push('styles')
<style>
    .compat-admin-chips {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
        gap: 0.65rem;
    }
    .compat-admin-chip {
        display: grid;
        gap: 0.12rem;
        padding: 0.75rem 0.85rem;
        border: 1px solid var(--brand-border);
        border-radius: 10px;
        background: var(--brand-surface-raised);
        color: inherit;
        text-decoration: none;
        transition: border-color .15s ease, box-shadow .15s ease;
    }
    .compat-admin-chip strong { font-size: 0.95rem; }
    .compat-admin-chip span { font-size: 0.78rem; color: #6b7a84; }
    .compat-admin-chip__name {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .compat-admin-chip:hover,
    .compat-admin-chip.is-active {
        border-color: var(--brand-primary);
        box-shadow: 0 0 0 1px var(--brand-primary);
    }
    .compat-admin-add__summary {
        list-style: none;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        flex-wrap: wrap;
    }
    .compat-admin-add__summary::-webkit-details-marker { display: none; }
    .compat-admin-add__form {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 0.75rem;
        align-items: end;
    }
    .compat-admin-add__checks {
        display: grid;
        gap: 0.35rem;
        padding-bottom: 0.35rem;
    }
    .compat-admin-matrix-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.75rem;
    }
    .compat-admin-filters {
        display: grid;
        grid-template-columns: minmax(12rem, 1.5fr) repeat(4, minmax(7rem, 1fr)) auto;
        gap: 0.75rem;
        align-items: end;
        margin-bottom: 1rem;
    }
    .compat-admin-filters__actions {
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;
    }
    .compat-admin-table {
        border: 1px solid var(--brand-border);
        border-radius: 10px;
        overflow: hidden;
    }
    .compat-admin-table__head,
    .compat-admin-row {
        display: grid;
        grid-template-columns: 4.5rem 6.5rem minmax(7rem, 1fr) minmax(7rem, 1fr) 5.5rem 5.5rem 3.5rem minmax(14rem, auto);
        gap: 0.5rem;
        align-items: center;
        padding: 0.55rem 0.65rem;
    }
    /* CSRF / method fields must not occupy grid tracks */
    .compat-admin-row > input[type="hidden"] {
        display: none;
    }
    .compat-admin-table__head {
        background: rgba(15, 90, 120, 0.05);
        border-bottom: 1px solid var(--brand-border);
        font-size: 0.78rem;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: #6b7a84;
        font-weight: 650;
    }
    .compat-admin-row {
        border-bottom: 1px solid var(--brand-border);
        margin: 0;
    }
    .compat-admin-row:last-of-type {
        border-bottom: 0;
    }
    .compat-admin-row__check {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        margin: 0;
        white-space: nowrap;
    }
    .compat-admin-row__actions {
        display: flex;
        gap: 0.35rem;
        justify-content: flex-end;
        flex-wrap: wrap;
    }
    .compat-admin-table__head [role="columnheader"]:last-child {
        text-align: right;
    }
    .visually-hidden {
        position: absolute !important;
        width: 1px; height: 1px;
        padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0,0,0,0);
        white-space: nowrap; border: 0;
    }
    #matrix, .compat-admin-pager { scroll-margin-top: 1rem; }
    @media (max-width: 1100px) {
        .compat-admin-filters { grid-template-columns: 1fr 1fr 1fr; }
        .compat-admin-filters__actions { grid-column: 1 / -1; }
        .compat-admin-add__form { grid-template-columns: 1fr 1fr; }
        .compat-admin-table__head { display: none; }
        .compat-admin-row { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 640px) {
        .compat-admin-filters,
        .compat-admin-add__form,
        .compat-admin-row { grid-template-columns: 1fr; }
    }
</style>
@endpush