import { useEffect } from "react";
import {
	Container,
	Typography,
	CircularProgress,
	Card,
	CardContent,
	Grid,
	Avatar,
	Box,
	Stack,
	Divider,
	Link,
} from "@mui/material";
import { useDispatch, useSelector } from "react-redux";
import { AppDispatch, RootState } from "../../redux/store/store";
import { fetchAdminProfile } from "../../redux/slices/profileSlice";

const ProfilePage = () => {
	const dispatch = useDispatch<AppDispatch>();
	const { user, isLoading } = useSelector(
		(state: RootState) => state?.profileReducer
	);

	useEffect(() => {
		dispatch(fetchAdminProfile());
	}, [dispatch]);

	if (isLoading) {
		return (
			<Box
				sx={{
					display: "flex",
					justifyContent: "center",
					alignItems: "center",
					height: "100vh",
				}}
			>
				<CircularProgress />
			</Box>
		);
	}

	return (
		<Container
			sx={{
				py: 4,
			}}
		>
			<Typography variant="h4" gutterBottom>
				Account Info
			</Typography>
			<Card
				sx={{
					width: "1132px",
					height: "331px",
					gap: "24px",
					borderRadius: "12px",
					padding: "16px",
					maxWidth: "100%",
					margin: "0 auto",
					backgroundColor: "#1C1C1C",
				}}
			>
				<CardContent>
					<Stack direction="column" spacing={2}>
						<Stack
							direction="row"
							spacing={1.5}
							alignItems="center"
						>
							<Avatar
								alt="User Avatar"
								src="/avatar.png"
								sx={{ width: "60px", height: "60px" }}
							/>
							<Box>
								<Typography
									variant="body1"
									width="1028px"
									height="24px"
									fontWeight={500}
									fontSize={"20px"}
									lineHeight={"100%"}
									sx={{ color: "#FFFFFF" }}
								>
									{user?.name || "No Admin"}
								</Typography>
								<Typography
									variant="body2"
									color="#D9D8D8"
									fontWeight={400}
									fontSize={"16px"}
									lineHeight={"100%"}
									width="46px"
									height="19px"
								>
									{user?.userType || "N/A"}
								</Typography>
							</Box>
						</Stack>
						<Divider
							flexItem
							sx={{ backgroundColor: "rgba(32, 32, 32, 0.5)" }}
						/>

						<Stack
							direction="row"
							justifyContent="space-between"
							alignItems="center"
						>
							<Typography
								variant="body1"
								width="1048px"
								height="19px"
								fontWeight={500}
								fontSize={"16px"}
								lineHeight={"100%"}
								sx={{ color: "#FFFFFF" }}
							>
								Personal Information
							</Typography>
							<Link
								variant="body1"
								href="/edit-profile"
								color="#52ACDF"
							>
								Edit
							</Link>
						</Stack>

						<Grid
							container
							width="1100px"
							height="38px"
							// gap={"100px"}
						>
							<Grid
								item
								xs={12}
								sm={4}
								width="64px"
								height="16px"
								fontSize={"14px"}
								lineHeight={"100%"}
							>
								<Typography
									variant="body1"
									fontWeight={500}
									sx={{ color: "#FFFFFF" }}
								>
									Full Name:
								</Typography>
								<Typography
									variant="body2"
									fontWeight={400}
									color="#D9D8D8"
								>
									{user?.name || "N/A"}
								</Typography>
							</Grid>
							<Grid item xs={12} sm={4}>
								<Typography
									variant="body1"
									sx={{ color: "#FFFFFF" }}
								>
									Phone:
								</Typography>
								<Typography variant="body2" color="#D9D8D8">
									{user?.phone || "N/A"}
								</Typography>
							</Grid>
							<Grid item xs={12} sm={4}>
								<Typography
									variant="body1"
									sx={{ color: "#FFFFFF" }}
								>
									Email:
								</Typography>
								<Typography variant="body2" color="#D9D8D8">
									{user?.email || "N/A"}
								</Typography>
							</Grid>
						</Grid>

						<Typography
							variant="body1"
							width="21px"
							height="16px"
							sx={{ color: "#FFFFFF" }}
						>
							Bio:
						</Typography>
						<Typography
							variant="body2"
							width="1100px"
							height="32px"
							color="#D9D8D8"
						>
							{user?.bio || "No bio available."}
						</Typography>
					</Stack>
				</CardContent>
			</Card>
		</Container>
	);
};

export default ProfilePage;
