"use client";

import { useRouter } from "next/navigation";
import { useState } from "react";
import { isSignedIn, login, register } from "@/lib/auth";

export default function LoginPage() {
  const router = useRouter();
  const [mode, setMode] = useState<"signin" | "create">("signin");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState<string | null>(null);
  const [busy, setBusy] = useState(false);

  const submit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError(null);
    setBusy(true);
    try {
      if (mode === "create") {
        await register(email, password);
      }
      await login(email, password);
      router.push("/");
    } catch (err) {
      setError(err instanceof Error ? err.message : "Something went wrong");
    } finally {
      setBusy(false);
    }
  };

  return (
    <div className="min-h-[70vh] flex items-center justify-center">
      <div className="card p-8 w-full max-w-sm">
        <div className="text-center mb-6">
          <div className="text-3xl mb-2">📡</div>
          <h1 className="text-lg font-semibold text-slate-100">
            AI Signal <span className="text-accent">Lab</span>
          </h1>
          <p className="text-xs text-slate-500 mt-1 uppercase tracking-widest">
            Paper trading only
          </p>
        </div>

        <div className="flex rounded-lg border border-ink-600 overflow-hidden text-xs mb-5">
          {(["signin", "create"] as const).map((m) => (
            <button
              key={m}
              onClick={() => { setMode(m); setError(null); }}
              className={`flex-1 py-2.5 ${
                mode === m ? "bg-ink-700 text-slate-100" : "text-slate-400 hover:bg-ink-800"
              }`}
            >
              {m === "signin" ? "Sign in" : "Create account"}
            </button>
          ))}
        </div>

        <form onSubmit={submit} className="space-y-4">
          <label className="block">
            <span className="text-xs text-slate-500">Email</span>
            <input
              type="email"
              required
              autoComplete="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              className="input-base w-full mt-1"
            />
          </label>
          <label className="block">
            <span className="text-xs text-slate-500">
              Password{mode === "create" ? " (8+ characters)" : ""}
            </span>
            <input
              type="password"
              required
              minLength={mode === "create" ? 8 : undefined}
              autoComplete={mode === "create" ? "new-password" : "current-password"}
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              className="input-base w-full mt-1"
            />
          </label>

          {error && (
            <div className="text-xs text-bear bg-bear/10 border border-bear/30 rounded-lg px-3 py-2">
              {error}
            </div>
          )}

          <button
            type="submit"
            disabled={busy}
            className="w-full py-3 rounded-lg bg-accent/20 border border-accent/50 text-accent font-semibold text-sm hover:bg-accent/30 disabled:opacity-50"
          >
            {busy ? "Working…" : mode === "signin" ? "Sign in" : "Create account & sign in"}
          </button>
        </form>

        <p className="text-[11px] text-slate-600 mt-5 text-center">
          Local development mode may not require sign-in. On deployed servers,
          the first account created becomes the administrator.
        </p>
      </div>
    </div>
  );
}