import { css, html, nothing, svg } from 'lit';
import { property } from 'lit/decorators.js';
import { biorhythmChartEndpoints } from '../generated/endpoint-defaults.js';
import type { ChromeString } from '../i18n/chrome-strings.js';
import type {
	GetCriticalDaysResponse,
	GetDailyBiorhythmResponse,
	GetForecastResponse,
} from '../types/index.js';
import { RoxyDataElement } from '../utils/base-element.js';
import { baseStyles } from '../utils/base-styles.js';
import {
	BIORHYTHM_CYCLES,
	CYCLE_LABEL,
	cycleName,
} from '../utils/biorhythm.js';
import { customElement } from '../utils/define.js';
import { chevron, disclosureStyles } from '../utils/disclosure.js';
import {
	formatDate,
	formatDateRange,
	formatList,
	formatNumber,
	formatPercent,
} from '../utils/format.js';
import {
	type InterpSection,
	interpAccordionStyles,
} from '../utils/interp-accordion.js';
import { humanize } from '../utils/string.js';

type BiorhythmData =
	| GetDailyBiorhythmResponse
	| GetForecastResponse
	| GetCriticalDaysResponse;

const CYCLE_COLOR: Record<string, string> = {
	physical: '#dc2626',
	emotional: '#0284c7',
	intellectual: '#16a34a',
	intuitive: '#a855f7',
	aesthetic: '#f59e0b',
	awareness: '#ec4899',
	spiritual: '#14b8a6',
	passion: '#ef4444',
	mastery: '#6366f1',
	wisdom: '#475569',
};

/** A critical day `direction` to the English SOURCE of the line that says which way the cycle crossed zero. */
const CROSSING_LABEL: Record<
	GetCriticalDaysResponse['criticalDays'][number]['direction'],
	ChromeString
> = {
	ascending: 'ascending through zero',
	descending: 'descending through zero',
};

/** A critical day `severity` to the English SOURCE of its label; a `single` day, one cycle crossing zero, is what every row already says, so it adds no word. */
const SEVERITY_LABEL: Partial<
	Record<
		GetCriticalDaysResponse['criticalDays'][number]['severity'],
		ChromeString
	>
> = {
	double: 'Double day',
	triple: 'Triple day',
};

/**
 * Biorhythm chart. Renders /biorhythm/{daily,forecast,critical-days}.
 */
@customElement('roxy-biorhythm-chart')
export class RoxyBiorhythmChart extends RoxyDataElement<BiorhythmData> {
	static endpoints = biorhythmChartEndpoints;

