"use client";

import Button from "@/components/atoms/buttons/Button";
import { SHOP_INFO } from "@/lib/constants";
import Image from "next/image";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { FormEvent, useEffect, useState } from "react";

type PageState = "checking" | "available" | "closed" | "error";

export default function ManagerSignupPage() {
  const router = useRouter();

  const [pageState, setPageState] = useState<PageState>("checking");
  const [isLoading, setIsLoading] = useState(false);
  const [form, setForm] = useState({ name: "", phone: "", password: "", eateryName: "" });
  const [errors, setErrors] = useState({ name: "", phone: "", password: "", eateryName: "", submit: "" });

  useEffect(() => {
    fetch("/api/manager/signup")
      .then((res) => {
        setPageState("available")
        // if (res.ok) ;
        // else if (res.status === 403) setPageState("closed");
        // else setPageState("error");
      })
      .catch(() => setPageState("error"));
  }, []);

  const validatePhone = (phone: string) => /^(0[3|5|7|8|9])[0-9]{8}$/.test(phone);

  const handleChange = (field: keyof typeof form) => (e: React.ChangeEvent<HTMLInputElement>) => {
    setForm({ ...form, [field]: e.target.value });
    setErrors({ ...errors, [field]: "", submit: "" });
  };

  const validate = () => {
    const next = { name: "", phone: "", password: "", eateryName: "", submit: "" };
    if (!form.name.trim()) next.name = "Please enter your full name";
    if (!form.phone.trim()) next.phone = "Please enter your phone number";
    else if (!validatePhone(form.phone)) next.phone = "Invalid phone number (e.g. 0987654321)";
    if (!form.password.trim()) next.password = "Please enter your password";
    else if (form.password.length < 6) next.password = "Password must be at least 6 characters";
    if (!form.eateryName.trim()) next.eateryName = "Please enter the restaurant name";
    setErrors(next);
    return !next.name && !next.phone && !next.password && !next.eateryName;
  };

  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    if (!validate()) return;

    setIsLoading(true);
    try {
      const res = await fetch("/api/manager/signup", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(form),
      });

      if (res.ok || res.status === 201) {
        router.push("/login");
      } else {
        const errorCode = (await res.text().catch(() => "")).trim();
        const errorMap: Record<string, string> = {
          ExistedUser: "Phone number already registered",
          InvalidPhoneNumber: "Invalid phone number",
        };
        setErrors({ ...errors, submit: errorMap[errorCode] ?? "An error occurred, please try again" });
      }
    } catch {
      setErrors({ ...errors, submit: "Unable to connect, please try again" });
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div className="bg-background flex min-h-screen items-center justify-center px-4 py-8">
      <div className="w-full max-w-md rounded-2xl bg-white p-8 shadow-lg">
        {/* Logo */}
        <div className="mb-8 flex flex-col items-center">
          <div className="relative mb-4 h-20 w-20">
            <Image src={SHOP_INFO.logo} alt={SHOP_INFO.name} fill className="object-contain" sizes="80px" priority />
          </div>
          <h1 className="mb-1 text-2xl font-bold text-(--color-primary-dark)">{SHOP_INFO.name}</h1>
          <p className="text-sm text-(--color-text-muted)">Create a manager account</p>
        </div>

        {/* Checking */}
        {pageState === "checking" && (
          <div className="flex flex-col items-center gap-3 py-8 text-(--color-text-muted)">
            <i className="fa-solid fa-spinner fa-spin text-2xl text-(--color-primary)"></i>
            <p className="text-sm">Checking...</p>
          </div>
        )}

        {/* Closed */}
        {pageState === "closed" && (
          <div className="flex flex-col items-center gap-4 py-6">
            <div className="flex h-16 w-16 items-center justify-center rounded-full bg-red-100">
              <i className="fa-solid fa-lock text-2xl text-red-500"></i>
            </div>
            <div className="text-center">
              <h2 className="mb-2 text-lg font-semibold text-(--color-text-primary)">Registration closed</h2>
              <p className="text-sm text-(--color-text-muted)">The system already has a restaurant. Registration is no longer available.</p>
            </div>
            <Link
              href="/login"
              className="flex w-full items-center justify-center rounded-xl border-2 border-(--color-primary) bg-white py-3 font-semibold text-(--color-primary) no-underline transition-all duration-150 hover:bg-(--color-primary) hover:text-white"
            >
              Quay lại đăng nhập
            </Link>
          </div>
        )}

        {/* Error */}
        {pageState === "error" && (
          <div className="flex flex-col items-center gap-4 py-6">
            <div className="flex h-16 w-16 items-center justify-center rounded-full bg-yellow-100">
              <i className="fa-solid fa-triangle-exclamation text-2xl text-yellow-500"></i>
            </div>
            <div className="text-center">
              <h2 className="mb-2 text-lg font-semibold text-(--color-text-primary)">Không thể kết nối</h2>
              <p className="text-sm text-(--color-text-muted)">Không thể kiểm tra trạng thái đăng ký. Vui lòng thử lại.</p>
            </div>
            <Button variant="primaryNoBorder" style="login" size="lg" onClick={() => { setPageState("checking"); fetch("/api/manager/signup").then((r) => { if (r.ok) setPageState("available"); else if (r.status === 403) setPageState("closed"); else setPageState("error"); }).catch(() => setPageState("error")); }}>
              Thử lại
            </Button>
            <Link href="/login" className="text-sm text-(--color-primary) underline">Quay lại đăng nhập</Link>
          </div>
        )}

        {/* Signup Form */}
        {pageState === "available" && (
          <form onSubmit={handleSubmit} className="space-y-4">
            {[
              { id: "name", label: "Họ tên", icon: "fa-user", placeholder: "Nguyễn Văn A", field: "name" as const, type: "text" },
              { id: "phone", label: "Số điện thoại", icon: "fa-phone", placeholder: "0987654321", field: "phone" as const, type: "tel" },
              { id: "password", label: "Mật khẩu", icon: "fa-lock", placeholder: "Ít nhất 6 ký tự", field: "password" as const, type: "password" },
              { id: "eateryName", label: "Tên nhà hàng", icon: "fa-store", placeholder: "Coffee & More", field: "eateryName" as const, type: "text" },
            ].map(({ id, label, icon, placeholder, field, type }) => (
              <div key={id}>
                <label htmlFor={id} className="mb-2 block text-sm font-medium text-(--color-text-secondary)">
                  {label}
                </label>
                <div className="relative">
                  <i className={`fa-solid ${icon} absolute top-1/2 left-4 hidden -translate-y-1/2 text-(--color-text-muted) lg:block`}></i>
                  <input
                    id={id}
                    type={type}
                    value={form[field]}
                    onChange={handleChange(field)}
                    placeholder={placeholder}
                    disabled={isLoading}
                    className={`text-foreground focus:ring-opacity-20 w-full rounded-xl border bg-white px-4 py-3 transition-all duration-150 outline-none placeholder:text-(--color-text-muted) focus:border-(--color-primary) focus:ring-2 focus:ring-(--color-primary) disabled:opacity-60 lg:pl-11 ${errors[field] ? "border-red-400" : "border-(--color-border)"}`}
                  />
                </div>
                {errors[field] && (
                  <p className="mt-1.5 flex items-center gap-1 text-xs text-red-500">
                    <i className="fa-solid fa-circle-exclamation"></i>
                    {errors[field]}
                  </p>
                )}
              </div>
            ))}

            {errors.submit && (
              <div className="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
                <i className="fa-solid fa-circle-exclamation mr-2"></i>
                {errors.submit}
              </div>
            )}

            <div className="space-y-3 pt-2">
              <Button variant="primaryNoBorder" type="submit" style="login" size="lg" disabled={isLoading}>
                {isLoading ? (
                  <><i className="fa-solid fa-spinner fa-spin mr-2"></i>Đang xử lý...</>
                ) : (
                  "Đăng ký"
                )}
              </Button>
              <Link
                href="/login"
                className="flex w-full items-center justify-center rounded-xl border-2 border-(--color-primary) bg-white py-3 font-semibold text-(--color-primary) no-underline transition-all duration-150 hover:bg-(--color-primary) hover:text-white"
              >
                Đã có tài khoản? Đăng nhập
              </Link>
            </div>
          </form>
        )}
      </div>
    </div>
  );
}