import React, { useState } from "react";
import {
  Box,
  Paper,
  TextField,
  Typography,
  Button,
  Container,
  Stack,
} from "@mui/material";
import { useApplicantLogin } from "@/hooks/auth.hook";
import { toast } from "sonner";

export default function LoginLayout() {
  const [nationalId, setNationalId] = useState("");

  const { mutateAsync, isPending } = useApplicantLogin();
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    try {
      const { message } = await mutateAsync(nationalId);
      toast.success(message);
    } catch (error) {
      toast.error("خطا رخ داده است");
    }
  };

  return (
    <Box sx={{ display: "flex", height: "100vh", width: "100%" }}>
      {/* بخش فرم (سمت چپ) */}
      <Box
        sx={{
          flex: 1,
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          backgroundColor: "#fff",
        }}
      >
        <Container maxWidth="xs">
          <Typography variant="h4" sx={{ fontWeight: 800, mb: 1 }}>
            خوش آمدید
          </Typography>
          <Typography variant="body1" sx={{ color: "text.secondary", mb: 4 }}>
            براي شروع و يا ادامه فرآيند ، كدملي خود را وارد كنيد
          </Typography>

          <form onSubmit={handleSubmit}>
            <TextField
              fullWidth
              label="کد ملی"
              value={nationalId}
              onChange={(e) =>
                setNationalId(e.target.value.replace(/[^0-9]/g, ""))
              }
              sx={{ mb: 3, textAlign: "center", fontSize: "1.5rem" }}
            />
            <Button
              type="submit"
              fullWidth
              variant="contained"
              size="large"
              sx={{ py: 1.5, borderRadius: 2, fontSize: "1rem" }}
            >
              ورود به سامانه
            </Button>
          </form>
        </Container>
      </Box>

      {/* بخش تصویری/رنگی (سمت راست) */}
      <Box
        sx={{
          flex: 1,
          display: { xs: "none", md: "flex" }, // در موبایل مخفی می‌شود
          flexDirection: "column",
          justifyContent: "center",
          alignItems: "center",
          background: "linear-gradient(135deg, #1e293b 0%, #334155 100%)",
          color: "white",
          p: 6,
          textAlign: "center",
        }}
      >
        {/* لوگو جایگزین */}
        <Box
          sx={{
            width: 80,
            height: 80,
            bgcolor: "rgba(255,255,255,0.1)",
            borderRadius: 4,
            mb: 4,
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
          }}
        >
          <Typography variant="h3">لوگو</Typography>
        </Box>

        <Typography variant="h4" sx={{ fontWeight: "bold", mb: 2 }}>
          سامانه جامع استخدامي
        </Typography>
        <Typography variant="body1" sx={{ opacity: 0.8, maxWidth: 400 }}>
          با استفاده از این سامانه، اطلاعات شغلی و رزومه خود را به صورت یکپارچه
          براي گروه ارسال کنید.
        </Typography>
      </Box>
    </Box>
  );
}