import { css, html, nothing } from 'lit';
import { hexagramEndpoints } from '../generated/endpoint-defaults.js';
import { trigramGlyph } from '../tokens/index.js';
import type {
	CastDailyReadingResponse,
	CastReadingResponse,
	GetDailyHexagramResponse,
	GetHexagramResponse,
	GetRandomHexagramResponse,
	Hexagram,
	LookupHexagramResponse,
} from '../types/index.js';
import { RoxyDataElement } from '../utils/base-element.js';
import { baseStyles } from '../utils/base-styles.js';
import { customElement } from '../utils/define.js';
import { chevron, disclosureStyles } from '../utils/disclosure.js';
import { formatDate } from '../utils/format.js';
import {
	type InterpSection,
	interpAccordionStyles,
} from '../utils/interp-accordion.js';

type HexagramData =
	| GetHexagramResponse
	| GetRandomHexagramResponse
	| LookupHexagramResponse
	| GetDailyHexagramResponse
	| CastReadingResponse
	| CastDailyReadingResponse;

/**
 * I Ching hexagram card. Renders /iching/hexagrams/{number},
 * /iching/hexagrams/random, /iching/hexagrams/lookup, /iching/cast,
 * /iching/daily and /iching/daily/cast.
 *
 * @remarks
 * **There is deliberately no `mode` input.** Which shape arrived is
 * shape-detected from the payload in {@link RoxyHexagram.resolveHexagram}, which
 * is the rule for every multi-endpoint component here: an attribute and a
 * response can disagree, and only one of them is the reading. A `mode` property
 * shipped anyway, reflected and typed into both framework wrappers, and nothing
 * ever read it.
 */
@customElement('roxy-hexagram')
export class RoxyHexagram extends RoxyDataElement<HexagramData> {
	static endpoints = hexagramEndpoints;

	static styles = [
		baseStyles,
		disclosureStyles,
		interpAccordionStyles,
		css`
			.card {
				background: var(--roxy-surface, #fff);
				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;
				grid-template-columns: 6rem 1fr;
				gap: var(--roxy-space-lg, 1.5rem);
			}

			.result-chart {
				display: grid;
				grid-template-columns: 6rem minmax(0, 1fr);
				gap: var(--roxy-space-lg, 1.5rem);
				padding-top: var(--roxy-space-md, 1rem);
			}
			.result {
				grid-column: 1 / -1;
				border-top: 1px solid var(--roxy-border, #e4e4e7);
				padding-top: var(--roxy-space-md, 1rem);
			}
			.result > summary {
				display: flex;
				align-items: center;
				justify-content: space-between;
				gap: var(--roxy-space-sm, 0.5rem);
				cursor: pointer;
			}
			@container (max-width: 480px) {
				.card, .result-chart {
					grid-template-columns: 1fr;
				}
			}

			/* Hug the top. As a grid item this column would otherwise stretch to the
			 * full card height, and because .lines is itself a grid its six rows
			 * would stretch with it, pulling the figure apart into a ladder that
			 * drifts away from the header. The card grew a line-readings accordion,
			 * which is exactly when that started to show. */
			.glyphs {
				display: grid;
				gap: var(--roxy-space-md, 1rem);
				justify-items: center;
				align-self: start;
				align-content: start;
			}
			.symbol {
				font-size: 3rem;
				line-height: 1;
				color: var(--roxy-accent-ink, #b45309);
			}
			.lines {
				display: grid;
				gap: 4px;
				width: 4rem;
			}
			.line {
				display: flex;
				gap: 4px;
				justify-content: center;
				align-items: center;
				height: 8px;
			}
			.seg {
				display: block;
				height: 6px;
				background: var(--roxy-fg, #0a0a0a);
				border-radius: 1px;
			}
			.line.broken .seg {
				width: 1.4rem;
			}
			.line.solid .seg {
				width: 3rem;
			}
			.line.changing .seg {
				background: var(--roxy-accent, #f59e0b);
			}

			.title {
				margin: 0;
				font-size: var(--roxy-text-xl, 1.5rem);
				font-weight: var(--roxy-weight-bold, 600);
				letter-spacing: var(--roxy-tracking-tight);
			}
			.subtitle {
				color: var(--roxy-muted, #71717a);
				font-size: var(--roxy-text-sm, 0.875rem);
				margin: 0 0 var(--roxy-space-sm, 0.5rem);
			}
			.daily-date { display: block; margin-bottom: var(--roxy-space-sm, .5rem); font-size: var(--roxy-text-sm, .875rem); color: var(--roxy-secondary, #475569); }
			.trigrams {
				display: flex;
				gap: var(--roxy-space-md, 1rem);
				margin-bottom: var(--roxy-space-sm, 0.5rem);
				color: var(--roxy-secondary, #475569);
				font-size: var(--roxy-text-xs, 0.75rem);
				text-transform: uppercase;
				letter-spacing: 0.06em;
			}
			.tri-glyph {
				font-size: var(--roxy-text-xl, 1.5rem);
				color: var(--roxy-accent-ink, #b45309);
				margin-right: 4px;
				vertical-align: middle;
			}
			.judgment,
			.image,
			.message {
				margin: 0 0 var(--roxy-space-sm, 0.5rem);
				font-size: var(--roxy-text-sm, 0.875rem);
				color: var(--roxy-fg, #0a0a0a);
			}
			.judgment::before {
				content: 'Judgment. ';
				font-weight: var(--roxy-weight-bold, 600);
				color: var(--roxy-secondary, #475569);
			}
			.image::before {
				content: 'Image. ';
				font-weight: var(--roxy-weight-bold, 600);
				color: var(--roxy-secondary, #475569);
			}

			/* The oracle statement is the line; the meaning is the reading OF the line.
			 * Setting it apart stops the two from reading as one run-on paragraph. */
			.line-meaning {
				margin: 0;
				padding-left: var(--roxy-space-sm, 0.5rem);
				border-left: 2px solid var(--roxy-border, #e4e4e7);
				color: var(--roxy-muted, #71717a);
			}
			.changing {
				margin-top: var(--roxy-space-md, 1rem);
				padding-top: var(--roxy-space-md, 1rem);
				border-top: 1px solid var(--roxy-border, #e4e4e7);
				color: var(--roxy-accent-ink, #b45309);
				font-size: var(--roxy-text-sm, 0.875rem);
			}
		`,
	];

