"use client";

import { useState } from "react";
import { Box, Button, TextField, Paper } from "@mui/material";
import { handleAxiosError } from "@/core/utils";
import { toast } from "react-toastify";
import { useRouter } from "next/navigation";
import { loginUser } from "@/services/api/auth.api";

export default function LoginForm() {
  const [showPassword, setShowPassword] = useState(false);
  const router = useRouter();
  const [form, setForm] = useState({
    username: "",
    password: "",
  });

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setForm({
      ...form,
      [e.target.name]: e.target.value,
    });
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    try {
      const { message } = await loginUser(form);
      toast.success(message);
      router.push("/");
    } catch (error) {
      toast.error(handleAxiosError(error));
    }
  };

  return (
    <Box
      sx={{
        minHeight: "100vh",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
    
      }}
    >
      <Paper
        elevation={0}
        sx={{
          width: 420,
          p: 5,
          borderRadius: 4,
          backdropFilter: "blur(10px)",
          background: "rgba(255,255,255,0.9)",
          boxShadow: "0 20px 60px rgba(0,0,0,0.15)",
        }}
      >
        <h5 className="font-medium text-center mb-5 text-xl">
          ورود به سيستم ثبت تيكت ها
        </h5>

        <form onSubmit={handleSubmit}>
          <TextField
            fullWidth
            label="نام کاربری"
            name="username"
            value={form.username}
            onChange={handleChange}
            margin="normal"
            // InputProps={{
            //   startAdornment: (
            //     <InputAdornment position="start">
            //       <Person sx={{ color: "#1976d2" }} />
            //     </InputAdornment>
            //   ),
            // }}
            sx={{
              mb: 2,
              "& .MuiOutlinedInput-root": {
                borderRadius: 3,
                background: "#f9fbff",
                "& fieldset": {
                  borderColor: "#dbeafe",
                },
                "&:hover fieldset": {
                  borderColor: "#90caf9",
                },
                "&.Mui-focused fieldset": {
                  borderColor: "#1976d2",
                  borderWidth: "2px",
                },
              },
            }}
          />

          <TextField
            fullWidth
            label="رمز عبور"
            name="password"
            type={showPassword ? "text" : "password"}
            value={form.password}
            onChange={handleChange}
            margin="normal"
            // InputProps={{
            //   startAdornment: (
            //     <InputAdornment position="start">
            //       <Lock sx={{ color: "#1976d2" }} />
            //     </InputAdornment>
            //   ),
            //   endAdornment: (
            //     <InputAdornment position="end">
            //       <IconButton onClick={() => setShowPassword(!showPassword)}>
            //         {showPassword ? <VisibilityOff /> : <Visibility />}
            //       </IconButton>
            //     </InputAdornment>
            //   ),
            // }}
            sx={{
              mb: 3,
              "& .MuiOutlinedInput-root": {
                borderRadius: 3,
                background: "#f9fbff",
                "& fieldset": {
                  borderColor: "#dbeafe",
                },
                "&:hover fieldset": {
                  borderColor: "#90caf9",
                },
                "&.Mui-focused fieldset": {
                  borderColor: "#1976d2",
                  borderWidth: "2px",
                },
              },
            }}
          />

          <Button
            fullWidth
            type="submit"
            variant="contained"
            sx={{
              py: 1.5,
              borderRadius: 3,
              fontSize: 16,
              fontWeight: 600,
              background: "linear-gradient(90deg,#1976d2,#42a5f5,#64b5f6)",
              boxShadow: "0 10px 25px rgba(25,118,210,0.4)",
              "&:hover": {
                background: "linear-gradient(90deg,#1565c0,#1e88e5,#42a5f5)",
              },
            }}
          >
            ورود
          </Button>
        </form>
      </Paper>
    </Box>
  );
}