tinkr 0.0.43

use leptos::prelude::*;

use crate::surrealtypes::Datetime;
use serde::{Deserialize, Serialize};

#[derive(Deserialize, Serialize, Clone, Debug)]
struct DashboardOrderListItem {
    pub x: Datetime,
    pub y: String,
}

#[derive(Deserialize, Serialize, Clone, Debug)]
struct DailyData {
    pub date: String,
    pub total: f64,
    pub count: usize,
    pub avg_7day: f64,
}

#[server]
async fn fetch_daily_orders() -> Result<Vec<DailyData>, ServerFnError> {
    let user = crate::session::get_user().await?;
    if user.is_admin != Some(true) {
        return Err(ServerFnError::ServerError("Unauthorized".into()));
    }

    let db = crate::db::db_init().await?;

    let mut orders_req = db
        .query("SELECT created_at as x, total as y FROM order WHERE paid = true ORDER BY created_at ASC;")
        .await?;
    let orders = orders_req.take::<Vec<DashboardOrderListItem>>(0)?;

    // Group orders by day
    let mut daily_map: std::collections::HashMap<String, (f64, usize)> =
        std::collections::HashMap::new();

    for order in orders {
        let date = order.x.format("%Y-%m-%d");
        let total: f64 = order.y.parse().unwrap_or(0.0);

        let entry = daily_map.entry(date).or_insert((0.0, 0));
        entry.0 += total;
        entry.1 += 1;
    }

    // Convert to sorted vec
    let mut daily_data: Vec<(String, f64, usize)> = daily_map
        .into_iter()
        .map(|(date, (total, count))| (date, total, count))
        .collect();

    daily_data.sort_by(|a, b| a.0.cmp(&b.0)); // Sort chronologically

    // Calculate 7-day running average
    let mut result: Vec<DailyData> = Vec::new();

    for i in 0..daily_data.len() {
        let start_idx = if i >= 6 { i - 6 } else { 0 };
        let window = &daily_data[start_idx..=i];

        let sum: f64 = window.iter().map(|(_, total, _)| total).sum();
        // let days_in_window = window.len() as f64;
        // let avg_7day = sum / days_in_window;

        result.push(DailyData {
            date: daily_data[i].0.clone(),
            total: daily_data[i].1,
            count: daily_data[i].2,
            avg_7day: sum,
        });
    }

    let last_days = 180;

    let len = result.len();
    if len > last_days {
        result = result.into_iter().skip(len - last_days).collect();
    }

    Ok(result)
}

