import {
    Box,
    Center,
    HStack,
    Image,
    Input,
    Stack,
    Text,
    VStack,
} from "@chakra-ui/react";
import axios from "axios";
import { useState } from "react";
import { useNavigate } from "react-router-dom";
import logo from "../assets/logo.svg";
import { Button } from "../components/ui/button";
import { toaster, Toaster } from "../components/ui/toaster";

const SetNewPassword = () => {
    const [password, setPassword] = useState("");
    const [confirmPassword, setConfirmPassword] = useState("");
    const [isLoading, setIsLoading] = useState(false);
    const navigate = useNavigate();

    const handlePasswordSubmit = async () => {
        // Validation
        if (password.length < 8) {
            toaster.create({
                title: "Password must be at least 8 characters long",
                type: "error",
            });
            return;
        }

        if (password !== confirmPassword) {
            toaster.create({
                title: "Passwords do not match",
                type: "error",
            });
            return;
        }

        setIsLoading(true);

        try {
            const res = await axios.post(`${import.meta.env.VITE_API_URL}/reset-password`, {
                password: password,
                confirm_password: confirmPassword,
                // id: id
            });

            if (res.status === 200) {
                toaster.create({
                    title: "Password updated successfully",
                    type: "success",
                });
                navigate("/login"); // Redirect to login page
            } else {
                toaster.create({
                    title: res.data.message || "Failed to update password",
                    type: "error",
                });
            }
        } catch (error: any) {
            toaster.create({
                title: error.response?.data?.message || "Something went wrong",
                type: "error",
            });
        } finally {
            setIsLoading(false);
        }
    };

    return (
        <VStack w="100%" h="100vh" bg="#ffffff">
            <HStack
                boxShadow="rgba(99, 99, 99, 0.2) 0px 2px 8px 0px"
                w="100%"
                ps={8}
                h="7%"
                justifyContent="flex-start"
            >
                <Image w={50} src={logo} />
            </HStack>

            <Center w="100%" h="93%" p={8}>
                <Box p={8} borderWidth={1} borderRadius="lg" boxShadow="lg">
                    <Text fontSize="24px" fontWeight="bold" color="#313039" textAlign="center">
                        Create a Password
                    </Text>

                    <Stack p={2}>
                        <Text color="black" pt={1} fontSize="12px">New password</Text>
                        <Input
                            color="black"
                            pl={1}
                            fontSize="12px"
                            type="password"
                            border="1px solid grey"
                            value={password}
                            onChange={(e) => setPassword(e.target.value)}
                        />

                        <Text color="black" pt={1} fontSize="12px">Confirm password</Text>
                        <Input
                            color="black"
                            pl={1}
                            fontSize="12px"
                            type="password"
                            border="1px solid grey"
                            value={confirmPassword}
                            onChange={(e) => setConfirmPassword(e.target.value)}
                        />
                    </Stack>

                    <Button
                        loading={isLoading}
                        mt={6}
                        w="100%"
                        bg="#02A0A0"
                        color="white"
                        onClick={handlePasswordSubmit}
                    >
                        Confirm Password
                    </Button>
                </Box>
            </Center>

            <Toaster />
        </VStack>
    );
};

export default SetNewPassword;