"use client";

import { Suspense, useEffect, useState } from "react";

import { useRouter, useSearchParams } from "next/navigation";

import { api, API_BASE, setToken } from "@/lib/api";

function LoginInner() {

  const [email, setEmail] = useState("admin@sightline.app");

  const [password, setPassword] = useState("changeme123");

  const [err, setErr] = useState<string | null>(null);

  const router = useRouter();

  const params = useSearchParams();

  useEffect(() => {

    const t = params.get("token");

    if (t) { setToken(t); router.push("/"); }

  }, [params, router]);

  async function submit(e: React.FormEvent) {

    e.preventDefault();

    setErr(null);

    try { await api.login(email, password); router.push("/"); }

    catch { setErr("Invalid credentials."); }

  }

  return (

    <div style={{ maxWidth: 360 }}>

      <h1>Sign in</h1>

      <p className="muted">Demo: admin@sightline.app / changeme123 (created by the seed loader).</p>

      <form onSubmit={submit} className="card" style={{ display: "grid", gap: 12 }}>

        <label>Email<input value={email} onChange={(e) => setEmail(e.target.value)} style={{ width: "100%" }} /></label>

        <label>Password<input type="password" value={password} onChange={(e) => setPassword(e.target.value)} style={{ width: "100%" }} /></label>

        {err && <div className="badge danger">{err}</div>}

        <button className="primary" type="submit">Sign in</button>

      </form>

      <div className="card" style={{ marginTop: 12 }}>

        <a href={`${API_BASE}/auth/oidc/login`}>Sign in with SSO (OIDC)</a>

        <div className="muted" style={{ fontSize: 12 }}>Enabled only when an OIDC issuer is configured.</div>

      </div>

    </div>

  );

}

export default function Login() {

  return <Suspense fallback={<div className="muted">Loading…</div>}><LoginInner /></Suspense>;

}