import React from "react";
import type { ProfileRecord } from "../types/bluesky";
import {
	useColorScheme,
	type ColorSchemePreference,
} from "../hooks/useColorScheme";
import { BlueskyIcon } from "../components/BlueskyIcon";

export interface BlueskyProfileRendererProps {
	record: ProfileRecord;
	loading: boolean;
	error?: Error;
	did: string;
	handle?: string;
	avatarUrl?: string;
	colorScheme?: ColorSchemePreference;
}

export const BlueskyProfileRenderer: React.FC<BlueskyProfileRendererProps> = ({
	record,
	loading,
	error,
	did,
	handle,
	avatarUrl,
	colorScheme = "system",
}) => {
	const scheme = useColorScheme(colorScheme);

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

	const palette = scheme === "dark" ? theme.dark : theme.light;
	const profileUrl = `https://bsky.app/profile/${encodeURIComponent(did)}`;
	const rawWebsite = record.website?.trim();
	const websiteHref = rawWebsite
		? rawWebsite.match(/^https?:\/\//i)
			? rawWebsite
			: `https://${rawWebsite}`
		: undefined;
	const websiteLabel = rawWebsite
		? rawWebsite.replace(/^https?:\/\//i, "")
		: undefined;

	return (
		<div style={{ ...base.card, ...palette.card }}>
			<div style={base.header}>
				{avatarUrl ? (
					<img src={avatarUrl} alt="avatar" style={base.avatarImg} />
				) : (
					<div
						style={{ ...base.avatar, ...palette.avatar }}
						aria-label="avatar"
					/>
				)}
				<div style={{ flex: 1 }}>
					<div style={{ ...base.display, ...palette.display }}>
						{record.displayName ?? handle ?? did}
					</div>
					<div style={{ ...base.handleLine, ...palette.handleLine }}>
						@{handle ?? did}
					</div>
					{record.pronouns && (
						<div style={{ ...base.pronouns, ...palette.pronouns }}>
							{record.pronouns}
						</div>
					)}
				</div>
			</div>
			{record.description && (
				<p style={{ ...base.desc, ...palette.desc }}>
					{record.description}
				</p>
			)}
			{record.createdAt && (
				<div style={{ ...base.meta, ...palette.meta }}>
					Joined {new Date(record.createdAt).toLocaleDateString()}
				</div>
			)}
			<div style={base.links}>
				{websiteHref && websiteLabel && (
					<a
						href={websiteHref}
						target="_blank"
						rel="noopener noreferrer"
						style={{ ...base.link, ...palette.link }}
					>
						{websiteLabel}
					</a>
				)}
				<a
					href={profileUrl}
					target="_blank"
					rel="noopener noreferrer"
					style={{ ...base.link, ...palette.link }}
				>
					View on Bluesky
				</a>
			</div>
			<div style={base.iconCorner} aria-hidden>
				<BlueskyIcon size={18} />
			</div>
		</div>
	);
};

const base: Record<string, React.CSSProperties> = {
	card: {
		borderRadius: 12,
		padding: 16,
		fontFamily: "system-ui, sans-serif",
		maxWidth: 480,
		transition:
			"background-color 180ms ease, border-color 180ms ease, color 180ms ease",
		position: "relative",
	},
	header: {
		display: "flex",
		gap: 12,
		marginBottom: 8,
	},
	avatar: {
		width: 64,
		height: 64,
		borderRadius: "50%",
	},
	avatarImg: {
		width: 64,
		height: 64,
		borderRadius: "50%",
		objectFit: "cover",
	},
	display: {
		fontSize: 20,
		fontWeight: 600,
	},
	handleLine: {
		fontSize: 13,
	},
	desc: {
		whiteSpace: "pre-wrap",
		fontSize: 14,
		lineHeight: 1.4,
	},
	meta: {
		marginTop: 12,
		fontSize: 12,
	},
	pronouns: {
		display: "inline-flex",
		alignItems: "center",
		gap: 4,
		fontSize: 12,
		fontWeight: 500,
		borderRadius: 999,
		padding: "2px 8px",
		marginTop: 6,
	},
	links: {
		display: "flex",
		flexDirection: "column",
		gap: 8,
		marginTop: 12,
	},
	link: {
		display: "inline-flex",
		alignItems: "center",
		gap: 4,
		fontSize: 12,
		fontWeight: 600,
		textDecoration: "none",
	},
	iconCorner: {
		position: "absolute",
		right: 12,
		bottom: 12,
	},
};

const theme = {
	light: {
		card: {
			border: "1px solid #e2e8f0",
			background: "#ffffff",
			color: "#0f172a",
		},
		avatar: {
			background: "#cbd5e1",
		},
		display: {
			color: "#0f172a",
		},
		handleLine: {
			color: "#64748b",
		},
		desc: {
			color: "#0f172a",
		},
		meta: {
			color: "#94a3b8",
		},
		pronouns: {
			background: "#e2e8f0",
			color: "#1e293b",
		},
		link: {
			color: "#2563eb",
		},
	},
	dark: {
		card: {
			border: "1px solid #1e293b",
			background: "#0b1120",
			color: "#e2e8f0",
		},
		avatar: {
			background: "#1e293b",
		},
		display: {
			color: "#e2e8f0",
		},
		handleLine: {
			color: "#cbd5f5",
		},
		desc: {
			color: "#e2e8f0",
		},
		meta: {
			color: "#a5b4fc",
		},
		pronouns: {
			background: "#1e293b",
			color: "#e2e8f0",
		},
		link: {
			color: "#38bdf8",
		},
	},
} satisfies Record<"light" | "dark", Record<string, React.CSSProperties>>;

export default BlueskyProfileRenderer;