<?php
use App\Core\Auth;
use function App\Core\{e, url};

$stories = $stories ?? [];
$storyTitle = (string) ($storyTitle ?? 'Hikayeler');
$storyEmpty = (string) ($storyEmpty ?? 'Aktif hikaye yok.');
$storyAllowCreate = (bool) ($storyAllowCreate ?? Auth::check());
$storyInlineComposer = (bool) ($storyInlineComposer ?? false);
$mediaUrl = static function (string $path): string {
    $path = trim($path);
    if ($path === '') {
        return '';
    }

    return preg_match('~^https?://~i', $path) ? $path : url('/' . ltrim($path, '/'));
};
?>
<section class="story-strip" data-story-strip>
    <div class="story-strip-head">
        <strong><?= e($storyTitle) ?></strong>
        <?php if ($storyAllowCreate): ?><button class="pill story-add-btn" type="button" data-story-compose-open>Story Ekle</button><?php endif; ?>
    </div>

    <?php if ($storyInlineComposer && $storyAllowCreate): ?>
        <form class="story-composer" action="/api/stories/create" method="post" enctype="multipart/form-data" data-story-composer hidden>
            <input type="hidden" name="_csrf" value="<?= e(\App\Core\Csrf::token()) ?>">
            <div class="story-composer-grid">
                <label>Story metni<textarea name="content" rows="3" maxlength="500" placeholder="24 saatlik bir durum yaz..."></textarea></label>
                <label>Link<input name="link_url" type="url" placeholder="https://..."></label>
                <label class="story-file-drop" data-story-dropzone>
                    <span>+</span>
                    <strong>Gorsel ekle</strong>
                    <input type="file" name="media" accept="image/jpeg,image/png,image/webp,image/gif" data-story-file>
                </label>
            </div>
            <div class="story-composer-actions">
                <span data-story-error></span>
                <button class="pill primary" type="submit">Yayinla</button>
            </div>
        </form>
    <?php endif; ?>

    <div class="story-strip-scroller">
        <?php if ($stories === []): ?>
            <div class="story-empty"><?= e($storyEmpty) ?></div>
        <?php else: ?>
            <?php foreach ($stories as $story): ?>
                <?php
                $name = (string) (($story['display_name'] ?? '') ?: ($story['nickname'] ?? $story['username'] ?? 'User'));
                $avatar = (string) ($story['avatar'] ?? '');
                ?>
                <button
                    class="story-bubble<?= !empty($story['viewer_seen']) ? ' is-seen' : '' ?>"
                    type="button"
                    data-story-open
                    data-story-id="<?= (int) ($story['id'] ?? 0) ?>"
                    data-user-id="<?= (int) ($story['user_id'] ?? 0) ?>"
                >
                    <span class="story-ring">
                        <?php if ($avatar !== ''): ?><img src="<?= e($mediaUrl($avatar)) ?>" alt="<?= e($name) ?>"><?php else: ?><em><?= e(strtoupper(substr($name, 0, 1) ?: 'Z')) ?></em><?php endif; ?>
                    </span>
                    <small><?= e($name) ?></small>
                </button>
            <?php endforeach; ?>
        <?php endif; ?>
    </div>
</section>
