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

<?php $__template->section('page_actions'); ?>
<a href="/workflows/instances/<?= e($instance->workflow_code) ?>" 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] ?? [];
    $stateType = $currentStateInfo['type'] ?? 'intermediate';
    $isCompleted = (bool) $instance->is_completed;
?>

<!-- Status Banner -->
<div style="padding:20px;margin-bottom:20px;border-radius:8px;background:<?= $isCompleted ? 'linear-gradient(135deg, #F0FDF4, #DCFCE7)' : 'linear-gradient(135deg, #EFF6FF, #DBEAFE)' ?>;border:1px solid <?= $isCompleted ? '#BBF7D0' : '#BFDBFE' ?>;">
    <div style="display:flex;justify-content:space-between;align-items:center;">
        <div style="display:flex;align-items:center;gap:15px;">
            <div style="width:50px;height:50px;border-radius:50%;background:<?= $isCompleted ? '#059669' : '#0284C7' ?>;display:flex;align-items:center;justify-content:center;">
                <span style="color:#fff;font-size:22px;font-weight:700;"><?= $isCompleted ? '&#10003;' : '&#9654;' ?></span>
            </div>
            <div>
                <div style="font-size:13px;color:#6B7280;margin-bottom:2px;"><?= e($definition ? $definition->name_ar : $instance->workflow_code) ?></div>
                <div style="font-size:22px;font-weight:800;color:#1A1A2E;"><?= e($currentStateInfo['label_ar'] ?? $instance->current_state) ?></div>
            </div>
        </div>
        <div style="text-align:left;">
            <div style="font-size:12px;color:#6B7280;">الكيان</div>
            <div style="font-weight:600;font-size:14px;"><span style="font-family:monospace;background:#F3F4F6;padding:2px 8px;border-radius:4px;"><?= e($instance->entity_type) ?></span> #<?= (int) $instance->entity_id ?></div>
        </div>
    </div>
</div>

