import { CheckIcon, InfoIcon, SirenIcon, WarningIcon } from "@chopin/icons";
import {
	Badge,
	IconLabel,
	MiniBars,
	ProgressBar,
	Sparkline,
	Table,
	TableBody,
	TableCell,
	TableHead,
	TableHeader,
	TableRow,
} from "@chopin/visuals";

import { AuditPlate } from "./frame";
import { IconCatalogue } from "./icons";

const COLOURS = [
	["Page", "--color-page"],
	["Ground", "--color-ground"],
	["Inset", "--color-inset"],
	["Selected", "--color-selected"],
	["Primary text", "--color-text-primary"],
	["Secondary text", "--color-text-secondary"],
	["Tertiary text", "--color-text-tertiary"],
	["Quaternary text", "--color-text-quaternary"],
	["Default icon", "--color-icon"],
	["Brand", "--color-brand"],
	["Brand hover", "--color-brand-hover"],
	["Brand wash", "--color-brand-wash"],
	["Success", "--color-success"],
	["Success wash", "--color-success-wash"],
	["Warning", "--color-warning"],
	["Warning wash", "--color-warning-wash"],
	["Destructive", "--color-destructive"],
	["Destructive wash", "--color-destructive-wash"],
] as const;

const TYPE = [
	["Small metadata", "11.3–11.5px · step −2.5", "--text-2xs", "--text-2xs--line-height"],
	["Compact controls", "12–12.3px · step −2", "--text-xs", "--text-xs--line-height"],
	["Interface and chat", "13.4–14px · step −1", "--text-sm", "--text-sm--line-height"],
	["Document prose", "15–16px · step 0", "--text-base", "--text-base--line-height"],
	["Subheading", "18.8–20.8px · step +2", "--text-lg", "--text-lg--line-height"],
	["Section heading", "21.1–23.7px · step +3", "--text-xl", "--text-xl--line-height"],
	["Document title", "26.4–30.8px · step +5", "--text-2xl", "--text-2xl--line-height"],
] as const;

const SPACING = [2, 4, 6, 8, 12, 16, 24, 32] as const;

const RADII = [
	["Small", "--radius-sm"],
	["Medium", "--radius-md"],
	["Large", "--radius-lg"],
	["Extra large", "--radius-xl"],
] as const;

const SHADOWS = [
	["Subtle resting", "--shadow-resting"],
	["Strong resting", "--shadow-resting-strong"],
	["Raised", "--shadow-raised"],
	["Overlay", "--shadow-overlay"],
] as const;

const ICON_LABELS = [
	["neutral", InfoIcon, "Neutral"],
	["success", CheckIcon, "Success"],
	["warning", WarningIcon, "Warning"],
	["danger", SirenIcon, "Danger"],
] as const;

const SPARKLINES = [
	["neutral", "Neutral activity", [8, 6, 7, 4]],
	["success", "Successful activity", [3, 5, 4, 8]],
	["warning", "Steady warning", [5, 5, 5]],
	["danger", "Danger sample", [4]],
] as const;

const MINI_BARS = [
	["neutral", "neutral volume", [8, 4, 6, 3, 7, 5]],
	["success", "success volume", [1, 3, 2, 4, 6, 5]],
	["warning", "warning volume", [6, 5, 4, 5, 3, 4]],
	["danger", "danger volume", [1, 2, 4, 3, 5, 7]],
] as const;

const PROGRESS_BARS = [
	["Not started", 0],
	["In progress", 62.5],
	["Complete", 100],
] as const;

const TABLE_ROWS = [
	["Production", "Healthy", "2 minutes ago"],
	["Preview", "Building", "12 minutes ago"],
] as const;

const OVERFLOW_TABLE_ROWS = [
	["Production Europe West with an intentionally long name", "Healthy", "2 minutes ago"],
	["Preview for the static presentation table branch", "Building", "12 minutes ago"],
] as const;

function TableExample({
	rows,
	variant = "plain",
}: {
	rows: readonly (readonly [string, string, string])[];
	variant?: "plain" | "contained";
}) {
	return (
		<Table aria-label="Deployment activity" className="design-audit-table" variant={variant}>
			<TableHeader>
				<TableRow>
					<TableHead scope="col">Environment</TableHead>
					<TableHead scope="col">Status</TableHead>
					<TableHead scope="col">Updated</TableHead>
				</TableRow>
			</TableHeader>
			<TableBody>
				{rows.map(([environment, status, updated]) => (
					<TableRow key={environment}>
						<TableCell>{environment}</TableCell>
						<TableCell>{status}</TableCell>
						<TableCell>{updated}</TableCell>
					</TableRow>
				))}
			</TableBody>
		</Table>
	);
}