	/**
	 * Which shape arrived, flattened to what the card draws.
	 *
	 * @remarks
	 * A cast prefers the top-level `changingLines` (only the lines that moved, on `/iching/daily/cast`) over the hexagram list (all six, on `/iching/cast`); both are the same `ChangingLine` shape.
	 */
	private resolveHexagram(): {
		hex: Hexagram;
		lines?: number[];
		changingLinePositions?: number[];
		changingLines?: Hexagram['changingLines'];
		dailyMessage?: string;
		date?: string;
		resultingHexagram?: Hexagram;
	} | null {
		const d = this.data;
		if (!d) return null;
		if ('hexagram' in d && d.hexagram) {
			if ('lines' in d) {
				const cast = d as CastReadingResponse & CastDailyReadingResponse;
				const hex = cast.hexagram as Hexagram;
				return {
					hex,
					lines: cast.lines,
					date: cast.date,
					changingLinePositions: cast.changingLinePositions,
					changingLines: cast.changingLines ?? hex.changingLines,
					resultingHexagram: cast.resultingHexagram as Hexagram | undefined,
				};
			}
			const daily = d as GetDailyHexagramResponse;
			const hex = daily.hexagram as Hexagram;
			return {
				hex,
				changingLines: hex.changingLines,
				dailyMessage: daily.dailyMessage,
				date: daily.date,
			};
		}
		const hex = d as Hexagram;
		return { hex, changingLines: hex.changingLines };
	}

	protected renderData() {
		const resolved = this.resolveHexagram();
		if (!resolved) return this.renderEmpty();
		const {
			hex,
			lines,
			changingLinePositions,
			changingLines,
			dailyMessage,
			date,
			resultingHexagram,
		} = resolved;
		return html`<article class="card" part="card" aria-label=${this.t('I Ching hexagram')}>
			${this.renderHexagram('hexagram', hex, lines, changingLinePositions, changingLines, dailyMessage, date)}
			${
				resultingHexagram
					? html`<details class="result" part="section resulting-hexagram">
				<summary>${this.t('Becomes hexagram {{number}} {{name}}.', { number: resultingHexagram.number, name: resultingHexagram.english ?? resultingHexagram.chinese ?? '' })}${chevron()}</summary>
				<div class="result-chart">${this.renderHexagram('result', resultingHexagram)}</div>
			</details>`
					: nothing
			}
		</article>`;
	}