	static styles = [
		baseStyles,
		disclosureStyles,
		interpAccordionStyles,
		css`
			.wrap {
				background: var(--roxy-surface, #fff);
				color: var(--roxy-fg, #0a0a0a);
				border: 1px solid var(--roxy-border, #e4e4e7);
				border-radius: var(--roxy-radius-md, 8px);
				padding: var(--roxy-space-lg, 1.5rem);
				box-shadow: var(--roxy-shadow-sm);
				display: grid;
				/* Never an implicit auto column: it floors at min-content, so one long
				 * unbreakable string widens the track past the padded card. */
				grid-template-columns: minmax(0, 1fr);
				gap: var(--roxy-space-md, 1rem);
			}
			.head {
				display: flex;
				justify-content: space-between;
				align-items: center;
				flex-wrap: wrap;
				gap: var(--roxy-space-sm, 0.5rem);
			}
			.title {
				margin: 0;
				font-size: var(--roxy-text-lg, 1.125rem);
				font-weight: var(--roxy-weight-bold, 600);
			}
			.head-meta {
				display: flex;
				align-items: center;
				gap: var(--roxy-space-sm, 0.5rem);
				flex-wrap: wrap;
			}
			.energy {
				font-variant-numeric: tabular-nums;
				color: var(--roxy-accent-ink, #b45309);
				font-weight: var(--roxy-weight-bold, 600);
			}
			/* The tint carries the phase; the label stays --roxy-fg, since muted or
			 * accent ink on a tinted chip misses WCAG AA. */
			.phase {
				background: color-mix(in srgb, var(--roxy-accent, #f59e0b) 16%, transparent);
				color: var(--roxy-fg, #0a0a0a);
				border-radius: var(--roxy-radius-full, 9999px);
				padding: 2px 10px;
				font-size: var(--roxy-text-xs, 0.75rem);
				font-weight: var(--roxy-weight-bold, 600);
			}

			.spotlight {
				display: grid;
				gap: var(--roxy-space-xs, 0.25rem);
				padding: var(--roxy-space-sm, 0.5rem) var(--roxy-space-md, 1rem);
				border-left: 3px solid var(--roxy-accent, #f59e0b);
				background: color-mix(in srgb, var(--roxy-border, #e4e4e7) 22%, transparent);
				border-radius: 0 var(--roxy-radius-sm, 4px) var(--roxy-radius-sm, 4px) 0;
			}
			.spotlight .label {
				margin: 0;
				font-size: var(--roxy-text-xs, 0.75rem);
				color: var(--roxy-muted, #71717a);
				text-transform: uppercase;
				letter-spacing: 0.06em;
			}
			.spotlight .lead {
				display: flex;
				align-items: baseline;
				gap: var(--roxy-space-sm, 0.5rem);
				flex-wrap: wrap;
			}
			.spotlight strong {
				text-transform: capitalize;
			}
			.spotlight p {
				margin: 0;
				font-size: var(--roxy-text-sm, 0.875rem);
				line-height: 1.6;
			}

			.bars {
				display: grid;
				gap: var(--roxy-space-xs, 0.25rem);
			}
			/* Not --roxy-label-col: the cycle name (physical, emotional, intellectual...)
			 * is fixed English in every locale; capping it clips "intellectual" instead of
			 * fixing a translation-driven growth that never happens here. */
			.bar {
				display: grid;
				grid-template-columns: 8rem 1fr 3.5rem;
				gap: var(--roxy-space-sm, 0.5rem);
				align-items: center;
				font-size: var(--roxy-text-sm, 0.875rem);
			}
			/* A cycle runs from -100 to +100 percent, so the track is bipolar: a
			 * zero line at the centre and the fill growing from it to the right for a
			 * high and to the left for a low, which is what the sign of the number
			 * beside it means. */
			.track {
				height: 14px;
				background: var(--roxy-border, #e4e4e7);
				border-radius: var(--roxy-radius-full, 9999px);
				overflow: hidden;
				position: relative;
			}
			.track::after {
				content: '';
				position: absolute;
				left: 50%;
				top: 0;
				bottom: 0;
				width: 1px;
				background: var(--roxy-surface, #fff);
			}
			.fill {
				position: absolute;
				top: 0;
				height: 100%;
				transition:
					width var(--roxy-motion-duration, 200ms)
					var(--roxy-motion-easing, cubic-bezier(0.4, 0, 0.2, 1));
			}
			.fill.high {
				left: 50%;
			}
			.fill.low {
				right: 50%;
			}
			.value {
				font-variant-numeric: tabular-nums;
				text-align: right;
				color: var(--roxy-muted, #71717a);
			}
			.advice {
				color: var(--roxy-fg, #0a0a0a);
				margin: 0;
			}
			svg {
				display: block;
				width: 100%;
				max-width: var(--roxy-chart-max-width, 600px);
				height: auto;
			}

			.legend {
				display: flex;
				flex-wrap: wrap;
				gap: var(--roxy-space-md, 1rem);
				font-size: var(--roxy-text-xs, 0.75rem);
				color: var(--roxy-fg, #0a0a0a);
			}
			.key {
				display: inline-flex;
				align-items: center;
				gap: 0.35rem;
				text-transform: capitalize;
			}
			.dot {
				width: 0.6rem;
				height: 0.6rem;
				border-radius: var(--roxy-radius-full, 9999px);
			}
			.dot.critical {
				background: var(--roxy-danger, #dc2626);
			}

			.stats {
				display: grid;
				grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
				gap: var(--roxy-space-sm, 0.5rem);
				margin: 0;
			}
			.stat {
				display: grid;
				gap: 2px;
			}
			.stat dt {
				font-size: var(--roxy-text-xs, 0.75rem);
				color: var(--roxy-muted, #71717a);
				text-transform: uppercase;
				letter-spacing: 0.05em;
			}
			.stat dd {
				margin: 0;
				font-size: var(--roxy-text-sm, 0.875rem);
				font-weight: var(--roxy-weight-bold, 600);
				font-variant-numeric: tabular-nums;
			}

			.forecast-data > summary {
				display: flex;
				align-items: center;
				justify-content: space-between;
				gap: var(--roxy-space-sm, 0.5rem);
				cursor: pointer;
			}
			.forecast-scroll {
				overflow-x: auto;
				min-width: 0;
				margin-top: var(--roxy-space-sm, 0.5rem);
			}
			.forecast-table {
				width: 100%;
				border-collapse: collapse;
				font-size: var(--roxy-text-sm, 0.875rem);
				font-variant-numeric: tabular-nums;
			}
			.forecast-table th, .forecast-table td {
				padding: var(--roxy-space-xs, 0.25rem) var(--roxy-space-sm, 0.5rem);
				text-align: right;
				border-bottom: 1px solid var(--roxy-border, #e4e4e7);
				white-space: nowrap;
			}
			.forecast-table th:first-child, .forecast-table td:first-child { text-align: left; }
			.forecast-axis {
				width: 100%;
				max-width: var(--roxy-chart-max-width, 600px);
				display: flex;
				justify-content: space-between;
				gap: var(--roxy-space-sm, 0.5rem);
				font-size: var(--roxy-text-xs, 0.75rem);
				color: var(--roxy-secondary, #475569);
			}
			.crit-note {
				margin: 0;
				font-size: var(--roxy-text-sm, 0.875rem);
				color: var(--roxy-fg, #0a0a0a);
				background: color-mix(in srgb, var(--roxy-danger, #dc2626) 10%, transparent);
				border-radius: var(--roxy-radius-sm, 4px);
				padding: var(--roxy-space-sm, 0.5rem) var(--roxy-space-md, 1rem);
			}
			.crit-meta {
				margin: 0;
				font-size: var(--roxy-text-xs, 0.75rem);
				color: var(--roxy-muted, #71717a);
			}
		`,
	];

