use leptos::prelude::*;
use crate::components::card::{Card, CardContainer, CardHeader, CardContent, CardVariant};
use crate::components::button::SecondaryLinkButton;
use crate::{log_component};
use crate::config::get_telegram_bot_username;
use crate::components::prelude::*;

#[component]
pub fn TelegramRegister() -> impl IntoView {
    log_component!(created, "TelegramRegister");
    
    view! {
        <CardContainer id="telegram-register-page-container">
            <Card variant=CardVariant::Auth class="w-full" id="telegram-register-card">
                <CardHeader variant=CardVariant::Auth id="telegram-register-header">
                    {t8s!("Register with Telegram")}
                </CardHeader>
                
                <CardContent id="telegram-register-content">
                    <div class="text-center space-y-6" id="telegram-register-instructions">
                        <div class="text-lg text-[var(--text-primary)]" id="telegram-register-title">
                            {t8s!("Create Account via Telegram Bot")}
                        </div>
                        
                        <div class="text-[var(--text-secondary)] leading-relaxed space-y-4" id="telegram-register-description">
                            <p>{t8s!("To register with Telegram, please follow these steps:")}</p>
                            
                            <ol class="text-left space-y-2 list-decimal list-inside">
                                <li>{format!("{} @{}", t8s!("Open Telegram and search for our bot:"), get_telegram_bot_username())}</li>
                                <li>{t8s!("Start a conversation with the bot by clicking 'Start'")}</li>
                                <li>{t8s!("Follow the bot's instructions to create your account")}</li>
                                <li>{t8s!("Once registered, you can use the 'Login with Telegram' option")}</li>
                            </ol>
                        </div>
                        
                        <div class="bg-[var(--input-bg)] border border-black rounded-lg p-4" id="telegram-bot-info">
                            <div class="font-semibold text-[var(--text-primary)] mb-2">
                                {t8s!("Bot Username:")}
                            </div>
                            <div class="font-mono text-[var(--accent-primary-gradient)] text-lg">
                                {format!("@{}", get_telegram_bot_username())}
                            </div>
                        </div>
                        
                        <div class="pt-4" id="telegram-register-actions">
                            <SecondaryLinkButton 
                                href=t8r!("/en/register")().get()
                                id="back-to-register-link"
                            >
                                {t8s!("Back to registration")}
                            </SecondaryLinkButton>
                        </div>
                    </div>
                </CardContent>
            </Card>
        </CardContainer>
    }
}
