"use client";

import Link from "next/link";
import { useActionState } from "react";
import { Loader2 } from "lucide-react";

import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Logo } from "@/components/logo";
import { cn } from "@/lib/utils";
import { signUpAction } from "@/lib/appwrite/auth-actions";
import { initialAuthState } from "@/lib/appwrite/auth-types";

export function SignupForm1({
  className,
  inviteCode,
  prefilledEmail,
  ...props
}: React.ComponentProps<"div"> & { inviteCode?: string; prefilledEmail?: string }) {
  const [state, formAction, isPending] = useActionState(signUpAction, initialAuthState);

  return (
    <div className={cn("flex flex-col gap-6", className)} {...props}>
      <Card className="overflow-hidden p-0">
        <CardContent className="grid p-0 md:grid-cols-2">
          <BrandPanel />

          <form action={formAction} className="p-6 md:p-10">
            {inviteCode && <input type="hidden" name="inviteCode" value={inviteCode} />}
            <div className="flex flex-col gap-6">
              <div className="flex justify-center">
                <Link href="/" className="flex items-center gap-2 font-medium">
                  <div className="bg-primary text-primary-foreground flex size-9 items-center justify-center rounded-md">
                    <Logo size={22} />
                  </div>
                  <span className="text-xl font-semibold">DLS</span>
                </Link>
              </div>

              <div className="flex flex-col items-center text-center">
                <h1 className="text-2xl font-bold tracking-tight">
                  {inviteCode ? "Davete katıl" : "Hesap oluşturun"}
                </h1>
                <p className="text-muted-foreground text-sm text-balance mt-1">
                  {inviteCode
                    ? "Hesap oluşturduktan sonra çalışma alanına otomatik katılacaksınız"
                    : "Birkaç saniye içinde hesabınız hazır"}
                </p>
              </div>

              <div className="grid gap-3">
                <Label htmlFor="name">Adınız Soyadınız</Label>
                <Input
                  id="name"
                  name="name"
                  type="text"
                  placeholder="Ahmet Yılmaz"
                  autoComplete="name"
                  required
                />
              </div>

              <div className="grid gap-3">
                <Label htmlFor="email">Email</Label>
                <Input
                  id="email"
                  name="email"
                  type="email"
                  placeholder="ornek@firma.com"
                  autoComplete="email"
                  defaultValue={prefilledEmail}
                  readOnly={Boolean(prefilledEmail)}
                  required
                />
              </div>

              <div className="grid gap-3">
                <Label htmlFor="password">Şifre</Label>
                <Input
                  id="password"
                  name="password"
                  type="password"
                  autoComplete="new-password"
                  minLength={8}
                  required
                />
                <p className="text-muted-foreground text-xs">En az 8 karakter</p>
              </div>

              {state.error && (
                <p className="text-destructive text-sm text-center" role="alert">
                  {state.error}
                </p>
              )}

              <Button type="submit" className="w-full" disabled={isPending}>
                {isPending ? (
                  <>
                    <Loader2 className="size-4 animate-spin" />
                    Hesap oluşturuluyor...
                  </>
                ) : (
                  "Hesap oluştur"
                )}
              </Button>

              <div className="text-center text-sm text-muted-foreground">
                Zaten hesabınız var mı?{" "}
                <Link
                  href="/sign-in"
                  className="text-foreground font-medium underline-offset-4 hover:underline"
                >
                  Giriş yap
                </Link>
              </div>
            </div>
          </form>
        </CardContent>
      </Card>

      <p className="text-muted-foreground text-center text-xs text-balance">
        Hesap oluşturarak{" "}
        <Link href="#" className="underline-offset-4 hover:underline">
          Kullanım Şartları
        </Link>{" "}
        ve{" "}
        <Link href="#" className="underline-offset-4 hover:underline">
          Gizlilik Politikası
        </Link>
        &apos;nı kabul etmiş olursunuz.
      </p>
    </div>
  );
}

function BrandPanel() {
  return (
    <div className="bg-primary text-primary-foreground relative hidden md:flex md:flex-col md:justify-between overflow-hidden p-10">
      <div
        className="absolute inset-0 opacity-30"
        style={{
          backgroundImage:
            "radial-gradient(circle at 20% 20%, rgba(255,255,255,0.4) 0%, transparent 40%), radial-gradient(circle at 80% 80%, rgba(255,255,255,0.25) 0%, transparent 45%)",
        }}
        aria-hidden
      />
      <div
        className="absolute -top-24 -left-24 size-72 rounded-full bg-white/10 blur-3xl"
        aria-hidden
      />
      <div
        className="absolute -bottom-32 -right-20 size-80 rounded-full bg-black/10 blur-3xl"
        aria-hidden
      />

      <div className="relative z-10 flex items-center gap-2">
        <div className="bg-primary-foreground/15 ring-1 ring-primary-foreground/20 backdrop-blur flex size-10 items-center justify-center rounded-md">
          <Logo size={22} />
        </div>
        <span className="text-lg font-medium">DLS</span>
      </div>

      <div className="relative z-10 flex flex-col gap-3">
        <h2 className="text-3xl font-semibold leading-tight">
          İşletmenizi büyütecek tek araç.
        </h2>
        <p className="text-primary-foreground/80 text-sm">
          Hesap oluşturduktan sonra çalışma alanınızı kuruyor, ekibinizi davet ediyor ve hemen kullanmaya başlıyorsunuz.
        </p>
        <ul className="text-primary-foreground/85 mt-2 space-y-1 text-sm">
          <li>• Müşteri & hizmet yönetimi</li>
          <li>• Görev ve takvim</li>
          <li>• Finans ve fatura</li>
        </ul>
        <div className="text-primary-foreground/70 mt-4 text-xs">Kovak Yazılım tarafından</div>
      </div>
    </div>
  );
}
