import { css, html, nothing } from 'lit';
import { state } from 'lit/decorators.js';
import { transitsTableEndpoints } from '../generated/endpoint-defaults.js';
import { planetGlyph, signGlyph } from '../tokens/index.js';
import type { TransitsResponse } 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 { formatDegreeInSign } from '../utils/degree.js';
import { chevron, disclosureStyles } from '../utils/disclosure.js';
import {
	formatAspectName,
	formatDate,
	formatNumber,
	formatTime,
} from '../utils/format.js';
import {
	readingDetailStyles,
	renderReadingDetail,
} from '../utils/interp-accordion.js';
import { display } from '../utils/localized.js';
import { renderTablist, tablistStyles } from '../utils/tablist.js';

/**
 * Transit positions and aspect table. Pass `data` from /astrology/transits.
 * When natalChart is included in the request, `data.transitAspects` and
 * `data.summary` are present and rendered automatically.
 */
@customElement('roxy-transits-table')
export class RoxyTransitsTable extends RoxyDataElement<TransitsResponse> {
	static endpoints = transitsTableEndpoints;

	static styles = [
		baseStyles,
		tablistStyles,
		disclosureStyles,
		readingDetailStyles,
		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;
				/* minmax(0, 1fr), not the implicit auto column. An auto grid column takes
				 * its MINIMUM from min-content, so a nowrap table wider than the card blows
				 * the column out and drags every sibling with it, clipped on the right. This
				 * is what lets the scroll container inside actually scroll. */
				grid-template-columns: minmax(0, 1fr);
				gap: var(--roxy-space-md, 1rem);
			}

			.head {
				display: flex;
				justify-content: space-between;
				align-items: baseline;
				gap: var(--roxy-space-md, 1rem);
				flex-wrap: wrap;
			}

			.title {
				font-size: var(--roxy-text-lg, 1.125rem);
				font-weight: var(--roxy-weight-bold, 600);
				margin: 0;
			}

