<div class="ext-content">
    <div class="ext-breadcrumb">
        <a href="/ext/<?= htmlspecialchars($token) ?>" class="btn btn-ghost btn-sm">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
            <?= t('overview') ?>
        </a>
    </div>

    <?php if ($error): ?><div class="alert alert-error"><?= htmlspecialchars($error) ?></div><?php endif; ?>
    <?php if ($success): ?><div class="alert alert-success"><?= htmlspecialchars($success) ?></div><?php endif; ?>

    <div class="ext-task-detail">
        <!-- Main -->
        <div class="ext-task-main">
            <h1 class="ext-task-title-lg"><?= htmlspecialchars($task['title']) ?></h1>

            <?php if ($task['description']): ?>
            <div class="card">
                <div class="card-header"><h2 class="card-title"><?= t('description') ?></h2></div>
                <div class="card-body">
                    <div class="task-description rich-content"><?= extRenderContent($task['description']) ?></div>
                </div>
            </div>
            <?php endif; ?>

            <!-- Comments -->
            <div class="card">
                <div class="card-header"><h2 class="card-title"><?= t('comments') ?> (<?= count($comments) ?>)</h2></div>
                <div class="card-body">
                    <?php if (empty($comments)): ?>
                    <p class="text-muted"><?= t('no_comments') ?></p>
                    <?php endif; ?>
                    <div class="comments-list">
                        <?php foreach ($comments as $c): ?>
                        <div class="comment">
                            <div class="comment-avatar">
                                <?php if ($c['user_id']): ?>
                                <?php
                                $uAvatar = ['username' => $c['user_name'] ?? '?', 'avatar' => $c['avatar'] ?? null, 'id' => $c['user_id']];
                                $initials = mb_strtoupper(mb_substr($uAvatar['username'], 0, 1));
                                $colors = ['#4f46e5','#7c3aed','#db2777','#dc2626','#d97706','#059669','#0284c7'];
                                $color = $colors[crc32($uAvatar['username']) % count($colors)];
                                ?>
                                <span class="avatar-initials" style="background:<?= $color ?>;width:32px;height:32px;font-size:13px"><?= $initials ?></span>
                                <?php else: ?>
                                <?php
                                $extInitial = mb_strtoupper(mb_substr((string)($c['external_name'] ?? '?'), 0, 1));
                                ?>
                                <span class="avatar-initials avatar-ext" style="width:32px;height:32px;font-size:13px"><?= htmlspecialchars($extInitial) ?></span>
                                <?php endif; ?>
                            </div>
                            <div class="comment-body">
                                <div class="comment-header">
                                    <strong>
                                        <?= htmlspecialchars($c['user_id'] ? ($c['user_name'] ?? '—') : ($c['external_name'] ?? t('ext_badge'))) ?>
                                        <?php if (!$c['user_id']): ?><span class="badge-ext" style="font-size:10px"><?= t('ext_badge') ?></span><?php endif; ?>
                                    </strong>
                                    <span class="comment-time"><?= htmlspecialchars(date('d.m.Y H:i', strtotime($c['created_at']))) ?></span>
                                </div>
                                <div class="comment-content rich-content"><?= extRenderContent($c['content']) ?></div>
                            </div>
                        </div>
                        <?php endforeach; ?>
                    </div>

                    <form method="POST" action="/ext/<?= htmlspecialchars($token) ?>/task/<?= $task['id'] ?>" class="comment-form" style="margin-top:16px">
                        <input type="hidden" name="action" value="add_comment">
                        <input type="hidden" name="ext_token" value="<?= htmlspecialchars($token) ?>">
                        <div class="comment-input-wrap">
                            <div id="ext-comment-editor" class="rich-editor-wrap" style="min-height:80px"></div>
                            <input type="hidden" name="content" id="ext-comment-hidden">
                            <button type="submit" class="btn btn-primary btn-sm" style="margin-top:8px"><?= t('send') ?></button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Sidebar -->
        <div class="ext-task-sidebar">
            <div class="card">
                <div class="card-body">
                    <div class="task-meta-item">
                        <span class="task-meta-label"><?= t('status') ?></span>
                        <span class="status-badge" style="--status-color:<?= htmlspecialchars($task['status_color'] ?? '#6b7280') ?>">
                            <?= htmlspecialchars($task['status_name'] ?? '—') ?>
                        </span>
                    </div>
                    <?php if ($task['due_date']): ?>
                    <div class="task-meta-item">
                        <span class="task-meta-label"><?= t('due_label') ?></span>
                        <span class="task-due <?= $task['due_date'] < date('Y-m-d') ? 'overdue' : '' ?>">
                            <?= htmlspecialchars(date('d.m.Y', strtotime($task['due_date']))) ?>
                        </span>
                    </div>
                    <?php endif; ?>
                    <?php if ($task['priority']): ?>
                    <div class="task-meta-item">
                        <span class="task-meta-label"><?= t('priority') ?></span>
                        <?php
                        $pMap = ['low'=>['priority_low','badge-low'],'medium'=>['priority_medium','badge-medium'],'high'=>['priority_high','badge-high'],'urgent'=>['priority_urgent','badge-urgent']];
                        $pInfo = $pMap[$task['priority']] ?? ['priority_medium','badge-medium'];
                        ?>
                        <span class="badge priority-badge <?= $pInfo[1] ?>"><?= t($pInfo[0]) ?></span>
                    </div>
                    <?php endif; ?>
                </div>
            </div>

            <!-- Status change -->
            <div class="card">
                <div class="card-header"><h2 class="card-title"><?= t('change_status') ?></h2></div>
                <div class="card-body">
                    <form method="POST" action="/ext/<?= htmlspecialchars($token) ?>/task/<?= $task['id'] ?>">
                        <input type="hidden" name="action" value="update_status">
                        <input type="hidden" name="ext_token" value="<?= htmlspecialchars($token) ?>">
                        <select name="status_id" class="form-select" data-auto-submit>
                            <?php foreach ($statuses as $s): ?>
                            <option value="<?= $s['id'] ?>" <?= $task['status_id'] == $s['id'] ? 'selected' : '' ?>>
                                <?= htmlspecialchars($s['name']) ?>
                            </option>
                            <?php endforeach; ?>
                        </select>
                        <noscript><button type="submit" class="btn btn-primary btn-sm" style="margin-top:8px"><?= t('save') ?></button></noscript>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<?php function extRenderContent(string $content): string {
    if (strpos($content, '<') === false) {
        $enc = htmlspecialchars($content, ENT_QUOTES, 'UTF-8');
        $enc = preg_replace_callback('/@\[([^\]]+)\]/', fn($m) => '<span class="mention">@' . $m[1] . '</span>', $enc);
        return nl2br($enc);
    }
    return $content;
} ?>
<script nonce="<?= csp_nonce() ?>" src="/assets/js/richeditor.js"></script>
<style>
.re-toolbar{display:flex;align-items:center;gap:2px;padding:4px 6px;background:#f9fafb;border:1px solid #e5e7eb;border-bottom:none;border-radius:6px 6px 0 0;flex-wrap:wrap}
.re-btn{background:none;border:1px solid transparent;border-radius:3px;cursor:pointer;padding:3px 6px;font-size:.8rem;color:#111;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.re-btn:hover{background:#f3f4f6;border-color:#e5e7eb}
.re-sep{width:1px;height:16px;background:#e5e7eb;margin:0 3px}
.re-editor{border:1px solid #e5e7eb;border-radius:0 0 6px 6px;padding:8px 10px;font-size:.875rem;outline:none;overflow-y:auto;line-height:1.5;color:#111;background:#fff}
.re-editor:empty::before{content:attr(data-placeholder);color:#9ca3af;pointer-events:none}
.re-editor:focus{border-color:#4f46e5}
.rich-content table,.re-editor table{border-collapse:collapse;width:100%;margin:8px 0}
.rich-content td,.rich-content th,.re-editor td,.re-editor th{border:1px solid #d1d5db;padding:6px 10px;min-width:60px}
.rich-content img,.re-editor img{max-width:100%;height:auto;border-radius:4px;margin:4px 0}
.rich-content p,.re-editor p{margin:.4em 0}
.mention-dropdown{position:fixed;z-index:9999;background:#fff;border:1px solid #e5e7eb;border-radius:6px;box-shadow:0 4px 16px rgba(0,0,0,.12);min-width:220px;max-height:220px;overflow-y:auto;display:none}
.mention-item{display:flex;align-items:center;gap:8px;padding:7px 12px;cursor:pointer;font-size:.875rem;color:#111}
.mention-item:hover,.mention-item.active{background:#f3f4f6}
.mention-item-badge{font-size:.68rem;background:#fef3c7;color:#b45309;border-radius:3px;padding:1px 4px;margin-left:auto}
.mention{display:inline;background:#eff6ff;color:#1d4ed8;border-radius:3px;padding:1px 3px;font-weight:500;font-size:.9em}
</style>
<script nonce="<?= csp_nonce() ?>">
window.addEventListener('DOMContentLoaded', () => {
    const mentionData = <?= !empty($mentionData) ? json_encode(array_values($mentionData)) : '[]' ?>;
    initRichEditor('ext-comment-editor', 'ext-comment-hidden', {
        placeholder: <?= json_encode(t('ext_comment_placeholder')) ?>,
        minHeight: 80,
        mentionData: mentionData
    });
});
</script>
