Minimal

"use client";

import { Button, Input, Label, Separator } from "@cronus-ui/ui";
import { signInEmail } from "../lib/auth-adapter.js";
import { ChartColumnIncreasing } from "lucide-react";
import { type FormEvent, useState } from "react";

export function LoginMinimalBlock() {
  const [pending, setPending] = useState(false);
  const [error, setError] = useState<string | null>(null);

  async function onSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const form = new FormData(event.currentTarget);
    const email = String(form.get("email") ?? "");
    const password = String(form.get("password") ?? "");
    setError(null);
    setPending(true);
    try {
      await signInEmail({ email, password });
    } catch (err) {
      setError(err instanceof Error ? err.message : "Something went wrong.");
    } finally {
      setPending(false);
    }
  }

  return (
    <div className="flex w-full items-center justify-center py-10">
      <div className="flex w-full max-w-xs flex-col items-center gap-7 text-center">
        <span className="inline-flex size-12 items-center justify-center rounded-2xl bg-gradient-primary text-primary-foreground shadow-glow">
          <ChartColumnIncreasing className="size-5" aria-hidden="true" />
        </span>

        <div className="flex flex-col gap-1.5">
          <h2 className="font-display text-2xl font-semibold text-fg">Sign in to Cronus</h2>
          <p className="text-sm text-fg-secondary">Use your work email to continue.</p>
        </div>

        <form onSubmit={onSubmit} className="flex w-full flex-col gap-3" aria-busy={pending}>
          <Label htmlFor="login-minimal-email" className="sr-only">
            Email
          </Label>
          <Input
            id="login-minimal-email"
            name="email"
            type="email"
            placeholder="you@company.com"
            autoComplete="email"
            className="h-11 text-center"
          />
          <Label htmlFor="login-minimal-password" className="sr-only">
            Password
          </Label>
          <Input
            id="login-minimal-password"
            name="password"
            type="password"
            placeholder="••••••••"
            autoComplete="current-password"
            className="h-11 text-center"
          />
          {error ? (
            <p role="alert" className="text-sm text-error-strong">
              {error}
            </p>
          ) : null}
          <Button
            type="submit"
            variant="primary"
            size="lg"
            className="w-full"
            disabled={pending}
            aria-busy={pending}
          >
            {pending ? "Signing in…" : "Continue"}
          </Button>
        </form>

        <div className="flex items-center gap-4 text-xs">
          <a
            href="/signup"
            className="font-medium text-primary-strong underline-offset-4 hover:underline"
          >
            Create account
          </a>
          <Separator orientation="vertical" className="h-3" />
          <a href="#privacy" className="text-fg-tertiary transition-colors hover:text-fg">
            Privacy
          </a>
          <a href="#terms" className="text-fg-tertiary transition-colors hover:text-fg">
            Terms
          </a>
        </div>
      </div>
    </div>
  );
}