Social first

"use client";

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

export function LoginSocialFirstBlock() {
  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-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">Sign in to Cronus</CardTitle>
            <p className="text-sm text-fg-secondary">Pick up right where you left off.</p>
          </div>
        </CardHeader>

        <CardContent className="flex flex-col gap-4">
          <div className="flex flex-col gap-3">
            <Button type="button" variant="outline" size="lg" className="w-full">
              <Chrome className="size-4" aria-hidden="true" />
              Continue with Google
            </Button>
            <Button type="button" variant="outline" size="lg" className="w-full">
              <Github className="size-4" aria-hidden="true" />
              Continue with GitHub
            </Button>
            <Button type="button" variant="outline" size="lg" className="w-full">
              <Apple className="size-4" aria-hidden="true" />
              Continue with Apple
            </Button>
          </div>

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

          <form onSubmit={onSubmit} className="flex flex-col gap-4" aria-busy={pending}>
            <div className="flex flex-col gap-2">
              <Label htmlFor="login-social-email">Email</Label>
              <Input
                id="login-social-email"
                name="email"
                type="email"
                placeholder="you@company.com"
                autoComplete="email"
              />
            </div>

            <div className="flex flex-col gap-2">
              <div className="flex items-center justify-between">
                <Label htmlFor="login-social-password">Password</Label>
                <a
                  href="/forgot-password"
                  className="text-sm font-medium text-primary-strong underline-offset-4 hover:underline"
                >
                  Forgot?
                </a>
              </div>
              <Input
                id="login-social-password"
                name="password"
                type="password"
                placeholder="••••••••"
                autoComplete="current-password"
              />
            </div>

            {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…" : "Sign in"}
            </Button>
          </form>
        </CardContent>

        <CardFooter className="justify-center">
          <p className="text-sm text-fg-secondary">
            New to Cronus?{" "}
            <a
              href="/signup"
              className="font-medium text-primary-strong underline-offset-4 hover:underline"
            >
              Create an account
            </a>
          </p>
        </CardFooter>
      </Card>
    </div>
  );
}