	@property({ type: String, reflect: true })
	mode: 'daily' | 'forecast' | 'critical-days' = 'daily';

	protected renderData(d: BiorhythmData) {
		if (this.mode === 'critical-days' && 'criticalDays' in d) {
			return this.renderCritical(d as GetCriticalDaysResponse);
		}
		if (this.mode === 'forecast' && 'days' in d) {
			return this.renderForecast(d as GetForecastResponse);
		}
		return this.renderDaily(d as GetDailyBiorhythmResponse);
	}

	private renderDaily(d: GetDailyBiorhythmResponse) {
		const raw = d.quickRead ?? {};
		const entries = Object.entries(raw).map(([cycle, value]) => {
			const v = typeof value === 'number' ? value : 0;
			const normalized = Math.abs(v) > 1 ? v / 100 : v;
			return [cycle, normalized] as const;
		});
		const spot = d.spotlight;

		return html`<section class="wrap" part="card" aria-label=${this.t('Daily biorhythm')}>
			<header class="head" part="header">
				<h2 class="title">${this.t('Biorhythm')}</h2>
				<div class="head-meta">
					${d.overallPhase ? html`<span class="phase">${humanize(d.overallPhase)}</span>` : nothing}
					${
						typeof d.energyRating === 'number'
							? html`<span class="energy">${this.t('Energy {{value}}/10', { value: d.energyRating })}</span>`
							: nothing
					}
				</div>
			</header>
			${
				spot
					? html`<div
						class="spotlight"
						part="details spotlight"
						style=${`border-left-color: ${CYCLE_COLOR[spot.cycle] ?? 'var(--roxy-accent, #f59e0b)'}`}
					>
						<p class="label">${this.t('Spotlight cycle')}</p>
						<div class="lead">
							<strong>${cycleName(spot.cycle, (l) => this.t(l))}</strong>
							${typeof spot.value === 'number' ? html`<span class="energy">${formatPercent(this.effectiveLang(), spot.value, 0)}</span>` : nothing}
							${spot.phase ? html`<span class="phase">${humanize(spot.phase)}</span>` : nothing}
						</div>
						${
							// The cycle, its value and its phase are the reading's subject;
							// the message is the reading.
							spot.message && !this.hideReadings
								? html`<p>${spot.message}</p>`
								: nothing
						}
					</div>`
					: nothing
			}
			<div class="bars" part="chart bars" role="list">
				${entries.map(([cycle, v]) => {
					// -1..1 -> 0..50 percent of the track, out from the zero line.
					const pct = Math.abs(v) * 50;
					const color = CYCLE_COLOR[cycle] ?? 'var(--roxy-accent, #f59e0b)';
					return html`<div class="bar" role="listitem">
						<span>${cycleName(cycle, (l) => this.t(l))}</span>
						<span class="track">
							<span
								class="fill ${v < 0 ? 'low' : 'high'}"
								style="width: ${pct}%; background: ${color}"
							></span>
						</span>
						<span class="value">${formatPercent(this.effectiveLang(), v * 100, 0)}</span>
					</div>`;
				})}
			</div>
			${
				this.hideReadings
					? nothing
					: html`${d.dailyMessage ? html`<p class="advice">${d.dailyMessage}</p>` : nothing}
						${d.advice ? html`<p class="advice">${d.advice}</p>` : nothing}`
			}
		</section>`;
	}

