import JSZip from "jszip";
import { Create40kRoster } from "./roster40k";
import { Create40kRoster10th } from "./roster40k-10th";
import { useEffect, useState, useRef } from "react";

import Demo0 from "./assets/Demo0.png";
import Demo1 from "./assets/Demo1.png";
import { Roster } from "./9th/Roster";
import { Roster as Roster10th } from "./10th/Roster";
import { useLocalStorage } from "./helpers/useLocalStorage";
import { parseJSON, stringifyJSON } from "./helpers/json";

function App() {
	const [rosters, setRosters] = useLocalStorage("rosters", "[]");
	const rostersJSON = parseJSON(rosters ?? "[]");
	const [error, setError] = useState();
	const [roster, setRoster] = useState();
	const [edition, setEdition] = useState(10); // [9, 10]
	const [onePerPage, setOnePerPage] = useState(false);
	const [primaryColor, setPrimaryColor] = useState("#536766");
	const [colorUserChoice, setColorUserChoice] = useState(false);
	const [hideModelSelections, setHideModelSelections] = useState(false);
	const uploadRef = useRef();

	const toggleHideModelSelections = (hide) => {
		const checkboxes = document.querySelectorAll(
			'input[type="checkbox"].hide-model-selection',
		);
		checkboxes.forEach((checkbox) => {
			if (checkbox.checked !== hide) {
				checkbox.click();
			}
		});
	};

	async function handleFileSelect(event) {
		const files = event?.target?.files;

		if (files) {
			const reader = new FileReader();
			reader.onerror = () => {
				reader.abort();
				setError("Failed to read roster file.");
			};
			reader.onloadend = async () => {
				const content = reader.result;
				const xmldata = await unzip(content);
				parseXML(xmldata, true);
			};
			reader.readAsBinaryString(files[0]);
		} else {
			let example;
			switch (event) {
				case "ultras":
					example = await fetch("Ultramarines Example.rosz");
					break;
				case "chaos daemons":
					example = await fetch("Chaos Demons Mix.rosz");
					break;
				case "death guard":
					example = await fetch("Death Guard Example.rosz");
					break;
				case "thousand sons":
					example = await fetch("Thousand Sons Example.rosz");
					break;
				default:
					break;
			}
			// load example
			posthog?.capture?.("user_loaded_example", {
				roster_faction: event,
			});
			const arrayBuffer = await example.arrayBuffer();
			// Create a new Blob object from the zip file contents
			const zipBlob = new Blob([arrayBuffer], { type: "application/zip" });
			const xmldata = await unzip(zipBlob);
			parseXML(xmldata, false, true);
		}
	}
	const loadFromLocalStorage = (roster) => {
		if (roster.gameType == "Warhammer 40,000 9th Edition") {
			setRoster(roster);
			setEdition(9);
			setError("");
		} else if (roster.gameType == "Warhammer 40,000 10th Edition") {
			setRoster(roster);
			setEdition(10);
			setError("");
		}
		posthog?.capture?.("user_loaded_roster_from_localstorage", {
			roster_faction: roster.forces[0].catalog,
			roster_type: roster.gameType,
		});
	};

	const unzip = async (file) => {
		if (file?.charAt && file.charAt(0) !== "P") {
			return file;
		} else {
			const jszip = new JSZip();
			const zip = await jszip.loadAsync(file);
			return zip.file(/[^/]+\.ros/)[0].async("string"); // Get roster files that are in the root
		}
	};

	function parseXML(xmldata, addToLocalStorage, isExample = false) {
		const parser = new DOMParser();
		const doc = parser.parseFromString(xmldata, "text/xml");
		if (!doc) return;

		// Determine roster type (game system).
		const info = doc.querySelector("roster");
		if (!info) return;

		const gameType = info.getAttribute("gameSystemName");
		if (!gameType) return;

		const rosterName = info.getAttribute("name");
		if (rosterName) {
			document.title = `FancyScribe ${rosterName}`;
		}

		let roster;
		if (gameType == "Warhammer 40,000 9th Edition") {
			roster = Create40kRoster(doc, gameType);
			if (roster && roster.forces.length > 0) {
				setRoster(roster);
				setEdition(9);
				setError("");
			}
		} else if (gameType == "Warhammer 40,000 10th Edition") {
			roster = Create40kRoster10th(doc, gameType);
			if (roster && roster.forces.length > 0) {
				setRoster(roster);
				setEdition(10);
				setError("");
			}
		} else {
			setError("No support for game type '" + gameType + "'.");
		}
		if (!roster) {
			return;
		}
		if (addToLocalStorage) {
			console.log(roster);
			posthog?.capture?.("user_uploaded_roster", {
				roster_faction: roster.forces[0].catalog,
				roster_type: gameType,
				name: rosterName,
			});
			setRosters(stringifyJSON([roster, ...rostersJSON]));
		}
	}

	useEffect(() => {
		// Check if the browser is Safari, and if so, remove the accept attribute
		// from the file input element. This is because Safari doesn't support
		// extensions on the accept attribute for input type=file
		// (https://caniuse.com/input-file-accept). If set, they will not allow any
		// file to be selected.
		if (
			navigator.userAgent.match(/AppleWebKit.*Safari/) &&
			!navigator.userAgent.includes("Chrome")
		) {
			uploadRef.current?.removeAttribute("accept");
		}
	}, []);
	useEffect(() => {
		if (roster) {
			setPrimaryColor(getPrimaryColor(roster.forces[0].catalog));
			setColorUserChoice(false);
		}
	}, [roster]);

	const handleDrag = (e) => {
		e.preventDefault();
		e.stopPropagation();
	};

	useEffect(() => {
		if (edition === 9) {
			document.body.style.minWidth = "600px";
		} else {
			document.body.style.minWidth = "";
		}
	}, [edition]);

	return (
		<div
			className="App"
			style={{
				"--primary-color": primaryColor,
				"--primary-color-transparent": primaryColor + "60",
			}}
		>
			<div className="header print-display-none">
				<a
					href="/fancyscribe"
					style={{
						color: "#fff",
						fontWeight: 800,
						display: "flex",
						flexDirection: "column",
					}}
				>
					FancyScribe{" "}
					<span
						style={{
							fontSize: "0.8rem",
							fontWeight: 400,
						}}
					>
						Now with 10th edition support!
					</span>
				</a>
				<div className="subheader">
					A fancy way to view your Warhammer 40k BattleScribe rosters
				</div>
			</div>

			<div className="body">
				<div
					className="print-display-none max-w-[95vw]"
					style={{
						display: "flex",
						flexDirection: roster ? "row" : "column",
						alignItems: "center",
						gap: 8,
					}}
				>
					<div
						className="print-display-none"
						style={{
							fontSize: roster ? "1rem" : "1.7rem",
							fontWeight: roster ? 600 : "",
							display: rostersJSON.length > 0 ? "" : "none",
						}}
					>
						Your rosters
					</div>
					<div
						className="print-display-none"
						style={{
							gap: 8,
							flexWrap: "wrap",
							justifyContent: "center",
							alignItems: "center",
							display: "flex",
						}}
					>
						{rostersJSON.map((r, index) => (
							<div key={index} style={{ position: "relative" }}>
								<button
									className="print-display-none"
									style={{ fontSize: roster ? "" : "1.2rem" }}
									onClick={() => loadFromLocalStorage(r)}
								>
									{r.name}
								</button>
								<button
									onClick={() =>
										setRosters(
											stringifyJSON(rostersJSON.filter((_, i) => i !== index)),
										)
									}
									className="print-display-none absolute right-[-4px] top-[-4px] rounded-full border-0 bg-red-600 fill-white p-[2px] text-sm transition duration-150 ease-in-out hover:bg-red-800 focus:outline-none"
								>
									<svg height="16" viewBox="0 0 16 16" width="16">
										<path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path>
									</svg>
								</button>
							</div>
						))}
					</div>
				</div>
				<div className="print-display-none"></div>
				<div
					className="print-display-none max-w-[95vw]"
					style={{ display: "flex", width: "100%", gap: 8 }}
				>
					<input
						type="file"
						ref={uploadRef}
						accept=".ros,.rosz"
						name="rosterUpload"
						id="rosterUpload"
						onChange={handleFileSelect}
						style={{ display: "none" }}
					/>
					<label
						htmlFor="rosterUpload"
						className={"rosterUpload " + (roster ? "rosterUploaded" : "")}
						id="rosterUploadContainer"
						onDrop={(e) => {
							e.preventDefault();
							e.stopPropagation();
							if (e.dataTransfer.files && e.dataTransfer.files[0]) {
								e.target.files = e.dataTransfer.files;
								handleFileSelect(e);
							}
						}}
						onDragEnter={handleDrag}
						onDragLeave={handleDrag}
						onDragOver={handleDrag}
					>
						<div id="preloadContainer">
							<span>Upload roster file (.ros, .rosz)</span>
						</div>
					</label>

					<button
						style={{ display: roster ? "" : "none" }}
						onClick={() => {
							posthog?.capture?.("user_printed_roster", {
								roster_faction: roster.forces[0].catalog,
								roster_type: roster.gameType,
							});
							window.print();
						}}
					>
						Print roster
					</button>
				</div>

				<div
					className="print-display-none max-w-[95vw]"
					style={{ display: roster ? "flex" : "none", width: "100%", gap: 16 }}
				>
					<label
						style={{
							display: "flex",
							alignItems: "center",
							gap: 4,
							minHeight: 26,
						}}
					>
						<input
							type="checkbox"
							onChange={(e) => setOnePerPage(e.target.checked)}
						/>
						<span className="select-none">
							One Datacard per Page when Printing
						</span>
					</label>
					{
						// only show when 10th edition
						edition === 10 && (
							<label
								style={{
									display: "flex",
									alignItems: "center",
									gap: 4,
									minHeight: 26,
								}}
							>
								<input
									type="checkbox"
									value={hideModelSelections}
									onChange={(e) => {
										setHideModelSelections(e.target.checked);
										toggleHideModelSelections(e.target.checked);
									}}
									className="hide-model-selection"
								/>
								<span className="select-none">Hide all model selections</span>
							</label>
						)
					}
					<div style={{ display: "flex", alignItems: "center", gap: 4 }}>
						<label style={{ display: "flex", alignItems: "center", gap: 4 }}>
							<input
								type="color"
								className="rounded-sm border border-gray-400"
								style={{ height: 24, width: 32, padding: "0 2px" }}
								value={primaryColor}
								onChange={(e) => {
									setPrimaryColor(e.target.value);
									setColorUserChoice(true);
								}}
							></input>
							<span> Custom Color</span>
						</label>

						{roster &&
							primaryColor !== getPrimaryColor(roster.forces[0].catalog) && (
								<button
									onClick={() => {
										setPrimaryColor(getPrimaryColor(roster.forces[0].catalog));
										setColorUserChoice(false);
									}}
									style={{
										padding: "2px 4px",
										borderRadius: 4,
										borderWidth: 1,
									}}
								>
									Reset color
								</button>
							)}
					</div>
				</div>
				<div className="print-display-none" style={{ color: "red" }}>
					{error}
				</div>
				{edition === 9 && <Roster roster={roster} onePerPage={onePerPage} />}
				{edition === 10 && (
					<Roster10th
						roster={roster}
						onePerPage={onePerPage}
						colorUserChoice={colorUserChoice}
					/>
				)}

				<div
					className="max-w-[95vw]"
					style={{
						paddingTop: 8,
						fontSize: "1.7rem",
						display: roster ? "none" : "flex",
					}}
				>
					Examples
				</div>
				<div
					className="max-w-[95vw]"
					style={{
						gap: 8,
						flexWrap: "wrap",
						justifyContent: "center",
						display: roster ? "none" : "flex",
					}}
				>
					<button
						className="print-display-none"
						style={{ fontSize: "1.2rem" }}
						onClick={() => handleFileSelect("thousand sons")}
					>
						Thousand Sons (10th)
					</button>
					<button
						className="print-display-none"
						style={{ fontSize: "1.2rem" }}
						onClick={() => handleFileSelect("death guard")}
					>
						Death Guard (10th)
					</button>
					<button
						className="print-display-none"
						style={{ fontSize: "1.2rem" }}
						onClick={() => handleFileSelect("ultras")}
					>
						Ultramarines (9th)
					</button>
					<button
						className="print-display-none"
						style={{ fontSize: "1.2rem" }}
						onClick={() => handleFileSelect("chaos daemons")}
					>
						Chaos Daemons (9th)
					</button>
				</div>
				<div
					className="print-display-none max-w-[95vw]"
					style={{ display: roster ? "none" : "" }}
				>
					<div style={{ padding: "8px 0", fontSize: "1.7rem" }}>About</div>
					<div style={{ fontSize: "1.2rem" }}>
						FancyScribe is a website that renders{" "}
						<a href="https://www.battlescribe.net/" target="_blank">
							BattleScribe
						</a>{" "}
						or <a href="https://www.newrecruit.eu/">New Recruit</a> roster files
						in an opinionated format inspired by the new 10th edition datacards.
						Additional inspiration and large parts of the parsing logic come
						from the{" "}
						<a href="https://rweyrauch.github.io/PrettyScribe" target="_blank">
							PrettyScribe
						</a>{" "}
						website.
					</div>
					<div style={{ fontSize: "1.2rem" }}>
						FancyScribe is an open-source project and can be found on Github (
						<a href="https://github.com/NilsUeter/fancyscribe" target="_blank">
							FancyScribe
						</a>
						).
					</div>
					<div style={{ fontSize: "1.2rem" }}>
						If you have any feedback or find any bugs, write{" "}
						<a href="https://www.reddit.com/r/WarhammerCompetitive/comments/13ajo3b/fancyscribe_convert_9th_edition_battlescribe">
							here
						</a>{" "}
						or send me a message.
					</div>
					<div style={{ padding: "8px 0", fontSize: "1.7rem" }}>
						Output Examples
					</div>
					<img src={Demo0} className="pb-4" style={{ width: "100%" }} />
					<img src={Demo1} style={{ width: "100%" }} />
				</div>
			</div>
		</div>
	);
}

