import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
import LogoWithText from "@/icons/logo-with-text.svg?react";
import { Button } from "@/components/ui/button";
import { useAccountStore } from "@/contexts/AccountContext";
import { observer } from "mobx-react-lite";
import Clock from "@/icons/clock.svg?react";
import { ChatInput } from "@/components/interaction-panel/chat";

export const Route = createFileRoute("/")({
	component: () => <App />,
});

const App = observer(() => {
	const { userId } = useAccountStore();

	return (
		<div className="h-full  ">
			{!userId && (
				<header className=" pt-5 px-10 h-[52px] flex items-center justify-between absolute w-full">
					<LogoWithText />
					<Link to="/auth/mail" viewTransition={{ types: ["warp"] }}>
						<Button className=" text-[18px] w-[106px] cursor-pointer">
							Sign in
						</Button>
					</Link>
				</header>
			)}

			<div className="flex-1  h-full flex items-center justify-center">
				<WelcomePanel />
			</div>
		</div>
	);
});

const WelcomePanel = () => {
	const navigate = useNavigate();
	const { userId } = useAccountStore();

	return (
		<div className="max-w-[741px] flex flex-col gap-8">
			<div className="flex flex-col gap-2 font-medium">
				<span className="leading-[120%] text-black text-[24px]">
					Hi!
					<br /> I will help you create a crypto project on Cytonic
				</span>
				<span className="text-[#C0C0C0] text-[14px] flex gap-2 items-center">
					<Clock />
					<p>Estimated build time: 3 minutes</p>
				</span>
			</div>

			<div className="flex flex-col gap-4">
				<p className="text-[#C0C0C0] text-[14px] font-medium leading-[120%]">
					Choose one of the most common prompts
					<br /> below or use your own to begin
				</p>
				<div className="flex gap-4">
					{[
						{ emoji: "🐶", text: "Build a memecoin launchpad" },
						{ emoji: "🏦", text: "Build a new stablecoin protocol" },
						{ emoji: "🌐", text: "Create a RWA marketplace on Cytonic" },
						{ emoji: "📊", text: "Ship a token dashboard" },
					].map(({ emoji, text }) => (
						<button
							type="button"
							key={emoji}
							onClick={() => {
								if (userId === undefined) {
									navigate({
										to: "/auth/mail",
										viewTransition: { types: ["warp"] },
									});
								}
							}}
							className="text-left cursor-pointer hover:bg-fill-100 transition-all w-[173px] h-[123px] p-4 rounded-[16px] border border-[#E8E8E8] flex flex-col justify-between"
						>
							<p className="text-[14px] font-medium leading-[120%]">{text}</p>
							<div className="text-[24px] leading-[100%]">{emoji}</div>
						</button>
					))}
				</div>

				<ChatInput />
			</div>
		</div>
	);
};
