"use client"
import { type FormEvent, useState } from "react";
import { useRouter } from "next/navigation";
import { ArrowRight, LockKeyhole } from "lucide-react";

import { authClient } from "@/lib/auth-client";
import { Button } from "@/components/ui/button";

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

  async function handleSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setError(null);
    setPending(true);

    const formData = new FormData(event.currentTarget);
    const email = String(formData.get("email") ?? "");
    const password = String(formData.get("password") ?? "");

    const result = await authClient.signIn.email({
      email,
      password,
    });

    setPending(false);

    if (result.error) {
      setError(result.error.message ?? "Authentifizierung fehlgeschlagen.");
      return;
    }

    router.replace("/dashboard");
    router.refresh();
  }

  return (
    <main className="flex min-h-dvh items-center justify-center bg-background px-6 py-10">
      <section className="grid w-full max-w-5xl overflow-hidden rounded-lg border bg-card text-card-foreground shadow-sm md:grid-cols-[1.05fr_0.95fr]">
        <div className="flex min-h-[520px] flex-col justify-between border-b p-6 md:border-b-0 md:border-r lg:p-8">
          <div>
            <div className="mb-8 inline-flex size-10 items-center justify-center rounded-lg border bg-background">
              <LockKeyhole className="size-5" />
            </div>
            <p className="text-sm font-medium text-muted-foreground">
              WebDev Pipeline MVP
            </p>
            <h1 className="mt-4 max-w-xl text-3xl font-semibold tracking-normal sm:text-4xl">
              Lokale Webdesign-Leads recherchieren, auditieren und freigeben.
            </h1>
            <p className="mt-4 max-w-lg text-sm leading-6 text-muted-foreground sm:text-base">
              Melde dich mit dem Admin-Konto an, um Kampagnen, Lead-Qualitaet,
              Audit-Freigaben und Outreach-Schritte in einem Arbeitsbereich zu
              steuern.
            </p>
          </div>

          <dl className="grid gap-4 pt-8 sm:grid-cols-3">
            {[
              ["Recherche", "Google Places Quellen und Kontaktluecken."],
              ["Audit", "Website-Potenzial und Review-Status."],
              ["Outreach", "Manuelle Freigabe vor Versand."],
            ].map(([label, value]) => (
              <div key={label}>
                <dt className="text-sm font-medium">{label}</dt>
                <dd className="mt-1 text-sm leading-5 text-muted-foreground">
                  {value}
                </dd>
              </div>
            ))}
          </dl>
        </div>

        <div className="flex flex-col justify-center p-6 lg:p-8">
          <div className="mx-auto w-full max-w-sm">
            <h2 className="text-2xl font-semibold tracking-normal">
              Admin Login
            </h2>
            <p className="mt-2 text-sm leading-6 text-muted-foreground">
              Melde dich mit E-Mail und Passwort an.
            </p>

            <form className="mt-8 grid gap-3" onSubmit={handleSubmit}>
              <label className="block space-y-2 text-sm font-medium">
                <span>E-Mail</span>
                <input
                  name="email"
                  type="email"
                  className="h-10 w-full rounded-md border border-input bg-background px-3 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring/30"
                  autoComplete="email"
                  required
                  placeholder="admin@firma.de"
                />
              </label>
              <label className="block space-y-2 text-sm font-medium">
                <span>Passwort</span>
                <input
                  name="password"
                  type="password"
                  className="h-10 w-full rounded-md border border-input bg-background px-3 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring/30"
                  autoComplete="current-password"
                  required
                  minLength={8}
                  placeholder="mindestens 8 Zeichen"
                />
              </label>
              {error ? (
                <p
                  className="text-sm leading-6 text-destructive"
                  role="alert"
                >
                  {error}
                </p>
              ) : null}
              <Button
                className="w-full justify-between"
                size="lg"
                disabled={pending}
              >
                <span className="inline-flex items-center gap-2">
                  <LockKeyhole />
                  Anmelden
                </span>
                {pending ? "..." : <ArrowRight />}
              </Button>
            </form>
          </div>
        </div>
      </section>
    </main>
  );
}