import {
	ActionIcon,
	Avatar,
	Badge,
	Box,
	Button,
	Card,
	Code,
	Container,
	Divider,
	Grid,
	Group,
	Paper,
	rem,
	Stack,
	Text,
	Title,
	Tooltip,
} from "@mantine/core";

import { modals } from "@mantine/modals";
import {
	IconAt,
	IconCheck,
	IconCopy,
	IconDashboard,
	IconEdit,
	IconExternalLink,
	IconId,
	IconLogout,
	IconShield,
	IconUser,
} from "@tabler/icons-react";
import { createFileRoute, useNavigate } from "@tanstack/react-router";
import { useState } from "react";
import { useSnapshot } from "valtio";
import { protectedRouteMiddleware } from "@/middleware/authMiddleware";
import { authClient } from "@/utils/auth-client";
import { authStore } from "../../store/auth";

export const Route = createFileRoute("/profile/")({
	component: Profile,
	beforeLoad: protectedRouteMiddleware,
});

function Profile() {
	const snap = useSnapshot(authStore);
	const navigate = useNavigate();
	const [copied, setCopied] = useState<string | null>(null);

	async function logout() {
		await authClient.signOut();
		navigate({ to: "/signin" });
	}

	const openLogoutModal = () =>
		modals.openConfirmModal({
			title: <Text fw={700}>Konfirmasi Keluar</Text>,
			centered: true,
			size: "sm",
			children: (
				<Text size="sm">
					Apakah Anda yakin ingin keluar dari akun Anda? Anda harus masuk
					kembali untuk mengakses data Anda.
				</Text>
			),
			labels: { confirm: "Keluar", cancel: "Batal" },
			confirmProps: { color: "red", leftSection: <IconLogout size={16} /> },
			onConfirm: logout,
		});

	const copyToClipboard = (text: string, key: string) => {
		if (navigator.clipboard) {
			navigator.clipboard.writeText(text);
			setCopied(key);
			setTimeout(() => setCopied(null), 2000);
		}
	};

	interface InfoFieldProps {
		icon: React.ElementType;
		label: string;
		value: string | null | undefined;
		copyable?: boolean;
		id?: string;
	}

	const InfoField = ({
		icon: Icon,
		label,
		value,
		copyable = false,
		id = "",
	}: InfoFieldProps) => (
		<Paper
			withBorder
			p="md"
			radius="md"
			style={{ border: "1px solid var(--mantine-color-default-border)" }}
		>
			<Group wrap="nowrap" align="flex-start">
				<Box mt={3}>
					<Icon
						size={20}
						stroke={1.5}
						color="var(--mantine-color-orange-filled)"
					/>
				</Box>
				<Box style={{ flex: 1 }}>
					<Text size="xs" c="dimmed" tt="uppercase" fw={700} lts={0.5}>
						{label}
					</Text>
					<Group gap="xs" mt={4} wrap="nowrap">
						<Text fw={500} size="sm" truncate="end" style={{ flex: 1 }}>
							{value || "N/A"}
						</Text>
						{copyable && value && (
							<Tooltip
								label={copied === id ? "Copied!" : "Salin ke papan klip"}
								position="top"
								withArrow
							>
								<ActionIcon
									variant="subtle"
									color={copied === id ? "green" : "gray"}
									size="sm"
									onClick={() => copyToClipboard(value, id)}
								>
									{copied === id ? (
										<IconCheck size={14} />
									) : (
										<IconCopy size={14} />
									)}
								</ActionIcon>
							</Tooltip>
						)}
					</Group>
				</Box>
			</Group>
		</Paper>
	);

	return (
		<Container size="md" py={50}>
			<Stack gap="xl">
				{/* Header Section */}
				<Group justify="space-between" align="center">
					<Box>
						<Title order={1} c="orange.6">
							Profil Saya
						</Title>
						<Text c="dimmed" size="sm">
							Kelola informasi akun dan pengaturan keamanan Anda
						</Text>
					</Box>
					<Group>
						{snap.user?.role === "admin" && (
							<Button
								variant="light"
								color="orange"
								leftSection={<IconDashboard size={18} />}
								onClick={() => navigate({ to: "/admin" })}
							>
								Admin Panel
							</Button>
						)}
						<Button
							variant="light"
							color="blue"
							leftSection={<IconEdit size={18} />}
							onClick={() => navigate({ to: "/profile/edit" })}
						>
							Edit Profil
						</Button>
						<Button
							variant="outline"
							color="red"
							leftSection={<IconLogout size={18} />}
							onClick={openLogoutModal}
						>
							Keluar
						</Button>
					</Group>
				</Group>

				<Divider style={{ opacity: 0.1 }} />

				{/* Profile Overview Card */}
				<Card withBorder radius="lg" p={0} style={{ overflow: "hidden" }}>
					<Box
						h={120}
						style={{
							background:
								"linear-gradient(45deg, var(--mantine-color-gray-filled) 0%, var(--mantine-color-dark-filled) 100%)",
							borderBottom: "1px solid var(--mantine-color-default-border)",
						}}
					/>
					<Box px="xl" pb="xl" style={{ marginTop: rem(-60) }}>
						<Group align="flex-end" gap="xl" mb="md">
							<Avatar
								src={snap.user?.image}
								size={120}
								radius={120}
								style={{
									border: "4px solid var(--mantine-color-body)",
									boxShadow: "var(--mantine-shadow-md)",
								}}
							>
								{snap.user?.name?.charAt(0).toUpperCase()}
							</Avatar>
							<Stack gap={0} pb="md">
								<Title order={2}>{snap.user?.name}</Title>
								<Group gap="xs">
									<Text c="dimmed" size="sm">
										{snap.user?.email}
									</Text>
									<Text c="dimmed" size="xs">
										•
									</Text>
									<Badge
										variant="dot"
										color={snap.user?.role === "admin" ? "orange" : "blue"}
										size="sm"
									>
										{snap.user?.role || "user"}
									</Badge>
								</Group>
							</Stack>
						</Group>
					</Box>
				</Card>

				<Grid gutter="lg">
					<Grid.Col span={{ base: 12, md: 7 }}>
						<Stack gap="md">
							<Title order={4} c="orange.6">
								Informasi Identitas
							</Title>
							<Grid gutter="sm">
								<Grid.Col span={6}>
									<InfoField
										icon={IconUser}
										label="Nama Lengkap"
										value={snap.user?.name}
									/>
								</Grid.Col>
								<Grid.Col span={6}>
									<InfoField
										icon={IconShield}
										label="Peran"
										value={snap.user?.role || "User"}
									/>
								</Grid.Col>
								<Grid.Col span={12}>
									<InfoField
										icon={IconAt}
										label="Alamat Email"
										value={snap.user?.email}
										copyable
										id="email"
									/>
								</Grid.Col>
								<Grid.Col span={12}>
									<InfoField
										icon={IconId}
										label="Unique User ID"
										value={snap.user?.id}
										copyable
										id="userid"
									/>
								</Grid.Col>
							</Grid>
						</Stack>
					</Grid.Col>

					<Grid.Col span={{ base: 12, md: 5 }}>
						<Stack gap="md">
							<Title order={4} c="orange.6">
								Keamanan & Sesi
							</Title>
							<Card
								withBorder
								radius="md"
								p="lg"
								style={{
									border: "1px solid var(--mantine-color-default-border)",
								}}
							>
								<Stack gap="md">
									<Box>
										<Text size="xs" c="dimmed" tt="uppercase" fw={700} mb={8}>
											Sesi Saat Ini
										</Text>
										<Group justify="space-between" align="center">
											<Badge color="green" variant="light">
												Aktif Sekarang
											</Badge>
											<Text size="xs" c="dimmed">
												ID: {snap.session?.id?.substring(0, 8)}...
											</Text>
										</Group>
									</Box>

									<Box>
										<Text size="xs" c="dimmed" tt="uppercase" fw={700} mb={8}>
											Session Token
										</Text>
										<Group gap="xs" wrap="nowrap">
											<Code
												block
												style={{
													fontSize: rem(11),
													flex: 1,
												}}
											>
												{snap.session?.token
													? `${snap.session.token.substring(0, 32)}...`
													: "N/A"}
											</Code>
											<ActionIcon
												variant="light"
												color="gray"
												onClick={() =>
													snap.session?.token &&
													copyToClipboard(snap.session.token, "token")
												}
											>
												{copied === "token" ? (
													<IconCheck size={16} />
												) : (
													<IconCopy size={16} />
												)}
											</ActionIcon>
										</Group>
									</Box>

									<Button
										variant="light"
										color="gray"
										fullWidth
										leftSection={<IconExternalLink size={16} />}
									>
										Riwayat Sesi
									</Button>
								</Stack>
							</Card>
						</Stack>
					</Grid.Col>
				</Grid>
			</Stack>
		</Container>
	);
}