<div style="display:grid;grid-template-columns:1fr 380px;gap:20px;">
    <!-- Main Content -->
    <div>
        <!-- Instance Details Card -->
        <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:20px;">
                <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;">
                    <div style="padding:12px;background:#F9FAFB;border-radius:6px;">
                        <div style="font-size:11px;color:#9CA3AF;text-transform:uppercase;margin-bottom:4px;">دورة العمل</div>
                        <div style="font-weight:600;color:#1A1A2E;"><?= e($definition ? $definition->name_ar : $instance->workflow_code) ?></div>
                    </div>
                    <div style="padding:12px;background:#F9FAFB;border-radius:6px;">
                        <div style="font-size:11px;color:#9CA3AF;text-transform:uppercase;margin-bottom:4px;">الإصدار</div>
                        <div style="font-weight:600;color:#1A1A2E;">v<?= (int) ($definition ? $definition->version : 1) ?></div>
                    </div>
                    <div style="padding:12px;background:#F9FAFB;border-radius:6px;">
                        <div style="font-size:11px;color:#9CA3AF;text-transform:uppercase;margin-bottom:4px;">دخول الحالة</div>
                        <div style="font-weight:600;color:#1A1A2E;font-size:13px;"><?= e($instance->state_entered_at) ?></div>
                    </div>
                    <div style="padding:12px;background:#F9FAFB;border-radius:6px;">
                        <div style="font-size:11px;color:#9CA3AF;text-transform:uppercase;margin-bottom:4px;">تاريخ الإنشاء</div>
                        <div style="font-weight:600;color:#1A1A2E;font-size:13px;"><?= e($instance->created_at) ?></div>
                    </div>
                    <?php if ($isCompleted): ?>
                    <div style="padding:12px;background:#F0FDF4;border-radius:6px;grid-column:1/-1;">
                        <div style="font-size:11px;color:#059669;text-transform:uppercase;margin-bottom:4px;">تاريخ الاكتمال</div>
                        <div style="font-weight:600;color:#059669;"><?= e($instance->completed_at) ?></div>
                    </div>
                    <?php endif; ?>
                </div>
            </div>
        </div>

        <!-- Transition History Timeline -->
        <div class="card">
            <div style="padding:16px 20px;border-bottom:1px solid #E5E7EB;display:flex;justify-content:space-between;align-items:center;">
                <h3 style="margin:0;color:#1A1A2E;font-size:15px;">سجل الانتقالات</h3>
                <span style="font-size:12px;color:#9CA3AF;"><?= count($history) ?> انتقال</span>
            </div>
            <div style="padding:20px;">
                <?php if (empty($history)): ?>
                    <div style="text-align:center;padding:40px;color:#9CA3AF;">
                        <div style="font-size:32px;margin-bottom:10px;">&#128203;</div>
                        <p style="margin:0;">لا توجد انتقالات مسجلة بعد</p>
                    </div>
                <?php else: ?>
                    <div style="position:relative;padding-right:20px;">
                        <!-- Timeline line -->
                        <div style="position:absolute;right:7px;top:8px;bottom:8px;width:2px;background:#E5E7EB;"></div>

                        <?php foreach ($history as $i => $h): ?>
                        <?php
                            $fromInfo = $states[$h['from_state']] ?? [];
                            $toInfo = $states[$h['to_state']] ?? [];
                            $isLast = ($i === count($history) - 1);
                        ?>
                        <div style="position:relative;padding:0 0 <?= $isLast ? '0' : '24px' ?> 25px;">
                            <!-- Timeline dot -->
                            <div style="position:absolute;right:2px;top:6px;width:12px;height:12px;border-radius:50%;background:<?= $isLast ? '#0D7377' : '#D1D5DB' ?>;border:2px solid #fff;box-shadow:0 0 0 2px <?= $isLast ? '#0D7377' : '#E5E7EB' ?>;"></div>

                            <div style="background:#F9FAFB;border-radius:8px;padding:14px 16px;border:1px solid #F3F4F6;">
                                <div style="display:flex;justify-content:space-between;align-items:start;margin-bottom:8px;">
                                    <span style="font-weight:700;color:#1A1A2E;font-size:14px;"><?= e($h['transition_name']) ?></span>
                                    <span style="color:#9CA3AF;font-size:11px;white-space:nowrap;"><?= e($h['created_at']) ?></span>
                                </div>
                                <div style="display:flex;align-items:center;gap:8px;margin-bottom:6px;">
                                    <span style="background:#FEF2F2;color:#DC2626;padding:2px 8px;border-radius:4px;font-size:12px;font-weight:600;"><?= e($fromInfo['label_ar'] ?? $h['from_state']) ?></span>
                                    <span style="color:#9CA3AF;font-size:14px;">&#8592;</span>
                                    <span style="background:#F0FDF4;color:#059669;padding:2px 8px;border-radius:4px;font-size:12px;font-weight:600;"><?= e($toInfo['label_ar'] ?? $h['to_state']) ?></span>
                                </div>
                                <div style="font-size:12px;color:#9CA3AF;">
                                    <?= e($h['employee_name'] ?? 'النظام') ?>
                                    &middot;
                                    <span style="background:<?= ($h['trigger_type'] ?? '') === 'timeout' ? '#FFF7ED' : '#F3F4F6' ?>;padding:1px 6px;border-radius:3px;"><?= e($h['trigger_type'] ?? 'manual') ?></span>
                                </div>
                                <?php if (!empty($h['notes'])): ?>
                                    <div style="margin-top:8px;font-size:13px;color:#4B5563;background:#fff;padding:8px 12px;border-radius:6px;border:1px solid #E5E7EB;line-height:1.5;"><?= e($h['notes']) ?></div>
                                <?php endif; ?>
                            </div>
                        </div>
                        <?php endforeach; ?>
                    </div>
                <?php endif; ?>
            </div>
        </div>
    </div>

    <!-- Sidebar -->
    <div>
        <!-- Available Transitions -->
        <?php if (!$isCompleted && !empty($available)): ?>
        <div class="card" style="margin-bottom:20px;border:2px solid #0D7377;">
            <div style="padding:14px 16px;background:#F0FDFA;border-bottom:1px solid #CCFBF1;">
                <h4 style="margin:0;color:#0D7377;font-size:14px;font-weight:700;">الانتقالات المتاحة</h4>
            </div>
            <div style="padding:16px;">
                <?php foreach ($available as $idx => $trans): ?>
                <form method="POST" action="/workflows/instances/<?= (int) $instance->id ?>/transition" style="<?= $idx < count($available) - 1 ? 'margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid #F3F4F6;' : '' ?>">
                    <?= csrf_field() ?>
                    <input type="hidden" name="transition_name" value="<?= e($trans['name']) ?>">

                    <div style="margin-bottom:10px;">
                        <div style="font-weight:700;color:#1A1A2E;font-size:14px;margin-bottom:3px;"><?= e($trans['name']) ?></div>
                        <div style="font-size:12px;color:#6B7280;display:flex;align-items:center;gap:4px;">
                            &#8594; <span style="color:#059669;font-weight:600;"><?= e($trans['to_label_ar']) ?></span>
                        </div>
                    </div>

                    <div style="margin-bottom:10px;">
                        <textarea name="notes" rows="2" placeholder="ملاحظات (اختياري)..." style="width:100%;border:1px solid #E5E7EB;border-radius:6px;padding:8px 10px;font-size:13px;resize:vertical;font-family:inherit;"></textarea>
                    </div>

                    <?php if ($trans['can_execute']): ?>
                        <button type="submit" class="btn btn-sm btn-primary" style="width:100%;padding:10px;" onclick="return confirm('تأكيد تنفيذ الانتقال: <?= e($trans['name']) ?>؟')">
                            تنفيذ الانتقال
                        </button>
                    <?php else: ?>
                        <button type="button" class="btn btn-sm" style="width:100%;padding:10px;background:#F3F4F6;color:#9CA3AF;cursor:not-allowed;border:1px solid #E5E7EB;" disabled>
                            غير متاح — شرط غير مستوفى
                        </button>
                    <?php endif; ?>
                </form>
                <?php endforeach; ?>
            </div>
        </div>
        <?php elseif ($isCompleted): ?>
        <div class="card" style="margin-bottom:20px;text-align:center;padding:30px;">
            <div style="width:60px;height:60px;border-radius:50%;background:#F0FDF4;display:inline-flex;align-items:center;justify-content:center;margin-bottom:12px;">
                <span style="color:#059669;font-size:28px;">&#10003;</span>
            </div>
            <div style="font-weight:700;color:#059669;font-size:15px;">دورة العمل مكتملة</div>
            <div style="font-size:12px;color:#6B7280;margin-top:4px;"><?= e($instance->completed_at) ?></div>
        </div>
        <?php else: ?>
        <div class="card" style="margin-bottom:20px;text-align:center;padding:30px;color:#9CA3AF;">
            <div style="font-size:32px;margin-bottom:8px;">&#128274;</div>
            <p style="margin:0;font-size:13px;">لا توجد انتقالات يدوية متاحة حالياً</p>
        </div>
        <?php endif; ?>

        <!-- State Map (Progress Tracker) -->
        <div class="card">
            <div style="padding:14px 16px;border-bottom:1px solid #E5E7EB;">
                <h4 style="margin:0;color:#1A1A2E;font-size:14px;">مسار دورة العمل</h4>
            </div>
            <div style="padding:16px;">
                <?php
                    $stateKeys = array_keys($states);
                    $currentIdx = array_search($instance->current_state, $stateKeys);
                ?>
                <?php foreach ($states as $key => $state): ?>
                <?php
                    $isCurrent = ($key === $instance->current_state);
                    $idx = array_search($key, $stateKeys);
                    $isPast = ($currentIdx !== false && $idx < $currentIdx);
                    $type = $state['type'] ?? 'intermediate';

                    if ($isCurrent) {
                        $dotColor = '#0D7377';
                        $bgColor = '#F0FDFA';
                        $borderColor = '#0D7377';
                        $textColor = '#0D7377';
                    } elseif ($isPast || $isCompleted) {
                        $dotColor = '#059669';
                        $bgColor = '#F0FDF4';
                        $borderColor = '#BBF7D0';
                        $textColor = '#059669';
                    } else {
                        $dotColor = '#D1D5DB';
                        $bgColor = '#F9FAFB';
                        $borderColor = '#E5E7EB';
                        $textColor = '#6B7280';
                    }
                ?>
                <div style="display:flex;align-items:center;gap:10px;padding:8px 10px;margin-bottom:4px;border-radius:6px;background:<?= $bgColor ?>;border:1px solid <?= $borderColor ?>;">
                    <span style="width:10px;height:10px;border-radius:50%;background:<?= $dotColor ?>;flex-shrink:0;<?= $isCurrent ? 'box-shadow:0 0 0 3px rgba(13,115,119,0.2);' : '' ?>"></span>
                    <span style="flex:1;font-size:13px;font-weight:<?= $isCurrent ? '700' : '500' ?>;color:<?= $textColor ?>;"><?= e($state['label_ar'] ?? $key) ?></span>
                    <?php if ($type === 'initial'): ?>
                        <span style="font-size:10px;background:#EFF6FF;color:#0284C7;padding:1px 5px;border-radius:3px;">بداية</span>
                    <?php elseif ($type === 'terminal'): ?>
                        <span style="font-size:10px;background:#FEF2F2;color:#DC2626;padding:1px 5px;border-radius:3px;">نهاية</span>
                    <?php endif; ?>
                </div>
                <?php endforeach; ?>
            </div>
        </div>
    </div>
</div>
<?php $__template->endSection(); ?>
