"use client";

import React, { useState } from "react";
import "./KomposeIcon.css";

interface KomposeIconProps {
	size?: string;
	interactive?: boolean;
	className?: string;
}

export default function KomposeIcon({
	size = "192px",
	interactive = true,
	className = "",
}: KomposeIconProps) {
	const [isClicked, setIsClicked] = useState(false);
	const [showRipple, setShowRipple] = useState(false);

	const handleClick = () => {
		if (!interactive) return;

		setIsClicked(true);
		setShowRipple(true);

		setTimeout(() => {
			setIsClicked(false);
		}, 600);

		setTimeout(() => {
			setShowRipple(false);
		}, 800);
	};

	const handleTouch = (e: React.TouchEvent) => {
		if (!interactive) return;
		handleClick();
	};

	const wrapperClasses = [
		"kompose-icon-wrapper",
		isClicked && "is-clicked",
		interactive && "is-interactive",
		className,
	]
		.filter(Boolean)
		.join(" ");

	return (
		<div
			className={wrapperClasses}
			onClick={handleClick}
			onTouchStart={handleTouch}
			style={{ width: size, height: size }}
		>
			<svg
				className="kompose-icon"
				viewBox="0 0 192 192"
				fill="none"
				xmlns="http://www.w3.org/2000/svg"
			>
				<defs>
					<pattern
						id="carbon192"
						x="0"
						y="0"
						width="7.68"
						height="7.68"
						patternUnits="userSpaceOnUse"
					>
						<rect width="7.68" height="7.68" fill="#0a0e27"></rect>
						<path
							d="M0,0 L3.84,3.84 M3.84,0 L7.68,3.84 M0,3.84 L3.84,7.68"
							stroke="#060815"
							strokeWidth="1.5"
							opacity="0.5"
						></path>
					</pattern>

					<linearGradient id="bgGrad192" x1="0%" y1="0%" x2="100%" y2="100%">
						<stop
							offset="0%"
							style={{ stopColor: "#1a1d2e", stopOpacity: 1 }}
						></stop>
						<stop
							offset="100%"
							style={{ stopColor: "#0a0e27", stopOpacity: 1 }}
						></stop>
					</linearGradient>

					<linearGradient
						id="primaryGrad192"
						x1="0%"
						y1="0%"
						x2="100%"
						y2="100%"
					>
						<stop
							offset="0%"
							className="gradient-start"
							style={{ stopColor: "#00DC82", stopOpacity: 1 }}
						></stop>
						<stop
							offset="100%"
							className="gradient-end"
							style={{ stopColor: "#00a86b", stopOpacity: 1 }}
						></stop>
					</linearGradient>

					<filter id="glow192">
						<feGaussianBlur
							stdDeviation="6"
							result="coloredBlur"
						></feGaussianBlur>
						<feMerge>
							<feMergeNode in="coloredBlur"></feMergeNode>
							<feMergeNode in="SourceGraphic"></feMergeNode>
						</feMerge>
					</filter>

					<filter id="intenseglow192">
						<feGaussianBlur
							stdDeviation="12"
							result="coloredBlur"
						></feGaussianBlur>
						<feMerge>
							<feMergeNode in="coloredBlur"></feMergeNode>
							<feMergeNode in="SourceGraphic"></feMergeNode>
						</feMerge>
					</filter>
				</defs>

				{/* Background */}
				<rect
					className="bg-rect"
					width="192"
					height="192"
					rx="24"
					fill="url(#bgGrad192)"
				></rect>
				<rect
					className="carbon-pattern"
					width="192"
					height="192"
					rx="24"
					fill="url(#carbon192)"
					opacity="0.4"
				></rect>

				{/* Stylized K */}
				<g className="k-letter" transform="translate(48, 48)">
					<line
						className="k-line k-vertical"
						x1="0"
						y1="0"
						x2="0"
						y2="96"
						stroke="url(#primaryGrad192)"
						strokeWidth="15"
						strokeLinecap="round"
						filter="url(#glow192)"
					></line>
					<line
						className="k-line k-diagonal-top"
						x1="0"
						y1="48"
						x2="57.6"
						y2="0"
						stroke="url(#primaryGrad192)"
						strokeWidth="15"
						strokeLinecap="round"
						filter="url(#glow192)"
					></line>
					<line
						className="k-line k-diagonal-bottom"
						x1="0"
						y1="48"
						x2="57.6"
						y2="96"
						stroke="url(#primaryGrad192)"
						strokeWidth="15"
						strokeLinecap="round"
						filter="url(#glow192)"
					></line>
				</g>

				{/* Animated status dot */}
				<circle
					className="status-dot"
					cx="163.2"
					cy="163.2"
					r="11.52"
					fill="#00DC82"
					opacity="0.9"
				></circle>
				<circle
					className="status-ring"
					cx="163.2"
					cy="163.2"
					r="17.28"
					fill="none"
					stroke="#00DC82"
					strokeWidth="3"
					opacity="0.3"
				></circle>

				{/* Tech corners */}
				<line
					className="corner corner-tl-h"
					x1="15.36"
					y1="15.36"
					x2="28.8"
					y2="15.36"
					stroke="#00DC82"
					strokeWidth="3"
					opacity="0.4"
				></line>
				<line
					className="corner corner-tl-v"
					x1="15.36"
					y1="15.36"
					x2="15.36"
					y2="28.8"
					stroke="#00DC82"
					strokeWidth="3"
					opacity="0.4"
				></line>
				<line
					className="corner corner-tr-h"
					x1="176.64"
					y1="15.36"
					x2="163.2"
					y2="15.36"
					stroke="#00DC82"
					strokeWidth="3"
					opacity="0.4"
				></line>
				<line
					className="corner corner-tr-v"
					x1="176.64"
					y1="15.36"
					x2="176.64"
					y2="28.8"
					stroke="#00DC82"
					strokeWidth="3"
					opacity="0.4"
				></line>
			</svg>

			{/* Ripple effect container */}
			{showRipple && <div className="ripple"></div>}
		</div>
	);
}