"use client";

import Link from "next/link";
import { useActionState } from "react";
import { CircleNotch, Buildings, Users, Presentation, Lightning } from '@/lib/icons';

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { cn } from "@/lib/utils";
import { signInAction } from "@/lib/appwrite/auth-actions";
import { initialAuthState } from "@/lib/appwrite/auth-types";

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

  return (
    <div className={cn("flex min-h-svh w-full", className)} {...props}>
      {/* ── Sol: Marka paneli ── */}
      <div className="relative hidden w-1/2 flex-col justify-between overflow-hidden bg-slate-900 p-12 text-white lg:flex">
        {/* Arka plan dekorasyon */}
        <div
          className="pointer-events-none absolute inset-0"
          style={{
            backgroundImage:
              "radial-gradient(circle at 15% 15%, rgba(59,130,246,0.25) 0%, transparent 45%), radial-gradient(circle at 85% 80%, rgba(99,102,241,0.2) 0%, transparent 50%)",
          }}
          aria-hidden
        />
        <div
          className="pointer-events-none absolute -top-32 -right-32 size-96 rounded-full bg-blue-500/10 blur-3xl"
          aria-hidden
        />
        <div
          className="pointer-events-none absolute -bottom-40 -left-24 size-[28rem] rounded-full bg-indigo-600/10 blur-3xl"
          aria-hidden
        />

        {/* Logo + Ürün adı */}
        <div className="relative z-10 flex items-center gap-3">
          <div className="flex size-10 items-center justify-center rounded-xl bg-blue-500/20 ring-1 ring-blue-400/30 backdrop-blur">
            <Buildings className="size-5 text-blue-300" />
          </div>
          <div>
            <p className="text-lg font-bold tracking-tight leading-none">Emlak CRM</p>
            <p className="text-xs text-slate-400 leading-none mt-0.5">Kovak Yazılım</p>
          </div>
        </div>

        {/* Orta içerik */}
        <div className="relative z-10 space-y-8">
          <div className="space-y-3">
            <h2 className="text-3xl font-bold leading-snug tracking-tight">
              Gayrimenkul süreçlerinizi tek platformdan yönetin
            </h2>
            <p className="text-slate-400 text-sm leading-relaxed">
              İlanlar, müşteriler, akıllı eşleşme ve sunumlar — ekibinizle birlikte, her yerden.
            </p>
          </div>

          <ul className="space-y-4">
            {[
              {
                icon: Buildings,
                title: "Portföy yönetimi",
                desc: "Tüm ilanlarınızı fotoğraflarıyla ekleyin, takip edin",
              },
              {
                icon: Lightning,
                title: "Akıllı eşleşme",
                desc: "Ağırlıklı puanlama ile müşteri × ilan eşleştirmesi",
              },
              {
                icon: Presentation,
                title: "Sunum paylaşımı",
                desc: "Müşteriye özel sunum linkleri oluşturun ve gönderin",
              },
              {
                icon: Users,
                title: "Müşteri & arama",
                desc: "Alıcı ve kiracıların kriterlerini saklayın",
              },
            ].map(({ icon: Icon, title, desc }) => (
              <li key={title} className="flex items-start gap-3">
                <div className="mt-0.5 flex size-7 shrink-0 items-center justify-center rounded-lg bg-blue-500/15 ring-1 ring-blue-400/20">
                  <Icon className="size-3.5 text-blue-300" />
                </div>
                <div>
                  <p className="text-sm font-medium leading-none">{title}</p>
                  <p className="mt-0.5 text-xs text-slate-400">{desc}</p>
                </div>
              </li>
            ))}
          </ul>
        </div>

        {/* Alt: Kovak Yazılım */}
        <div className="relative z-10 flex flex-col gap-0.5">
          <p className="text-xs font-semibold text-slate-300">Emlak CRM</p>
          <p className="text-xs text-slate-500">Kovak Yazılım · kovaksoft.com</p>
        </div>
      </div>

      {/* ── Sağ: Giriş formu ── */}
      <div className="flex w-full flex-col items-center justify-center bg-white px-6 py-10 lg:w-1/2 dark:bg-slate-950">
        <div className="w-full max-w-sm space-y-8">
          {/* Mobilde logo */}
          <div className="flex items-center gap-2 lg:hidden">
            <div className="flex size-8 items-center justify-center rounded-lg bg-blue-600 text-white">
              <Buildings className="size-4" />
            </div>
            <span className="font-bold">Emlak CRM</span>
          </div>

          <div className="space-y-1.5">
            <h1 className="text-2xl font-bold tracking-tight">Tekrar hoş geldiniz</h1>
            <p className="text-muted-foreground text-sm">
              Hesabınıza giriş yaparak devam edin
            </p>
          </div>

          {inviteCode && (
            <p className="rounded-md border bg-blue-50 px-3 py-2 text-center text-xs text-blue-700 dark:bg-blue-950 dark:text-blue-300">
              Davete katılmak için giriş yapın.
            </p>
          )}

          <form action={formAction} className="space-y-5">
            {inviteCode && <input type="hidden" name="inviteCode" value={inviteCode} />}

            <div className="space-y-1.5">
              <Label htmlFor="email">Email</Label>
              <Input
                id="email"
                name="email"
                type="email"
                placeholder="ornek@firma.com"
                autoComplete="email"
                required
              />
            </div>

            <div className="space-y-1.5">
              <div className="flex items-center justify-between">
                <Label htmlFor="password">Şifre</Label>
                <Link
                  href="/forgot-password"
                  className="text-muted-foreground hover:text-foreground text-xs underline-offset-4 hover:underline"
                >
                  Şifremi unuttum
                </Link>
              </div>
              <Input
                id="password"
                name="password"
                type="password"
                autoComplete="current-password"
                required
              />
            </div>

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

            <Button type="submit" className="w-full" disabled={isPending}>
              {isPending ? (
                <>
                  <CircleNotch className="size-4 animate-spin" />
                  Giriş yapılıyor...
                </>
              ) : (
                "Giriş yap"
              )}
            </Button>
          </form>

          <p className="text-muted-foreground text-center text-sm">
            Hesabınız yok mu?{" "}
            <Link
              href="/sign-up"
              className="text-foreground font-medium underline-offset-4 hover:underline"
            >
              Hesap oluştur
            </Link>
          </p>
        </div>
      </div>
    </div>
  );
}