import React from 'react';
import type { ShTangledString } from '@atcute/tangled';
import { useColorScheme, type ColorSchemePreference } from '../hooks/useColorScheme';

export type TangledStringRecord = ShTangledString.Main;

export interface TangledStringRendererProps {
	record: TangledStringRecord;
	error?: Error;
	loading: boolean;
	colorScheme?: ColorSchemePreference;
	did: string;
	rkey: string;
	canonicalUrl?: string;
}

export const TangledStringRenderer: React.FC<TangledStringRendererProps> = ({ record, error, loading, colorScheme = 'system', did, rkey, canonicalUrl }) => {
	const scheme = useColorScheme(colorScheme);

	if (error) return <div style={{ padding: 8, color: 'crimson' }}>Failed to load snippet.</div>;
	if (loading && !record) return <div style={{ padding: 8 }}>Loading…</div>;

	const palette = scheme === 'dark' ? theme.dark : theme.light;
	const viewUrl = canonicalUrl ?? `https://tangled.org/strings/${did}/${encodeURIComponent(rkey)}`;
	const timestamp = new Date(record.createdAt).toLocaleString(undefined, { dateStyle: 'medium', timeStyle: 'short' });
	return (
		<div style={{ ...base.container, ...palette.container }}>
			<div style={{ ...base.header, ...palette.header }}>
				<strong style={{ ...base.filename, ...palette.filename }}>{record.filename}</strong>
				<div style={{ ...base.headerRight, ...palette.headerRight }}>
					<time style={{ ...base.timestamp, ...palette.timestamp }} dateTime={record.createdAt}>{timestamp}</time>
					<a href={viewUrl} target="_blank" rel="noopener noreferrer" style={{ ...base.headerLink, ...palette.headerLink }}>
						View on Tangled
					</a>
				</div>
			</div>
			{record.description && (
				<div style={{ ...base.description, ...palette.description }}>{record.description}</div>
			)}
			<pre style={{ ...base.codeBlock, ...palette.codeBlock }}>
				<code>{record.contents}</code>
			</pre>
		</div>
	);
};

const base: Record<string, React.CSSProperties> = {
	container: {
		fontFamily: 'system-ui, sans-serif',
		borderRadius: 6,
		overflow: 'hidden',
		transition: 'background-color 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease',
		width: '100%'
	},
	header: {
		padding: '10px 16px',
		display: 'flex',
		justifyContent: 'space-between',
		alignItems: 'center',
		gap: 12
	},
	headerRight: {
		display: 'flex',
		alignItems: 'center',
		gap: 12,
		flexWrap: 'wrap',
		justifyContent: 'flex-end'
	},
	filename: {
		fontFamily: 'SFMono-Regular, ui-monospace, Menlo, Monaco, "Courier New", monospace',
		fontSize: 13,
		wordBreak: 'break-all'
	},
	timestamp: {
		fontSize: 12
	},
	headerLink: {
		fontSize: 12,
		fontWeight: 600,
		textDecoration: 'none'
	},
	description: {
		padding: '10px 16px',
		fontSize: 13,
		borderTop: '1px solid transparent'
	},
	codeBlock: {
		margin: 0,
		padding: '16px',
		fontSize: 13,
		overflowX: 'auto',
		borderTop: '1px solid transparent',
		fontFamily: 'SFMono-Regular, ui-monospace, Menlo, Monaco, "Courier New", monospace'
	}
};

const theme = {
	light: {
		container: {
			border: '1px solid #d0d7de',
			background: '#f6f8fa',
			color: '#1f2328',
			boxShadow: '0 1px 2px rgba(31,35,40,0.05)'
		},
		header: {
			background: '#f6f8fa',
			borderBottom: '1px solid #d0d7de'
		},
		headerRight: {},
		filename: {
			color: '#1f2328'
		},
		timestamp: {
			color: '#57606a'
		},
		headerLink: {
			color: '#2563eb'
		},
		description: {
			background: '#ffffff',
			borderBottom: '1px solid #d0d7de',
			borderTopColor: '#d0d7de',
			color: '#1f2328'
		},
		codeBlock: {
			background: '#ffffff',
			color: '#1f2328',
			borderTopColor: '#d0d7de'
		}
	},
	dark: {
		container: {
			border: '1px solid #30363d',
			background: '#0d1117',
			color: '#c9d1d9',
			boxShadow: '0 0 0 1px rgba(1,4,9,0.3) inset'
		},
		header: {
			background: '#161b22',
			borderBottom: '1px solid #30363d'
		},
		headerRight: {},
		filename: {
			color: '#c9d1d9'
		},
		timestamp: {
			color: '#8b949e'
		},
		headerLink: {
			color: '#58a6ff'
		},
		description: {
			background: '#161b22',
			borderBottom: '1px solid #30363d',
			borderTopColor: '#30363d',
			color: '#c9d1d9'
		},
		codeBlock: {
			background: '#0d1117',
			color: '#c9d1d9',
			borderTopColor: '#30363d'
		}
	}
} satisfies Record<'light' | 'dark', Record<string, React.CSSProperties>>;

export default TangledStringRenderer;