<?php $__template->layout('Layout.main'); ?>
<?php $__template->section('title'); ?>مخطط: <?= e($definition->name_ar) ?><?php $__template->endSection(); ?>

<?php $__template->section('page_actions'); ?>
<a href="/workflows" class="btn btn-outline">العودة</a>
<a href="/workflows/instances/<?= e($definition->workflow_code) ?>" class="btn btn-outline">المثيلات</a>
<a href="/workflows/edit/<?= e($definition->workflow_code) ?>" class="btn btn-primary">تعديل دورة العمل</a>
<?php $__template->endSection(); ?>

<?php $__template->section('content'); ?>
<?php
    $states = $definition->getStates();
    $transitions = $definition->getTransitions();
?>

<!-- Definition Header -->
<div class="card" style="margin-bottom:20px;padding:20px;">
    <div style="display:flex;justify-content:space-between;align-items:center;">
        <div>
            <h2 style="margin:0 0 4px;color:#1A1A2E;font-size:20px;"><?= e($definition->name_ar) ?></h2>
            <?php if ($definition->description_ar): ?>
            <p style="color:#6B7280;font-size:14px;margin:0;"><?= e($definition->description_ar) ?></p>
            <?php endif; ?>
        </div>
        <div style="text-align:left;">
            <span style="font-family:monospace;font-size:12px;color:#9CA3AF;background:#F3F4F6;padding:4px 8px;border-radius:4px;"><?= e($definition->workflow_code) ?></span>
            <div style="font-size:12px;color:#6B7280;margin-top:4px;">الإصدار <?= (int) $definition->version ?> &middot; <?= count($states) ?> حالات &middot; <?= count($transitions) ?> انتقالات</div>
        </div>
    </div>
</div>

<!-- Visual Flowchart -->
<div class="card" style="margin-bottom:20px;">
    <div style="padding:16px 20px;border-bottom:1px solid #E5E7EB;">
        <h3 style="margin:0;color:#1A1A2E;font-size:15px;">مخطط الحالات</h3>
    </div>
    <div style="padding:30px;overflow-x:auto;">
        <?php
            // Sort states in logical flow order using BFS from initial state
            $orderedKeys = [];
            $visited = [];
            $initialKey = null;
            foreach ($states as $key => $s) {
                if (($s['type'] ?? '') === 'initial') { $initialKey = $key; break; }
            }
            if ($initialKey) {
                $queue = [$initialKey];
                $visited[$initialKey] = true;
                while (!empty($queue)) {
                    $current = array_shift($queue);
                    $orderedKeys[] = $current;
                    foreach ($transitions as $t) {
                        if ($t['from'] === $current && !isset($visited[$t['to']])) {
                            $visited[$t['to']] = true;
                            $queue[] = $t['to'];
                        }
                    }
                }
                // Append any unreachable states at end
                foreach ($states as $key => $s) {
                    if (!isset($visited[$key])) { $orderedKeys[] = $key; }
                }
            } else {
                $orderedKeys = array_keys($states);
            }
        ?>
        <div style="display:flex;align-items:center;gap:0;justify-content:center;min-height:120px;flex-wrap:wrap;">
            <?php foreach ($orderedKeys as $idx => $key): ?>
            <?php
                $state = $states[$key];
                $type = $state['type'] ?? 'intermediate';
                $bgColor = match($type) {
                    'initial'  => '#EFF6FF',
                    'terminal' => '#FEF2F2',
                    default    => '#FFFFFF',
                };
                $borderColor = match($type) {
                    'initial'  => '#0284C7',
                    'terminal' => '#DC2626',
                    default    => '#1e3a5f',
                };
                $typeLabel = match($type) {
                    'initial'  => '&#9654;',
                    'terminal' => '&#9632;',
                    default    => '',
                };
            ?>
            <?php if ($idx > 0): ?>
            <div style="display:flex;align-items:center;padding:0 6px;color:#9CA3AF;font-size:18px;">&#8592;</div>
            <?php endif; ?>
            <div style="background:<?= $bgColor ?>;border:2px solid <?= $borderColor ?>;border-radius:10px;padding:14px 20px;text-align:center;min-width:110px;box-shadow:0 1px 4px rgba(0,0,0,0.05);">
                <?php if ($typeLabel): ?>
                <div style="font-size:10px;color:<?= $borderColor ?>;margin-bottom:4px;"><?= $typeLabel ?></div>
                <?php endif; ?>
                <div style="font-weight:700;color:#1A1A2E;font-size:13px;margin-bottom:3px;"><?= e($state['label_ar'] ?? $key) ?></div>
                <div style="font-size:10px;color:#9CA3AF;font-family:monospace;"><?= e($key) ?></div>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
</div>

