"use client";

import Link from "next/link";
import { useRouter, useSearchParams } from "next/navigation";
import { useState } from "react";

export function AuthForm() {
  const router = useRouter();
  const sp = useSearchParams();
  const next = sp.get("next") || "";
  const [mode, setMode] = useState<"login" | "register">("login");
  const [form, setForm] = useState({
    name: "",
    email: "",
    phone: "",
    password: "",
  });
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);

  function update(k: keyof typeof form, v: string) {
    setForm((f) => ({ ...f, [k]: v }));
  }

  async function submit(e: React.FormEvent) {
    e.preventDefault();
    setError(null);
    setLoading(true);
    try {
      const endpoint =
        mode === "login" ? "/api/auth/login" : "/api/auth/register";
      const payload =
        mode === "login"
          ? { email: form.email, password: form.password }
          : form;
      const res = await fetch(endpoint, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload),
      });
      const data = await res.json();
      if (!res.ok) {
        setError(data.error ?? "Something went wrong.");
        setLoading(false);
        return;
      }
      const dest = next || (data.role === "ADMIN" ? "/admin" : "/account");
      router.push(dest);
      router.refresh();
    } catch {
      setError("Network error. Please try again.");
      setLoading(false);
    }
  }

  return (
    <div className="mx-auto max-w-md">
      <div className="mb-6 flex rounded-lg border border-slate-200 bg-white p-1 text-sm font-semibold">
        <button
          onClick={() => {
            setMode("login");
            setError(null);
          }}
          className={`flex-1 rounded-md py-2 ${
            mode === "login" ? "bg-brand-600 text-white" : "text-slate-500"
          }`}
        >
          Login
        </button>
        <button
          onClick={() => {
            setMode("register");
            setError(null);
          }}
          className={`flex-1 rounded-md py-2 ${
            mode === "register" ? "bg-brand-600 text-white" : "text-slate-500"
          }`}
        >
          Create account
        </button>
      </div>

      <form
        onSubmit={submit}
        className="space-y-4 rounded-xl border border-slate-200 bg-white p-6"
      >
        {error ? (
          <div className="rounded-lg border border-rose-200 bg-rose-50 px-3 py-2 text-sm text-rose-700">
            {error}
          </div>
        ) : null}

        {mode === "register" ? (
          <label className="block">
            <span className="text-sm font-medium text-slate-600">Full name</span>
            <input
              required
              value={form.name}
              onChange={(e) => update("name", e.target.value)}
              className="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm"
            />
          </label>
        ) : null}

        <label className="block">
          <span className="text-sm font-medium text-slate-600">Email</span>
          <input
            type="email"
            required
            value={form.email}
            onChange={(e) => update("email", e.target.value)}
            className="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm"
          />
        </label>

        {mode === "register" ? (
          <label className="block">
            <span className="text-sm font-medium text-slate-600">
              Phone (optional)
            </span>
            <input
              value={form.phone}
              onChange={(e) => update("phone", e.target.value)}
              className="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm"
            />
          </label>
        ) : null}

        <label className="block">
          <span className="text-sm font-medium text-slate-600">Password</span>
          <input
            type="password"
            required
            value={form.password}
            onChange={(e) => update("password", e.target.value)}
            className="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm"
          />
        </label>

        <button
          type="submit"
          disabled={loading}
          className="w-full rounded-lg bg-brand-600 py-2.5 text-sm font-semibold text-white hover:bg-brand-700 disabled:opacity-60"
        >
          {loading
            ? "Please wait…"
            : mode === "login"
              ? "Login"
              : "Create account"}
        </button>

        <p className="text-center text-xs text-slate-400">
          You can also{" "}
          <Link href="/checkout" className="text-brand-600 hover:underline">
            check out as a guest
          </Link>{" "}
          without an account.
        </p>
      </form>
    </div>
  );
}