import { css, html, nothing } from 'lit';
import { customElement } from 'lit/decorators.js';
import type { CalculateDrishtiResponse } from '../types/index.js';
import { RoxyDataElement } from '../utils/base-element.js';
import { baseStyles } from '../utils/base-styles.js';
import { formatNumber } from '../utils/format.js';

/**
 * Vedic graha drishti (planetary aspects) table. Renders /vedic-astrology/aspects: which planet casts an aspect on which, by special Vedic rules (every graha aspects the 7th; Mars the 4th and 8th, Jupiter the 5th and 9th, Saturn the 3rd and 10th). Mutual aspects (two planets aspecting each other) are surfaced first as they are the strongest sambandha. Each row shows the aspecting planet, the aspect kind, the aspected planet, its strength and orb.
 */
@customElement('roxy-vedic-aspects')
export class RoxyVedicAspects extends RoxyDataElement<CalculateDrishtiResponse> {
	static styles = [
		baseStyles,
		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;
				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;
			}
			.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;
			}
			.mutual {
				display: flex;
				flex-wrap: wrap;
				gap: var(--roxy-space-sm, 0.5rem);
			}
			.mutual-pill {
				display: inline-flex;
				align-items: center;
				gap: 0.35rem;
				padding: 2px 10px;
				border-radius: var(--roxy-radius-full, 9999px);
				background: color-mix(in srgb, var(--roxy-accent, #f59e0b) 14%, transparent);
				color: var(--roxy-fg, #0a0a0a);
				font-size: var(--roxy-text-sm, 0.875rem);
				font-weight: var(--roxy-weight-bold, 600);
			}
			.mutual-pill .rel {
				font-size: var(--roxy-text-xs, 0.75rem);
				font-weight: 400;
			}
			.overflow-scroll {
				overflow-x: auto;
				-webkit-overflow-scrolling: touch;
			}
			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;
				white-space: nowrap;
			}
			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;
			}
			tbody tr:last-child td {
				border-bottom: none;
			}
			.kind {
				display: inline-block;
				padding: 1px 8px;
				border-radius: var(--roxy-radius-full, 9999px);
				background: color-mix(in srgb, var(--roxy-border, #e4e4e7) 55%, transparent);
				font-size: var(--roxy-text-xs, 0.75rem);
				font-weight: 600;
			}
			.num {
				font-variant-numeric: tabular-nums;
				color: var(--roxy-muted, #71717a);
			}
			.bar {
				display: inline-block;
				height: 6px;
				border-radius: 3px;
				background: var(--roxy-accent, #f59e0b);
				vertical-align: middle;
				margin-right: 6px;
			}
		`,
	];

	protected renderEmpty() {
		return html`<div class="roxy-empty" role="status">No aspect data</div>`;
	}

	protected renderData(d: CalculateDrishtiResponse) {
		const aspects = d.aspects ?? [];
		const mutual = d.mutualAspects ?? [];
		if (aspects.length === 0 && mutual.length === 0) return this.renderEmpty();
		const date = d.datetime ? String(d.datetime).replace('T', ' ') : '';

		return html`<div class="wrap" aria-label="Vedic aspects">
			<div class="head">
				<h2 class="title">Vedic Aspects</h2>
				${date ? html`<p class="subtitle">${date}</p>` : nothing}
			</div>
			${
				mutual.length > 0
					? html`<div>
						<p class="section-label">Mutual aspects</p>
						<div class="mutual">
							${mutual.map(
								(m) => html`<span class="mutual-pill">
									${m.planet1} ⟷ ${m.planet2}
									${m.aspectType ? html`<span class="rel">${m.aspectType}</span>` : nothing}
								</span>`,
							)}
						</div>
					</div>`
					: nothing
			}
			${
				aspects.length > 0
					? html`<div class="overflow-scroll">
						<table>
							<thead>
								<tr>
									<th scope="col">From</th>
									<th scope="col">Aspect</th>
									<th scope="col">To</th>
									<th scope="col">Strength</th>
									<th scope="col">Orb</th>
								</tr>
							</thead>
							<tbody>
								${aspects.map(
									(a) => html`<tr>
										<td>${a.aspectingPlanet}</td>
										<td><span class="kind">${a.aspectType}</span></td>
										<td>${a.aspectedPlanet}</td>
										<td>
											${typeof a.strength === 'number' ? html`<span class="bar" style="width:${Math.max(4, Math.min(100, a.strength) * 0.4)}px"></span><span class="num">${formatNumber(a.strength, 0)}</span>` : nothing}
										</td>
										<td class="num">${typeof a.orb === 'number' ? `${formatNumber(a.orb, 2)}°` : ''}</td>
									</tr>`,
								)}
							</tbody>
						</table>
					</div>`
					: nothing
			}
		</div>`;
	}
}

declare global {
	interface HTMLElementTagNameMap {
		'roxy-vedic-aspects': RoxyVedicAspects;
	}
}