"use client"

import { useAuth } from "@/context/AuthContext"

export default function HeaderLoggedOut() {

  const { loggedIn, setLoggedIn } = useAuth()

  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault()
    const formData = new FormData(e.currentTarget)
    const username = formData.get("username")
    const password = formData.get("password")

    if (!username || !password) {
      console.warn("⚠️ لطفاً نام کاربری و رمز عبور را وارد کنید")
      return
    }

    try {
      const response = await fetch("/api/login", {
        method: "POST",
        headers: {
          "Content-Type": "application/json"
        },
        body: JSON.stringify({ username, password,myMessage:'customTextSendToServer'})
      })

      const data = await response.json()

      if (data.success) {
        console.log(`✅ خوش آمدی ${username}`)
        console.log(data.token, data.user)

        localStorage.setItem("loginToken", data.token)
        localStorage.setItem("loginUsername", data.user.username)

        // show profile whene user logged in
        setLoggedIn(true)

        // یا اگر از cookie استفاده می‌کنی:
        // document.cookie = `token=${data.token}; path=/; max-age=3600`

      } else {
        console.error(`❌ ورود ناموفق: ${data.message}`)
      }

    } catch (err) {
      console.error("🚨 خطا در ارتباط با سرور:", err)
    }
  }

  return (
    <form className="mb-0 pt-2 pt-md-0" onSubmit={handleSubmit}>
      <div className="row align-items-center">
        <div className="col-md mr-0 pr-md-0 mb-3 mb-md-0">
          <input name="username" className="form-control form-control-sm input-dark" type="text" placeholder="Username" autoComplete="off" />
        </div>
        <div className="col-md mr-0 pr-md-0 mb-3 mb-md-0">
          <input name="password" className="form-control form-control-sm input-dark" type="password" placeholder="Password" />
        </div>
        <div className="col-md-auto">
          <button className="btn btn-success btn-sm">Sign In</button>
        </div>
      </div>
    </form>
  )
}