"use client";

import { useState } from "react";
import { createClient, magicLinkRedirectTo } from "@/lib/supabase/browser.js";

export default function LoginForm() {
  const [email, setEmail] = useState("");
  const [status, setStatus] = useState("idle");
  const [error, setError] = useState("");

  async function sendMagicLink(event) {
    event.preventDefault();
    setStatus("pending");
    setError("");
    const { error: signInError } = await createClient().auth.signInWithOtp({
      email,
      options: { emailRedirectTo: magicLinkRedirectTo(window.location.origin) },
    });
    if (signInError) {
      setError("We could not send a magic link. Please try again.");
      setStatus("idle");
      return;
    }
    setStatus("sent");
  }

  return (
    <section className="w-full shrink-0 space-y-6">
      <div className="rounded-xl border-[2.5px] border-teal-300/70 bg-gradient-to-b from-teal-50/60 to-white px-8 py-9 shadow-sm">
        <p className="mb-3 text-[11px] font-bold uppercase tracking-[.18em] text-teal-700/70">Welcome</p>
        <h1 className="text-3xl font-bold tracking-tight">Confidence Engine</h1>
        <p className="mt-3 text-sm leading-relaxed text-gray-600">Enter your email and we will send you a secure link to continue.</p>
        <form className="mt-7 space-y-4" onSubmit={sendMagicLink}>
          <label className="block text-sm font-medium text-gray-700" htmlFor="email">Email address</label>
          <input id="email" type="email" autoComplete="email" required value={email} onChange={(event) => setEmail(event.target.value)} className="w-full rounded-lg border border-gray-300 px-4 py-3 text-sm focus:border-teal-600 focus:outline-none focus:ring-2 focus:ring-teal-400" />
          <button type="submit" disabled={status === "pending"} className="rounded-lg bg-teal-700 px-5 py-2.5 text-sm font-medium text-white transition hover:bg-teal-600 disabled:cursor-wait disabled:opacity-60">
            {status === "pending" ? "Sending magic link…" : "Send magic link"}
          </button>
        </form>
        {status === "sent" && <p className="mt-5 text-sm text-green-700" role="status">Check your email for your magic link.</p>}
        {error && <p className="mt-5 text-sm text-red-700" role="alert">{error}</p>}
      </div>

      <div className="pt-3 space-y-3">
        <p className="text-sm font-medium text-gray-700">Sign in to continue</p>
        <p className="text-sm leading-relaxed text-gray-600">Enter your email and we{'\''}ll send you a secure sign-in link.</p>
      </div>

      <p className="text-xs text-gray-500">Your investigations are private to your account and saved so you can return to them later.</p>
    </section>
  );
}