#[component]
pub fn OrderChartWeeklyRunning() -> impl IntoView {
    let daily_resource = Resource::new(|| (), |_| async move { fetch_daily_orders().await });

    view! {
        <div class="w-full">

            <Suspense fallback=move || {
                view! {
                    <div class="flex items-center justify-center h-64">
                        <p class="text-neutral-500 dark:text-neutral-400">"Loading chart..."</p>
                    </div>
                }
            }>

                {move || {
                    daily_resource
                        .get()
                        .map(|data_result| {
                            match data_result {
                                Ok(daily_data) => {
                                    if daily_data.is_empty() {
                                        view! {
                                            <div class="flex items-center justify-center h-64">
                                                <p class="text-neutral-500 dark:text-neutral-400">
                                                    "No order data available"
                                                </p>
                                            </div>
                                        }
                                            .into_any()
                                    } else {
                                        let max_value = daily_data
                                            .iter()
                                            .map(|d| d.avg_7day)
                                            .fold(0.0f64, f64::max);
                                        view! {
                                            <div class="space-y-4">

                                                <div class="bg-white dark:bg-neutral-900 p-6 rounded-lg shadow">
                                                    <h3 class="text-lg font-semibold text-neutral-900 dark:text-neutral-100 mb-4">
                                                        "7-Day Running Average Revenue"
                                                    </h3>
                                                    {
                                                        let chart_width = 800.0;
                                                        let chart_height = 400.0;
                                                        let padding = 60.0;
                                                        let plot_width = chart_width - 2.0 * padding;
                                                        let plot_height = chart_height - 2.0 * padding;
                                                        let data_len = daily_data.len();
                                                        let step_x = if data_len > 1 {
                                                            plot_width / (data_len as f64 - 1.0)
                                                        } else {
                                                            plot_width
                                                        };
                                                        let y_scale = if max_value > 0.0 {
                                                            plot_height / max_value
                                                        } else {
                                                            1.0
                                                        };
                                                        let points: Vec<_> = daily_data
                                                            .iter()
                                                            .enumerate()
                                                            .map(|(i, d)| {
                                                                let x = padding + (i as f64 * step_x);
                                                                let y = chart_height - padding - (d.avg_7day * y_scale);
                                                                (x, y, d.avg_7day, d.date.clone(), d.count)
                                                            })
                                                            .collect();
                                                        let path_data = points
                                                            .iter()
                                                            .enumerate()
                                                            .map(|(i, (x, y, _, _, _))| {
                                                                if i == 0 {
                                                                    format!("M {} {}", x, y)
                                                                } else {
                                                                    format!("L {} {}", x, y)
                                                                }
                                                            })
                                                            .collect::<Vec<_>>()
                                                            .join(" ");
                                                        let y_ticks = 5;
                                                        let y_tick_step = max_value / y_ticks as f64;
                                                        view! {
                                                            <svg
                                                                viewBox=format!("0 0 {} {}", chart_width, chart_height)
                                                                class="w-full h-auto"
                                                            >
                                                                <defs>
                                                                    <linearGradient
                                                                        id="lineGradient"
                                                                        x1="0%"
                                                                        y1="0%"
                                                                        x2="0%"
                                                                        y2="100%"
                                                                    >
                                                                        <stop
                                                                            offset="0%"
                                                                            style="stop-color:rgb(59, 130, 246);stop-opacity:0.3"
                                                                        />
                                                                        <stop
                                                                            offset="100%"
                                                                            style="stop-color:rgb(59, 130, 246);stop-opacity:0"
                                                                        />
                                                                    </linearGradient>
                                                                </defs>
                                                                <g>
                                                                    {(0..=y_ticks)
                                                                        .map(|i| {
                                                                            let y_pos = chart_height - padding
                                                                                - (i as f64 * y_tick_step * y_scale);
                                                                            let value = i as f64 * y_tick_step;
                                                                            view! {
                                                                                <g>
                                                                                    <line
                                                                                        x1=padding
                                                                                        y1=y_pos
                                                                                        x2=chart_width - padding
                                                                                        y2=y_pos
                                                                                        stroke="currentColor"
                                                                                        class="text-neutral-200 dark:text-neutral-700"
                                                                                        stroke-width="1"
                                                                                    />
                                                                                    <text
                                                                                        x=padding - 10.0
                                                                                        y=y_pos + 5.0
                                                                                        text-anchor="end"
                                                                                        class="text-xs fill-neutral-500 dark:fill-neutral-400"
                                                                                    >
                                                                                        {"R "}
                                                                                        {value.round().to_string()}
                                                                                    </text>
                                                                                </g>
                                                                            }
                                                                        })
                                                                        .collect::<Vec<_>>()}
                                                                </g>
                                                                <g>
                                                                    {points
                                                                        .iter()
                                                                        .enumerate()
                                                                        .map(|(i, (x, _, _, date, _))| {
                                                                            let show_label = if data_len <= 30 {
                                                                                i % 7 == 0
                                                                            } else {
                                                                                i % 14 == 0
                                                                            };
                                                                            let date_label = if let Some(parts) = date
                                                                                .split('-')
                                                                                .collect::<Vec<_>>()
                                                                                .get(1..3)
                                                                            {
                                                                                format!("{}-{}", parts[0], parts[1])
                                                                            } else {
                                                                                date.clone()
                                                                            };
                                                                            let x = *x;
                                                                            view! {
                                                                                <g>
                                                                                    <line
                                                                                        x1=x
                                                                                        y1=chart_height - padding
                                                                                        x2=x
                                                                                        y2=chart_height - padding + 5.0
                                                                                        stroke="currentColor"
                                                                                        class="text-neutral-400 dark:text-neutral-600"
                                                                                        stroke-width="1"
                                                                                    />
                                                                                    {show_label
                                                                                        .then(|| {
                                                                                            view! {
                                                                                                <text
                                                                                                    x=x
                                                                                                    y=chart_height - padding + 20.0
                                                                                                    text-anchor="middle"
                                                                                                    class="text-xs fill-neutral-600 dark:fill-neutral-400"
                                                                                                >
                                                                                                    {date_label}
                                                                                                </text>
                                                                                            }
                                                                                        })}
                                                                                </g>
                                                                            }
                                                                        })
                                                                        .collect::<Vec<_>>()}
                                                                </g>
                                                                <path
                                                                    d=format!(
                                                                        "{} L {} {} L {} {} Z",
                                                                        path_data,
                                                                        chart_width - padding,
                                                                        chart_height - padding,
                                                                        padding,
                                                                        chart_height - padding,
                                                                    )
                                                                    fill="url(#lineGradient)"
                                                                />
                                                                <path
                                                                    d=path_data
                                                                    fill="none"
                                                                    stroke="rgb(59, 130, 246)"
                                                                    stroke-width="3"
                                                                    stroke-linecap="round"
                                                                    stroke-linejoin="round"
                                                                />
                                                                <g>
                                                                    {points
                                                                        .into_iter()
                                                                        .map(|(x, y, avg_7day, date, _count)| {
                                                                            view! {
                                                                                <g>
                                                                                    <circle
                                                                                        cx=x
                                                                                        cy=y
                                                                                        r="4"
                                                                                        class="fill-blue-500 stroke-white dark:stroke-neutral-900"
                                                                                        stroke-width="2"
                                                                                    />
                                                                                    <title>
                                                                                        {format!("{}: R {} (7-day avg)", date, avg_7day.round())}
                                                                                    </title>
                                                                                </g>
                                                                            }
                                                                        })
                                                                        .collect::<Vec<_>>()}
                                                                </g>
                                                            </svg>
                                                        }
                                                    }
                                                </div>
                                            </div>
                                        }
                                            .into_any()
                                    }
                                }
                                Err(err) => {
                                    view! {
                                        <div class="flex items-center justify-center h-64">
                                            <p class="text-red-500 dark:text-red-400">
                                                "Error loading chart: " {err.to_string()}
                                            </p>
                                        </div>
                                    }
                                        .into_any()
                                }
                            }
                        })
                }}

            </Suspense>
        </div>
    }
}