	private renderHexagram(
		name: string,
		h: Hexagram,
		castLines?: number[],
		changingLinePositions?: number[],
		changingLines?: Hexagram['changingLines'],
		dailyMessage?: string,
		date?: string,
	) {
		const lines = castLines ?? this.derivedLines(h);
		const changing = new Set(changingLinePositions ?? []);
		const readings = !this.hideReadings;
		return html`
			<div class="glyphs" part="chart">
				${h.symbol ? html`<div class="symbol">${h.symbol}</div>` : nothing}
				${
					lines.length > 0
						? html`<div class="lines" aria-hidden="true">
							${lines
								.slice()
								.reverse()
								.map((l, idx) => {
									// reverse so visual top is line 6
									const realIdx = lines.length - 1 - idx + 1;
									const isChanging = changing.has(realIdx);
									const broken = l === 6 || l === 8;
									const cls = `${broken ? 'broken' : 'solid'}${isChanging ? ' changing' : ''}`;
									return html`<div class="line ${cls}">
										${
											broken
												? html`<span class="seg"></span><span class="seg"></span>`
												: html`<span class="seg"></span>`
										}
									</div>`;
								})}
						</div>`
						: nothing
				}
			</div>
			<div part="header">
				<h2 class="title">
					${
						// One text node, not two. The markup minifier collapses the space
						// between adjacent template expressions, which rendered the title as
						// "30.The Clinging" with the separator eaten. Join in JS instead.
						[
							h.number != null ? `${h.number}.` : '',
							h.english ?? h.chinese ?? this.t('I Ching hexagram'),
						]
							.filter(Boolean)
							.join(' ')
					}
				</h2>
				${date ? html`<time class="daily-date" part="details" datetime=${date}>${formatDate(this.effectiveLang(), date)}</time>` : nothing}
				<p class="subtitle">
					${h.chinese ? html`${h.chinese}` : nothing}
					${h.pinyin ? html` · ${h.pinyin}` : nothing}
				</p>
				<div class="trigrams" part="details">
					${
						h.upperTrigram
							? html`<div>
								${this.t('Upper')}
								<span class="tri-glyph"
									>${trigramGlyph(h.upperTrigram) ?? ''}</span
								>${h.upperTrigram}
							</div>`
							: nothing
					}
					${
						h.lowerTrigram
							? html`<div>
								${this.t('Lower')}
								<span class="tri-glyph"
									>${trigramGlyph(h.lowerTrigram) ?? ''}</span
								>${h.lowerTrigram}
							</div>`
							: nothing
					}
				</div>
				${
					// The Judgment and the Image are the written oracle of the figure, so
					// they go with the readings; the figure, the trigrams and which lines
					// are moving are what stays.
					h.judgment && readings
						? html`<p class="judgment">${h.judgment}</p>`
						: nothing
				}
				${h.image && readings ? html`<p class="image">${h.image}</p>` : nothing}
				${dailyMessage && readings ? html`<p class="message">${dailyMessage}</p>` : nothing}
				${
					h.interpretation?.general && readings
						? html`<p>${h.interpretation.general}</p>`
						: nothing
				}
				${
					changing.size > 0
						? html`<div class="changing" part="section changing-lines">
							${this.t('Changing lines: {{lines}}.', {
								lines: Array.from(changing)
									.sort((a, b) => a - b)
									.join(', '),
							})}

						</div>`
						: nothing
				}
				${this.renderTopics(h, name)}
				${this.renderLines(changingLines ?? h.changingLines, changing, `${name}-lines`)}
			</div>
		`;
	}

	private renderTopics(h: Hexagram, name: string) {
		const i = h.interpretation;
		if (!i) return nothing;
		return this.renderInterpretation(
			[
				{ label: this.t('Love'), body: i.love ?? '' },
				{ label: this.t('Career'), body: i.career ?? '' },
				{ label: this.t('Decision'), body: i.decision ?? '' },
				{ label: this.t('Advice'), body: i.advice ?? '' },
			].filter((row) => row.body),
			`${name}-topics`,
			'Readings',
		);
	}

	/**
	 * The line readings. Each line carries its oracle statement and, since the 2026-07 API rewrite, a written meaning. Both are rendered: a bare "Changing lines: 3" leaves a reader no way to know what line 3 is telling them.
	 *
	 * @remarks
	 * When lines are moving, only those lines are shown: a cast turns on the moving lines, and listing the other five buries the answer. With no lines moving (a lookup, a random draw, the daily hexagram) all six are shown, because there the hexagram is being read as a reference rather than as an answer to a question.
	 */
	private renderLines(
		lines: Hexagram['changingLines'] | undefined,
		changing: Set<number>,
		name: string,
	) {
		const all = lines ?? [];
		if (all.length === 0) return nothing;

		const isCast = changing.size > 0;
		const shown = isCast ? all.filter((l) => changing.has(l.position)) : all;
		if (shown.length === 0) return nothing;

		const sections: InterpSection[] = shown.map((l) => ({
			label: `Line ${l.position}`,
			body: l.text ?? '',
			extra: l.meaning
				? html`<p class="line-meaning">${l.meaning}</p>`
				: nothing,
		}));

		return this.renderInterpretation(
			sections,
			name,
			isCast ? 'Changing lines' : 'Lines',
		);
	}

	/**
	 * Lines for a static hexagram (a lookup, a random draw, the hexagram of the day, none of which carry a cast `lines` array): read the `binary` pattern. 6 digits BOTTOM to top, so index 0 is line 1, the bottom line, exactly like the cast `lines` array. 1 = yang (solid, 7), 0 = yin (broken, 8). A response with no usable `binary` yields no lines and the figure is left undrawn, because the six lines ARE response data: a default pattern would draw one hexagram under the name and Unicode symbol of another. The Unicode `symbol` block (U+4DC0) is in King Wen order, NOT line order, so it must never be a source for the lines either.
	 *
	 * @remarks
	 * **Read in the order the API documents and never reversed.** `binary` and the cast `lines` array both run bottom to top, so they point the same way and a `.reverse()` here would flip every asymmetric hexagram upside down. Do not add one.
	 */
	private derivedLines(h: Hexagram): number[] {
		const binary = h.binary ?? '';
		if (/^[01]{6}$/.test(binary)) {
			return Array.from(binary, (c) => (c === '1' ? 7 : 8));
		}
		return [];
	}
}

declare global {
	interface HTMLElementTagNameMap {
		'roxy-hexagram': RoxyHexagram;
	}
}