<!-- Transitions Table -->
<div class="card" style="margin-bottom:20px;">
    <div style="padding:16px 20px;border-bottom:1px solid #E5E7EB;">
        <h3 style="margin:0;color:#1A1A2E;font-size:15px;">جدول الانتقالات (<?= count($transitions) ?>)</h3>
    </div>
    <div class="table-responsive">
        <table class="data-table">
            <thead>
                <tr>
                    <th>اسم الانتقال</th>
                    <th>من</th>
                    <th></th>
                    <th>إلى</th>
                    <th>النوع</th>
                    <th>الشروط</th>
                    <th>الإجراءات</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($transitions as $t): ?>
                <?php
                    $fromState = $states[$t['from']] ?? [];
                    $toState = $states[$t['to']] ?? [];
                    $trigger = $t['trigger'] ?? 'manual';
                    $guards = $t['guards'] ?? [];
                    $actions = $t['actions'] ?? [];
                ?>
                <tr>
                    <td>
                        <span style="font-weight:700;color:#1A1A2E;"><?= e($t['name']) ?></span>
                    </td>
                    <td>
                        <span style="background:#FEF2F2;color:#DC2626;padding:3px 8px;border-radius:4px;font-size:12px;font-weight:600;"><?= e($fromState['label_ar'] ?? $t['from']) ?></span>
                    </td>
                    <td style="text-align:center;color:#9CA3AF;font-size:16px;">&#8592;</td>
                    <td>
                        <span style="background:#F0FDF4;color:#059669;padding:3px 8px;border-radius:4px;font-size:12px;font-weight:600;"><?= e($toState['label_ar'] ?? $t['to']) ?></span>
                    </td>
                    <td>
                        <?php if ($trigger === 'automatic'): ?>
                            <span style="background:#FFF7ED;color:#D97706;padding:3px 10px;border-radius:4px;font-size:12px;font-weight:600;">تلقائي</span>
                        <?php else: ?>
                            <span style="background:#F0FDF4;color:#059669;padding:3px 10px;border-radius:4px;font-size:12px;font-weight:600;">يدوي</span>
                        <?php endif; ?>
                    </td>
                    <td style="font-size:12px;">
                        <?php if (empty($guards)): ?>
                            <span style="color:#D1D5DB;">&#8212;</span>
                        <?php else: ?>
                            <?php foreach ($guards as $g): ?>
                            <div style="margin-bottom:3px;display:flex;align-items:center;gap:4px;">
                                <span style="background:#F3F4F6;padding:2px 6px;border-radius:3px;font-family:monospace;font-size:11px;"><?= e($g['type'] ?? '') ?></span>
                                <span style="color:#6B7280;"><?= e(is_array($g['value'] ?? '') ? json_encode($g['value']) : (string)($g['value'] ?? '')) ?></span>
                                <?php if (isset($g['days'])): ?>
                                    <span style="color:#D97706;font-weight:600;"><?= (int) $g['days'] ?> يوم</span>
                                <?php endif; ?>
                            </div>
                            <?php endforeach; ?>
                        <?php endif; ?>
                    </td>
                    <td style="font-size:12px;">
                        <?php if (empty($actions)): ?>
                            <span style="color:#D1D5DB;">&#8212;</span>
                        <?php else: ?>
                            <?php foreach ($actions as $a): ?>
                            <div style="margin-bottom:3px;">
                                <span style="background:#EFF6FF;padding:2px 6px;border-radius:3px;font-family:monospace;font-size:11px;color:#0284C7;"><?= e($a['type'] ?? '') ?></span>
                                <span style="color:#6B7280;"><?= e($a['value'] ?? '') ?></span>
                            </div>
                            <?php endforeach; ?>
                        <?php endif; ?>
                    </td>
                </tr>
                <?php endforeach; ?>
                <?php if (empty($transitions)): ?>
                <tr><td colspan="7" style="text-align:center;padding:40px;color:#9CA3AF;">لا توجد انتقالات مُعرّفة</td></tr>
                <?php endif; ?>
            </tbody>
        </table>
    </div>
</div>

<!-- States Summary Grid -->
<div class="card">
    <div style="padding:16px 20px;border-bottom:1px solid #E5E7EB;">
        <h3 style="margin:0;color:#1A1A2E;font-size:15px;">الحالات (<?= count($states) ?>)</h3>
    </div>
    <div style="padding:20px;display:grid;grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));gap:12px;">
        <?php foreach ($states as $key => $state): ?>
        <?php
            $type = $state['type'] ?? 'intermediate';
            $leftBorderColor = match($type) {
                'initial'  => '#0284C7',
                'terminal' => '#DC2626',
                default    => '#1e3a5f',
            };
            $typeLabel = match($type) {
                'initial'  => 'بداية',
                'terminal' => 'نهاية',
                default    => 'وسيطة',
            };
        ?>
        <div style="padding:12px 16px;border:1px solid #E5E7EB;border-right:4px solid <?= $leftBorderColor ?>;border-radius:6px;background:#FAFAFA;">
            <div style="font-weight:700;color:#1A1A2E;font-size:14px;margin-bottom:2px;"><?= e($state['label_ar'] ?? $key) ?></div>
            <div style="display:flex;justify-content:space-between;align-items:center;">
                <span style="font-size:11px;color:#9CA3AF;font-family:monospace;"><?= e($key) ?></span>
                <span style="font-size:10px;color:<?= $leftBorderColor ?>;font-weight:600;"><?= $typeLabel ?></span>
            </div>
        </div>
        <?php endforeach; ?>
    </div>
</div>
<?php $__template->endSection(); ?>
