Classic card

"use client";

import {
  Button,
  Card,
  CardContent,
  CardFooter,
  CardHeader,
  CardTitle,
  Checkbox,
  Input,
  Label,
  Separator,
} from "@cronus-ui/ui";
import { signUpEmail } from "../lib/auth-adapter.js";
import { USER } from "../lib/demo-saas.js";
import { ChartColumnIncreasing, Chrome, Github } from "lucide-react";
import { type FormEvent, useEffect, useState } from "react";

const INVITE_STORAGE_KEY = "cronus-invitation";

function readSignupInvitation(): boolean {
  if (typeof window === "undefined") return false;
  try {
    const fromUrl = new URLSearchParams(window.location.search).get("invitation");
    if (fromUrl) {
      sessionStorage.setItem(INVITE_STORAGE_KEY, fromUrl);
      return true;
    }
    return Boolean(sessionStorage.getItem(INVITE_STORAGE_KEY));
  } catch {
    return false;
  }
}

export function SignupBlock() {
  const [pending, setPending] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [joining, setJoining] = useState(false);
  useEffect(() => {
    setJoining(readSignupInvitation());
  }, []);

  async function onSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const form = new FormData(event.currentTarget);
    const name = String(form.get("name") ?? "");
    const email = String(form.get("email") ?? "");
    const password = String(form.get("password") ?? "");
    setError(null);
    setPending(true);
    try {
      await signUpEmail({ email, password, name });
    } 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-4">
      <Card className="w-full max-w-sm gap-6 shadow-lg">
        <CardHeader className="flex flex-col items-center gap-3 text-center">
          <span className="inline-flex size-11 items-center justify-center rounded-xl bg-gradient-primary text-primary-foreground shadow-glow">
            <ChartColumnIncreasing className="size-5" aria-hidden="true" />
          </span>
          <div className="flex flex-col gap-1">
            <CardTitle className="font-display text-xl">
              {joining ? "Join the workspace" : "Create your account"}
            </CardTitle>
            <p className="text-sm text-fg-secondary">
              {joining
                ? "Create your account to accept the invitation."
                : "Start building with Cronus in minutes."}
            </p>
          </div>
        </CardHeader>

        <CardContent className="flex flex-col gap-4">
          <form onSubmit={onSubmit} className="flex flex-col gap-4" aria-busy={pending}>
            <div className="flex flex-col gap-2">
              <Label htmlFor="signup-name">Full name</Label>
              <Input id="signup-name" name="name" placeholder={USER.name} autoComplete="name" />
            </div>

            <div className="flex flex-col gap-2">
              <Label htmlFor="signup-email">Email</Label>
              <Input
                id="signup-email"
                name="email"
                type="email"
                placeholder="you@company.com"
                autoComplete="email"
              />
            </div>

            <div className="flex flex-col gap-2">
              <Label htmlFor="signup-password">Password</Label>
              <Input
                id="signup-password"
                name="password"
                type="password"
                placeholder="••••••••"
                autoComplete="new-password"
              />
              <p className="text-xs text-fg-tertiary">Must be at least 8 characters.</p>
            </div>

            <Label
              htmlFor="signup-terms"
              className="flex items-start gap-2 font-normal text-fg-secondary"
            >
              <Checkbox id="signup-terms" defaultChecked />I agree to the Terms and Privacy Policy.
            </Label>

            {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
                ? joining
                  ? "Joining…"
                  : "Creating account…"
                : joining
                  ? "Join workspace"
                  : "Create account"}
            </Button>
          </form>

          <div className="flex items-center gap-3">
            <Separator className="flex-1" />
            <span className="text-xs text-fg-tertiary">or sign up with</span>
            <Separator className="flex-1" />
          </div>

          <div className="grid grid-cols-2 gap-3">
            <Button type="button" variant="outline">
              <Github className="size-4" aria-hidden="true" />
              GitHub
            </Button>
            <Button type="button" variant="outline">
              <Chrome className="size-4" aria-hidden="true" />
              Google
            </Button>
          </div>
        </CardContent>

        <CardFooter className="justify-center">
          <p className="text-sm text-fg-secondary">
            Already have an account?{" "}
            <a
              href="/login"
              className="font-medium text-primary-strong underline-offset-4 hover:underline"
            >
              Sign in
            </a>
          </p>
        </CardFooter>
      </Card>
    </div>
  );
}