"use client";

import * as React from "react";
import {
	Card,
	CardContent,
	Typography,
	Stack,
	Box,
} from "@Zunoy/zunoy-react-tw-ui";
import { Icon } from "@iconify/react";

const TYPE_ICONS: Record<string, string> = {
	info: "lucide:info",
	warning: "lucide:alert-triangle",
	note: "lucide:file-text",
	tip: "lucide:lightbulb",
	check: "lucide:check-circle",
	danger: "lucide:alert-octagon",
};

export type CardRendererProps = {
	title: string;
	cardType: string;
	customIcon?: string;
	url?: string;
	imagePath?: string;
	horizontal?: boolean;
	html?: string;
	renderHtml?: (html: string) => React.ReactNode;
};

function getBgColor(cardType: string): any {
	switch (cardType) {
		case "info":
			return "info";
		case "warning":
			return "warning";
		case "danger":
			return "error";
		case "check":
		case "tip":
			return "success";
		case "note":
			return "secondary";
		default:
			return "default";
	}
}

function getTextColorClass(cardType: string): string {
	switch (cardType) {
		case "info":
			return "text-info";
		case "warning":
			return "text-warning";
		case "danger":
			return "text-error";
		case "check":
		case "tip":
			return "text-success";
		case "note":
			return "text-secondary";
		default:
			return "text-inherit";
	}
}

export function CardRenderer({
	title,
	cardType,
	customIcon,
	url,
	imagePath,
	horizontal = false,
	html = "",
	renderHtml,
}: CardRendererProps) {
	const displayIcon = customIcon || TYPE_ICONS[cardType] || TYPE_ICONS.info;
	const bgColor = getBgColor(cardType);

	const handleClick = () => {
		if (url) {
			window.open(url, "_blank");
		}
	};

	const renderTitle = () => (
		<Box className="w-full">
			<Typography
				variant="h5"
				color={bgColor === "default" ? "inherit" : bgColor}
				className="font-bold"
			>
				{title}
			</Typography>
		</Box>
	);

	const renderDescription = () => (
		<Box className="relative w-full mt-2 text-primary-color text-sm">
			{renderHtml && html ? (
				renderHtml(html)
			) : (
				<div dangerouslySetInnerHTML={{ __html: html }} />
			)}
		</Box>
	);

	return (
		<Card
			bgColor={bgColor}
			className={`relative shadow-sm transition-all h-fit ${
				url ? "hover:shadow-md cursor-pointer hover:border-primary/50" : ""
			} ${horizontal ? "!flex !flex-row items-center" : "!flex !flex-col"}`}
			onClick={handleClick}
		>
			{imagePath && (
				<img
					src={imagePath}
					alt={title || "Card image"}
					className={
						horizontal
							? "w-1/3 max-w-[200px] h-auto object-contain border-r border-divider"
							: "w-full h-auto max-h-[300px] object-contain border-b border-divider"
					}
				/>
			)}

			<Box className="flex-1 flex flex-col p-0">
				<CardContent className="p-4 flex-1 flex flex-col relative">
					{horizontal ? (
						<Stack
							direction="row"
							alignItems="start"
							spacing={2}
							className="w-full"
						>
							{displayIcon && (
								<Box>
									<Icon
										icon={displayIcon}
										width={24}
										className={`${getTextColorClass(cardType)} mt-1 flex-shrink-0`}
									/>
								</Box>
							)}
							<Box className="flex-1 flex flex-col">
								{renderTitle()}
								{renderDescription()}
							</Box>
						</Stack>
					) : (
						<Stack
							direction="column"
							alignItems="start"
							spacing={2}
							className="w-full"
						>
							{displayIcon && (
								<Box>
									<Icon
										icon={displayIcon}
										width={24}
										className={`${getTextColorClass(cardType)} mt-1 flex-shrink-0`}
									/>
								</Box>
							)}
							<Box className="flex-1 flex flex-col w-full">
								{renderTitle()}
								{renderDescription()}
							</Box>
						</Stack>
					)}
				</CardContent>
			</Box>
		</Card>
	);
}