use indexer_service_protocol::{Account, AccountId};
use leptos::prelude::*;
use leptos_router::components::A;

use crate::format_utils;

/// Account preview component
#[component]
pub fn AccountPreview(account_id: AccountId, account: Option<Account>) -> impl IntoView {
    let account_id_str = format_utils::format_account_id(&account_id);

    view! {
        <div class="account-preview">
            <A href=format!("/account/{}", account_id_str) attr:class="account-preview-link">
                <div class="account-preview-header">
                    <div class="account-id">
                        <span class="label">"Account "</span>
                        <span class="value hash">{account_id_str.clone()}</span>
                    </div>
                </div>
                {move || {
                    account
                        .as_ref()
                        .map(|Account { program_owner, balance, data, nonce }| {
                            let program_id = format_utils::format_program_id(program_owner);
                            view! {
                                <div class="account-preview-body">
                                    <div class="account-field">
                                        <span class="field-label">"Balance: "</span>
                                        <span class="field-value">{balance.to_string()}</span>
                                    </div>
                                    <div class="account-field">
                                        <span class="field-label">"Program: "</span>
                                        <span class="field-value hash">{program_id}</span>
                                    </div>
                                    <div class="account-field">
                                        <span class="field-label">"Nonce: "</span>
                                        <span class="field-value">{nonce.to_string()}</span>
                                    </div>
                                    <div class="account-field">
                                        <span class="field-label">"Data: "</span>
                                        <span class="field-value">
                                            {format!("{} bytes", data.0.len())}
                                        </span>
                                    </div>
                                </div>
                            }
                                .into_any()
                        })
                        .unwrap_or_else(|| {
                            view! {
                                <div class="account-preview-body">
                                    <div class="account-not-found">"Account not found"</div>
                                </div>
                            }
                                .into_any()
                        })
                }}

            </A>
        </div>
    }
}