import type { Component } from "solid-js";
import { For } from "solid-js";
import { overallPassRate, topicMasteryBars, solveModeUsage, usageSummary } from "./dashboard.data";
import styles from "./dashboard-insights.module.scss";

const DashboardInsights: Component = () => {
	return (
		<section class={styles.grid}>
			<article class={styles.panel}>
				<h2>My topic mastery</h2>
				<div class={styles.barChart}>
					<For each={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>My overall accuracy</h2>
				<div class={styles.donutWrap}>
					<div class={styles.donut} style={{ background: `conic-gradient(var(--purple-400) 0 ${Math.max(0, overallPassRate - 18)}%, var(--blue-400) ${Math.max(0, overallPassRate - 18)}% ${overallPassRate}%, var(--surface-soft) ${overallPassRate}% 100%)` }}></div>
					<div class={styles.donutLabel}>
						<strong>{overallPassRate}%</strong>
						<span>Accuracy</span>
					</div>
				</div>
			</article>

			<article class={styles.panel}>
				<h2>Solve mode usage</h2>
				<p class={styles.usageNote}>{usageSummary.note}</p>
				<div class={styles.usageList}>
					<For each={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;
