<?php
/**
 * The template for displaying comments
 *
 * @package LaraCopilot
 * @version 1.0.0
 */

if (post_password_required()) {
    return;
}
?>

<div id="comments" class="comments-area mt-12 pt-8 border-t border-red-500/20">
    <?php if (have_comments()) : ?>
        <h3 class="comments-title text-2xl font-bold text-white mb-8">
            <?php
            $comments_number = get_comments_number();
            if ($comments_number == 1) {
                echo '1 Comment';
            } else {
                echo $comments_number . ' Comments';
            }
            ?>
        </h3>

        <ol class="comment-list space-y-6">
            <?php
            wp_list_comments(array(
                'style'      => 'ol',
                'short_ping' => true,
                'callback'   => 'laracopilot_comment_callback',
            ));
            ?>
        </ol>

        <?php
        the_comments_navigation(array(
            'prev_text' => '<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg> Older Comments',
            'next_text' => 'Newer Comments <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>',
        ));
        ?>

    <?php endif; ?>

    <?php if (!comments_open() && get_comments_number() && post_type_supports(get_post_type(), 'comments')) : ?>
        <p class="no-comments text-gray-400">Comments are closed.</p>
    <?php endif; ?>

    <?php
    $comment_form_args = array(
        'title_reply'          => 'Leave a Comment',
        'title_reply_to'       => 'Leave a Reply to %s',
        'cancel_reply_link'    => 'Cancel Reply',
        'label_submit'         => 'Post Comment',
        'comment_field'        => '<div class="comment-form-comment mb-6"><label for="comment" class="block text-white font-semibold mb-2">Comment *</label><textarea id="comment" name="comment" cols="45" rows="8" class="w-full px-4 py-3 bg-black/50 border border-red-500/30 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-red-500" placeholder="Share your thoughts..." required></textarea></div>',
        'fields'               => array(
            'author' => '<div class="comment-form-author mb-4"><label for="author" class="block text-white font-semibold mb-2">Name *</label><input id="author" name="author" type="text" value="' . esc_attr($commenter['comment_author']) . '" size="30" class="w-full px-4 py-3 bg-black/50 border border-red-500/30 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-red-500" placeholder="Your name" required /></div>',
            'email'  => '<div class="comment-form-email mb-4"><label for="email" class="block text-white font-semibold mb-2">Email *</label><input id="email" name="email" type="email" value="' . esc_attr($commenter['comment_author_email']) . '" size="30" class="w-full px-4 py-3 bg-black/50 border border-red-500/30 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-red-500" placeholder="your@email.com" required /></div>',
            'url'    => '<div class="comment-form-url mb-6"><label for="url" class="block text-white font-semibold mb-2">Website</label><input id="url" name="url" type="url" value="' . esc_attr($commenter['comment_author_url']) . '" size="30" class="w-full px-4 py-3 bg-black/50 border border-red-500/30 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-red-500" placeholder="https://yourwebsite.com" /></div>',
        ),
        'class_form'           => 'comment-form',
        'class_submit'         => 'submit bg-red-600 text-white px-8 py-3 rounded-lg hover:bg-red-700 transition-colors font-semibold',
        'submit_button'        => '<input name="%1$s" type="submit" id="%2$s" class="%3$s" value="%4$s" />',
        'submit_field'         => '<div class="form-submit">%1$s %2$s</div>',
    );

    comment_form($comment_form_args);
    ?>
</div>

<?php
/**
 * Custom comment callback function
 */
function laracopilot_comment_callback($comment, $args, $depth) {
    $GLOBALS['comment'] = $comment;
    ?>
    <li <?php comment_class('comment'); ?> id="comment-<?php comment_ID(); ?>">
        <div class="comment-body bg-black/40 backdrop-blur-sm border border-red-500/20 rounded-2xl p-6">
            <div class="flex items-start space-x-4">
                <div class="flex-shrink-0">
                    <?php echo get_avatar($comment, 50, '', '', array('class' => 'w-12 h-12 rounded-full')); ?>
                </div>
                
                <div class="flex-1">
                    <div class="comment-meta mb-3">
                        <div class="comment-author text-red-400 font-semibold">
                            <?php comment_author_link(); ?>
                        </div>
                        <div class="comment-date text-gray-400 text-sm">
                            <time datetime="<?php comment_time('c'); ?>">
                                <?php comment_date(); ?> at <?php comment_time(); ?>
                            </time>
                        </div>
                    </div>
                    
                    <div class="comment-content text-gray-300 leading-relaxed">
                        <?php comment_text(); ?>
                    </div>
                    
                    <div class="comment-reply mt-4">
                        <?php
                        comment_reply_link(array_merge($args, array(
                            'depth'     => $depth,
                            'max_depth' => $args['max_depth'],
                            'class'     => 'text-red-400 hover:text-red-300 transition-colors text-sm font-medium'
                        )));
                        ?>
                    </div>
                </div>
            </div>
        </div>
    <?php
}
?>