#[derive(Deserialize, Serialize, Clone, Debug)]
struct MonthlyData {
    pub month: String,
    pub total: f64,
    pub count: usize,
}

#[server]
async fn fetch_monthly_orders() -> Result<Vec<MonthlyData>, ServerFnError> {
    let user = crate::session::get_user().await?;
    if user.is_admin != Some(true) {
        return Err(ServerFnError::ServerError("Unauthorized".into()));
    }

    let db = crate::db::db_init().await?;

    let mut orders_req = db
        .query("SELECT created_at as x, total as y FROM order WHERE paid = true ORDER BY created_at ASC;")
        .await?;
    let orders = orders_req.take::<Vec<DashboardOrderListItem>>(0)?;

    // Group orders by month
    let mut monthly_map: std::collections::HashMap<String, (f64, usize)> =
        std::collections::HashMap::new();

    for order in orders {
        let month = order.x.format("%Y-%m");
        let total: f64 = order.y.parse().unwrap_or(0.0);

        let entry = monthly_map.entry(month).or_insert((0.0, 0));
        entry.0 += total;
        entry.1 += 1;
    }

    // Convert to sorted vec
    let mut monthly_data: Vec<MonthlyData> = monthly_map
        .into_iter()
        .map(|(month, (total, count))| MonthlyData {
            month,
            total,
            count,
        })
        .collect();

    monthly_data.sort_by(|a, b| a.month.cmp(&b.month)); // Sort chronologically

    // Keep last 12 months
    let len = monthly_data.len();
    if len > 12 {
        monthly_data = monthly_data.into_iter().skip(len - 12).collect();
    }

    Ok(monthly_data)
}

