// Syntax showcase — every feature in one UserCard.
//
// NOT compiled by build.rs — this references a `User` struct (with fields
// like `avatar_url`, `skills`, `follower_count`, `relationship`) that a
// real project would define. Read this as a syntax cheat sheet covering
// @Component composition, nested conditionals, loops, match expressions,
// optional props via `if let Some(...)`, and attribute interpolation.
//
// For a compilable UserCard, see
// `examples/demo_templates/DemoUserCard.ruitl`.

import "std::collections" { HashMap, Vec }

component UserCard {
    props {
        user: User,
        show_actions: bool = true,
        show_contact: bool = false,
        theme: String = "default",
        size: String = "medium",
    }
}

component StatusBadge {
    props {
        status: String,
        size: String = "small",
    }
}

component SkillTag {
    props {
        skill: String,
        level: String = "beginner",
    }
}

ruitl UserCard(props: UserCardProps) {
    <div class={format!("user-card user-card-{} user-card-{}", props.theme, props.size)}>
        <div class="user-card-header">
            <div class="user-avatar">
                if let Some(avatar) = props.user.avatar_url {
                    <img
                        src={avatar}
                        alt={format!("{}'s avatar", props.user.name)}
                        class="avatar-image"
                    />
                } else {
                    <div class="avatar-placeholder">
                        <span class="avatar-initials">
                            {props.user.name.chars().take(2).collect::<String>().to_uppercase()}
                        </span>
                    </div>
                }
            </div>

            <div class="user-info">
                <h3 class="user-name">{props.user.name}</h3>
                if let Some(title) = props.user.title {
                    <p class="user-title">{title}</p>
                }

                <div class="user-status">
                    @StatusBadge(
                        status: props.user.status.clone(),
                        size: "small"
                    )

                    if props.user.is_verified {
                        <span class="verified-badge" title="Verified user">
                            <i class="icon icon-verified"></i>
                        </span>
                    }
                </div>
            </div>
        </div>

        <div class="user-card-body">
            if let Some(bio) = props.user.bio {
                <div class="user-bio">
                    <p>{bio}</p>
                </div>
            }

            if !props.user.skills.is_empty() {
                <div class="user-skills">
                    <h4 class="skills-title">Skills</h4>
                    <div class="skills-list">
                        for skill in props.user.skills {
                            @SkillTag(
                                skill: skill.name.clone(),
                                level: skill.level.clone()
                            )
                        }
                    </div>
                </div>
            }

            if props.show_contact && (props.user.email.is_some() || props.user.website.is_some()) {
                <div class="user-contact">
                    <h4 class="contact-title">Contact</h4>
                    <div class="contact-list">
                        if let Some(email) = props.user.email {
                            <a href={format!("mailto:{}", email)} class="contact-link contact-email">
                                <i class="icon icon-email"></i>
                                <span>{email}</span>
                            </a>
                        }

                        if let Some(website) = props.user.website {
                            <a href={website} class="contact-link contact-website" target="_blank" rel="noopener noreferrer">
                                <i class="icon icon-link"></i>
                                <span>Website</span>
                            </a>
                        }
                    </div>
                </div>
            }

            <div class="user-stats">
                <div class="stat">
                    <span class="stat-value">{props.user.follower_count}</span>
                    <span class="stat-label">Followers</span>
                </div>
                <div class="stat">
                    <span class="stat-value">{props.user.following_count}</span>
                    <span class="stat-label">Following</span>
                </div>
                <div class="stat">
                    <span class="stat-value">{props.user.post_count}</span>
                    <span class="stat-label">Posts</span>
                </div>
            </div>
        </div>

        if props.show_actions {
            <div class="user-card-actions">
                match props.user.relationship {
                    "self" => {
                        @Button(
                            text: "Edit Profile",
                            variant: "secondary",
                            size: "small",
                            icon: Some("edit".to_string())
                        )
                    }
                    "following" => {
                        @Button(
                            text: "Unfollow",
                            variant: "outline",
                            size: "small"
                        )
                        @Button(
                            text: "Message",
                            variant: "primary",
                            size: "small",
                            icon: Some("message".to_string())
                        )
                    }
                    "not_following" => {
                        @Button(
                            text: "Follow",
                            variant: "primary",
                            size: "small",
                            icon: Some("plus".to_string())
                        )
                        @Button(
                            text: "Message",
                            variant: "secondary",
                            size: "small",
                            icon: Some("message".to_string())
                        )
                    }
                    "blocked" => {
                        @Button(
                            text: "Unblock",
                            variant: "danger",
                            size: "small"
                        )
                    }
                    _ => {
                        @Button(
                            text: "View Profile",
                            variant: "secondary",
                            size: "small"
                        )
                    }
                }
            </div>
        }

        if props.user.is_premium {
            <div class="premium-indicator">
                <i class="icon icon-star"></i>
                <span>Premium Member</span>
            </div>
        }
    </div>
}

ruitl StatusBadge(props: StatusBadgeProps) {
    <span class={format!("status-badge status-badge-{} status-badge-{}", props.status, props.size)}>
        match props.status {
            "online" => {
                <i class="status-icon icon-circle-filled text-green"></i>
                <span>Online</span>
            }
            "away" => {
                <i class="status-icon icon-circle-filled text-yellow"></i>
                <span>Away</span>
            }
            "busy" => {
                <i class="status-icon icon-circle-filled text-red"></i>
                <span>Busy</span>
            }
            "offline" => {
                <i class="status-icon icon-circle text-gray"></i>
                <span>Offline</span>
            }
            _ => {
                <i class="status-icon icon-circle text-gray"></i>
                <span>Unknown</span>
            }
        }
    </span>
}

ruitl SkillTag(props: SkillTagProps) {
    <span class={format!("skill-tag skill-level-{}", props.level)}>
        <span class="skill-name">{props.skill}</span>
        if props.level != "beginner" {
            <span class="skill-level">
                match props.level {
                    "expert" => "★★★"
                    "intermediate" => "★★☆"
                    "advanced" => "★★★"
                    _ => "★☆☆"
                }
            </span>
        }
    </span>
}
