tinkr 0.0.43

#[cfg(feature = "ssr")]
use crate::StorageAuthed;

use crate::{
    AppError, Datetime, RecordId,
    components::{
        Align, Button, Image, Page, SectionStyled, Tooltip,
        button::{BtnColor, BtnVariant, ButtonIcon},
        heading::Heading,
    },
};

#[cfg(feature = "ssr")]
use crate::{date_utils::time, db_init, session::get_user, session::get_user_option};

use leptos::prelude::*;
use partial_struct::Partial;
use serde::{Deserialize, Serialize};

use crate::{
    order::{
        list::{OrderSideBarWrapper, UserOrderListNarrow},
        order_model::create_order_from_cart,
        view::UserOrderView,
    },
    product::product::ProductDetail,
};

type UserId = RecordId;
type ProductId = RecordId;

pub const SHIPPING_COST: f64 = 160.0;

#[derive(Debug, Clone, Serialize, Deserialize, Partial)]
#[partial(
    "CreateCartItem",
    derive(Debug, Serialize, Deserialize, Clone),
    omit(id, user, date_added)
)]
#[partial("CartItemNoId", derive(Debug, Serialize, Deserialize, Clone), omit(id))]
pub struct CartItem {
    pub id: RecordId,
    pub name: String,
    pub user: UserId,
    /// legacy field: use product as the "paint colour"
    pub product: ProductId,
    pub variant: String,
    pub price: f64,
    pub date_added: Option<Datetime>,
}

impl CartItem {
    #[tracing::instrument(name = "CartItem::from_string")]
    #[cfg(feature = "ssr")]
    pub async fn from_string(id: String) -> Result<Option<CartItem>, AppError> {
        use std::str::FromStr;
        let db = db_init().await?;
        let record = RecordId::from_str(&id)?;
        tracing::debug!(%record, "Fetching cart item from database");
        let item: Option<CartItem> = db.select(record).await?;
        tracing::debug!(?item, "Fetched cart item from database");
        Ok(item)
    }

    // pub fn delete_item_from_string(id: String) -> Result<(), AppError> {
    //     let db = db_init()?;
    //     let _: Option<CartItem> = db.delete(("cart_item", id)).await?;

    //     Ok(())
    // }
}

#[derive(Debug, Clone, Serialize, Deserialize)]
pub struct CartItemWithProduct {
    pub id: RecordId,
    pub name: String,
    pub variant: String,
    pub price: f64,
    pub product: ProductDetail,
}

#[cfg(feature = "ssr")]
impl StorageAuthed<CreateCartItem, CartItem> for CartItem {
    const TABLE_NAME: &str = "cart_item";
}

#[server]
pub async fn add_cart_item(item: CreateCartItem) -> Result<CartItem, ServerFnError> {
    let user = get_user().await?;
    let db = db_init().await?;

    let content = CartItemNoId {
        user: user.id.clone(),
        name: item.name,
        product: item.product,
        variant: item.variant,
        price: item.price,
        date_added: Some(time::now()),
    };

    let mut result = db
        .query("CREATE cart_item CONTENT $content;")
        .bind(("content", content))
        .await?;

    let created_item: Option<CartItem> = result.take(0)?;

    let created_item = match created_item {
        Some(token) => token,
        None => return Err(ServerFnError::new("Failed to add item to cart")),
    };

    Ok(created_item)
}

#[server]
pub async fn get_cart_items() -> Result<Vec<CartItemWithProduct>, ServerFnError> {
    let user = get_user().await?;
    let db = db_init().await?;

    let items: Vec<CartItemWithProduct> = db
        .query("SELECT *, product.* FROM cart_item WHERE user = $user")
        .bind(("user", user.id))
        .await?
        .take(0)?;

    Ok(items)
}

#[server]
pub async fn delete_cart_item(id: String) -> Result<bool, ServerFnError> {
    let cartitem = CartItem::from_string(id.clone()).await?;

    let cartitem = match cartitem {
        Some(item) => item,
        None => return Err(ServerFnError::new("Cart item not found")),
    };

    let result = cartitem.delete_self().await?;

    // let _: Option<CartItem> = db.delete(("cart_item", id)).await?;

    Ok(result)
}

#[server]
pub async fn clear_cart() -> Result<bool, ServerFnError> {
    let user = get_user().await?;

    let db = db_init().await?;

    db.query("DELETE cart_item WHERE user = $user;")
        .bind(("user", user.id))
        .await?;

    Ok(true)
}

#[server]
pub async fn get_cart_count() -> Result<usize, AppError> {
    let user = get_user_option().await?;

    let user = match user {
        Some(u) => u,
        None => return Ok(0),
    };

    let db = db_init().await?;

    let count: Vec<CartItem> = db
        .query("SELECT * FROM cart_item WHERE user = $user")
        .bind(("user", user.id))
        .await?
        .take(0)?;

    Ok(count.len())
}