	private renderForecast(d: GetForecastResponse) {
		const days = d.days ?? [];
		if (days.length === 0)
			return html`<div class="roxy-empty" role="status">${this.t('No forecast')}</div>`;
		const w = 600;
		const h = 160;
		const xStep = w / Math.max(days.length - 1, 1);
		const s = d.summary;

		return html`<section class="wrap" part="card" aria-label=${this.t('Biorhythm forecast')}>
			<header class="head" part="header">
				<h2 class="title">${this.t('Forecast')}</h2>
				<span class="energy">${formatDateRange(this.effectiveLang(), d.startDate, d.endDate)}</span>
			</header>
			<svg
				viewBox="0 0 ${w} ${h}"
				part="chart"
				role="img"
				aria-label=${this.t('Biorhythm cycle lines across the forecast window')}
			>
				<title>${this.t('Biorhythm forecast')}</title>
				<line
					x1="0"
					y1=${h / 2}
					x2=${w}
					y2=${h / 2}
					stroke="var(--roxy-border, #e4e4e7)"
					stroke-width="1"
				/>
				${BIORHYTHM_CYCLES.map((cycle) => {
					const points = days
						.map((day, i) => {
							const v = day[cycle] ?? 0;
							const x = i * xStep;
							const y = h / 2 - (v / 100) * (h / 2 - 8);
							// Path coordinates, not copy: a decimal comma here IS the
							// separator and the polyline collapses.
							return `${x.toFixed(2)},${y.toFixed(2)}`;
						})
						.join(' ');
					const color = CYCLE_COLOR[cycle] ?? '#475569';
					return svg`<polyline points=${points} fill="none" stroke=${color} stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />`;
				})}
				${days.map((day, i) =>
					// A critical day is a zero crossing, so it sits on the midline by
					// definition: mark it there rather than hiding it in the curves.
					day.isCritical
						? svg`<circle cx=${(i * xStep).toFixed(2)} cy=${h / 2} r="3" fill="var(--roxy-danger, #dc2626)"><title>${[
								formatDate(this.effectiveLang(), day.date),
								formatList(
									this.effectiveLang(),
									(day.criticalCycles ?? []).map((c) =>
										cycleName(c, (l) => this.t(l)),
									),
								),
								this.t('critical day'),
								typeof day.energyRating === 'number'
									? this.t('Energy {{value}}/10', { value: day.energyRating })
									: '',
							]
								.filter(Boolean)
								.join(' · ')}</title></circle>`
						: nothing,
				)}
			</svg>
			<div class="forecast-axis" part="legend"><span>${formatDate(this.effectiveLang(), days[0]?.date)}</span><span>${formatDate(this.effectiveLang(), days.at(-1)?.date)}</span></div>
			<div class="legend" part="legend">
				${BIORHYTHM_CYCLES.map(
					(cycle) => html`<span class="key">
						<span class="dot" style=${`background: ${CYCLE_COLOR[cycle]}`}></span>${this.t(CYCLE_LABEL[cycle])}
					</span>`,
				)}
				<span class="key"><span class="dot critical"></span>${this.t('critical day')}</span>
			</div>
			${
				s
					? html`<dl class="stats" part="details">
						${this.stat(this.t('Best day'), formatDate(this.effectiveLang(), s.bestDay))}
						${this.stat(this.t('Worst day'), formatDate(this.effectiveLang(), s.worstDay))}
						${this.stat(
							this.t('Average energy'),
							typeof s.averageEnergy === 'number'
								? `${s.averageEnergy}/10`
								: '',
						)}
						${this.stat(
							this.t('Critical days'),
							typeof s.criticalDayCount === 'number'
								? `${s.criticalDayCount}`
								: '',
						)}
					</dl>`
					: nothing
			}
			${this.renderForecastData(d)}
			${
				s?.periodAdvice && !this.hideReadings
					? html`<p class="advice">${s.periodAdvice}</p>`
					: nothing
			}
		</section>`;
	}

