"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: "",
    bankAccount: "", // 1. Thêm bankAccount vào state
  });
  const [errors, setErrors] = useState({
    name: "",
    phone: "",
    password: "",
    eateryName: "",
    bankAccount: "", // 2. Thêm bankAccount vào errors state
    submit: "",
  });

  useEffect(() => {
    fetch("/api/manager/signup")
      .then((res) => {
        setPageState("available");
      })
      .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: "",
      bankAccount: "",
      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";

    if (!form.bankAccount.trim())
      next.bankAccount = "Please enter your bank account number";

    setErrors(next);
    return (
      !next.name &&
      !next.phone &&
      !next.password &&
      !next.eateryName &&
      !next.bankAccount
    );
  };

  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"
            >
              Back to login
            </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)">
                Unable to connect
              </h2>
              <p className="text-sm text-(--color-text-muted)">
                Unable to check registration status. Please try again.
              </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"));
              }}
            >
              Retry
            </Button>
            <Link
              href="/login"
              className="text-sm text-(--color-primary) underline"
            >
              Back to login
            </Link>
          </div>
        )}

        {/* Signup Form */}
        {pageState === "available" && (
          <form onSubmit={handleSubmit} className="space-y-4">
            {[
              {
                id: "name",
                label: "Full name",
                icon: "fa-user",
                placeholder: "John Doe",
                field: "name" as const,
                type: "text",
              },
              {
                id: "phone",
                label: "Phone number",
                icon: "fa-phone",
                placeholder: "0987654321",
                field: "phone" as const,
                type: "tel",
              },
              {
                id: "password",
                label: "Password",
                icon: "fa-lock",
                placeholder: "At least 6 characters",
                field: "password" as const,
                type: "password",
              },
              {
                id: "eateryName",
                label: "Restaurant name",
                icon: "fa-store",
                placeholder: "Coffee & More",
                field: "eateryName" as const,
                type: "text",
              },
              {
                id: "bankAccount",
                label: "Bank account number (example: acb-44359797)",
                icon: "fa-credit-card",
                placeholder: "Enter account number (for QR payment)",
                field: "bankAccount" 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 pl-10 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>
                    Processing...
                  </>
                ) : (
                  "Register"
                )}
              </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"
              >
                Already have an account? Sign in
              </Link>
            </div>
          </form>
        )}
      </div>
    </div>
  );
}