<?php
/**
 * Public Changelog Page — content only, wrapped by the WordPress theme.
 *
 * Data is passed via $GLOBALS['fs_changelog_data'] (array of version blocks)
 * set by render_changelog_page() before calling get_header()/get_footer().
 *
 * @package Freelance_Studio
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

$versions = $GLOBALS['fs_changelog_data'] ?? array();

/**
 * Format a changelog item: **bold**, `code`.
 */
if ( ! function_exists( 'fs_format_changelog_item' ) ) {
    function fs_format_changelog_item( $text ) {
        $text = preg_replace( '/\*\*(.+?)\*\*/', '<strong>$1</strong>', $text );
        $text = preg_replace( '/`([^`]+)`/', '<code>$1</code>', $text );
        return wp_kses( $text, array(
            'strong' => array(),
            'em'     => array(),
            'code'   => array(),
        ) );
    }
}
?>

<style>
.fs-changelog-wrap {
    max-width: 820px;
    margin: 40px auto 60px;
    padding: 0 20px;
}
.fs-changelog-wrap h1 {
    font-size: 28px;
    font-weight: 700;
    color: var(--fs-gray-900, #1F2937);
    margin-bottom: 6px;
}
.fs-changelog-subtitle {
    font-size: 14px;
    color: var(--fs-gray-500, #9CA3AF);
    margin-bottom: 32px;
}
.fs-cl-version {
    background: #fff;
    border-radius: var(--fs-border-radius-lg, 12px);
    box-shadow: var(--fs-shadow, 0 2px 8px rgba(123,104,166,0.08));
    margin-bottom: 16px;
    overflow: hidden;
    border: 1px solid var(--fs-gray-200, #EEF1F5);
}
.fs-cl-version-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: var(--fs-gray-50, #FAFBFC);
    border-bottom: 1px solid var(--fs-gray-200, #EEF1F5);
    cursor: pointer;
    user-select: none;
}
.fs-cl-version-header:hover {
    background: var(--fs-gray-100, #F5F7FA);
}
.fs-cl-version-badge {
    background: var(--fs-primary, #1FBBA6);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}
.fs-cl-version-count {
    margin-left: auto;
    font-size: 12px;
    color: var(--fs-gray-500, #9CA3AF);
    white-space: nowrap;
}
.fs-cl-version-chevron {
    color: var(--fs-gray-400, #C5CAD3);
    font-size: 11px;
    transition: transform 0.2s;
    flex-shrink: 0;
}
.fs-cl-version.open .fs-cl-version-chevron { transform: rotate(180deg); }
.fs-cl-version-body {
    display: none;
    padding: 16px 20px 20px;
}
.fs-cl-version.open .fs-cl-version-body { display: block; }
.fs-cl-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--fs-gray-500, #9CA3AF);
    margin: 16px 0 8px;
}
.fs-cl-section-title:first-child { margin-top: 0; }
.fs-cl-items {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    gap: 6px;
    columns: unset !important;
    column-count: unset !important;
    grid-template-columns: unset !important;
    width: 100%;
}
.fs-cl-item {
    display: flex !important;
    gap: 10px;
    font-size: 14px;
    color: var(--fs-gray-700, #4B5563);
    line-height: 1.55;
    width: 100%;
    min-width: 0;
    float: none !important;
    vertical-align: unset !important;
    margin-bottom: 6px;
    white-space: normal !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.fs-cl-item::before {
    content: '›';
    color: var(--fs-primary, #1FBBA6);
    font-weight: 700;
    font-size: 16px;
    line-height: 1.4;
    flex-shrink: 0;
}
.fs-cl-item-text {
    min-width: 0;
    flex: 1;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.fs-cl-items li {
    margin-left: 0 !important;
}
.fs-cl-item strong { color: var(--fs-gray-900, #1F2937); }
.fs-cl-item code {
    font-family: 'SF Mono', Monaco, 'Courier New', monospace;
    font-size: 12px;
    background: var(--fs-gray-100, #F5F7FA);
    padding: 1px 5px;
    border-radius: 3px;
    color: var(--fs-gray-700, #4B5563);
}
.fs-cl-empty {
    text-align: center;
    padding: 48px 20px;
    color: var(--fs-gray-500, #9CA3AF);
    font-size: 15px;
}
@media (max-width: 600px) {
    .fs-changelog-wrap { padding: 0 12px; margin-top: 24px; }
    .fs-cl-version-header { padding: 12px 16px; }
    .fs-cl-version-body { padding: 14px 16px 16px; }
}
</style>

<div class="fs-changelog-wrap">

    <h1>Changelog</h1>
    <p class="fs-changelog-subtitle">Release notes &amp; version history for Freelance Studio</p>

    <?php if ( empty( $versions ) ) : ?>
        <div class="fs-cl-empty">No changelog entries found.</div>
    <?php else : ?>

        <?php foreach ( $versions as $idx => $ver ) :
            $total_items = 0;
            foreach ( $ver['sections'] as $sec ) {
                $total_items += count( $sec['items'] );
            }
            $open_class = ( $idx === 0 ) ? ' open' : '';
        ?>
        <div class="fs-cl-version<?php echo  esc_attr( $open_class ); ?>">
            <div class="fs-cl-version-header" onclick="this.closest('.fs-cl-version').classList.toggle('open')">
                <span class="fs-cl-version-badge"><?php echo esc_html( $ver['label'] ); ?></span>
                <span class="fs-cl-version-count"><?php echo  intval( $total_items ); ?> change<?php echo  esc_html( $total_items !== 1 ? 's' : '' ); ?></span>
                <span class="fs-cl-version-chevron">▼</span>
            </div>
            <div class="fs-cl-version-body">
                <?php foreach ( $ver['sections'] as $sec ) : ?>
                    <?php if ( ! empty( $sec['title'] ) ) : ?>
                        <div class="fs-cl-section-title"><?php echo esc_html( $sec['title'] ); ?></div>
                    <?php endif; ?>
                    <?php if ( ! empty( $sec['items'] ) ) : ?>
                        <ul class="fs-cl-items">
                            <?php foreach ( $sec['items'] as $item ) : ?>
                                <li class="fs-cl-item"><span class="fs-cl-item-text"><?php echo  wp_kses_post( fs_format_changelog_item( $item ) ); ?></span></li>
                            <?php endforeach; ?>
                        </ul>
                    <?php endif; ?>
                <?php endforeach; ?>
            </div>
        </div>
        <?php endforeach; ?>

    <?php endif; ?>

</div>
