"use client";

import { redirect } from "next/navigation";

import { useCallback, useEffect, useRef, useState } from "react";
import { FileWithPath } from "react-dropzone";
import { Icon } from "@iconify/react";

import qrcode from "qrcode-generator";
import { MiiGender, MiiPlatform } from "@prisma/client";

import { nameSchema, tagsSchema } from "@/lib/schemas";
import { convertQrCode } from "@/lib/qr-codes";
import Mii from "@/lib/mii.js/mii";
import { ThreeDsTomodachiLifeMii } from "@/lib/three-ds-tomodachi-life-mii";
import { SwitchMiiInstructions } from "@/types";

import TagSelector from "../tag-selector";
import ImageList from "./image-list";
import PortraitUpload from "./portrait-upload";
import QrUpload from "./qr-upload";
import QrScanner from "./qr-scanner";
import ThreeDsSubmitTutorialButton from "../tutorial/3ds-submit";
import MiiEditor from "./mii-editor";
import SwitchSubmitTutorialButton from "../tutorial/switch-submit";
import LikeButton from "../like-button";
import Carousel from "../carousel";
import SubmitButton from "../submit-button";
import Dropzone from "../dropzone";

export default function SubmitForm() {
	const [files, setFiles] = useState<FileWithPath[]>([]);

	const handleDrop = useCallback(
		(acceptedFiles: FileWithPath[]) => {
			if (files.length >= 3) return;
			setFiles((prev) => [...prev, ...acceptedFiles]);
		},
		[files.length],
	);

	const [isQrScannerOpen, setIsQrScannerOpen] = useState(false);
	const [miiPortraitUri, setMiiPortraitUri] = useState<string | undefined>();
	const [generatedQrCodeUri, setGeneratedQrCodeUri] = useState<string | undefined>();

	const [name, setName] = useState("");
	const [tags, setTags] = useState<string[]>([]);
	const [description, setDescription] = useState("");
	const [qrBytesRaw, setQrBytesRaw] = useState<number[]>([]);

	const [platform, setPlatform] = useState<MiiPlatform>("SWITCH");
	const [gender, setGender] = useState<MiiGender>("MALE");
	const instructions = useRef<SwitchMiiInstructions>({
		head: { skinColor: null },
		hair: {
			color: null,
			subColor: null,
			subColor2: null,
			style: null,
			isFlipped: false,
		},
		eyebrows: { color: null, height: null, distance: null, rotation: null, size: null, stretch: null },
		eyes: {
			main: { color: null, height: null, distance: null, rotation: null, size: null, stretch: null },
			eyelashesTop: { height: null, distance: null, rotation: null, size: null, stretch: null },
			eyelashesBottom: { height: null, distance: null, rotation: null, size: null, stretch: null },
			eyelidTop: { height: null, distance: null, rotation: null, size: null, stretch: null },
			eyelidBottom: { height: null, distance: null, rotation: null, size: null, stretch: null },
			eyeliner: { color: null },
			pupil: { height: null, distance: null, rotation: null, size: null, stretch: null },
		},
		nose: { height: null, size: null },
		lips: { color: null, height: null, rotation: null, size: null, stretch: null, hasLipstick: false },
		ears: { height: null, size: null },
		glasses: { ringColor: null, shadesColor: null, height: null, size: null, stretch: null },
		other: {
			wrinkles1: { height: null, distance: null, size: null, stretch: null },
			wrinkles2: { height: null, distance: null, size: null, stretch: null },
			beard: { color: null },
			moustache: { color: null, height: null, isFlipped: false, size: null, stretch: null },
			goatee: { color: null },
			mole: { color: null, height: null, distance: null, size: null },
			eyeShadow: { color: null, height: null, distance: null, size: null, stretch: null },
			blush: { color: null, height: null, distance: null, size: null, stretch: null },
		},
		height: null,
		weight: null,
		datingPreferences: [],
		voice: { speed: null, pitch: null, depth: null, delivery: null, tone: null },
		personality: { movement: null, speech: null, energy: null, thinking: null, overall: null },
	});

	const [error, setError] = useState<string | undefined>(undefined);

	const handleSubmit = async () => {
		// Validate before sending request
		const nameValidation = nameSchema.safeParse(name);
		if (!nameValidation.success) {
			setError(nameValidation.error.issues[0].message);
			return;
		}
		const tagsValidation = tagsSchema.safeParse(tags);
		if (!tagsValidation.success) {
			setError(tagsValidation.error.issues[0].message);
			return;
		}

		// Send request to server
		const formData = new FormData();
		formData.append("platform", platform);
		formData.append("name", name);
		formData.append("tags", JSON.stringify(tags));
		formData.append("description", description);
		files.forEach((file, index) => {
			// image1, image2, etc.
			formData.append(`image${index + 1}`, file);
		});

		if (platform === "THREE_DS") {
			formData.append("qrBytesRaw", JSON.stringify(qrBytesRaw));
		} else if (platform === "SWITCH") {
			const response = await fetch(miiPortraitUri!);

			if (!response.ok) {
				setError("Failed to check Mii portrait. Did you upload one?");
				return;
			}

			const blob = await response.blob();
			if (!blob.type.startsWith("image/")) {
				setError("Invalid image file returned");
				return;
			}

			formData.append("gender", gender);
			formData.append("miiPortraitImage", blob);
			formData.append("instructions", JSON.stringify(instructions.current));
		}

		const response = await fetch("/api/submit", {
			method: "POST",
			body: formData,
		});
		const { id, error } = await response.json();

		if (!response.ok) {
			setError(String(error)); // app can crash if error message is not a string
			return;
		}

		redirect(`/mii/${id}`);
	};

	useEffect(() => {
		if (platform === "SWITCH" || qrBytesRaw.length == 0) return;
		const qrBytes = new Uint8Array(qrBytesRaw);

		const preview = async () => {
			setError("");

			// Validate QR code size
			if (qrBytesRaw.length !== 372) {
				setError("QR code size is not a valid Tomodachi Life QR code");
				return;
			}

			// Convert QR code to JS (3DS)
			let conversion: { mii: Mii; tomodachiLifeMii: ThreeDsTomodachiLifeMii };
			try {
				conversion = convertQrCode(qrBytes);
				setMiiPortraitUri(conversion.mii.studioUrl({ width: 512 }));
			} catch (error) {
				setError(error instanceof Error ? error.message : String(error));
				return;
			}

			// Generate a new QR code for aesthetic reasons
			try {
				const byteString = String.fromCharCode(...qrBytes);
				const generatedCode = qrcode(0, "L");
				generatedCode.addData(byteString, "Byte");
				generatedCode.make();

				setGeneratedQrCodeUri(generatedCode.createDataURL());
			} catch {
				setError("Failed to regenerate QR code");
			}
		};

		preview();
	}, [qrBytesRaw, platform]);

	return (
		<form className="flex justify-center gap-4 w-full max-lg:flex-col max-lg:items-center">
			<div className="flex justify-center">
				<div className="w-75 h-min flex flex-col bg-zinc-50 rounded-3xl border-2 border-zinc-300 shadow-lg p-3">
					<Carousel
						images={[
							miiPortraitUri ?? "/loading.svg",
							...(platform === "THREE_DS" ? [generatedQrCodeUri ?? "/loading.svg"] : []),
							...files.map((file) => URL.createObjectURL(file)),
						]}
					/>

					<div className="p-4 flex flex-col gap-1 h-full">
						<h1 className="font-bold text-2xl line-clamp-1" title={name}>
							{name || "Mii name"}
						</h1>
						<div id="tags" className="flex flex-wrap gap-1">
							{tags.length == 0 && <span className="px-2 py-1 bg-orange-300 rounded-full text-xs">tag</span>}
							{tags.map((tag) => (
								<span key={tag} className="px-2 py-1 bg-orange-300 rounded-full text-xs">
									{tag}
								</span>
							))}
						</div>

						<div className="mt-auto">
							<LikeButton likes={0} isLiked={false} disabled />
						</div>
					</div>
				</div>
			</div>

			<div className="bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg p-4 flex flex-col gap-2 max-w-2xl w-full">
				<div>
					<h2 className="text-2xl font-bold">Submit your Mii</h2>
					<p className="text-sm text-zinc-500">Share your creation for others to see.</p>
				</div>

				{/* Separator */}
				<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium my-1">
					<hr className="grow border-zinc-300" />
					<span>Info</span>
					<hr className="grow border-zinc-300" />
				</div>

				{/* Platform select */}
				<div className="w-full grid grid-cols-3 items-center">
					<label htmlFor="name" className="font-semibold">
						Platform
					</label>
					<div className="relative col-span-2 grid grid-cols-2 bg-orange-300 border-2 border-orange-400 rounded-4xl shadow-md inset-shadow-sm/10">
						{/* Animated indicator */}
						{/* TODO: maybe change width as part of animation? */}
						<div
							className={`absolute inset-0 w-1/2 bg-orange-200 rounded-4xl transition-transform duration-300 ${
								platform === "SWITCH" ? "translate-x-0" : "translate-x-full"
							}`}
						></div>

						{/* Switch button */}
						<button
							type="button"
							onClick={() => setPlatform("SWITCH")}
							className={`p-2 text-slate-800/35 cursor-pointer flex justify-center items-center gap-2 z-10 transition-colors ${
								platform === "SWITCH" && "text-slate-800!"
							}`}
						>
							<Icon icon="cib:nintendo-switch" className="text-2xl" />
							Switch
						</button>

						{/* 3DS button */}
						<button
							type="button"
							onClick={() => setPlatform("THREE_DS")}
							className={`p-2 text-slate-800/35 cursor-pointer flex justify-center items-center gap-2 z-10 transition-colors ${
								platform === "THREE_DS" && "text-slate-800!"
							}`}
						>
							<Icon icon="cib:nintendo-3ds" className="text-2xl" />
							3DS
						</button>
					</div>
				</div>

				{/* Name */}
				<div className="w-full grid grid-cols-3 items-center">
					<label htmlFor="name" className="font-semibold">
						Name
					</label>
					<input
						id="name"
						type="text"
						className="pill input w-full col-span-2"
						minLength={2}
						maxLength={64}
						placeholder="Type your mii's name here..."
						value={name}
						onChange={(e) => setName(e.target.value)}
					/>
				</div>

				<div className="w-full grid grid-cols-3 items-center">
					<label htmlFor="tags" className="font-semibold">
						Tags
					</label>
					<TagSelector tags={tags} setTags={setTags} showTagLimit />
				</div>

				{/* Description */}
				<div className="w-full grid grid-cols-3 items-start">
					<label htmlFor="description" className="font-semibold py-2">
						Description
					</label>
					<textarea
						id="description"
						rows={5}
						maxLength={256}
						placeholder="(optional) Type a description..."
						className="pill input rounded-xl! resize-none col-span-2 text-sm"
						value={description}
						onChange={(e) => setDescription(e.target.value)}
					/>
				</div>

				{/* Gender (switch only) */}
				<div className={`w-full grid grid-cols-3 items-start ${platform === "SWITCH" ? "" : "hidden"}`}>
					<label htmlFor="gender" className="font-semibold py-2">
						Gender
					</label>
					<div className="col-span-2 flex gap-1">
						<button
							type="button"
							onClick={() => setGender("MALE")}
							aria-label="Filter for Male Miis"
							data-tooltip="Male"
							className={`cursor-pointer rounded-xl flex justify-center items-center size-11 text-4xl border-2 transition-all after:bg-blue-400! after:border-blue-400! before:border-b-blue-400!  ${
								gender === "MALE" ? "bg-blue-100 border-blue-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
							}`}
						>
							<Icon icon="foundation:male" className="text-blue-400" />
						</button>

						<button
							type="button"
							onClick={() => setGender("FEMALE")}
							aria-label="Filter for Female Miis"
							data-tooltip="Female"
							className={`cursor-pointer rounded-xl flex justify-center items-center size-11 text-4xl border-2 transition-all after:bg-pink-400! after:border-pink-400! before:border-b-pink-400! ${
								gender === "FEMALE" ? "bg-pink-100 border-pink-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
							}`}
						>
							<Icon icon="foundation:female" className="text-pink-400" />
						</button>

						<button
							type="button"
							onClick={() => setGender("NONBINARY")}
							aria-label="Filter for Nonbinary Miis"
							data-tooltip="Nonbinary"
							className={`cursor-pointer rounded-xl flex justify-center items-center size-11 text-4xl border-2 transition-all after:bg-purple-400! after:border-purple-400! before:border-b-purple-400!  ${
								gender === "NONBINARY" ? "bg-purple-100 border-purple-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
							}`}
						>
							<Icon icon="mdi:gender-non-binary" className="text-purple-400" />
						</button>
					</div>
				</div>

				{/* (Switch Only) Mii Portrait */}
				<div className={`${platform === "SWITCH" ? "" : "hidden"}`}>
					{/* Separator */}
					<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mt-8 mb-2">
						<hr className="grow border-zinc-300" />
						<span>Mii Portrait</span>
						<hr className="grow border-zinc-300" />
					</div>

					<div className="flex flex-col items-center gap-2">
						<PortraitUpload setImage={setMiiPortraitUri} />
						<SwitchSubmitTutorialButton />
					</div>
				</div>

				{/* (3DS only) QR code scanning */}
				<div className={`${platform === "THREE_DS" ? "" : "hidden"}`}>
					<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mt-8 mb-2">
						<hr className="grow border-zinc-300" />
						<span>QR Code</span>
						<hr className="grow border-zinc-300" />
					</div>

					<div className="flex flex-col items-center gap-2">
						<QrUpload setQrBytesRaw={setQrBytesRaw} />
						<span>or</span>

						<button type="button" aria-label="Use your camera" onClick={() => setIsQrScannerOpen(true)} className="pill button gap-2">
							<Icon icon="mdi:camera" fontSize={20} />
							Use your camera
						</button>

						<QrScanner isOpen={isQrScannerOpen} setIsOpen={setIsQrScannerOpen} setQrBytesRaw={setQrBytesRaw} />
						<ThreeDsSubmitTutorialButton />

						<span className="text-xs text-zinc-400">For emulators, aes_keys.txt is required.</span>
					</div>
				</div>

				{/* (Switch only) Mii instructions */}
				<div className={`${platform === "SWITCH" ? "" : "hidden"}`}>
					<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mt-8 mb-2">
						<hr className="grow border-zinc-300" />
						<span>Mii Instructions</span>
						<hr className="grow border-zinc-300" />
					</div>

					<div className="flex flex-col items-center gap-2">
						<MiiEditor instructions={instructions} />
						<SwitchSubmitTutorialButton />
						<span className="text-xs text-zinc-400 text-center px-32">
							Mii editor may be inaccurate. Instructions are recommended, but not required - you do not have to add every instruction.
						</span>
					</div>
				</div>

				{/* Custom images selector */}
				<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mt-6 mb-2">
					<hr className="grow border-zinc-300" />
					<span>Custom images</span>
					<hr className="grow border-zinc-300" />
				</div>

				<div className="max-w-md w-full self-center flex flex-col items-center">
					<Dropzone onDrop={handleDrop}>
						<p className="text-center text-sm">
							Drag and drop your images here
							<br />
							or click to open
						</p>
					</Dropzone>

					<span className="text-xs text-zinc-400 mt-2">Animated images currently not supported.</span>
				</div>

				<ImageList files={files} setFiles={setFiles} />

				<hr className="border-zinc-300 my-2" />
				<div className="flex justify-between items-center">
					{error && <span className="text-red-400 font-bold">Error: {error}</span>}

					<SubmitButton onClick={handleSubmit} className="ml-auto" />
				</div>
			</div>
		</form>
	);
}