import type { Component } from "solid-js";
import { For } from "solid-js";
import type { DashboardInsightsData } from "../shared/dashboard-types";
import styles from "./dashboard-insights.module.scss";

const DashboardInsights: Component<DashboardInsightsData> = (props) => {
	return (
		<section class={styles.grid}>
			<article class={styles.panel}>
				<h2>{props.masteryTitle}</h2>
				<div class={styles.barChart}>
					<For each={props.topicMasteryBars}>
						{(item) => (
							<div class={styles.barRow}>
								<div class={styles.barMeta}>
									<span classList={{ [styles.dot]: true, [styles[item.tone]]: true }}></span>
									<span>{item.label}</span>
								</div>
								<div class={styles.track}>
									<div classList={{ [styles.fill]: true, [styles[item.tone]]: true }} style={{ width: `${item.value}%` }}></div>
								</div>
							</div>
						)}
					</For>
				</div>
			</article>

			<article class={styles.panel}>
				<h2>{props.overallTitle}</h2>
				<div class={styles.donutWrap}>
					<div class={styles.donut} style={{ background: `conic-gradient(var(--purple-400) 0 ${Math.max(0, props.overallPassRate - 18)}%, var(--blue-400) ${Math.max(0, props.overallPassRate - 18)}% ${props.overallPassRate}%, var(--surface-soft) ${props.overallPassRate}% 100%)` }}></div>
					<div class={styles.donutLabel}>
						<strong>{props.overallPassRate}%</strong>
						<span>{props.overallLabel}</span>
					</div>
				</div>
			</article>

			<article class={styles.panel}>
				<h2>{props.usageTitle}</h2>
				<p class={styles.usageNote}>{props.usageSummary.note}</p>
				<div class={styles.usageList}>
					<For each={props.solveModeUsage}>
						{(item) => (
							<div class={styles.usageItem}>
								<div class={styles.usageMeta}>
									<span>{item.label}</span>
									<strong>{item.value}%</strong>
								</div>
								<div class={styles.track}>
									<div classList={{ [styles.fill]: true, [styles[item.tone]]: true }} style={{ width: `${item.value}%` }}></div>
								</div>
							</div>
						)}
					</For>
				</div>
			</article>
		</section>
	);
};

export default DashboardInsights;
