import * as stylex from "@stylexjs/stylex";
import type { ForwardZone, LocalRecord } from "@/lib/types";
import { styles as shared } from "@/ui/styles";
import { styles as config } from "./styles";

/**
 * Local records and forward zones under file authority. Collections are
 * tables, not definition lists, and each names the ZON key it comes from once
 * rather than repeating it on every row.
 */
export function RecordsReadOnly({ records }: { records: LocalRecord[] }) {
	return (
		<section {...stylex.props(config.panel)}>
			<h2 {...stylex.props(config.panelHeading)}>
				Local records
				<code {...stylex.props(shared.mono, config.panelKey)}>local_records</code>
			</h2>
			{records.length === 0 ? (
				<p {...stylex.props(config.empty)}>The file declares no local records.</p>
			) : (
				<div {...stylex.props(shared.tableWrap)}>
					<table {...stylex.props(config.table)}>
						<thead>
							<tr>
								<th {...stylex.props(shared.th)}>Name</th>
								<th {...stylex.props(shared.th)}>Type</th>
								<th {...stylex.props(shared.th)}>Value</th>
								<th {...stylex.props(shared.th)}>TTL</th>
							</tr>
						</thead>
						<tbody>
							{records.map((record) => (
								<tr key={record.id}>
									<td {...stylex.props(shared.td, shared.mono)}>{record.name}</td>
									<td {...stylex.props(shared.td)}>{record.rtype}</td>
									<td {...stylex.props(shared.td, shared.mono)}>{record.value}</td>
									<td {...stylex.props(shared.td, shared.tabularNums)}>{record.ttl}</td>
								</tr>
							))}
						</tbody>
					</table>
				</div>
			)}
		</section>
	);
}

export function ZonesReadOnly({ zones }: { zones: ForwardZone[] }) {
	return (
		<section {...stylex.props(config.panel)}>
			<h2 {...stylex.props(config.panelHeading)}>
				Forward zones
				<code {...stylex.props(shared.mono, config.panelKey)}>forward_zones</code>
			</h2>
			{zones.length === 0 ? (
				<p {...stylex.props(config.empty)}>The file declares no forward zones.</p>
			) : (
				<div {...stylex.props(shared.tableWrap)}>
					<table {...stylex.props(config.table)}>
						<thead>
							<tr>
								<th {...stylex.props(shared.th)}>Zone</th>
								<th {...stylex.props(shared.th)}>Resolver</th>
							</tr>
						</thead>
						<tbody>
							{zones.map((zone) => (
								<tr key={zone.id}>
									<td {...stylex.props(shared.td, shared.mono)}>{zone.zone}</td>
									<td {...stylex.props(shared.td, shared.mono)}>{zone.resolver}</td>
								</tr>
							))}
						</tbody>
					</table>
				</div>
			)}
		</section>
	);
}