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:1
			}}
		>
			<Typography
				variant="h4"
				gutterBottom
				sx={{ fontSize: "32px", fontWeight: 500, color: "#000000" }}
			>
				Account Info
			</Typography>
			<Card
				sx={{
					borderRadius: 2,
					p: { xs: 2, sm: 3 },
					mx: "auto",
					backgroundColor: "#000000",
					
				}}
				// 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={2} alignItems="center">
							<Avatar
								alt="User Avatar"
								src="/avatar.png"
								sx={{ width: 60, height: 60 }}
							/>
							<Box>
								<Typography
									variant="body1"
									sx={{ color: "#D0E1E9", fontWeight: 500 }}
								>
									{user?.name || "No Admin"}
								</Typography>
								<Typography
									variant="body2"
									sx={{ color: "#D9D8D8" }}
								>
									{user?.userType || "N/A"}
								</Typography>
							</Box>
						</Stack>
						<Divider
							flexItem
							sx={{ backgroundColor: "rgba(32, 32, 32, 0.5)" }}
						/>

						<Stack
							direction={{ xs: "column", sm: "row" }}
							justifyContent="space-between"
							alignItems={{ xs: "flex-start", sm: "center" }}
						>
							<Typography
								variant="body1"
								sx={{
									color: "#D0E1E9",
									fontWeight: 500,
									fontSize: "16px",
								}}
							>
								Personal Information
							</Typography>
							{/* <Link
								variant="body1"
								href="/edit-profile"
								color="#52ACDF"
							>
								Edit
							</Link> */}
						</Stack>

						<Grid container spacing={3} sx={{ overflowX: "auto" }}>
							<Grid item xs={12} sm={4}>
								<Typography
									variant="body2"
									sx={{
										color: "#D0E1E9",
										fontWeight: 500,
										fontSize: "16px",
									}}
								>
									Full Name:
								</Typography>
								<Typography variant="body2" color="#D9D8D8">
									{user?.name || "N/A"}
								</Typography>
							</Grid>
							<Grid item xs={12} sm={4}>
								<Typography
									variant="body2"
									sx={{
										color: "#D0E1E9",
										fontWeight: 500,
										fontSize: "16px",
									}}
								>
									Phone:
								</Typography>
								<Typography variant="body2" color="#D9D8D8">
									{user?.phone || "N/A"}
								</Typography>
							</Grid>
							<Grid item xs={12} sm={4}>
								<Typography
									variant="body2"
									sx={{
										color: "#D0E1E9",
										fontWeight: 500,
										fontSize: "16px",
									}}
								>
									Email:
								</Typography>
								<Typography variant="body2" color="#D9D8D8">
									{user?.email || "N/A"}
								</Typography>
							</Grid>
							<Grid item xs={12} sm={4}>
								<Typography
									variant="body2"
									sx={{
										color: "#D0E1E9",
										fontWeight: 500,
										fontSize: "16px",
									}}
								>
									Bio:
								</Typography>
								<Typography variant="body2" color="#D9D8D8">
									{user?.bio || "No bio available."}
								</Typography>
							</Grid>
						</Grid>
					</Stack>
				</CardContent>
			</Card>
		</Container>
	);
};

export default ProfilePage;
