@extends('layouts.winemaker')

@section('title', 'Vineyard Map')

@push('styles')
<style>
    .vineyard-layout {
        display: grid;
        grid-template-columns: 260px 1fr;
        gap: 2rem;
        min-height: 70vh;
    }

    .action-sidebar {
        background: #ffffff;
        border-radius: 12px;
        padding: 1.5rem;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .action-sidebar h2 {
        font-size: 1.4rem;
        color: #1a365d;
    }

    .action-list {
        display: grid;
        gap: 1.25rem;
    }

    .action-section {
        display: flex;
        flex-direction: column;
        gap: 0.65rem;
    }

    .action-section-title {
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #64748b;
    }

    .action-section-buttons {
        display: grid;
        gap: 0.65rem;
    }

    .action-button {
        padding: 0.85rem 1rem;
        border-radius: 10px;
        border: 1px solid #dce5f3;
        background: #f4f7fb;
        color: #1a365d;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
        text-align: left;
    }

    .action-button:hover,
    .action-button.active {
        background: linear-gradient(135deg, #7fb4e0 0%, #9dcaeb 100%);
        color: #fff;
        border-color: transparent;
    }

    .map-panel {
        background: #ffffff;
        border-radius: 12px;
        padding: 1.5rem;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .map-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .map-secondary-nav {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        align-items: center;
        margin: 0.5rem 0 1rem;
    }

    .map-secondary-nav a {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.45rem 0.85rem;
        border-radius: 999px;
        background: rgba(148, 163, 184, 0.2);
        color: #1e293b;
        text-decoration: none;
        font-size: 0.8rem;
        font-weight: 600;
        transition: background 0.2s ease, color 0.2s ease;
    }

    .map-secondary-nav a:hover {
        background: rgba(37, 99, 235, 0.18);
        color: #1d4ed8;
    }

    .map-secondary-nav a.active {
        background: rgba(37, 99, 235, 0.28);
        color: #1d4ed8;
    }

    .map-canvas-wrapper {
        position: relative;
        flex: 1;
        border: 1px dashed #cbd5e1;
        border-radius: 12px;
        min-height: 520px;
        overflow: hidden;
        background: repeating-linear-gradient(90deg, rgba(99, 102, 241, 0.06) 0, rgba(99, 102, 241, 0.06) 1px, transparent 1px, transparent 96px),
            repeating-linear-gradient(180deg, rgba(99, 102, 241, 0.06) 0, rgba(99, 102, 241, 0.06) 1px, transparent 1px, transparent 96px);
    }

    .map-canvas-wrapper.requires-action {
        animation: actionPulse 0.45s ease;
    }

    @keyframes actionPulse {
        from {
            box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
        }
        to {
            box-shadow: 0 0 0 12px rgba(239, 68, 68, 0);
        }
    }

    .vineyard-map-grid {
        position: absolute;
        top: 0;
        left: 0;
        transform-origin: top left;
        transition: transform 0.05s ease-out;
    }

    .vineyard-map-selection-layer {
        position: absolute;
        inset: 0;
        pointer-events: none;
        user-select: none;
    }

    .map-cell {
        position: absolute;
        border-radius: 12px;
        border: 1px solid rgba(79, 70, 229, 0.35);
        background: rgba(99, 102, 241, 0.18);
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        gap: 0.4rem;
        color: #1a365d;
        box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
        transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease, border-color 0.2s ease;
        cursor: pointer;
        user-select: none;
    }

    .map-cell::after {
        content: '';
        position: absolute;
        inset: 6px;
        border-radius: 8px;
        border: 1px dashed rgba(79, 70, 229, 0.2);
        pointer-events: none;
    }

    .map-cell-count {
        font-size: 1.05rem;
        font-weight: 700;
    }

    .map-cell-variety {
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        opacity: 0.8;
    }

    .map-cell-warning {
        position: absolute;
        inset: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
        font-size: 0.9rem;
        color: #b91c1c;
        background: rgba(239, 68, 68, 0.18);
        border-radius: 10px;
        pointer-events: none;
    }

    .map-cell-warning--pesticide {
        color: #92400e;
        background: rgba(251, 191, 36, 0.25);
    }

    .map-cell-warning [data-role="skull-icon"] {
        font-size: 1.1rem;
    }

    .map-cell.selected {
        background: rgba(59, 130, 246, 0.35);
        border-color: rgba(37, 99, 235, 0.9);
        box-shadow: 0 14px 26px rgba(37, 99, 235, 0.35);
    }

    .map-cell.disabled {
        cursor: not-allowed;
        box-shadow: 0 6px 16px rgba(148, 163, 184, 0.18);
        background: rgba(148, 163, 184, 0.25);
    }

    .map-cell.disabled .map-cell-count,
    .map-cell.disabled .map-cell-variety {
        opacity: 0.5;
    }

    .map-cell.status-inactive {
        background: rgba(148, 163, 184, 0.18);
        border-color: rgba(148, 163, 184, 0.7);
    }

    .map-cell.status-discarded {
        background: rgba(239, 68, 68, 0.25);
        border-color: rgba(239, 68, 68, 0.6);
    }

    .map-cell.status-harvested {
        background: rgba(16, 185, 129, 0.22);
        border-color: rgba(5, 150, 105, 0.6);
    }

    .selection-box {
        position: absolute;
        border: 1px solid rgba(37, 99, 235, 0.85);
        background: rgba(59, 130, 246, 0.2);
        border-radius: 10px;
        box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.35);
        pointer-events: none;
    }

    .map-controls {
        display: flex;
        justify-content: flex-end;
        gap: 0.75rem;
    }

    .map-controls button {
        border: none;
        border-radius: 8px;
        padding: 0.75rem 1.25rem;
        cursor: pointer;
        font-weight: 600;
    }

    .btn-secondary {
        background: #e2e8f0;
        color: #475569;
    }

    .btn-primary {
        background: #2563eb;
        color: #fff;
    }

    .btn-primary:disabled,
    .btn-secondary:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        box-shadow: none;
    }

    .map-action-details {
        display: none;
        flex-direction: column;
        gap: 1.25rem;
        padding: 1rem 1.25rem;
        border: 1px solid #dce5f3;
        border-radius: 12px;
        background: #f8fafc;
        box-shadow: 0 4px 14px rgba(148, 163, 184, 0.12);
        transition: opacity 0.2s ease, transform 0.2s ease;
    }

    .map-action-details.visible {
        display: flex;
    }

    .map-action-date {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1.25rem;
        flex-wrap: wrap;
    }

    .map-action-details-label {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
        font-weight: 700;
        color: #1a365d;
        font-size: 0.9rem;
        margin: 0;
    }

    .map-action-details-hint {
        font-size: 0.75rem;
        color: #64748b;
        font-weight: 500;
    }

    .map-action-details input[type="date"] {
        border: 1px solid #cbd5e1;
        border-radius: 10px;
        padding: 0.65rem 0.85rem;
        font-weight: 600;
        color: #1e293b;
        background: #fff;
        min-width: 12rem;
    }

    .map-action-details input[type="date"]:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .map-action-timeline {
        display: none;
        gap: 1rem;
        flex-wrap: wrap;
    }

    .map-action-timeline.visible {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 1rem;
    }

    .map-timeline-group {
        border: 1px solid #d0ddee;
        border-radius: 10px;
        padding: 0.85rem;
        background: #fff;
        box-shadow: inset 0 1px 0 rgba(148, 163, 184, 0.12);
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .map-timeline-group.active {
        border-color: #2563eb;
        box-shadow: 0 6px 16px rgba(37, 99, 235, 0.16);
    }

    .map-timeline-title {
        display: block;
        font-weight: 700;
        font-size: 0.9rem;
        color: #1e293b;
        margin-bottom: 0.5rem;
    }

    .map-timeline-label {
        display: block;
        font-size: 0.75rem;
        font-weight: 600;
        color: #64748b;
        margin-bottom: 0.25rem;
    }

    .map-timeline-value {
        font-size: 0.8rem;
        color: #0f172a;
        min-height: 1rem;
    }
</style>
@endpush

@section('content')
<div class="vineyard-layout" data-page="vineyard-map-index" data-role="root">
    <aside class="action-sidebar" data-role="sidebar">
        <h2 style="display:flex;align-items:center;gap:0.5rem;">
            Actions
            <span style="position:relative;">
                <button type="button" aria-label="Help" style="background:none;border:none;padding:0;cursor:pointer;">
                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <circle cx="10" cy="10" r="9" stroke="#2563eb" stroke-width="2" fill="#fff"/>
                        <text x="10" y="15" text-anchor="middle" font-size="13" fill="#2563eb" font-family="Arial, sans-serif">?</text>
                    </svg>
                </button>
                <span class="action-tooltip" style="display:none;position:absolute;left:24px;top:0;z-index:10;background:#fff;border:1px solid #2563eb;border-radius:8px;padding:0.7rem 1.1rem;box-shadow:0 4px 16px rgba(37,99,235,0.12);color:#1a365d;font-size:0.95rem;min-width:220px;">
                    Select an action, then choose one or more rows on the map.
                </span>
            </span>
        </h2>

        <div class="action-list">
            @foreach ($actionGroups as $section => $groupedActions)
                <div class="action-section">
                    <h3 class="action-section-title">{{ $section }}</h3>
                    <div class="action-section-buttons">
                        @foreach ($groupedActions as $action)
                            <button type="button" class="action-button" data-action="{{ $action }}">
                                {{ str_replace('-', ' ', ucfirst($action)) }}
                            </button>
                        @endforeach
                    </div>
                </div>
            @endforeach
        </div>
    </aside>

    <section class="map-panel">
        <div class="map-header">
            <div>
                <h2>Field Map
                <span style="position:relative;">
                    <button type="button" aria-label="Help2" style="background:none;border:none;padding:0;cursor:pointer;">
                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <circle cx="10" cy="10" r="9" stroke="#2563eb" stroke-width="2" fill="#fff"/>
                            <text x="10" y="15" text-anchor="middle" font-size="13" fill="#2563eb" font-family="Arial, sans-serif">?</text>
                        </svg>
                    </button>
                    <span class="action-tooltip2" style="display:none;position:absolute;left:24px;top:0;z-index:10;background:#fff;border:1px solid #2563eb;border-radius:8px;padding:0.7rem 1.1rem;box-shadow:0 4px 16px rgba(37,99,235,0.12);color:#1a365d;font-size:0.95rem;min-width:320px;">
                        <p>Zoom: <b>CTRL+scroll</b></p>
                        <p>vertical scroll: <b>scroll</b></p>
                        <p>horizontal scroll: <b>SHIFT+scroll</b></p>
                        <br>
                        <p>Select a row by <b>clicking</b> on it.</p>
                        <p>Select another one by <b>SHIFT+clicking</b> on it.</p>
                        <p>Select multiple by <b>click+dragging</b> with mouse to select the area.</p>
                        <p>Expand the selection by <b>SHIFT+click+dragging</b> with mouse to select the area to add.</p>
                    </span>
                </span>
                </h2>
            </div>
            <div class="map-controls">
                <button class="btn-secondary" data-control="clear-selection" type="button">Clear</button>
                <button class="btn-primary" data-control="next-action" type="button" disabled>Next</button>
            </div>
        </div>
        <div class="map-action-details" data-role="action-details" aria-hidden="true">
            <div class="map-action-date">
                <label class="map-action-details-label" for="map-action-date">
                    Schedule date
                </label>
                <input type="date" id="map-action-date" name="map-action-date" data-control="action-date" disabled>
            </div>
            <div class="map-action-timeline" data-role="action-timeline" aria-hidden="true">
                <div class="map-timeline-group" data-action="pesticide">
                    <span class="map-timeline-title">Pesticide treatments</span>
                    <div>
                        <span class="map-timeline-label">Completed</span>
                        <div class="map-timeline-value" data-timeline="pesticide-completed">None</div>
                    </div>
                    <div style="margin-top:0.5rem;">
                        <span class="map-timeline-label">Planned</span>
                        <div class="map-timeline-value" data-timeline="pesticide-planned">None</div>
                    </div>
                </div>
                <div class="map-timeline-group" data-action="harvest">
                    <span class="map-timeline-title">Harvests</span>
                    <div>
                        <span class="map-timeline-label">Completed</span>
                        <div class="map-timeline-value" data-timeline="harvest-completed">None</div>
                    </div>
                    <div style="margin-top:0.5rem;">
                        <span class="map-timeline-label">Planned</span>
                        <div class="map-timeline-value" data-timeline="harvest-planned">None</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="map-secondary-nav" aria-label="Related vineyard navigation">
            <a href="{{ route('vineyard.map') }}" class="active" aria-current="page">Map Overview</a>
            <a href="{{ route('vineyard.map.edit') }}">Map Editor</a>
            <a href="{{ route('vineyard-rows.index') }}">Row Directory</a>
        </div>
        <div class="map-canvas-wrapper" data-role="map-container"></div>
    </section>
</div>

@php
    $vineyardMapRoutes = [
        'watering' => route('plan.watering'),
        'pruning' => route('plan.pruning'),
        'fertilisation' => route('plan.fertilisation'),
        'pesticide' => route('plan.pesticide'),
        'harvest' => route('plan.harvest'),
        'add-plants' => route('vineyard.addPlants'),
        'discard-plants' => route('vineyard.rows.discard'),
    ];
@endphp

<script type="application/json" id="vineyard-map-rows">@json($rows)</script>
<script type="application/json" id="vineyard-map-routes">@json($vineyardMapRoutes)</script>
@endsection