#[derive(Clone, Copy)]
pub struct CartCountTrigger(pub RwSignal<usize>);

#[component]
pub fn CartButton() -> impl IntoView {
    let trigger = expect_context::<CartCountTrigger>();
    let cart_count = Resource::new(
        move || trigger.0.get(),
        |_| async { get_cart_count().await.unwrap_or(0) },
    );

    // Add window focus event listener to refetch cart count
    #[cfg(not(feature = "ssr"))]
    Effect::new(move |_| {
        use leptos::wasm_bindgen::{JsCast, closure::Closure};
        use leptos::web_sys;

        let handle_focus = move || {
            trigger.0.update(|v| *v += 1);
        };

        let window = web_sys::window().expect("no global window exists");
        let closure = Closure::wrap(Box::new(handle_focus) as Box<dyn Fn()>);

        window
            .add_event_listener_with_callback("focus", closure.as_ref().unchecked_ref())
            .expect("failed to add focus listener");

        closure.forget();
    });

    view! {
        <Tooltip label="View Cart" align=Align::Bottom>
            <div id="cart-icon-target">

                <Transition>
                    {move || {
                        cart_count
                            .get()
                            .map(|count| {
                                if count > 0 {
                                    view! {
                                        <Button
                                            href="/cart"
                                            icon=ButtonIcon::Icon(phosphor_leptos::SHOPPING_CART)
                                            variant=BtnVariant::Default
                                            color=BtnColor::Neutral
                                        >
                                            {count.to_string()}
                                        </Button>
                                    }
                                        .into_any()
                                } else {
                                    view! {
                                        <Button
                                            href="/cart"
                                            icon=ButtonIcon::Icon(phosphor_leptos::SHOPPING_CART)
                                            variant=BtnVariant::Square
                                            color=BtnColor::Neutral
                                        />
                                    }
                                        .into_any()
                                }
                            })
                    }}
                </Transition>
            </div>
        </Tooltip>
    }
}

#[component]
pub fn ProductMini(
    background: String,
    brand_name: String,
    model_name: String,
    product_name: String,
    product_code: String,
    product_variant: String,
) -> impl IntoView {
    view! {
        <div class="flex items-center gap-3">
            <div
                class="box-content h-14 w-16 rounded border dark:border-neutral-700"
                style:background=background
            />
            <div class="flex-1">
                <h4 class="text-xs font-bold dark:text-neutral-100">
                    {brand_name} " " {model_name}
                </h4>
                <p class="font-semibold capitalize dark:text-neutral-200">{product_name}</p>
                <p class="text-xs text-neutral-500 dark:text-neutral-400">
                    "Code: " {product_code}
                </p>
                <p class="text-xs text-neutral-600 dark:text-neutral-300">{product_variant}</p>
            </div>
        </div>
    }
}

fn format_price(price: f64) -> String {
    let formatted = format!("{:.2}", price);
    formatted
        .split('.')
        .next()
        .unwrap_or(&formatted)
        .chars()
        .rev()
        .collect::<Vec<_>>()
        .chunks(3)
        .map(|c| c.iter().collect::<String>())
        .collect::<Vec<_>>()
        .join(" ")
        .chars()
        .rev()
        .collect::<String>()
        + "."
        + formatted.split('.').nth(1).unwrap_or("00")
}

