<?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>
<?php $__template->endSection(); ?>

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

<div class="card" style="margin-bottom:20px;padding:20px;">
    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;">
        <div>
            <h2 style="margin:0;color:#0D7377;"><?= e($definition->name_ar) ?></h2>
            <p style="color:#6B7280;margin:5px 0 0;"><?= e($definition->description_ar ?? '') ?></p>
        </div>
        <div style="text-align:left;">
            <code style="font-size:12px;color:#9CA3AF;"><?= e($definition->workflow_code) ?></code><br>
            <small style="color:#6B7280;">الإصدار <?= (int) $definition->version ?></small>
        </div>
    </div>

    <!-- State Diagram (CSS-based flowchart) -->
    <div style="display:flex;flex-wrap:wrap;gap:20px;justify-content:center;padding:30px 0;">
        <?php foreach ($states as $key => $state): ?>
        <?php
            $type = $state['type'] ?? 'intermediate';
            $bgColor = match($type) {
                'initial'      => '#EFF6FF',
                'terminal'     => '#FEF2F2',
                'intermediate' => '#FFFFFF',
                default        => '#F9FAFB',
            };
            $borderColor = match($type) {
                'initial'      => '#0284C7',
                'terminal'     => '#DC2626',
                'intermediate' => '#0D7377',
                default        => '#E5E7EB',
            };
            $shape = match($type) {
                'initial'  => 'border-radius:50%;width:120px;height:120px;',
                'terminal' => 'border-radius:8px;border-width:3px;',
                default    => 'border-radius:8px;',
            };
        ?>
        <div id="state-<?= e($key) ?>" style="background:<?= $bgColor ?>;border:2px solid <?= $borderColor ?>;padding:15px 20px;text-align:center;min-width:140px;<?= $shape ?>display:flex;flex-direction:column;align-items:center;justify-content:center;">
            <div style="font-weight:700;color:#1A1A2E;font-size:14px;"><?= e($state['label_ar'] ?? $key) ?></div>
            <div style="font-size:10px;color:#9CA3AF;margin-top:4px;"><?= e($key) ?></div>
            <?php if ($type === 'initial'): ?>
                <div style="font-size:10px;color:#0284C7;margin-top:2px;">▶ بداية</div>
            <?php elseif ($type === 'terminal'): ?>
                <div style="font-size:10px;color:#DC2626;margin-top:2px;">■ نهاية</div>
            <?php endif; ?>
        </div>
        <?php endforeach; ?>
    </div>
</div>

<!-- Transition Table -->
<div class="card">
    <div style="padding:15px 20px;border-bottom:1px solid #E5E7EB;">
        <h3 style="margin:0;color:#0D7377;">جدول الانتقالات</h3>
    </div>
    <div class="table-responsive">
        <table class="data-table">
            <thead>
                <tr>
                    <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';
                ?>
                <tr>
                    <td style="font-weight:600;"><?= e($t['name']) ?></td>
                    <td>
                        <span style="color:#DC2626;font-size:13px;"><?= e($fromState['label_ar'] ?? $t['from']) ?></span>
                    </td>
                    <td>
                        <span style="color:#059669;font-size:13px;"><?= e($toState['label_ar'] ?? $t['to']) ?></span>
                    </td>
                    <td>
                        <span style="background:<?= $trigger === 'automatic' ? '#FFF7ED' : '#F0FDF4' ?>;color:<?= $trigger === 'automatic' ? '#D97706' : '#059669' ?>;padding:2px 8px;border-radius:4px;font-size:12px;">
                            <?= $trigger === 'automatic' ? 'تلقائي' : 'يدوي' ?>
                        </span>
                    </td>
                    <td style="font-size:12px;">
                        <?php $guards = $t['guards'] ?? []; ?>
                        <?php if (empty($guards)): ?>
                            <span style="color:#9CA3AF;">بدون شروط</span>
                        <?php else: ?>
                            <?php foreach ($guards as $g): ?>
                                <div style="margin-bottom:2px;">
                                    <code style="font-size:11px;background:#F3F4F6;padding:1px 4px;border-radius:2px;"><?= e($g['type'] ?? '') ?></code>
                                    <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;"><?= (int) $g['days'] ?> يوم</span><?php endif; ?>
                                </div>
                            <?php endforeach; ?>
                        <?php endif; ?>
                    </td>
                    <td style="font-size:12px;">
                        <?php $actions = $t['actions'] ?? []; ?>
                        <?php if (empty($actions)): ?>
                            <span style="color:#9CA3AF;">—</span>
                        <?php else: ?>
                            <?php foreach ($actions as $a): ?>
                                <div><code style="font-size:11px;"><?= e($a['type'] ?? '') ?>: <?= e($a['value'] ?? '') ?></code></div>
                            <?php endforeach; ?>
                        <?php endif; ?>
                    </td>
                </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
    </div>
</div>

<!-- States Summary -->
<div class="card" style="margin-top:20px;">
    <div style="padding:15px 20px;border-bottom:1px solid #E5E7EB;">
        <h3 style="margin:0;color:#0D7377;">ملخص الحالات (<?= count($states) ?>)</h3>
    </div>
    <div style="padding:20px;display:grid;grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));gap:10px;">
        <?php foreach ($states as $key => $state): ?>
        <?php
            $type = $state['type'] ?? 'intermediate';
            $color = match($type) {
                'initial'  => '#0284C7',
                'terminal' => '#DC2626',
                default    => '#0D7377',
            };
        ?>
        <div style="padding:10px 15px;border:1px solid #E5E7EB;border-right:4px solid <?= $color ?>;border-radius:6px;">
            <div style="font-weight:600;color:#1A1A2E;"><?= e($state['label_ar'] ?? $key) ?></div>
            <div style="font-size:11px;color:#9CA3AF;"><?= e($key) ?> · <?= e($type) ?></div>
        </div>
        <?php endforeach; ?>
    </div>
</div>
<?php $__template->endSection(); ?>