<?php $__template->layout('Layout.main'); ?>
<?php $__template->section('title'); ?>مثيل دورة العمل #<?= (int) $instance->id ?><?php $__template->endSection(); ?>

<?php $__template->section('page_actions'); ?>
<a href="/workflows" class="btn btn-outline">← العودة</a>
<a href="/workflows/diagram/<?= e($instance->workflow_code) ?>" class="btn btn-outline">عرض المخطط</a>
<?php $__template->endSection(); ?>

<?php $__template->section('content'); ?>
<?php
    $states = $definition ? $definition->getStates() : [];
    $currentStateInfo = $states[$instance->current_state] ?? [];
?>

<div style="display:grid;grid-template-columns:1fr 350px;gap:20px;">
    <div>
        <!-- Instance Info -->
        <div class="card" style="margin-bottom:20px;">
            <div style="padding:15px 20px;border-bottom:1px solid #E5E7EB;">
                <h3 style="margin:0;color:#0D7377;">معلومات المثيل</h3>
            </div>
            <div style="padding:20px;">
                <table style="width:100%;font-size:14px;">
                    <tr><td style="padding:6px 0;color:#6B7280;width:35%;">دورة العمل</td><td style="padding:6px 0;font-weight:600;"><?= e($definition ? $definition->name_ar : $instance->workflow_code) ?></td></tr>
                    <tr><td style="padding:6px 0;color:#6B7280;">نوع الكيان</td><td><code><?= e($instance->entity_type) ?></code></td></tr>
                    <tr><td style="padding:6px 0;color:#6B7280;">رقم الكيان</td><td><?= (int) $instance->entity_id ?></td></tr>
                    <tr>
                        <td style="padding:6px 0;color:#6B7280;">الحالة الحالية</td>
                        <td>
                            <span style="background:<?= $instance->is_completed ? '#F0FDF4' : '#EFF6FF' ?>;color:<?= $instance->is_completed ? '#059669' : '#0284C7' ?>;padding:4px 12px;border-radius:6px;font-weight:700;font-size:15px;">
                                <?= e($currentStateInfo['label_ar'] ?? $instance->current_state) ?>
                            </span>
                        </td>
                    </tr>
                    <tr><td style="padding:6px 0;color:#6B7280;">دخول الحالة</td><td><?= e($instance->state_entered_at) ?></td></tr>
                    <tr><td style="padding:6px 0;color:#6B7280;">تاريخ الإنشاء</td><td><?= e($instance->created_at) ?></td></tr>
                    <tr>
                        <td style="padding:6px 0;color:#6B7280;">مكتمل</td>
                        <td>
                            <?php if ($instance->is_completed): ?>
                                <span style="color:#059669;font-weight:600;">✓ نعم — <?= e($instance->completed_at) ?></span>
                            <?php else: ?>
                                <span style="color:#D97706;">جارية</span>
                            <?php endif; ?>
                        </td>
                    </tr>
                </table>
            </div>
        </div>

        <!-- Transition History -->
        <div class="card">
            <div style="padding:15px 20px;border-bottom:1px solid #E5E7EB;">
                <h3 style="margin:0;color:#0D7377;">سجل الانتقالات</h3>
            </div>
            <div style="padding:20px;">
                <?php if (empty($history)): ?>
                    <div style="text-align:center;padding:30px;color:#6B7280;">لا توجد انتقالات مسجلة</div>
                <?php else: ?>
                    <?php foreach ($history as $i => $h): ?>
                    <?php
                        $fromInfo = $states[$h['from_state']] ?? [];
                        $toInfo = $states[$h['to_state']] ?? [];
                    ?>
                    <div style="display:flex;gap:15px;padding:15px 0;<?= $i < count($history) - 1 ? 'border-bottom:1px solid #F3F4F6;' : '' ?>">
                        <div style="flex-shrink:0;width:10px;position:relative;">
                            <div style="width:10px;height:10px;border-radius:50%;background:#0D7377;margin-top:5px;"></div>
                            <?php if ($i < count($history) - 1): ?>
                                <div style="position:absolute;top:15px;right:4px;width:2px;height:calc(100% + 15px);background:#E5E7EB;"></div>
                            <?php endif; ?>
                        </div>
                        <div style="flex:1;">
                            <div style="display:flex;justify-content:space-between;margin-bottom:5px;">
                                <strong style="color:#1A1A2E;"><?= e($h['transition_name']) ?></strong>
                                <span style="color:#9CA3AF;font-size:12px;"><?= e($h['created_at']) ?></span>
                            </div>
                            <div style="font-size:13px;color:#6B7280;margin-bottom:4px;">
                                <span style="color:#DC2626;"><?= e($fromInfo['label_ar'] ?? $h['from_state']) ?></span>
                                ←
                                <span style="color:#059669;"><?= e($toInfo['label_ar'] ?? $h['to_state']) ?></span>
                            </div>
                            <div style="font-size:12px;color:#9CA3AF;">
                                <?= e($h['employee_name'] ?? 'النظام') ?>
                                · <?= e($h['trigger_type']) ?>
                            </div>
                            <?php if ($h['notes']): ?>
                                <div style="font-size:13px;color:#4B5563;margin-top:4px;background:#F9FAFB;padding:6px 10px;border-radius:4px;"><?= e($h['notes']) ?></div>
                            <?php endif; ?>
                        </div>
                    </div>
                    <?php endforeach; ?>
                <?php endif; ?>
            </div>
        </div>
    </div>

    <!-- Available Transitions -->
    <div>
        <?php if (!$instance->is_completed && !empty($available)): ?>
        <div class="card" style="margin-bottom:20px;">
            <div style="padding:12px 15px;border-bottom:1px solid #E5E7EB;">
                <h4 style="margin:0;color:#1A1A2E;font-size:14px;">الانتقالات المتاحة</h4>
            </div>
            <div style="padding:15px;">
                <?php foreach ($available as $trans): ?>
                <form method="POST" action="/workflows/instances/<?= (int) $instance->id ?>/transition" style="margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid #F3F4F6;">
                    <?= csrf_field() ?>
                    <input type="hidden" name="transition_name" value="<?= e($trans['name']) ?>">
                    <div style="margin-bottom:8px;">
                        <strong style="color:#1A1A2E;font-size:14px;"><?= e($trans['name']) ?></strong>
                        <div style="font-size:12px;color:#6B7280;">→ <?= e($trans['to_label_ar']) ?></div>
                    </div>
                    <div class="form-group" style="margin-bottom:8px;">
                        <textarea name="notes" class="form-textarea" rows="2" placeholder="ملاحظات (اختياري)" style="font-size:12px;"></textarea>
                    </div>
                    <?php if ($trans['can_execute']): ?>
                        <button type="submit" class="btn btn-sm btn-primary" style="width:100%;" onclick="return confirm('هل تريد تنفيذ هذا الانتقال؟')">تنفيذ</button>
                    <?php else: ?>
                        <button type="button" class="btn btn-sm" style="width:100%;background:#E5E7EB;color:#9CA3AF;cursor:not-allowed;" disabled>غير متاح (شرط غير مستوفى)</button>
                    <?php endif; ?>
                </form>
                <?php endforeach; ?>
            </div>
        </div>
        <?php elseif ($instance->is_completed): ?>
        <div class="card" style="padding:30px;text-align:center;">
            <div style="font-size:48px;margin-bottom:10px;">✅</div>
            <strong style="color:#059669;">دورة العمل مكتملة</strong>
        </div>
        <?php else: ?>
        <div class="card" style="padding:30px;text-align:center;color:#6B7280;">
            لا توجد انتقالات يدوية متاحة
        </div>
        <?php endif; ?>

        <!-- State Map -->
        <div class="card">
            <div style="padding:12px 15px;border-bottom:1px solid #E5E7EB;">
                <h4 style="margin:0;color:#1A1A2E;font-size:14px;">خريطة الحالات</h4>
            </div>
            <div style="padding:15px;">
                <?php foreach ($states as $key => $state): ?>
                <div style="padding:6px 10px;margin-bottom:4px;border-radius:4px;font-size:13px;<?= $key === $instance->current_state ? 'background:#EFF6FF;border:2px solid #0284C7;font-weight:700;' : 'background:#F9FAFB;border:1px solid #E5E7EB;' ?>">
                    <?php if ($key === $instance->current_state): ?>◉<?php elseif (($state['type'] ?? '') === 'terminal'): ?>◻<?php else: ?>○<?php endif; ?>
                    <?= e($state['label_ar'] ?? $key) ?>
                    <?php if (($state['type'] ?? '') === 'initial'): ?><small style="color:#059669;">(بداية)</small><?php endif; ?>
                    <?php if (($state['type'] ?? '') === 'terminal'): ?><small style="color:#DC2626;">(نهاية)</small><?php endif; ?>
                </div>
                <?php endforeach; ?>
            </div>
        </div>
    </div>
</div>
<?php $__template->endSection(); ?>