			.subtitle {
				color: var(--roxy-muted, #71717a);
				font-size: var(--roxy-text-sm, 0.875rem);
				margin: 0;
			}

			.summary-pills {
				display: flex;
				flex-wrap: wrap;
				gap: var(--roxy-space-sm, 0.5rem);
			}

			.pill {
				display: inline-flex;
				align-items: center;
				gap: 4px;
				padding: 2px var(--roxy-space-sm, 0.5rem);
				border-radius: var(--roxy-radius-full, 9999px);
				font-size: var(--roxy-text-xs, 0.75rem);
				font-weight: var(--roxy-weight-bold, 600);
				border: 1px solid currentColor;
			}

			.pill--muted {
				color: var(--roxy-fg, #0a0a0a);
				background: color-mix(in srgb, var(--roxy-border, #e4e4e7) 60%, transparent);
			}

			.pill--success {
				color: var(--_success-fg);
				background: color-mix(in srgb, var(--roxy-success, #16a34a) 10%, transparent);
			}

			.pill--danger {
				color: var(--_danger-fg);
				background: color-mix(in srgb, var(--roxy-danger, #dc2626) 10%, transparent);
			}

			table {
				width: 100%;
				border-collapse: collapse;
				font-size: var(--roxy-text-sm, 0.875rem);
			}

			th,
			td {
				padding: var(--roxy-space-sm, 0.5rem);
				border-bottom: 1px solid var(--roxy-border, #e4e4e7);
				text-align: left;
			}

			th {
				color: var(--roxy-muted, #71717a);
				font-weight: var(--roxy-weight-bold, 600);
				text-transform: uppercase;
				font-size: var(--roxy-text-xs, 0.75rem);
				letter-spacing: 0.06em;
			}

			.section-label {
				font-size: var(--roxy-text-xs, 0.75rem);
				color: var(--roxy-muted, #71717a);
				text-transform: uppercase;
				letter-spacing: 0.06em;
				font-weight: var(--roxy-weight-bold, 600);
				margin: 0 0 var(--roxy-space-xs, 0.25rem) 0;
			}

			.glyph {
				font-size: 1.1em;
				margin-right: 2px;
				line-height: 1;
			}

			/* A long name wraps under its glyph's line, so a translated row fits a phone card. */
			.planet-cell {
				display: flex;
				align-items: baseline;
				gap: 4px;
			}

			.retro-badge {
				display: inline-block;
				font-size: 0.7em;
				padding: 1px 4px;
				border-radius: var(--roxy-radius-sm, 4px);
				background: color-mix(in srgb, var(--roxy-warning, #ea580c) 12%, transparent);
				color: var(--_warning-fg);
				font-weight: var(--roxy-weight-bold, 600);
				margin-left: 2px;
				vertical-align: middle;
			}

			.speed {
				font-variant-numeric: tabular-nums;
				color: var(--roxy-muted, #71717a);
				white-space: nowrap;
			}

			.speed-arrow {
				font-size: 0.85em;
			}

			td.num {
				font-variant-numeric: tabular-nums;
				color: var(--roxy-muted, #71717a);
			}

			.overflow-scroll {
				overflow-x: auto;
				min-width: 0;
				-webkit-overflow-scrolling: touch;
			}

			.aspect-card {
				border: 1px solid var(--roxy-border, #e4e4e7);
				border-radius: var(--roxy-radius-md, 8px);
				padding: var(--roxy-space-sm, 0.5rem) var(--roxy-space-md, 1rem);
				margin-bottom: var(--roxy-space-xs, 0.25rem);
			}
			.aspect-card summary {
				cursor: pointer;
				font-weight: 500;
				color: var(--roxy-fg, #0a0a0a);
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				gap: 0.5em;
			}
			.aspect-card summary .meta {
				color: var(--roxy-muted, #71717a);
				font-weight: 400;
				font-size: var(--roxy-text-xs, 0.75rem);
				margin-left: auto;
				font-variant-numeric: tabular-nums;
			}
			.aspect-card .interp-body {
				margin-top: var(--roxy-space-xs, 0.25rem);
				color: var(--roxy-fg, #0a0a0a);
				font-size: var(--roxy-text-sm, 0.875rem);
				line-height: 1.45;
			}
			.aspect-card .interp-body p {
				margin: 0 0 var(--roxy-space-xs, 0.25rem);
			}
			.nature-badge {
				display: inline-block;
				padding: 1px 8px;
				border-radius: 9999px;
				font-size: var(--roxy-text-xs, 0.75rem);
				font-weight: 600;
			}
			.nature-badge.harmonious {
				background: color-mix(in srgb, var(--roxy-success, #16a34a) 12%, transparent);
				color: var(--_success-fg);
			}
			.nature-badge.challenging {
				background: color-mix(in srgb, var(--roxy-danger, #dc2626) 12%, transparent);
				color: var(--_danger-fg);
			}
			.nature-badge.neutral {
				background: color-mix(in srgb, var(--roxy-border, #e4e4e7) 60%, transparent);
				color: var(--roxy-fg, #0a0a0a);
			}
		`,
	];

	/** Which panel is showing: planet positions or the transit-to-natal aspects. */
	@state()
	private tab: 'positions' | 'aspects' = 'positions';

	protected renderData(d: TransitsResponse) {
		if (!d.transitPlanets?.length) return this.renderEmpty();

		const {
			transitDate,
			transitTime,
			transitPlanets,
			transitAspects,
			summary,
		} = d;

		const dateStr = [
			formatDate(this.effectiveLang(), transitDate),
			formatTime(this.effectiveLang(), transitTime),
		]
			.filter(Boolean)
			.join(' ');
		const aspectCount = transitAspects?.length ?? 0;
		const tab = this.tab;

		return html`<div class="wrap" part="card" aria-label=${this.t('Transits')}>
			<div class="head" part="header">
				<h2 class="title">${this.t('Transits')}</h2>
				${dateStr ? html`<p class="subtitle">${dateStr}</p>` : nothing}
			</div>

			${
				aspectCount > 0
					? html`${renderTablist({
							items: [
								{ id: 'positions', label: this.t('Positions') },
								{
									id: 'aspects',
									label: this.t('Aspects ({{count}})', { count: aspectCount }),
								},
							],
							active: tab,
							onSelect: (v) => {
								this.tab = v;
							},
							label: this.t('Transit views'),
							idPrefix: 'transits',
							controls: true,
						})}
						<div
							id="transits-panel-${tab}"
							part="panel"
							role="tabpanel"
							aria-labelledby="transits-tab-${tab}"
						>
							${
								tab === 'positions'
									? html`<div class="overflow-scroll">
										${this.renderPlanetsTable(transitPlanets)}
									</div>`
									: html`${summary ? this.renderSummaryPills(summary) : nothing}
										<div class="overflow-scroll">
											${this.renderAspectsList(transitAspects ?? [])}
										</div>`
							}
						</div>`
					: html`<div class="overflow-scroll">
						${this.renderPlanetsTable(transitPlanets)}
					</div>`
			}
		</div>`;
	}

	private renderSummaryPills(
		summary: NonNullable<TransitsResponse['summary']>,
	) {
		return html`<div class="summary-pills" part="details" role="region" aria-label=${this.t('Aspect summary')}>
			<span class="pill pill--muted">
				${this.t('Total')}: ${summary.totalAspects}
			</span>
			<span class="pill pill--success">
				${this.t('Harmonious: {{count}}', { count: summary.harmonious })}
			</span>
			<span class="pill pill--danger">
				${this.t('Challenging: {{count}}', { count: summary.challenging })}
			</span>
			<span class="pill pill--muted">
				${this.t('Neutral: {{count}}', { count: summary.neutral })}
			</span>
		</div>`;
	}

	private renderPlanetsTable(planets: TransitsResponse['transitPlanets']) {
		return html`<table class="planets-table" part="table">
			<caption class="roxy-sr-only">
				${this.t(
					'Transiting planets: each planet with its current sign, degree and daily speed.',
				)}
			</caption>
			<thead>
				<tr>
					<th scope="col">${this.t('Planet')}</th>
					<th scope="col">${this.t('Sign')}</th>
					<th scope="col">${this.t('Degree')}</th>
					<th scope="col">${this.t('Speed')}</th>
				</tr>
			</thead>
			<tbody>
				${planets.map((p) => {
					const pGlyph = planetGlyph(p.name) ?? '';
					const sGlyph = signGlyph(p.sign) ?? '';
					const speedArrow = p.speed >= 0 ? '↑' : '↓';
					return html`<tr>
						<td>
							<div class="planet-cell">
								<span class="glyph" aria-hidden="true">${pGlyph}</span>
								${display(p, 'name')}
								${
									p.isRetrograde
										? html`<span class="retro-badge" aria-label=${this.t('retrograde')}>R</span>`
										: nothing
								}
							</div>
						</td>
						<td>
							<div class="planet-cell">
								<span class="glyph" aria-hidden="true">${sGlyph}</span>
								${display(p, 'sign')}
							</div>
						</td>
						<td class="num">${formatDegreeInSign(p.degree)}</td>
						<td class="speed">
							<span class="speed-arrow" aria-hidden="true">${speedArrow}</span>
							${formatNumber(this.effectiveLang(), Math.abs(p.speed), 2)}${this.t('°/day')}
						</td>
					</tr>`;
				})}
			</tbody>
		</table>`;
	}

	private renderAspectsList(
		aspects: NonNullable<TransitsResponse['transitAspects']>,
	) {
		return html`<div part="section aspects" role="list" aria-label=${this.t('Transit aspects')}>
			${aspects.map((a, idx) => {
				const tGlyph = planetGlyph(a.transitPlanet) ?? '';
				const nGlyph = planetGlyph(a.natalPlanet) ?? '';
				const nature = (a.nature ?? 'neutral').toLowerCase();
				const interp = a.interpretation;
				const type = formatAspectName(a);
				const status = a.isApplying ? this.t('Applying') : this.t('Separating');
				return html`<details class="aspect-card" part="reading" role="listitem" name="transit-aspects" ?open=${idx === 0}>
					<summary>
						<span aria-hidden="true">${tGlyph}</span>
						${a.transitPlanet}
						<span class="nature-badge ${nature}">${type}</span>
						<span aria-hidden="true">${nGlyph}</span>
						${a.natalPlanet}
						<span class="meta">
							${this.t('{{status}} · orb {{orb}}° · str {{strength}}', {
								status,
								orb: formatNumber(this.effectiveLang(), a.orb, 2),
								strength: formatNumber(this.effectiveLang(), a.strength, 1),
							})}
						</span>
						${chevron()}
					</summary>
					<div class="interp-body">
						${renderReadingDetail(interp, this.translator)}
					</div>
				</details>`;
			})}
		</div>`;
	}
}

declare global {
	interface HTMLElementTagNameMap {
		'roxy-transits-table': RoxyTransitsTable;
	}
}