#[component]
pub fn CartView() -> impl IntoView {
    let cart_items = Resource::new(|| (), |_| async { get_cart_items().await });
    let delete_action = Action::new(|id: &String| {
        let id = id.clone();
        async move { delete_cart_item(id).await }
    });
    let cart_trigger = expect_context::<CartCountTrigger>();

    let total = move || {
        cart_items
            .get()
            .and_then(|items| items.ok())
            .map(|items| items.iter().map(|i| i.price).sum::<f64>())
            .unwrap_or(0.0)
    };

    let total_with_shipping = move || total() + SHIPPING_COST;

    // let item_count = move || {
    //     cart_items
    //         .get()
    //         .and_then(|items| items.ok())
    //         .map(|items| items.len())
    //         .unwrap_or(0)
    // };

    Effect::new(move |_| {
        if delete_action.value().get().is_some() {
            cart_items.refetch();
            cart_trigger.0.update(|v| *v += 1);
        }
    });

    view! {
        <Page>

            <Transition>
                {move || {
                    cart_items
                        .get()
                        .map(|result| {
                            match result {
                                Ok(items) if items.is_empty() => {
                                    view! {
                                        <Heading>"My Cart"</Heading>
                                        <div class="font-mono text-neutral-500 py-8 text-center">
                                            "Cart is empty"
                                        </div>
                                    }
                                        .into_any()
                                }
                                Ok(items) => {
                                    view! {
                                        <div>
                                            <div class="flex justify-between items-center mb-4">
                                                <div>
                                                    <Heading>"My Cart"</Heading>
                                                </div>
                                                <Button
                                                    variant=BtnVariant::Default
                                                    color=BtnColor::Neutral
                                                    icon=ButtonIcon::Icon(phosphor_leptos::TRASH)
                                                    on_click=Callback::new(move |_| {
                                                        leptos::task::spawn_local(async move {
                                                            if let Ok(_) = clear_cart().await {
                                                                cart_items.refetch();
                                                                cart_trigger.0.update(|v| *v += 1);
                                                            }
                                                        });
                                                    })
                                                >
                                                    "Clear"
                                                </Button>
                                            </div>
                                            <table class="w-full text-left">
                                                <thead>
                                                    <tr>
                                                        <th class="pb-4 font-medium text-neutral-500 dark:text-neutral-400">
                                                            "Product"
                                                        </th>
                                                        <th class="pb-4 pr-3 text-right font-medium text-neutral-500 dark:text-neutral-400">
                                                            "Price"
                                                        </th>
                                                        <th></th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    {items
                                                        .into_iter()
                                                        .map(|item| {
                                                            let item_id = item.id.to_string();
                                                            let item_id_clone = item_id.clone();

                                                            view! {
                                                                <tr class="border-b border-neutral-100 dark:border-neutral-700 hover:bg-neutral-50 dark:hover:bg-neutral-700">
                                                                    <td class="py-4 text-neutral-900 dark:text-neutral-100 pl-5">
                                                                        <ProductMini
                                                                            background=item.product.colour
                                                                            brand_name=item.product.brand_name
                                                                            model_name=item.product.model_name
                                                                            product_name=item.product.product_name
                                                                            product_code=item.product.code
                                                                            product_variant=item.name
                                                                        />
                                                                    </td>
                                                                    <td class="py-4 pr-3 text-right text-neutral-900 dark:text-neutral-100">
                                                                        "R " {format!("{:.2}", item.price)}
                                                                    </td>
                                                                    <td class="py-4 text-left">
                                                                        <div class="flex justify-end flex-row pr-5">
                                                                            <Button
                                                                                variant=BtnVariant::Square
                                                                                color=BtnColor::Neutral
                                                                                icon=ButtonIcon::Icon(phosphor_leptos::X)
                                                                                class="bg-transparent"
                                                                                on_click=Callback::new(move |_| {
                                                                                    delete_action.dispatch(item_id_clone.clone());
                                                                                })
                                                                            />
                                                                        </div>
                                                                    </td>
                                                                </tr>
                                                            }
                                                        })
                                                        .collect_view()}
                                                </tbody>
                                            </table>

                                            <div class="mt-8 flex justify-end text-neutral-500 dark:text-neutral-300 gap-5">
                                                <div>"Shipping"</div>
                                                <div>"R " {format!("{:.2}", SHIPPING_COST)}</div>
                                            </div>

                                            <div class="mt-4 flex justify-end text-2xl font-bold text-black dark:text-white gap-5">
                                                <div>"Total"</div>
                                                <div>
                                                    "R " {move || format_price(total_with_shipping())}
                                                </div>
                                            </div>

                                        </div>
                                    }
                                        .into_any()
                                }
                                Err(_) => {
                                    view! {
                                        <div class="text-center py-8 text-red-500">
                                            "Failed to load cart. Please try again."
                                        </div>
                                    }
                                        .into_any()
                                }
                            }
                        })
                }}
            </Transition>

            <Heading>"Delivery Address"</Heading>
            <crate::auth::account_details::AccountForm />

            <div class="flex justify-end">
                <Button
                    variant=BtnVariant::CallToAction
                    color=BtnColor::Success
                    icon=ButtonIcon::Icon(phosphor_leptos::ARROW_RIGHT)
                    class="bg-green-500 hover:bg-green-600 text-white"
                    on_click=Callback::new(move |_| {
                        leptos::task::spawn_local(async move {
                            let rest = create_order_from_cart().await;
                            if let Ok(order_id) = rest {
                                let order_path = format!("/order/{}", order_id.key());
                                let navigate = leptos_router::hooks::use_navigate();
                                navigate(&order_path, Default::default());
                            }
                        });
                    })
                >

                    "Create Order"
                </Button>
            </div>

        </Page>
    }
}

#[component]
pub fn CartPage() -> impl IntoView {
    move || {
        view! {
            <OrderSideBarWrapper>
                <CartView />
            </OrderSideBarWrapper>
        }
    }
}