"use client"
import { LayoutLogin, WARNA } from "@/module/_global";
import { Box, Button, Stack, Text, TextInput } from "@mantine/core";
import { useFocusTrap } from "@mantine/hooks";
import { useState } from "react";
import toast from "react-hot-toast";
import ViewVerification from "../../varification/view/view_verification";
function ViewLogin() {
  const focusTrapRef = useFocusTrap()
  const textInfo = "Kami akan mengirimkan kode verifikasi melalui WhatsApp untuk mengonfirmasi nomor Anda.";
  const [isPhone, setPhone] = useState("")
  const [isOTP, setOTP] = useState<any>(null)
  const [isValPhone, setValPhone] = useState<any>(null)
  const [isUser, setUser] = useState<any>(null)
  const [isVerif, setVerif] = useState(false)
  const [isLoading, setLoading] = useState(false)

  async function onLogin() {
    if (isPhone == "")
      return toast.error('Silakan diisi dengan lengkap')

    if (isPhone.toString().length <= 8)
      return toast.error('Nomor telepon tidak valid')

    try {
      setLoading(true)
      const cek = await fetch('/api/auth/login', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ phone: isPhone })
      })
      const cekLogin = await cek.json()
      if (cekLogin.success) {
        try {
          const res = await fetch('/api/auth/otp', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json'
            },
            body: JSON.stringify({ phone: isPhone })
          })
          const data = await res.json()
          if (data.success) {
            setValPhone(data.phone)
            setOTP(data.otp)
            setUser(data.id)
            setVerif(true)
            toast.success('Kode verifikasi telah dikirim')
          } else {
            toast.error(data.message || 'Gagal mengirim kode verifikasi')
          }
        } catch (error) {
          console.error(error)
          toast.error('Internal Server Error')
        }
      } else {
        return toast.error(cekLogin.message)
      }
    } catch (error) {
      console.error(error)
      toast.error('Internal Server Error')
    } finally {
      setLoading(false)
    }



  }

  if (isVerif) return <ViewVerification otp={isOTP} phone={isValPhone} user={isUser} />

  return (
    <>
      <Box p={10}>
        <LayoutLogin>
          <Stack pt={30}>
            <Box p={10} ref={focusTrapRef}>
              <TextInput
                styles={{
                  input: {
                    color: WARNA.biruTua,
                    borderRadius: WARNA.biruTua,
                    borderColor: WARNA.biruTua,
                  },
                }}
                size="md"
                type="number"
                radius={30}
                leftSection={<Text>+62</Text>}
                placeholder="XXX XXX XXX"
                onChange={(val) => { setPhone('62' + val.target.value) }}
              />
              <Text fz={10} mt={10} c={WARNA.biruTua}>
                {textInfo}
              </Text>
              {/* <Checkbox
                mt={20}
                label={
                  <Text fz={10} c={WARNA.biruTua}>
                    Ingat saya
                  </Text>
                }
              /> */}
              <Box mt={20}>
                <Button
                  c={"white"}
                  bg={WARNA.biruTua}
                  size="md"
                  radius={30}
                  fullWidth
                  loading={isLoading}
                  onClick={() => {
                    onLogin()
                  }}
                >
                  MASUK
                </Button>
              </Box>
            </Box>
          </Stack>
        </LayoutLogin>
      </Box>
    </>
  );
}

export default ViewLogin;