<?php
$pageId = (int)($page['id'] ?? 0);
$pageName = (string)($page['name'] ?? '');
$pageSlug = (string)($page['slug'] ?? '');
$pageStatus = (string)($page['status'] ?? 'draft');
$productTitle = (string)($product['title'] ?? $product['name'] ?? __('landing.product', 'المنتج'));
$workspace = is_array($workspace ?? null) ? $workspace : [];
$briefs = is_array($briefs ?? null) ? $briefs : [];
$tasks = is_array($tasks ?? null) ? $tasks : [];
$destinations = is_array($destinations ?? null) ? $destinations : [];
$workflows = is_array($workflows ?? null) ? $workflows : [];
$history = is_array($history ?? null) ? $history : [];
$selectedDestinations = is_array($workspace['selected_destinations'] ?? null) ? $workspace['selected_destinations'] : [];
require __DIR__ . '/_admin_theme_bridge.php';
?>
<!DOCTYPE html>
<html lang="<?= __('lang.code', 'ar') ?>" dir="<?= __('lang.direction', 'rtl') ?>">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><?= htmlspecialchars(__('landing.production_workspace_title', 'Production Workspace') . ' - ' . $pageName, ENT_QUOTES, 'UTF-8') ?></title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    <?php foreach ($lpThemeImports as $lpThemeCss): ?>
        <link rel="stylesheet" href="<?= htmlspecialchars($lpThemeCss, ENT_QUOTES, 'UTF-8') ?>">
    <?php endforeach; ?>
    <style>
        :root{--bg:<?= htmlspecialchars($lpThemeVars['bg'], ENT_QUOTES, 'UTF-8') ?>;--panel:<?= htmlspecialchars($lpThemeVars['panel'], ENT_QUOTES, 'UTF-8') ?>;--line:<?= htmlspecialchars($lpThemeVars['border'], ENT_QUOTES, 'UTF-8') ?>;--text:<?= htmlspecialchars($lpThemeVars['text'], ENT_QUOTES, 'UTF-8') ?>;--muted:<?= htmlspecialchars($lpThemeVars['muted'], ENT_QUOTES, 'UTF-8') ?>;--primary:<?= htmlspecialchars($lpThemeVars['primary'], ENT_QUOTES, 'UTF-8') ?>;--primary2:<?= htmlspecialchars($lpThemeVars['secondary'], ENT_QUOTES, 'UTF-8') ?>;--blue:<?= htmlspecialchars($lpThemeVars['accent'], ENT_QUOTES, 'UTF-8') ?>;--ok:<?= htmlspecialchars($lpThemeVars['success'], ENT_QUOTES, 'UTF-8') ?>;--bad:<?= htmlspecialchars($lpThemeVars['danger'], ENT_QUOTES, 'UTF-8') ?>;--shadow:0 18px 44px rgba(15,23,42,.08)}
        *{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at top right,color-mix(in srgb, var(--primary) 14%, transparent),transparent 25%),radial-gradient(circle at top left,color-mix(in srgb, var(--blue) 12%, transparent),transparent 28%),var(--bg);color:var(--text);font-family:<?= $lpBodyFont ?>}
        h1,h2,h3,h4,h5,h6,.brand{font-family:<?= $lpHeadingFont ?>}
        .shell{min-height:100vh;display:grid;grid-template-rows:auto 1fr}.topbar{position:sticky;top:0;z-index:1000;display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 24px;background:rgba(255,255,255,.98);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);box-shadow:0 2px 16px rgba(15,23,42,.06)}
        .brand{display:flex;align-items:center;gap:12px;font-weight:900}.brand-icon{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--primary),var(--primary2));box-shadow:0 14px 28px rgba(15,23,42,.16)}
        .brand small{display:block;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.06em}.topbar-actions{margin-inline-start:auto;display:flex;gap:10px;flex-wrap:wrap}
        .btn-main,.btn-ghost{border:1px solid var(--line);background:#fff;color:var(--text);border-radius:14px;padding:11px 16px;font-size:13px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;cursor:pointer;transition:.18s ease}.btn-main{background:linear-gradient(135deg,var(--primary),var(--primary2));border-color:transparent;color:#fff}.btn-main:hover,.btn-ghost:hover{transform:translateY(-1px)}
        .layout{display:grid;grid-template-columns:minmax(320px,.95fr) minmax(0,1.5fr) minmax(320px,.92fr);gap:18px;padding:18px}.stack,.cards,.kanban,.timeline{display:grid;gap:18px}.panel{background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow)}.panel-inner{padding:20px;display:grid;gap:16px}
        .eyebrow{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:rgba(37,99,235,.08);color:var(--blue);font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.05em}
        h1,h2,h3,p{margin:0}.hero h1{font-size:36px;line-height:1.15;font-weight:950;margin-top:12px}.muted{color:var(--muted);line-height:1.8}
        .grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.metric,.card,.timeline-item,.lane,.task-card{border:1px solid var(--line);border-radius:20px;background:#fff;padding:16px;display:grid;gap:10px}
        .chip{display:inline-flex;align-items:center;justify-content:center;padding:6px 10px;border-radius:999px;font-size:11px;font-weight:900;background:#f1f5f9;color:#334155;border:1px solid #dbe5f0}.chip.done{background:#ecfdf5;color:#166534;border-color:#bbf7d0}.chip.doing{background:#eff6ff;color:#1d4ed8;border-color:#bfdbfe}.chip.todo{background:#fff7ed;color:#c2410c;border-color:#fed7aa}
        .kanban{grid-template-columns:repeat(3,1fr)}.lane h3{font-size:18px;font-weight:900}.timeline-item{position:relative;padding-inline-start:18px}.timeline-item::before{content:"";position:absolute;inset-inline-start:8px;top:18px;bottom:-14px;width:2px;background:#e2e8f0}.timeline-item:last-child::before{display:none}
        @media (max-width:1240px){.layout,.grid2,.grid3,.kanban{grid-template-columns:1fr}}
        /* ── Enhanced Styles ── */
        .brand-icon{box-shadow:0 8px 24px rgba(249,115,22,.28)!important}
        .btn-ghost{transition:all .2s ease}
        .btn-ghost:hover{background:color-mix(in srgb,var(--primary) 8%,#fff);border-color:var(--primary);color:var(--primary);transform:translateY(-1px)}
        .btn-main:active,.btn-ghost:active{transform:translateY(0)}
        .metric,.card,.task-card{transition:box-shadow .22s,transform .22s}
        .metric:hover,.task-card:hover{box-shadow:0 8px 24px rgba(15,23,42,.09)!important;transform:translateY(-2px)}
        .card:hover{box-shadow:0 8px 24px rgba(15,23,42,.09)!important;transform:translateY(-1px)}
        .metric{background:linear-gradient(135deg,#fff,#f8fafc)}
        .metric strong{font-size:clamp(20px,2.2vw,28px);font-weight:900;color:var(--text)}
        .metric span{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-top:2px}
        .eyebrow-o{background:rgba(249,115,22,.1)!important;color:var(--primary)!important}
        .eyebrow-g{background:rgba(22,163,74,.1)!important;color:var(--ok)!important}
        .eyebrow-p{background:rgba(139,92,246,.1)!important;color:#7c3aed!important}
        .eyebrow-r{background:rgba(220,38,38,.1)!important;color:var(--bad)!important}
        .eyebrow-a{background:rgba(217,119,6,.1)!important;color:var(--warning)!important}
        .eyebrow-t{background:rgba(14,165,233,.1)!important;color:var(--blue)!important}
        .lane{transition:box-shadow .2s,background .2s;border-radius:20px;padding:18px!important}
        .lane:hover{box-shadow:0 10px 28px rgba(15,23,42,.08)!important}
        .lane h3{font-size:15px!important;font-weight:800;letter-spacing:-.01em}
        .chip.done{font-weight:800}.chip.doing{font-weight:800}.chip.todo{font-weight:800}
        .hero h1{background:linear-gradient(135deg,var(--text),var(--primary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
        @media (max-width:768px){.topbar{padding:10px 16px}.brand-icon{width:36px!important;height:36px!important}}
    </style>
</head>
<body>
<div class="shell">
    <div class="topbar">
        <div class="brand">
            <div class="brand-icon"><i class="bi bi-kanban"></i></div>
            <div>
                <div><?= __('landing.production_workspace_title', 'Production Workspace') ?></div>
                <small><?= __('landing.production_workspace_text', 'طبقة تشغيل تجمع الوجهات والـ briefs والمهام والـ workflows في مساحة تنفيذ واحدة') ?></small>
            </div>
        </div>
        <div class="topbar-actions">
            <a href="/admin/ai-landing-pages/chat/<?= $pageId ?>" class="btn-ghost"><i class="bi bi-chat-square-text"></i><span><?= __('landing.chat_expert_title', 'Chat Expert') ?></span></a>
            <a href="/admin/ai-landing-pages/edit/<?= $pageId ?>" class="btn-ghost"><i class="bi bi-stars"></i><span><?= __('landing.open_studio', 'فتح الـ Studio') ?></span></a>
            <a href="/admin/ai-landing-pages/competitors/<?= $pageId ?>" class="btn-ghost"><i class="bi bi-binoculars"></i><span><?= __('landing.open_competitor_workspace', 'مساحة المنافسين') ?></span></a>
            <a href="/admin/ai-landing-pages" class="btn-ghost"><i class="bi bi-arrow-left"></i><span><?= __('common.back', 'رجوع') ?></span></a>
        </div>
    </div>
    <div class="layout">
        <aside class="stack">
            <section class="panel hero">
                <div class="panel-inner">
                    <div class="eyebrow eyebrow-o"><i class="bi bi-lightning-charge"></i><?= __('landing.production_workflow_title', 'سير الإنتاج') ?></div>
                    <h1><?= htmlspecialchars($pageName, ENT_QUOTES, 'UTF-8') ?></h1>
                    <p class="muted"><?= __('landing.production_workspace_text', 'طبقة تشغيل تجمع الوجهات والـ briefs والمهام والـ workflows في مساحة تنفيذ واحدة') ?></p>
                    <div class="grid2">
                        <div class="metric"><strong><?= count($briefs) ?></strong><span><?= __('landing.briefs_title', 'الـ Briefs') ?></span></div>
                        <div class="metric"><strong><?= count($tasks) ?></strong><span><?= __('landing.tasks_title', 'المهام') ?></span></div>
                        <div class="metric"><strong><?= count($selectedDestinations) ?></strong><span><?= __('landing.destinations_title', 'وجهات الإنتاج') ?></span></div>
                        <div class="metric"><strong><?= count($workflows) ?></strong><span><?= __('landing.workflow_stages', 'مراحل الـ Workflow') ?></span></div>
                    </div>
                </div>
            </section>

            <section class="panel">
                <div class="panel-inner">
                    <div class="eyebrow eyebrow-t"><i class="bi bi-diagram-3"></i><?= __('landing.outputs_panel_title', 'لوحة المخرجات') ?></div>
                    <div class="cards">
                        <?php foreach ($destinations as $destination): ?>
                            <?php
                            $destId = (string)($destination['id'] ?? '');
                            $workflow = is_array($workflows[$destId] ?? null) ? $workflows[$destId] : [];
                            $status = (string)($workflow['status'] ?? (in_array($destId, $selectedDestinations, true) ? 'doing' : 'todo'));
                            ?>
                            <a href="/admin/ai-landing-pages/destination/<?= $pageId ?>/<?= urlencode($destId) ?>" class="card" style="text-decoration:none;color:inherit">
                                <strong><?= htmlspecialchars((string)($destination['title'] ?? $destId), ENT_QUOTES, 'UTF-8') ?></strong>
                                <span class="muted"><?= htmlspecialchars((string)($destination['goal'] ?? ''), ENT_QUOTES, 'UTF-8') ?></span>
                                <span class="chip <?= htmlspecialchars($status, ENT_QUOTES, 'UTF-8') ?>"><?= htmlspecialchars($status, ENT_QUOTES, 'UTF-8') ?></span>
                            </a>
                        <?php endforeach; ?>
                    </div>
                </div>
            </section>
        </aside>

        <div class="stack">
            <section class="panel">
                <div class="panel-inner">
                    <div class="eyebrow eyebrow-p"><i class="bi bi-kanban"></i><?= __('landing.production_board_title', 'لوحة التنفيذ') ?></div>
                    <div class="kanban">
                        <?php
                        $lanes = ['todo' => __('landing.todo_lane', 'Todo'), 'doing' => __('landing.doing_lane', 'Doing'), 'done' => __('landing.done_lane', 'Done')];
                        foreach ($lanes as $laneId => $laneTitle):
                        ?>
                        <div class="lane">
                            <h3><?= htmlspecialchars($laneTitle, ENT_QUOTES, 'UTF-8') ?></h3>
                            <?php foreach ($tasks as $task): ?>
                                <?php if ((string)($task['status'] ?? 'todo') !== $laneId) { continue; } ?>
                                <div class="task-card">
                                    <strong><?= htmlspecialchars((string)($task['title'] ?? ''), ENT_QUOTES, 'UTF-8') ?></strong>
                                    <span class="muted"><?= htmlspecialchars((string)($task['note'] ?? ''), ENT_QUOTES, 'UTF-8') ?></span>
                                    <span class="chip <?= htmlspecialchars($laneId, ENT_QUOTES, 'UTF-8') ?>"><?= htmlspecialchars((string)($task['destination'] ?? ''), ENT_QUOTES, 'UTF-8') ?></span>
                                </div>
                            <?php endforeach; ?>
                        </div>
                        <?php endforeach; ?>
                    </div>
                </div>
            </section>

            <section class="panel">
                <div class="panel-inner">
                    <div class="eyebrow eyebrow-g"><i class="bi bi-file-earmark-richtext"></i><?= __('landing.production_briefs_queue', 'طابور الـ Briefs') ?></div>
                    <div class="grid2">
                        <?php foreach (array_slice(array_reverse($briefs), 0, 8) as $brief): ?>
                            <div class="card">
                                <strong><?= htmlspecialchars((string)($brief['title'] ?? ''), ENT_QUOTES, 'UTF-8') ?></strong>
                                <span class="muted"><?= htmlspecialchars((string)($brief['summary'] ?? $brief['objective'] ?? ''), ENT_QUOTES, 'UTF-8') ?></span>
                                <span class="chip done"><?= htmlspecialchars((string)($brief['destination_label'] ?? $brief['destination'] ?? ''), ENT_QUOTES, 'UTF-8') ?></span>
                            </div>
                        <?php endforeach; ?>
                    </div>
                </div>
            </section>
        </div>

        <aside class="stack">
            <section class="panel">
                <div class="panel-inner">
                    <div class="eyebrow eyebrow-a"><i class="bi bi-clock-history"></i><?= __('landing.agent_actions_title', 'سجل الوكيل') ?></div>
                    <div class="timeline">
                        <?php foreach (array_slice($history, 0, 10) as $entry): ?>
                            <div class="timeline-item">
                                <strong><?= htmlspecialchars((string)($entry['label'] ?? ''), ENT_QUOTES, 'UTF-8') ?></strong>
                                <span class="muted"><?= htmlspecialchars((string)($entry['at'] ?? ''), ENT_QUOTES, 'UTF-8') ?></span>
                            </div>
                        <?php endforeach; ?>
                    </div>
                </div>
            </section>
            <section class="panel">
                <div class="panel-inner">
                    <div class="eyebrow eyebrow-t"><i class="bi bi-info-circle"></i><?= __('landing.workspace_summary_title', 'ملخص الجلسة') ?></div>
                    <div class="grid2">
                        <div class="metric"><strong><?= htmlspecialchars($pageSlug, ENT_QUOTES, 'UTF-8') ?></strong><span><?= __('landing.page_slug', 'الرابط') ?></span></div>
                        <div class="metric"><strong><?= htmlspecialchars($pageStatus, ENT_QUOTES, 'UTF-8') ?></strong><span><?= __('landing.status', 'الحالة') ?></span></div>
                        <div class="metric"><strong><?= htmlspecialchars($productTitle, ENT_QUOTES, 'UTF-8') ?></strong><span><?= __('landing.workflow_product_context', 'المنتج') ?></span></div>
                        <div class="metric"><strong><?= htmlspecialchars((string)($workspace['selected_style'] ?? '—'), ENT_QUOTES, 'UTF-8') ?></strong><span><?= __('landing.style_system_title', 'نظام الـ Styles') ?></span></div>
                    </div>
                </div>
            </section>
        </aside>
    </div>
</div>
</body>
</html>