#[component]
pub fn OrderChartMonthly() -> impl IntoView {
    let monthly_resource = Resource::new(|| (), |_| async move { fetch_monthly_orders().await });

    view! {
        <div class="w-full">

            <Suspense fallback=move || {
                view! {
                    <div class="flex items-center justify-center h-64">
                        <p class="text-neutral-500 dark:text-neutral-400">"Loading chart..."</p>
                    </div>
                }
            }>

                {move || {
                    monthly_resource
                        .get()
                        .map(|data_result| {
                            match data_result {
                                Ok(monthly_data) => {
                                    if monthly_data.is_empty() {
                                        view! {
                                            <div class="flex items-center justify-center h-64">
                                                <p class="text-neutral-500 dark:text-neutral-400">
                                                    "No order data available"
                                                </p>
                                            </div>
                                        }
                                            .into_any()
                                    } else {
                                        let max_value = monthly_data
                                            .iter()
                                            .map(|d| d.total)
                                            .fold(0.0f64, f64::max);
                                        view! {
                                            <div class="space-y-4">

                                                <div class="bg-white dark:bg-neutral-900 p-6 rounded-lg shadow">
                                                    <h3 class="text-lg font-semibold text-neutral-900 dark:text-neutral-100 mb-4">
                                                        "Monthly Revenue"
                                                    </h3>
                                                    {
                                                        let chart_width = 800.0;
                                                        let chart_height = 400.0;
                                                        let padding = 60.0;
                                                        let plot_width = chart_width - 2.0 * padding;
                                                        let plot_height = chart_height - 2.0 * padding;
                                                        let data_len = monthly_data.len();
                                                        let bar_width = if data_len > 0 {
                                                            (plot_width / data_len as f64) * 0.7
                                                        } else {
                                                            20.0
                                                        };
                                                        let y_scale = if max_value > 0.0 {
                                                            plot_height / max_value
                                                        } else {
                                                            1.0
                                                        };
                                                        let bars: Vec<_> = monthly_data
                                                            .iter()
                                                            .enumerate()
                                                            .map(|(i, d)| {
                                                                let x = padding
                                                                    + (i as f64 * (plot_width / data_len as f64))
                                                                    + (plot_width / data_len as f64 - bar_width) / 2.0;
                                                                let bar_height = d.total * y_scale;
                                                                let y = chart_height - padding - bar_height;
                                                                (x, y, bar_height, d.total, d.month.clone(), d.count)
                                                            })
                                                            .collect();
                                                        let y_ticks = 5;
                                                        let y_tick_step = max_value / y_ticks as f64;
                                                        view! {
                                                            <svg
                                                                viewBox=format!("0 0 {} {}", chart_width, chart_height)
                                                                class="w-full h-auto"
                                                            >
                                                                <g>
                                                                    {(0..=y_ticks)
                                                                        .map(|i| {
                                                                            let y_pos = chart_height - padding
                                                                                - (i as f64 * y_tick_step * y_scale);
                                                                            let value = i as f64 * y_tick_step;
                                                                            view! {
                                                                                <g>
                                                                                    <line
                                                                                        x1=padding
                                                                                        y1=y_pos
                                                                                        x2=chart_width - padding
                                                                                        y2=y_pos
                                                                                        stroke="currentColor"
                                                                                        class="text-neutral-200 dark:text-neutral-700"
                                                                                        stroke-width="1"
                                                                                    />
                                                                                    <text
                                                                                        x=padding - 10.0
                                                                                        y=y_pos + 5.0
                                                                                        text-anchor="end"
                                                                                        class="text-xs fill-neutral-500 dark:fill-neutral-400"
                                                                                    >
                                                                                        {"R "}
                                                                                        {value.round().to_string()}
                                                                                    </text>
                                                                                </g>
                                                                            }
                                                                        })
                                                                        .collect::<Vec<_>>()}
                                                                </g>
                                                                <line
                                                                    x1=padding
                                                                    y1=chart_height - padding
                                                                    x2=chart_width - padding
                                                                    y2=chart_height - padding
                                                                    stroke="currentColor"
                                                                    class="text-neutral-400 dark:text-neutral-600"
                                                                    stroke-width="2"
                                                                />
                                                                <g>
                                                                    {bars
                                                                        .iter()
                                                                        .enumerate()
                                                                        .map(|(i, (x, _y, _h, _total, month, _count))| {
                                                                            let x_center = x + bar_width / 2.0;
                                                                            let month_label = if let Some(parts) = month
                                                                                .split('-')
                                                                                .collect::<Vec<_>>()
                                                                                .get(0..2)
                                                                            {
                                                                                let year = parts[0];
                                                                                let month_num = parts[1];
                                                                                let month_name = match month_num {
                                                                                    "01" => "Jan",
                                                                                    "02" => "Feb",
                                                                                    "03" => "Mar",
                                                                                    "04" => "Apr",
                                                                                    "05" => "May",
                                                                                    "06" => "Jun",
                                                                                    "07" => "Jul",
                                                                                    "08" => "Aug",
                                                                                    "09" => "Sep",
                                                                                    "10" => "Oct",
                                                                                    "11" => "Nov",
                                                                                    "12" => "Dec",
                                                                                    _ => month_num,
                                                                                };
                                                                                (month_name.to_string(), year.to_string())
                                                                            } else {
                                                                                ("".to_string(), "".to_string())
                                                                            };

                                                                            view! {
                                                                                <g>
                                                                                    <line
                                                                                        x1=x_center
                                                                                        y1=chart_height - padding
                                                                                        x2=x_center
                                                                                        y2=chart_height - padding + 5.0
                                                                                        stroke="currentColor"
                                                                                        class="text-neutral-400 dark:text-neutral-600"
                                                                                        stroke-width="1"
                                                                                    />
                                                                                    <text
                                                                                        x=x_center
                                                                                        y=chart_height - padding + 20.0
                                                                                        text-anchor="middle"
                                                                                        class="text-xs fill-neutral-600 dark:fill-neutral-400"
                                                                                    >
                                                                                        {month_label.0}
                                                                                    </text>

                                                                                    <text
                                                                                        x=x_center
                                                                                        y=chart_height - padding + 20.0 + 12.0
                                                                                        text-anchor="middle"
                                                                                        class="text-xs fill-neutral-600 dark:fill-neutral-400"
                                                                                    >
                                                                                        {month_label.1}
                                                                                    </text>
                                                                                </g>
                                                                            }
                                                                        })
                                                                        .collect::<Vec<_>>()}
                                                                </g>
                                                                <g>
                                                                    {bars
                                                                        .into_iter()
                                                                        .map(|(x, y, h, total, month, count)| {
                                                                            view! {
                                                                                <g>
                                                                                    <rect
                                                                                        x=x
                                                                                        y=y
                                                                                        width=bar_width
                                                                                        height=h
                                                                                        class="fill-blue-500 hover:fill-blue-600 transition-colors"
                                                                                    />
                                                                                    <title>
                                                                                        {format!(
                                                                                            "{}: R {} ({} orders)",
                                                                                            month,
                                                                                            total.round(),
                                                                                            count,
                                                                                        )}
                                                                                    </title>
                                                                                </g>
                                                                            }
                                                                        })
                                                                        .collect::<Vec<_>>()}
                                                                </g>
                                                            </svg>
                                                        }
                                                    }
                                                </div>
                                            </div>
                                        }
                                            .into_any()
                                    }
                                }
                                Err(err) => {
                                    view! {
                                        <div class="flex items-center justify-center h-64">
                                            <p class="text-red-500 dark:text-red-400">
                                                "Error loading chart: " {err.to_string()}
                                            </p>
                                        </div>
                                    }
                                        .into_any()
                                }
                            }
                        })
                }}

            </Suspense>
        </div>
    }
}