<?php
require __DIR__ . '/includes/functions.php';

$id = isset($_GET['id']) ? $_GET['id'] : '';
$product = find_product($id);

if (!$product) {
    http_response_code(404);
    $currentPage = 'home';
    $pageTitle = 'Sofa not found | Furnify';
    require __DIR__ . '/includes/header.php';
    ?>
    <section class="page-section">
        <div class="container narrow">
            <p class="eyebrow">Not found</p>
            <h1>Hindi makita ang sofa.</h1>
            <p class="muted-copy">Bumalik sa store para pumili ng available na model.</p>
            <a href="index.php#catalog" class="btn btn-primary">Back to Store</a>
        </div>
    </section>
    <?php
    require __DIR__ . '/includes/footer.php';
    exit;
}

$related = related_products($product['id']);
$currentPage = 'home';
$pageTitle = $product['name'] . ' | Furnify';
$dimensionsCm = (isset($product['dimensions_cm']) && is_array($product['dimensions_cm'])) ? $product['dimensions_cm'] : array('width' => 0, 'depth' => 0, 'height' => 0);
$productWidthCm = (int) array_get($dimensionsCm, 'width', 0);
$productDepthCm = (int) array_get($dimensionsCm, 'depth', 0);
$productHeightCm = (int) array_get($dimensionsCm, 'height', 0);
$arClearanceCm = 30;
$arFloorOffsetCm = (float) array_get($product, 'ar_floor_offset_cm', 0);

require __DIR__ . '/includes/header.php';
?>

<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>

