<?php
/**
 * TryOnCloud Modal v3.2
 * Fully isolated - all CSS and JS embedded to prevent any conflicts
 * Security: API key never in DOM. All SaaS calls proxied via WP AJAX.
 */
if (!defined('ABSPATH')) exit;
?>

<div id="toc-modal" style="display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:999999;" role="dialog" aria-modal="true">
    <div id="toc-backdrop" style="position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);"></div>
    <div id="toc-dialog" style="position:relative;margin:auto;width:100%;max-width:420px;max-height:90vh;background:#fff;border-radius:16px;box-shadow:0 25px 50px -12px rgba(0,0,0,0.25);display:flex;flex-direction:column;overflow:hidden;">
        
        <!-- Header -->
        <div style="display:flex;align-items:flex-start;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #e5e7eb;">
            <div>
                <h2 style="margin:0;font-size:17px;font-weight:700;color:#111;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;">Try It On</h2>
                <p style="margin:2px 0 0;font-size:13px;color:#6b7280;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;">See how it looks on you</p>
            </div>
            <div style="display:flex;gap:8px;align-items:center;">
                <button type="button" id="toc-history-btn" style="display:flex;align-items:center;gap:5px;padding:5px 10px;background:#f0fdf4;border:1px solid #86efac;border-radius:16px;cursor:pointer;font-size:11px;font-weight:600;color:#059669;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;" aria-label="History">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" style="flex-shrink:0;"><path d="M3 12a9 9 0 1 0 3-6.7"/><polyline points="3 3 3 9 9 9"/><path d="M12 7v5l3 3"/></svg>
                    <span id="toc-history-count">History</span>
                </button>
                <button type="button" id="toc-close-btn" style="width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:#f5f5f5;border:1px solid #e5e7eb;border-radius:50%;cursor:pointer;font-size:18px;font-weight:bold;color:#6b7280;line-height:1;font-family:Arial,sans-serif;" aria-label="Close">&times;</button>
            </div>
        </div>

        <!-- Remaining try-ons bar — only shown when merchant has set a limit -->
        <div id="toc-limit-bar" style="display:none;align-items:center;justify-content:center;gap:6px;padding:7px 20px;border-bottom:1px solid #fed7aa;background:#fff8f1;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;">
            <svg id="toc-limit-bar-icon" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#ea580c" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink:0;"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
            <span id="toc-limit-bar-text" style="font-size:12px;font-weight:600;color:#c2410c;"></span>
        </div>

        <!-- Content Area -->
        <div id="toc-content" style="flex:1;overflow-y:auto;padding:24px 20px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;">
            
            <!-- Step 1: Upload -->
            <div id="toc-step-upload" style="display:flex;flex-direction:column;align-items:center;text-align:center;">
                <h3 style="margin:0 0 8px;font-size:20px;font-weight:600;color:#111;">See it on you instantly</h3>
                <p style="margin:0 0 24px;font-size:14px;color:#6b7280;max-width:280px;line-height:1.5;">Upload a clear <strong style="color:#ea580c;font-weight:700;">full body photo</strong> to preview this item on your body.</p>
                
                <div style="margin-bottom:24px;">
                    <span style="display:block;font-size:10px;font-weight:600;letter-spacing:0.5px;color:#9ca3af;text-transform:uppercase;margin-bottom:8px;">Selected Item</span>
                    <img id="toc-product-img" src="" alt="Product" style="width:100px;height:100px;object-fit:cover;border-radius:12px;border:2px solid #e5e7eb;background:#f9fafb;" />
                </div>

                <button type="button" id="toc-upload-btn" style="display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;max-width:300px;padding:16px 24px;border:none;border-radius:50px;background:linear-gradient(135deg,#FF6A00 0%,#FF8533 100%);color:#fff;font-size:15px;font-weight:600;cursor:pointer;box-shadow:0 4px 14px rgba(255,106,0,0.35);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;">
                    <span style="font-size:18px;">&#x2191;</span>
                    <span>Upload Photo</span>
                </button>
                <input type="file" id="toc-file-input" accept="image/jpeg,image/png,image/webp,image/heic,image/heif,.heic,.heif" style="display:none !important;" />
                
                <div style="margin-top:24px;padding:12px 16px;background:#f0fdf4;border-radius:8px;max-width:300px;">
                    <p style="font-size:12px;color:#166534;margin:0;line-height:1.4;">Your photo is processed securely and auto-deleted. We never store personal images.</p>
                </div>
                
                <p style="font-size:10px;color:#9ca3af;text-align:center;line-height:1.5;margin-top:16px;">
                    <a id="toc-terms-link" href="#" target="_blank" rel="noopener" style="color:#6b7280;text-decoration:underline;">Terms</a> · 
                    <a id="toc-privacy-link" href="#" target="_blank" rel="noopener" style="color:#6b7280;text-decoration:underline;">Privacy</a>
                </p>
            </div>

            <!-- Step 2: Confirm -->
            <div id="toc-step-confirm" style="display:none;flex-direction:column;align-items:center;text-align:center;">
                <h3 style="margin:0 0 8px;font-size:20px;font-weight:600;color:#111;">Ready to try on?</h3>
                <p style="margin:0 0 24px;font-size:14px;color:#6b7280;line-height:1.5;">We'll combine your photo with the product.</p>
                
                <div style="display:flex;align-items:center;gap:16px;margin-bottom:24px;">
                    <div style="text-align:center;">
                        <span style="display:block;font-size:10px;font-weight:600;letter-spacing:0.5px;color:#9ca3af;text-transform:uppercase;margin-bottom:8px;">Your Photo</span>
                        <img id="toc-user-preview" src="" alt="Your photo" style="width:120px;height:150px;object-fit:cover;border-radius:12px;border:2px solid #e5e7eb;background:#f9fafb;" />
                    </div>
                    <div style="color:#FF6A00;font-size:24px;font-family:Arial,sans-serif;">&#x21C4;</div>
                    <div style="text-align:center;">
                        <span style="display:block;font-size:10px;font-weight:600;letter-spacing:0.5px;color:#9ca3af;text-transform:uppercase;margin-bottom:8px;">Product</span>
                        <img id="toc-product-confirm" src="" alt="Product" style="width:120px;height:150px;object-fit:cover;border-radius:12px;border:2px solid #e5e7eb;background:#f9fafb;" />
                    </div>
                </div>

                <button type="button" id="toc-generate-btn" style="display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;max-width:300px;padding:16px 24px;border:none;border-radius:50px;background:linear-gradient(135deg,#FF6A00 0%,#FF8533 100%);color:#fff;font-size:15px;font-weight:600;cursor:pointer;box-shadow:0 4px 14px rgba(255,106,0,0.35);">
                    <span>Try It On Now</span>
                </button>
                <button type="button" id="toc-change-btn" style="background:none;border:none;padding:12px;margin-top:8px;color:#6b7280;font-size:13px;cursor:pointer;text-decoration:underline;">Change Photo</button>
                <p style="font-size:10px;color:#9ca3af;text-align:center;margin-top:8px;">By continuing you agree to this store's <a id="toc-confirm-terms-link" href="#" target="_blank" rel="noopener" style="color:#6b7280;">Terms</a> and <a id="toc-confirm-privacy-link" href="#" target="_blank" rel="noopener" style="color:#6b7280;">Privacy Policy</a>.</p>
            </div>

            <!-- Step 3: Processing -->
            <div id="toc-step-processing" style="display:none;flex-direction:column;align-items:center;text-align:center;padding:16px 0 8px;">
                <div style="position:relative;display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:20px;width:100%;">
                    <div style="position:relative;flex-shrink:0;">
                        <img id="toc-proc-user" src="" alt="Your photo" style="width:100px;height:126px;object-fit:cover;border-radius:14px;border:2px solid #e5e7eb;display:block;" />
                        <div id="toc-scan-line" style="position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,transparent,#FF6A00,transparent);border-radius:2px;opacity:0.9;"></div>
                    </div>
                    <div style="display:flex;flex-direction:column;align-items:center;gap:6px;flex-shrink:0;">
                        <div style="display:flex;gap:5px;align-items:center;">
                            <div id="toc-dot-1" style="width:8px;height:8px;border-radius:50%;background:#FF6A00;opacity:0.3;"></div>
                            <div id="toc-dot-2" style="width:8px;height:8px;border-radius:50%;background:#FF6A00;opacity:0.3;"></div>
                            <div id="toc-dot-3" style="width:8px;height:8px;border-radius:50%;background:#FF6A00;opacity:0.3;"></div>
                        </div>
                        <div style="width:36px;height:36px;border-radius:50%;background:#fff7ed;border:2px solid #FF6A00;display:flex;align-items:center;justify-content:center;font-size:16px;font-family:Arial,sans-serif;">&#x21C4;</div>
                    </div>
                    <div style="position:relative;flex-shrink:0;">
                        <img id="toc-proc-product" src="" alt="Product" style="width:100px;height:126px;object-fit:cover;border-radius:14px;border:2px solid #e5e7eb;display:block;" />
                        <div id="toc-shimmer" style="position:absolute;inset:0;border-radius:14px;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,0.45) 50%,transparent 60%);"></div>
                    </div>
                </div>
                <h3 id="toc-proc-title" style="font-size:17px;font-weight:700;margin:0 0 4px;color:#1a1a1a;min-height:24px;">Analyzing your photo...</h3>
                <p id="toc-proc-subtitle" style="font-size:13px;color:#6b7280;margin:0 0 16px;min-height:18px;">Reading body proportions</p>
                <div style="display:flex;gap:4px;margin-bottom:12px;">
                    <div id="toc-seg-0" style="width:40px;height:5px;border-radius:3px;background:#e5e7eb;"></div>
                    <div id="toc-seg-1" style="width:40px;height:5px;border-radius:3px;background:#e5e7eb;"></div>
                    <div id="toc-seg-2" style="width:40px;height:5px;border-radius:3px;background:#e5e7eb;"></div>
                    <div id="toc-seg-3" style="width:40px;height:5px;border-radius:3px;background:#e5e7eb;"></div>
                    <div id="toc-seg-4" style="width:40px;height:5px;border-radius:3px;background:#e5e7eb;"></div>
                </div>
                <span id="toc-progress-text" style="font-size:13px;font-weight:600;color:#059669;margin-bottom:16px;">~7 sec</span>
                <div id="toc-tip-box" style="background:#f0fdf4;border:1px solid #86efac;border-radius:12px;padding:12px 16px;width:100%;max-width:280px;box-sizing:border-box;">
                    <span style="font-size:10px;font-weight:700;letter-spacing:0.6px;color:#166534;text-transform:uppercase;">Quick Tip</span>
                    <p id="toc-tip-text" style="font-size:13px;color:#15803d;margin:3px 0 0;font-weight:500;">A head-to-toe shot works best</p>
                </div>
            </div>

            <!-- Step 4: Result -->
            <div id="toc-step-result" style="display:none;flex-direction:column;align-items:center;text-align:center;">
                <div style="position:relative;margin-bottom:20px;border-radius:12px;overflow:hidden;border:2px solid #e5e7eb;min-height:200px;min-width:200px;background:#f9fafb;">
                    <!-- Loading skeleton shown while image loads -->
                    <div id="toc-result-loading" style="position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:#f9fafb;">
                        <div style="width:40px;height:40px;border:3px solid #e5e7eb;border-top-color:#FF6A00;border-radius:50%;animation:toc-spin 0.8s linear infinite;"></div>
                        <span style="font-size:13px;color:#6b7280;">Loading your result...</span>
                    </div>
                    <img id="toc-result-img" src="" alt="Result" style="max-width:100%;max-height:320px;object-fit:contain;opacity:0;transition:opacity 0.3s ease;" />
                </div>
                <button type="button" id="toc-view-product-btn" style="display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;max-width:260px;padding:14px 24px;border:none;border-radius:12px;background:linear-gradient(135deg,#FF6A00 0%,#FF8533 100%);color:#fff;font-size:15px;font-weight:600;cursor:pointer;box-shadow:0 4px 14px rgba(255,106,0,0.35);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;">
                    <span>Buy Product</span><span>&#x2192;</span>
                </button>
                <div style="display:flex;gap:12px;margin-top:16px;">
                    <button type="button" id="toc-download-btn" style="display:inline-flex;align-items:center;gap:6px;padding:10px 16px;border:1px solid #e5e7eb;border-radius:8px;background:#fff;color:#374151;font-size:13px;font-weight:500;cursor:pointer;">
                        <span style="font-size:16px;">&#x2193;</span><span>Download</span>
                    </button>
                    <button type="button" id="toc-delete-photo-btn" style="display:inline-flex;align-items:center;gap:6px;padding:10px 16px;border:1px solid #fee2e2;border-radius:8px;background:#fef2f2;color:#dc2626;font-size:13px;font-weight:500;cursor:pointer;">
                        <span>Delete</span>
                    </button>
                </div>
            </div>

            <!-- Step 5: Error -->
            <div id="toc-step-error" style="display:none;flex-direction:column;align-items:center;text-align:center;padding:40px 0;">
                <div style="width:56px;height:56px;border-radius:50%;border:2px solid #ef4444;display:flex;align-items:center;justify-content:center;color:#ef4444;font-size:28px;font-weight:bold;margin-bottom:16px;font-family:Arial,sans-serif;">!</div>
                <h3 style="margin:0 0 8px;font-size:18px;font-weight:600;color:#111;">Something went wrong</h3>
                <p id="toc-error-msg" style="margin:0 0 24px;font-size:14px;color:#6b7280;max-width:280px;">Please try again.</p>
                <button type="button" id="toc-retry-btn" style="display:inline-flex;align-items:center;justify-content:center;width:100%;max-width:200px;padding:14px 24px;border:none;border-radius:50px;background:linear-gradient(135deg,#FF6A00 0%,#FF8533 100%);color:#fff;font-size:15px;font-weight:600;cursor:pointer;">Try Again</button>
            </div>
        </div>

        <!-- History Panel -->
        <div id="toc-history-panel" style="display:none;position:absolute;top:0;right:0;bottom:0;width:280px;background:#fff;border-left:1px solid #e5e7eb;z-index:10;flex-direction:column;">
            <div style="display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid #e5e7eb;">
                <h4 style="margin:0;font-size:15px;font-weight:600;color:#111;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;">History</h4>
                <button type="button" id="toc-history-close" style="width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid #e5e7eb;border-radius:50%;cursor:pointer;font-size:16px;font-weight:bold;color:#6b7280;line-height:1;font-family:Arial,sans-serif;">&times;</button>
            </div>
            <div style="flex:1;overflow-y:auto;padding:16px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;">
                <div style="margin-bottom:20px;">
                    <h5 style="margin:0 0 12px;font-size:11px;font-weight:600;letter-spacing:0.5px;color:#9ca3af;text-transform:uppercase;">Your Photos</h5>
                    <div id="toc-history-photos"></div>
                </div>
                <div>
                    <h5 style="margin:0 0 12px;font-size:11px;font-weight:600;letter-spacing:0.5px;color:#9ca3af;text-transform:uppercase;">Recent Try-Ons</h5>
                    <div id="toc-history-results"></div>
                </div>
            </div>
        </div>
    </div>
</div>
