// app/login/page.tsx
"use client";

import { useState } from "react";

type Step = "email" | "sent";

export default function LoginPage() {
  const [email, setEmail] = useState("");
  const [step, setStep] = useState<Step>("email");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  async function submit() {
    setLoading(true);
    setError(null);

    try {
      const res = await fetch("/api/auth/request-link", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ email }),
      });

      if (!res.ok) {
        throw new Error("Failed to send login link");
      }

      setStep("sent");
    } catch (e) {
      setError("Something went wrong. Try again.");
    } finally {
      setLoading(false);
    }
  }

  return (
    <main className="max-w-md mx-auto p-8 space-y-8">
      <Progress step={step} />

      {step === "email" && (
        <>
          <h1 className="text-xl font-semibold">Log in</h1>

          <input
            type="email"
            placeholder="you@company.com"
            className="w-full border rounded p-2"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            disabled={loading}
          />

          <button
            onClick={submit}
            disabled={loading || !email}
            className="w-full bg-black text-white py-2 rounded"
          >
            {loading ? "Sending…" : "Send login link"}
          </button>

          {error && (
            <p className="text-sm text-red-600">{error}</p>
          )}
        </>
      )}

      {step === "sent" && (
        <>
          <h1 className="text-xl font-semibold">Check your email</h1>

          <p className="text-gray-600">
            We sent a login link to <strong>{email}</strong>.
          </p>

          <p className="text-gray-500 text-sm">
            The link expires in 15 minutes.
          </p>
        </>
      )}
    </main>
  );
}

function Progress({ step }: { step: Step }) {
  const percent = step === "email" ? 50 : 100;

  return (
    <div>
      <div className="h-2 bg-gray-200 rounded">
        <div
          className="h-2 bg-black rounded transition-all"
          style={{ width: `${percent}%` }}
        />
      </div>

      <p className="text-sm text-gray-600 mt-2">
        {step === "email" ? "Enter email" : "Check inbox"}
      </p>
    </div>
  );
}