export function Foundations() {
	return (
		<>
			<AuditPlate
				item="colours"
				title="Colour roles"
				description="Semantic roles on the light system."
			>
				<div className="design-audit-swatch-grid">
					{COLOURS.map(([label, token]) => (
						<figure key={token}>
							<span style={{ background: `var(${token})` }} />
							<figcaption>
								<strong>{label}</strong>
								<code>{token}</code>
							</figcaption>
						</figure>
					))}
				</div>
			</AuditPlate>
			<AuditPlate
				item="typography"
				title="Typography"
				description="The complete fluid seven-rung type scale."
			>
				<div className="design-audit-type-stack">
					{TYPE.map(([label, measurement, size, lineHeight]) => (
						<div key={size} style={{ fontSize: `var(${size})`, lineHeight: `var(${lineHeight})` }}>
							<div className="design-audit-type-label">
								<span>{label}</span>
								<code>{measurement}</code>
							</div>
							<strong>Several people and a Planner share one document.</strong>
						</div>
					))}
				</div>
			</AuditPlate>
			<AuditPlate
				item="spacing"
				title="Spacing"
				description="Common intervals on the four-pixel base scale, plus the semantic button edge."
			>
				<div className="design-audit-spacing-scale">
					{SPACING.map(value => (
						<div key={value}>
							<code>{value}px</code>
							<span style={{ width: value }} />
						</div>
					))}
					<div>
						<code>--button-edge-width</code>
						<span style={{ width: "var(--button-edge-width)" }} />
					</div>
				</div>
			</AuditPlate>
			<AuditPlate
				item="radii"
				title="Radii"
				description="Four roles from controls to the document page."
			>
				<div className="design-audit-token-row">
					{RADII.map(([label, token]) => (
						<figure key={token}>
							<span style={{ borderRadius: `var(${token})` }} />
							<figcaption>{label}</figcaption>
						</figure>
					))}
				</div>
			</AuditPlate>
			<AuditPlate
				item="shadows"
				title="Elevation"
				description="Subtle and strong resting surfaces, followed by raised and overlay depth."
			>
				<div className="design-audit-token-row">
					{SHADOWS.map(([label, token]) => (
						<figure key={token}>
							<span style={{ boxShadow: `var(${token})` }} />
							<figcaption>{label}</figcaption>
						</figure>
					))}
				</div>
			</AuditPlate>
			<AuditPlate
				item="icons"
				title="Icons"
				description="Every Nucleo icon currently used by the interface."
			>
				<IconCatalogue />
			</AuditPlate>
			<AuditPlate
				item="icon-label"
				title="Icon labels"
				description="Compact semantic labels for status and supporting metadata."
			>
				<div className="design-audit-icon-labels">
					{ICON_LABELS.map(([tone, icon, label]) => (
						<IconLabel icon={icon} key={tone} label={label} tone={tone} />
					))}
				</div>
			</AuditPlate>
			<AuditPlate
				item="badge"
				title="Badges"
				description="Compact semantic labels for dense supporting metadata."
			>
				<div className="design-audit-badges">
					{ICON_LABELS.map(([tone, icon, label]) => (
						<Badge icon={icon} key={tone} label={label} tone={tone} />
					))}
				</div>
			</AuditPlate>
			<AuditPlate
				item="sparkline"
				title="Sparklines"
				description="Compact semantic trends without axes or interaction."
			>
				<div className="design-audit-sparklines">
					{SPARKLINES.map(([tone, label, values]) => (
						<figure key={tone}>
							<Sparkline label={label} tone={tone} values={values} />
							<figcaption>{label}</figcaption>
						</figure>
					))}
				</div>
			</AuditPlate>
			<AuditPlate
				item="mini-bars"
				title="Mini bars"
				description="Compact semantic distributions using the latest five values."
			>
				<div className="design-audit-mini-bars">
					{MINI_BARS.map(([tone, label, values]) => (
						<figure key={tone}>
							<MiniBars label={label} tone={tone} values={values} />
							<figcaption>{label}</figcaption>
						</figure>
					))}
				</div>
			</AuditPlate>
			<AuditPlate
				item="progress-bar"
				title="Progress bars"
				description="Compact completion indicators from zero through complete."
			>
				<div className="design-audit-progress-bars">
					{PROGRESS_BARS.map(([label, value]) => (
						<figure key={label}>
							<ProgressBar label={label} value={value} />
							<figcaption>{label}</figcaption>
						</figure>
					))}
				</div>
			</AuditPlate>
			<AuditPlate
				item="presentation-table"
				title="Presentation tables"
				description="Static native tables for compact structured data, including narrow overflow."
			>
				<div className="design-audit-tables">
					<div data-table-example="plain">
						<TableExample rows={TABLE_ROWS} />
					</div>
					<div className="design-audit-table-narrow" data-table-example="contained-overflow">
						<TableExample rows={OVERFLOW_TABLE_ROWS} variant="contained" />
					</div>
				</div>
			</AuditPlate>
		</>
	);
}