use leptos::prelude::*;

#[derive(Clone, Copy, PartialEq, Default)]
pub enum CardVariant {
    Auth,
    #[default]
    L1,
    L2,
    L3,
    IconContainer,
}

#[component]
pub fn Card(
    children: Children,
    #[prop(optional)] variant: CardVariant,
    #[prop(optional)] class: Option<&'static str>,
    #[prop(optional)] max_width: Option<&'static str>,
    #[prop(optional)] padding: Option<&'static str>,
    #[prop(optional)] id: Option<&'static str>,
) -> impl IntoView {
    let base_classes = "rounded-2xl backdrop-blur-[10px] shadow-[0_8px_32px_var(--login-card-shadow)]";
    let variant_classes = match variant {
        CardVariant::Auth => "border-2 border-[var(--border-primary)] [background:var(--auth-card-bg-gradient)]",
        CardVariant::IconContainer => "border border-[var(--border-secondary)] [background:var(--auth-card-bg-gradient)]",
        CardVariant::L1 => "[background:var(--generic-level-1-card-bg-gradient)]",
        CardVariant::L2 => "[background:var(--generic-level-2-card-bg-gradient)]",
        CardVariant::L3 => "bg-[var(--generic-level-3-card-bg)]",
    };
    
    let max_w = max_width.unwrap_or("max-w-[400px]");
    let p = padding.unwrap_or("p-10");
    
    let classes = match class {
        Some(c) => format!("{} {} {} {} {}", base_classes, variant_classes, max_w, p, c),
        None => format!("{} {} {} {}", base_classes, variant_classes, max_w, p),
    };
    
    view! {
        <div class=classes id=id>
            {children()}
        </div>
    }
}

#[component]
pub fn CardContainer(
    children: Children,
    #[prop(optional)] class: Option<&'static str>,
    #[prop(optional)] id: Option<&'static str>,
) -> impl IntoView {
    let base_classes = "flex justify-center items-center min-h-[calc(100vh-200px)] p-5 relative z-[1]";
    let classes = match class {
        Some(c) => format!("{} {}", base_classes, c),
        None => base_classes.to_string(),
    };
    
    view! {
        <div class=classes id=id>
            {children()}
        </div>
    }
}

#[component]
pub fn CardHeader(
    children: Children,
    #[prop(optional)] variant: CardVariant,
    #[prop(optional)] class: Option<&'static str>,
    #[prop(optional)] id: Option<&'static str>,
) -> impl IntoView {
    let base_classes = "text-3xl font-semibold text-center mb-[30px]";
    let variant_classes = match variant {
        CardVariant::Auth => "text-[var(--text-primary)]",
        CardVariant::L1 => "text-[var(--text-alternative)]", 
        CardVariant::L2 => "text-[var(--text-alternative)]",
        CardVariant::L3 => "text-[var(--text-alternative)]",
        CardVariant::IconContainer => "text-[var(--text-alternative)]",
    };
    
    let classes = match class {
        Some(c) => format!("{} {} {}", base_classes, variant_classes, c),
        None => format!("{} {}", base_classes, variant_classes),
    };
    
    view! {
        <h1 class=classes id=id>
            {children()}
        </h1>
    }
}

#[component]
pub fn CardContent(
    children: Children,
    #[prop(optional)] class: Option<&'static str>,
    #[prop(optional)] id: Option<&'static str>,
) -> impl IntoView {
    let base_classes = "w-full";
    let classes = match class {
        Some(c) => format!("{} {}", base_classes, c),
        None => base_classes.to_string(),
    };
    
    view! {
        <div class=classes id=id>
            {children()}
        </div>
    }
}