const getPrimaryColor = (catalog) => {
	switch (catalog.replace("Xenos - ", "")) {
		case "Imperium - Adeptus Astartes":
			return "#536766";
		case "Imperium - Adeptus Astartes - Blood Angels":
			return "#761119";
		case "Imperium - Adeptus Astartes - Space Wolves":
			return "#3e646f";
		case "Imperium - Adeptus Astartes - Imperial Fists":
			return "#b87d00";
		case "Imperium - Adeptus Astartes - Raven Guard":
			return "#2b2b2b";
		case "Imperium - Adeptus Astartes - Salamanders":
			return "#1b623f";
		case "Imperium - Adeptus Astartes - White Scars":
			return "#783028";
		case "Imperium - Adeptus Astartes - Dark Angels":
			return "#014419";
		case "Imperium - Adeptus Astartes - Black Templars":
			return "#002f42";
		case "Imperium - Adeptus Astartes - Deathwatch":
			return "#44494d";
		case "Imperium - Adeptus Custodes":
			return "#765c41";
		case "Imperium - Adeptus Mechanicus":
			return "#a03332";
		case "Imperium - Adepta Sororitas":
			return "#5e0a00";
		case "Imperium - Astra Militarum":
			return "#375441";
		case "Imperium - Grey Knights":
			return "#4a6672";
		case "Imperium - Imperial Knights":
			return "#03495e";
		case "Chaos - Daemons":
			return "#383c46";
		case "Chaos - Chaos Space Marines":
			return "#1d3138";
		case "Chaos - World Eaters":
			return "#883531";
		case "Chaos - Death Guard":
			return "#576011";
		case "Chaos - Chaos Knights":
			return "#513627";
		case "Chaos - Thousand Sons":
			return "#015d68";
		case "Necrons":
			return "#005c2f";
		case "Orks":
			return "#4b6621";
		case "Tyranids":
		case "Tyranids - Genestealer Cults":
			return "#44264C";
		case "Aeldari - Craftworlds":
			return "#1f787f";
		case "Aeldari - Harlequins":
			return "#6f322f";
		case "Leagues of Votann":
			return "#7d4c08";
		case "T'au Empire":
			return "#206173";
		default:
			console.log(catalog);
			return "#536766";
	}
};

export default App;