	private renderForecastData(d: GetForecastResponse) {
		const locale = this.effectiveLang();
		return html`<details class="forecast-data" part="section days">
			<summary>${this.t('Daily values')}${chevron()}</summary>
			<div class="forecast-scroll" part="table" tabindex="0" role="region" aria-label=${this.t('Biorhythm forecast')}>
				<table class="forecast-table">
					<caption class="roxy-sr-only">${this.t('Biorhythm forecast')}</caption>
					<thead><tr>
						<th scope="col">${this.t('Date')}</th>
						${BIORHYTHM_CYCLES.map((cycle) => html`<th scope="col">${this.t(CYCLE_LABEL[cycle])}</th>`)}
						<th scope="col">${this.t('Energy rating')}</th>
						<th scope="col">${this.t('Days since birth')}</th>
						<th scope="col">${this.t('Critical days')}</th>
					</tr></thead>
					<tbody>${d.days.map(
						(day) => html`<tr>
						<th scope="row"><time datetime=${day.date}>${formatDate(locale, day.date)}</time></th>
						${BIORHYTHM_CYCLES.map((cycle) => html`<td>${formatPercent(locale, day[cycle], 2)}</td>`)}
						<td>${this.t('Energy {{value}}/10', { value: day.energyRating })}</td>
						<td>${formatNumber(locale, day.daysSinceBirth, 0)}</td>
						<td>${
							day.isCritical
								? formatList(
										locale,
										day.criticalCycles.map((cycle) =>
											cycleName(cycle, (source) => this.t(source)),
										),
									) || this.t('critical day')
								: this.t('None')
						}</td>
					</tr>`,
					)}</tbody>
				</table>
			</div>
		</details>`;
	}

	private renderCritical(d: GetCriticalDaysResponse) {
		const days = d.criticalDays ?? [];
		const doubles = d.doubleCriticalDays ?? [];
		const sections: InterpSection[] = days.map((day) => ({
			label: formatDate(this.effectiveLang(), day.date) || day.date,
			aside: [
				day.cycle ? cycleName(day.cycle, (l) => this.t(l)) : '',
				this.severityName(day.severity),
			]
				.filter(Boolean)
				.join(' · '),
			body: day.advisory ?? '',
			extra: html`<p class="crit-meta">
				${[
					day.direction ? this.t(CROSSING_LABEL[day.direction]) : '',
					typeof day.period === 'number'
						? this.t('{{period}}-day cycle', { period: day.period })
						: '',
				]
					.filter(Boolean)
					.join(' · ')}
			</p>`,
		}));

		return html`<section class="wrap" part="card" aria-label=${this.t('Critical days')}>
			<header class="head" part="header">
				<h2 class="title">${this.t('Critical days')}</h2>
				<span class="energy">${formatDateRange(this.effectiveLang(), d.startDate, d.endDate)}</span>
			</header>
			<dl class="stats" part="details">
				${this.stat(this.t('Events'), typeof d.totalCriticalDays === 'number' ? `${d.totalCriticalDays}` : '')}
				${this.stat(this.t('Double days'), doubles.length ? `${doubles.length}` : '0')}
				${this.stat(
					this.t('Triple day'),
					d.tripleCriticalDay
						? formatDate(this.effectiveLang(), d.tripleCriticalDay)
						: this.t('None'),
				)}
			</dl>
			${
				doubles.length > 0
					? html`<p class="crit-note">
						${this.t(
							'Two or more cycles cross zero on {{dates}}. Take extra care on these dates.',
							{
								dates: formatList(
									this.effectiveLang(),
									doubles.map((x) => formatDate(this.effectiveLang(), x) || x),
								),
							},
						)}
					</p>`
					: nothing
			}
			${this.renderInterpretation(sections, 'biorhythm-critical', 'Advisories')}
		</section>`;
	}

	/** A critical day severity as a reader sees it, empty for the base case. */
	private severityName(
		severity: GetCriticalDaysResponse['criticalDays'][number]['severity'],
	): string {
		const label = SEVERITY_LABEL[severity];
		return label ? this.t(label) : '';
	}

	private stat(label: string, value: string) {
		if (!value) return nothing;
		return html`<div class="stat"><dt>${label}</dt><dd>${value}</dd></div>`;
	}
}

declare global {
	interface HTMLElementTagNameMap {
		'roxy-biorhythm-chart': RoxyBiorhythmChart;
	}
}