@extends('layouts.app')
@section('page-title', 'Projects')

@push('page-css')
<style>
.projects-page { max-width: 1100px; margin: 0 auto; padding: 24px 20px; }
.projects-page h1 { font-size: 1.6rem; margin: 0 0 6px 0; color: var(--brand-text, #333); }
.projects-page .page-desc { color: #666; font-size: 0.95rem; margin: 0 0 24px 0; }

.projects-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 12px; flex-wrap: wrap; }
.projects-count { font-size: 0.9rem; color: #888; }
.projects-search { padding: 8px 12px; border: 1px solid var(--brand-ui-border, #e0e0e0); border-radius: var(--brand-border-radius, 6px); font-size: 0.9rem; width: 260px; }
.projects-search:focus { outline: none; border-color: var(--brand-primary, #4CAF50); }

.project-list { display: flex; flex-direction: column; gap: 12px; }

.project-card {
    background: var(--brand-bg-card, #fff);
    border: 1px solid var(--brand-ui-border, #e0e0e0);
    border-radius: var(--brand-border-radius, 6px);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.project-card:hover {
    border-color: var(--brand-primary, #4CAF50);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.project-thumb {
    width: 100px;
    height: 70px;
    flex-shrink: 0;
    border-radius: 4px;
    background: #f8f9fa;
    border: 1px solid #e8e8e8;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.project-thumb canvas { display: block; }

.project-info { flex: 1; min-width: 0; }
.project-name { font-weight: 600; font-size: 1rem; color: var(--brand-text, #333); margin: 0 0 4px 0; }
.project-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 0.82rem; color: #888; }
.project-meta-item { display: flex; align-items: center; gap: 4px; }

.project-status {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
}
.project-status.draft { background: #FFF3E0; color: #E65100; }
.project-status.quoted { background: #E3F2FD; color: #1565C0; }
.project-status.accepted { background: #E8F5E9; color: #2E7D32; }
.project-status.completed { background: #F3E5F5; color: #7B1FA2; }

.project-actions { display: flex; gap: 8px; flex-shrink: 0; }

.proj-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    border: 2px solid #ddd;
    border-radius: 6px;
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    color: #555;
    text-decoration: none;
    transition: all 0.3s ease;
}
.proj-btn:hover { background: #f5f5f5; border-color: #bbb; }
.proj-btn.primary { color: #2196F3; border-color: #2196F3; }
.proj-btn.primary:hover { background: rgba(33, 150, 243, 0.08); }
.proj-btn.copy { color: #FF9800; border-color: #FF9800; }
.proj-btn.copy:hover { background: rgba(255, 152, 0, 0.08); }
.proj-btn.danger { color: #f44336; border-color: #f44336; }
.proj-btn.danger:hover { background: rgba(244, 67, 54, 0.08); }

.project-notes { font-size: 0.82rem; color: #777; font-style: italic; margin-top: 4px; }

.project-details { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px; }
.project-chip { font-size: 0.78rem; padding: 2px 8px; background: #f5f5f5; border-radius: 10px; color: #666; }

.empty-projects {
    text-align: center;
    padding: 60px 20px;
    color: #888;
    background: var(--brand-bg-card, #fff);
    border: 1px solid var(--brand-ui-border, #e0e0e0);
    border-radius: var(--brand-border-radius, 6px);
}
.empty-projects svg { margin-bottom: 12px; color: #ccc; }
.empty-projects h3 { color: var(--brand-text, #333); margin: 0 0 8px 0; }
.empty-projects p { margin: 0 0 16px 0; }

@media (max-width: 768px) {
    .project-card { flex-direction: column; align-items: flex-start; }
    .project-thumb { width: 100%; height: 80px; }
    .project-thumb canvas { width: 100%; height: 100%; }
    .project-actions { width: 100%; }
    .proj-btn { flex: 1; justify-content: center; }
    .projects-search { width: 100%; }
}
</style>
@endpush

@section('content')
<div class="projects-page">
    <h1>Projects</h1>
    <p class="page-desc">View and manage all your saved decking projects.</p>

    <div class="projects-toolbar">
        <span class="projects-count">{{ $projects->count() }} project{{ $projects->count() !== 1 ? 's' : '' }}</span>
        @if($projects->count() > 3)
            <input type="text" class="projects-search" id="projectSearch" placeholder="Search projects...">
        @endif
    </div>

    @if($projects->isEmpty())
        <div class="empty-projects">
            <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
            <h3>No projects yet</h3>
            <p>Create your first project in the Deck Estimator.</p>
            <a href="{{ route('estimator') }}" class="proj-btn primary">Open Deck Estimator</a>
        </div>
    @else
        <div class="project-list" id="projectList">
            @foreach($projects as $project)
                @php
                    // deck_areas is a flat form-data object, not an array of areas
                    $data = is_array($project->deck_areas) ? $project->deck_areas : [];
                    $savedAreas = $data['savedDeckAreas'] ?? [];
                    $areaCount = count($savedAreas);

                    // Build dimensions text — check savedDeckAreas first, fallback to top-level
                    $dims = '';
                    $dimParts = [];
                    if ($areaCount > 0) {
                        foreach ($savedAreas as $area) {
                            $fd = $area['formData'] ?? [];
                            $l = $fd['deckLength'] ?? null;
                            $w = $fd['deckWidth'] ?? null;
                            if ($l && $w) {
                                $dimParts[] = number_format($l / 1000, 1) . 'm × ' . number_format($w / 1000, 1) . 'm';
                            }
                        }
                        $dims = $areaCount === 1 ? ($dimParts[0] ?? '') : implode('  +  ', $dimParts);
                    }
                    if (!$dims) {
                        $l = $data['deckLength'] ?? null;
                        $w = $data['deckWidth'] ?? null;
                        $unit = $data['currentUnit'] ?? 'mm';
                        if ($l && $w) {
                            if ($unit === 'mm' && $l >= 1000) {
                                $dims = number_format($l / 1000, 1) . 'm × ' . number_format($w / 1000, 1) . 'm';
                            } else {
                                $dims = $l . ' × ' . $w . ' ' . $unit;
                            }
                        }
                    }

                    // Extract board info — top-level first, then first savedDeckArea with data
                    $mfr = $data['manufacturer'] ?? '';
                    $boardType = $data['boardType'] ?? '';
                    $boardColour = $data['boardColour'] ?? '';
                    if (!$mfr && !$boardType && $areaCount > 0) {
                        foreach ($savedAreas as $area) {
                            $fd = $area['formData'] ?? [];
                            if (!empty($fd['manufacturer']) || !empty($fd['boardType'])) {
                                $mfr = $fd['manufacturer'] ?? '';
                                $boardType = $fd['boardType'] ?? '';
                                $boardColour = $fd['boardColour'] ?? '';
                                break;
                            }
                        }
                    }
                    $boardText = collect([$mfr ? ucfirst($mfr) : null, $boardType, $boardColour])
                        ->filter()->implode(' — ');

                    // Notes
                    $notes = $data['projectNotes'] ?? '';

                    // Client info
                    $clientName = $project->client_name;
                @endphp

                <div class="project-card" data-name="{{ strtolower($project->name) }}" data-client="{{ strtolower($clientName ?? '') }}" data-project-id="{{ $project->id }}">
                    <div class="project-thumb" id="thumb-{{ $project->id }}"></div>
                    <div class="project-info">
                        <h3 class="project-name">{{ $project->name }}</h3>
                        <div class="project-meta">
                            <span class="project-status {{ $project->status }}">{{ $project->status }}</span>
                            @if($dims)
                                <span class="project-meta-item">📐 {{ $dims }}</span>
                            @endif
                            @if($boardText)
                                <span class="project-meta-item">🪵 {{ $boardText }}</span>
                            @endif
                            @if($clientName)
                                <span class="project-meta-item">👤 {{ $clientName }}</span>
                            @endif
                            <span class="project-meta-item">Saved {{ $project->updated_at->diffForHumans() }}</span>
                        </div>
                        @if($notes)
                            <p class="project-notes">{{ Str::limit($notes, 80) }}</p>
                        @endif
                    </div>
                    <div class="project-actions">
                        <a href="{{ route('estimator') }}?loadProject={{ urlencode($project->name) }}" class="proj-btn primary">Load</a>
                        <button class="proj-btn copy" onclick="copyProject({{ $project->id }}, '{{ e($project->name) }}')">Copy</button>
                        <button class="proj-btn danger" onclick="deleteProject({{ $project->id }}, '{{ e($project->name) }}')">Delete</button>
                    </div>
                </div>
            @endforeach
        </div>
    @endif
</div>
@endsection

@push('page-scripts')
<script>
var PROJECT_DATA = @json($projects->pluck('deck_areas', 'id'));
var CSRF = window.CSRF_TOKEN;
var headers = { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF, 'Accept': 'application/json' };

// Search filter
var searchInput = document.getElementById('projectSearch');
if (searchInput) {
    searchInput.addEventListener('input', function() {
        var query = this.value.toLowerCase();
        document.querySelectorAll('.project-card').forEach(function(card) {
            var name = card.dataset.name || '';
            var client = card.dataset.client || '';
            card.style.display = (name.includes(query) || client.includes(query)) ? '' : 'none';
        });
    });
}

function renameProject(id, currentName) {
    var newName = prompt('Rename project:', currentName);
    if (!newName || newName.trim() === '' || newName.trim() === currentName) return;

    fetch('/projects/' + id, {
        method: 'PUT',
        headers: headers,
        body: JSON.stringify({ name: newName.trim() })
    }).then(function(r) { return r.json(); }).then(function(data) {
        if (data.project) {
            location.reload();
        }
    }).catch(function(err) {
        alert('Failed to rename project.');
    });
}

function copyProject(id, name) {
    var copyName = prompt('Copy project as:', name + ' (copy)');
    if (!copyName || copyName.trim() === '') return;

    fetch('/projects/' + id + '/copy', {
        method: 'POST',
        headers: headers,
        body: JSON.stringify({ name: copyName.trim() })
    }).then(function(r) { return r.json(); }).then(function(data) {
        if (data.project) {
            location.reload();
        } else if (data.error) {
            alert(data.error);
        }
    }).catch(function(err) {
        alert('Failed to copy project.');
    });
}

function deleteProject(id, name) {
    if (!confirm('Delete "' + name + '"? This cannot be undone.')) return;

    fetch('/projects/' + id, {
        method: 'DELETE',
        headers: headers
    }).then(function(r) { return r.json(); }).then(function(data) {
        if (data.message) {
            location.reload();
        }
    }).catch(function(err) {
        alert('Failed to delete project.');
    });
}

// Draw deck preview thumbnails
function drawThumb(container, data) {
    if (!container || !data) return;

    var cw = 100, ch = 70;

    // Gather areas to draw
    var areas = [];
    var savedAreas = data.savedDeckAreas || [];
    if (savedAreas.length > 0) {
        savedAreas.forEach(function(a) {
            var fd = a.formData || {};
            if (fd.deckLength && fd.deckWidth) {
                areas.push(fd);
            }
        });
    }
    // Fallback to top-level
    if (areas.length === 0 && data.deckLength && data.deckWidth) {
        areas.push(data);
    }
    if (areas.length === 0) return;

    var canvas = document.createElement('canvas');
    canvas.width = cw;
    canvas.height = ch;
    var ctx = canvas.getContext('2d');

    if (areas.length === 1) {
        // Single area — draw centered
        drawArea(ctx, areas[0], 4, 4, cw - 8, ch - 8);
    } else {
        // Multiple areas — tile them
        var cols = Math.min(areas.length, 3);
        var rows = Math.ceil(areas.length / cols);
        var cellW = (cw - 4) / cols;
        var cellH = (ch - 4) / rows;
        areas.forEach(function(fd, i) {
            var col = i % cols;
            var row = Math.floor(i / cols);
            drawArea(ctx, fd, 2 + col * cellW + 1, 2 + row * cellH + 1, cellW - 2, cellH - 2);
        });
    }

    container.appendChild(canvas);
}

function drawArea(ctx, fd, x, y, w, h) {
    var deckL = parseFloat(fd.deckLength) || 3000;
    var deckW = parseFloat(fd.deckWidth) || 3000;
    var boardWidth = parseFloat(fd.boardWidth) || 138;
    var boardGap = parseFloat(fd.boardGap) || 6;
    var boardDir = fd.boardDirection || 'length';

    // Scale to fit box preserving aspect ratio
    var scale = Math.min(w / deckL, h / deckW);
    var sw = deckL * scale;
    var sh = deckW * scale;
    var ox = x + (w - sw) / 2;
    var oy = y + (h - sh) / 2;

    // Background
    ctx.fillStyle = '#e3f2fd';
    ctx.fillRect(ox, oy, sw, sh);

    // Board lines
    ctx.strokeStyle = '#2196f3';
    ctx.lineWidth = 0.5;
    var bw = (boardWidth + boardGap) * scale;
    if (bw > 1) {
        if (boardDir === 'length') {
            for (var i = 0; i * bw < sh; i++) {
                ctx.beginPath();
                ctx.moveTo(ox, oy + i * bw);
                ctx.lineTo(ox + sw, oy + i * bw);
                ctx.stroke();
            }
        } else {
            for (var i = 0; i * bw < sw; i++) {
                ctx.beginPath();
                ctx.moveTo(ox + i * bw, oy);
                ctx.lineTo(ox + i * bw, oy + sh);
                ctx.stroke();
            }
        }
    }

    // Frame
    ctx.strokeStyle = '#2563eb';
    ctx.lineWidth = 1.5;
    ctx.strokeRect(ox, oy, sw, sh);
}

// Render all thumbnails on load
document.querySelectorAll('.project-card').forEach(function(card) {
    var thumb = card.querySelector('.project-thumb');
    var pid = card.getAttribute('data-project-id');
    var data = PROJECT_DATA[pid];
    if (data) drawThumb(thumb, data);
});
</script>
@endpush