<section class="product-detail-section">
    <div class="container">
        <nav class="breadcrumb-line" aria-label="breadcrumb">
            <a href="index.php">Home</a>
            <i class="bi bi-chevron-right" aria-hidden="true"></i>
            <a href="index.php#catalog">Catalog</a>
            <i class="bi bi-chevron-right" aria-hidden="true"></i>
            <span><?= e($product['name']) ?></span>
        </nav>

        <div class="row g-4 align-items-start">
            <div class="col-lg-6">
                <div class="detail-media premium-media">
                    <?= product_image($product, 'detail-image', false) ?>
                    <div class="floating-badge"><i class="bi bi-badge-ar" aria-hidden="true"></i> AR-ready</div>
                </div>
                <div class="detail-thumbs" aria-label="Product highlights">
                    <button type="button" class="active"><?= product_image($product, 'thumb-image') ?></button>
                    <button type="button"><i class="bi bi-rulers" aria-hidden="true"></i><span><?= e($product['dimensions']) ?></span></button>
                    <button type="button"><i class="bi bi-shield-check" aria-hidden="true"></i><span><?= e($product['warranty']) ?></span></button>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="detail-copy premium-panel">
                    <div class="d-flex justify-content-between align-items-start gap-3">
                        <div>
                            <p class="eyebrow"><?= e($product['collection']) ?> collection</p>
                            <h1><?= e($product['name']) ?></h1>
                        </div>
                        <div class="rating-pill"><i class="bi bi-star-fill" aria-hidden="true"></i><?= e($product['rating']) ?></div>
                    </div>
                    <p class="lead"><?= e($product['tagline']) ?></p>
                    <div class="detail-price-row">
                        <div class="detail-price"><?= money($product['price']) ?></div>
                        <del><?= money($product['compare_at']) ?></del>
                    </div>
                    <div class="badge-row">
                        <?php foreach ($product['badges'] as $badge): ?>
                            <span><?= e($badge) ?></span>
                        <?php endforeach; ?>
                    </div>

                    <div class="option-box">
                        <label class="form-label">Available colors</label>
                        <div class="swatch-row" aria-label="Available colors">
                            <?php foreach ($product['swatches'] as $swatch): ?>
                                <span class="swatch" style="--swatch: <?= e($swatch['hex']) ?>" title="<?= e($swatch['label']) ?>"></span>
                            <?php endforeach; ?>
                        </div>
                    </div>

                    <dl class="detail-specs">
                        <div><dt>Seats</dt><dd><?= e($product['seats']) ?></dd></div>
                        <div><dt>Dimensions</dt><dd><?= e($product['dimensions']) ?></dd></div>
                        <div><dt>Material</dt><dd><?= e($product['material']) ?></dd></div>
                        <div><dt>Lead time</dt><dd><?= e($product['lead_time']) ?></dd></div>
                        <div><dt>Status</dt><dd><?= e($product['stock_status']) ?></dd></div>
                    </dl>

                    <div class="buy-box">
                        <div>
                            <label for="product-quantity" class="form-label">Quantity</label>
                            <input type="number" min="1" max="25" value="1" class="form-control qty-input" id="product-quantity">
                        </div>
                        <button class="btn btn-primary btn-lg" type="button"
                                data-add-to-cart
                                data-qty-input="product-quantity"
                                data-id="<?= e($product['id']) ?>"
                                data-name="<?= e($product['name']) ?>"
                                data-price="<?= e((string) $product['price']) ?>"
                                data-image="<?= e($product['image']) ?>"
                                data-dimensions="<?= e($product['dimensions']) ?>">
                            <i class="bi bi-bag-plus" aria-hidden="true"></i>
                            Add to Cart
                        </button>
                    </div>

                    <div class="service-list">
                        <span><i class="bi bi-truck" aria-hidden="true"></i> Delivery quote after inquiry</span>
                        <span><i class="bi bi-credit-card" aria-hidden="true"></i> COD / GCash / bank transfer options</span>
                        <span><i class="bi bi-chat-dots" aria-hidden="true"></i> Notes for fabric and room measurement</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="ar-section">
    <div class="container">
        <div class="section-heading split-heading">
            <div>
                <p class="eyebrow">True-size augmented reality</p>
                <h2>Preview <?= e($product['name']) ?> in actual sofa size</h2>
                <p class="muted-copy mb-0">AR is locked to real scale, so the buyer can check if the sofa footprint matches the available space at home.</p>
            </div>
            <a href="cart.php" class="btn btn-outline-primary"><i class="bi bi-bag-check" aria-hidden="true"></i> Open Cart</a>
        </div>
        <div class="ar-shell">
            <div class="ar-viewer-wrap">
                <model-viewer
                    src="<?= e($product['model']) ?>"
                    alt="True-size 3D model of <?= e($product['name']) ?>"
                    ar
                    ar-modes="webxr scene-viewer quick-look"
                    ar-scale="fixed"
                    ar-placement="floor"
                    xr-environment
                    camera-controls
                    auto-rotate
                    shadow-intensity="0.75"
                    exposure="0.9"
                    environment-image="neutral"
                    poster="<?= e(image_webp($product['image']) ?: $product['image']) ?>">
                    <button slot="ar-button" class="btn btn-primary ar-button">
                        <i class="bi bi-badge-ar" aria-hidden="true"></i>
                        View actual size in your space
                    </button>
                </model-viewer>
                <div class="ar-scale-note">
                    <i class="bi bi-rulers" aria-hidden="true"></i>
                    <span>Fixed AR scale: <?= e($product['dimensions']) ?></span>
                </div>
            </div>
            <div class="ar-details">
                <h3>Actual size guide</h3>
                <div class="size-grid" aria-label="Actual sofa dimensions">
                    <div><span>Width</span><strong><?= e($productWidthCm) ?> cm</strong></div>
                    <div><span>Depth</span><strong><?= e($productDepthCm) ?> cm</strong></div>
                    <div><span>Height</span><strong><?= e($productHeightCm) ?> cm</strong></div>
                </div>
                <p class="muted-copy">For better comfort, allow at least <?= e($arClearanceCm) ?>cm extra clearance around the sofa. Add more space if may center table or walkway sa harap.</p>

                <div class="room-fit-card"
                     data-room-fit
                     data-sofa-width-cm="<?= e($productWidthCm) ?>"
                     data-sofa-depth-cm="<?= e($productDepthCm) ?>"
                     data-clearance-cm="<?= e($arClearanceCm) ?>">
                    <div class="fit-card-heading">
                        <i class="bi bi-house-check" aria-hidden="true"></i>
                        <div>
                            <strong>Room fit checker</strong>
                            <span>Ilagay ang available space ng buyer.</span>
                        </div>
                    </div>
                    <div class="row g-2">
                        <div class="col-6">
                            <label class="form-label" for="room-width-<?= e($product['id']) ?>">Space width cm</label>
                            <input type="number" min="1" inputmode="numeric" class="form-control" id="room-width-<?= e($product['id']) ?>" data-room-width placeholder="e.g. 320">
                        </div>
                        <div class="col-6">
                            <label class="form-label" for="room-depth-<?= e($product['id']) ?>">Space depth cm</label>
                            <input type="number" min="1" inputmode="numeric" class="form-control" id="room-depth-<?= e($product['id']) ?>" data-room-depth placeholder="e.g. 220">
                        </div>
                    </div>
                    <div class="fit-result neutral" data-fit-result>
                        Enter room size to check if this sofa will fit comfortably.
                    </div>
                </div>

                <div class="ar-calibration-card">
                    <div class="calibration-heading">
                        <i class="bi bi-crosshair" aria-hidden="true"></i>
                        <div>
                            <strong>AR floor calibration</strong>
                            <span>Model offset: <?= e($arFloorOffsetCm) ?>cm</span>
                        </div>
                    </div>
                    <p class="muted-copy mb-0">Do not let buyers manually raise or lower the sofa in AR. For accurate selling, fix the 3D model instead: bottom of sofa must sit exactly on the GLB floor line, units must be meters, and product dimensions must match the real sofa.</p>
                </div>

                <ul class="ar-tip-list">
                    <li>Use AR on the actual floor area where the sofa will be placed.</li>
                    <li>Keep camera steady and scan the floor first before placing the sofa.</li>
                    <li>If the sofa floats or sinks, adjust the GLB model height/origin before uploading it.</li>
                    <li>For final orders, still confirm actual doorway, hallway, and elevator measurements.</li>
                </ul>
            </div>
        </div>
    </div>
</section>

<section class="catalog-section pt-0">
    <div class="container">
        <div class="section-heading">
            <p class="eyebrow">You may also like</p>
            <h2>Related designs</h2>
        </div>
        <div class="row g-4">
            <?php foreach ($related as $item): ?>
                <div class="col-md-6 col-xl-4">
                    <article class="product-card h-100 compact-card">
                        <a href="product.php?id=<?= e($item['id']) ?>" class="product-image-link"><?= product_image($item) ?></a>
                        <div class="product-body">
                            <p class="product-collection"><?= e($item['collection']) ?></p>
                            <h3><?= e($item['name']) ?></h3>
                            <p class="product-tagline"><?= e($item['tagline']) ?></p>
                            <div class="product-actions single">
                                <a href="product.php?id=<?= e($item['id']) ?>" class="btn btn-outline-primary">View Details</a>
                            </div>
                        </div>
                    </article>
                </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>

<?php require __DIR__ . '/includes/footer.php'; ?>
