// app/login/page.jsx
"use client";

import { useState } from "react";
import { signIn } from "next-auth/react";
import { useRouter } from "next/navigation";

export default function LoginPage() {
  const router = useRouter();

  const [loading, setLoading] = useState(false);
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [err, setErr] = useState("");

  const onSubmit = async (e) => {
    e.preventDefault();
    setErr("");
    setLoading(true);

    const res = await signIn("credentials", {
      redirect: false,
      email,
      password,
    });

    setLoading(false);

    if (!res?.ok) {
      setErr("E-posta veya şifre hatalı.");
      return;
    }

    router.push("/"); // go to dashboard
  };

  return (
    <div className="min-h-screen bg-[radial-gradient(1200px_600px_at_20%_20%,#ffe7e7_0%,transparent_60%),radial-gradient(1000px_600px_at_80%_10%,#e9efff_0%,transparent_55%),linear-gradient(#fafafa,#f6f7fb)] flex items-center justify-center p-6">
      <div className="w-full max-w-[980px] grid lg:grid-cols-2 gap-6 animate-fadeIn">
        {/* Left */}
        <div className="relative overflow-hidden rounded-3xl border border-black/5 bg-white/60 backdrop-blur-xl shadow-[0_20px_60px_rgba(0,0,0,0.10)] p-10">
          <div className="flex items-center gap-3">
            <div className="text-3xl font-extrabold tracking-tight">
              <span className="text-[#e04a3b]">Polim</span>
              <span className="text-[#98a2b3]">X</span>
            </div>
            <span className="text-xs px-2 py-1 rounded-full bg-black/5 text-black/60 border border-black/5">
              Sigorta Paneli
            </span>
          </div>

          <p className="mt-4 text-black/60 leading-relaxed max-w-md">
            Poliçe yönetimi, müşteri takibi, prim/komisyon hesapları ve ödeme
            durumlarını tek panelden kontrol edin.
          </p>

          <div className="mt-10 grid gap-3">
            <div className="group relative overflow-hidden rounded-2xl border border-black/5 bg-white p-5 shadow-sm transition-all duration-300 ease-out hover:-translate-y-1 hover:shadow-lg hover:border-[#e04a3b]/20">
              <div className="pointer-events-none absolute -top-24 -left-24 h-56 w-56 rounded-full bg-[#e04a3b]/15 blur-2xl opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
              <div className="relative flex items-center justify-between">
                <div className="text-sm font-semibold text-black/80 group-hover:text-black">
                  Poliçe Takibi
                </div>
                <div className="h-2 w-2 rounded-full bg-emerald-500" />
              </div>
              <div className="relative mt-2 text-sm text-black/60 group-hover:text-black/70">
                Zeyil / poliçe no • Plaka • Sigortalı • Durum
              </div>
              <div className="relative mt-4 h-2 w-full rounded-full bg-black/5 overflow-hidden">
                <div className="h-full w-[72%] bg-gradient-to-r from-[#e04a3b] to-[#ff7a6e] transition-all duration-500 ease-out group-hover:w-[84%]" />
              </div>
            </div>

            <div className="group relative overflow-hidden rounded-2xl border border-black/5 bg-white p-5 shadow-sm transition-all duration-300 ease-out hover:-translate-y-1 hover:shadow-lg hover:border-[#e04a3b]/20">
              <div className="pointer-events-none absolute -top-24 -right-24 h-56 w-56 rounded-full bg-indigo-500/10 blur-2xl opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
              <div className="relative text-sm font-semibold text-black/80 group-hover:text-black">
                Ödeme & Prim
              </div>
              <div className="relative mt-2 text-sm text-black/60 group-hover:text-black/70">
                Brüt/Net prim, ödenen/kalan tutarlar ve komisyon detayları.
              </div>
              <div className="relative mt-4 h-[2px] w-full bg-black/10 overflow-hidden rounded-full">
                <div className="h-full w-0 bg-gradient-to-r from-[#e04a3b] to-[#ff6a5e] transition-all duration-500 ease-out group-hover:w-full" />
              </div>
            </div>
          </div>

          <div className="pointer-events-none absolute -right-28 -bottom-28 h-72 w-72 rounded-full bg-[#e04a3b]/15 blur-2xl" />
          <div className="pointer-events-none absolute -left-24 -top-24 h-64 w-64 rounded-full bg-indigo-500/10 blur-2xl" />
        </div>

        {/* Right */}
        <div className="rounded-3xl border border-black/5 bg-white shadow-[0_20px_60px_rgba(0,0,0,0.10)] p-8 sm:p-10 animate-fadeUp">
          <div className="flex items-start justify-between gap-4">
            <div>
              <h1 className="text-2xl sm:text-3xl font-bold tracking-tight text-black/90">
                Hoş geldiniz
              </h1>
              <p className="mt-2 text-sm text-black/60">
                Devam etmek için giriş yapın.
              </p>
            </div>
            <div className="text-xl font-extrabold tracking-tight select-none">
              <span className="text-[#e04a3b]">Polim</span>
              <span className="text-[#98a2b3]">X</span>
            </div>
          </div>

          {err && (
            <div className="mt-6 rounded-2xl border border-red-200 bg-red-50 px-4 py-3 text-sm font-semibold text-red-600">
              {err}
            </div>
          )}

          <form onSubmit={onSubmit} className="mt-6 space-y-5">
            <div className="space-y-2">
              <label className="text-sm font-medium text-black/80">E-posta</label>
              <input
                type="text"
                required
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                placeholder="ornek@firma.com"
                className="w-full rounded-2xl border border-black/10 bg-white px-4 py-3 text-sm outline-none transition focus:border-[#e04a3b]/40 focus:ring-4 focus:ring-[#e04a3b]/10"
              />
              <div className="text-xs text-black/45">
                Not: Şu an giriş alanı veritabanındaki <b>name</b> alanı ile eşleşir.
              </div>
            </div>

            <div className="space-y-2">
              <label className="text-sm font-medium text-black/80">Şifre</label>
              <input
                type="password"
                required
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                placeholder="••••••••"
                className="w-full rounded-2xl border border-black/10 bg-white px-4 py-3 text-sm outline-none transition focus:border-[#e04a3b]/40 focus:ring-4 focus:ring-[#e04a3b]/10"
              />
            </div>

            <button
              type="submit"
              disabled={loading}
              className="w-full cursor-pointer rounded-2xl bg-gradient-to-r from-[#e04a3b] to-[#ff6a5e] px-4 py-3 text-sm font-semibold text-white shadow-[0_14px_30px_rgba(224,74,59,0.25)] transition hover:brightness-[1.02] disabled:opacity-70 disabled:cursor-not-allowed"
            >
              {loading ? "Giriş yapılıyor..." : "Giriş Yap"}
            </button>

            <p className="text-center text-xs text-black/45">
              Poliçe kayıtlarına erişim yalnızca yetkili kullanıcılar içindir.
            </p>
          </form>
        </div>
      </div>

      <style jsx global>{`
        @keyframes fadeIn {
          from { opacity: 0; }
          to { opacity: 1; }
        }
        @keyframes fadeUp {
          from { opacity: 0; transform: translateY(10px); }
          to { opacity: 1; transform: translateY(0); }
        }
        .animate-fadeIn { animation: fadeIn 520ms ease-out both; }
        .animate-fadeUp { animation: fadeUp 560ms ease-out both; }
      `}</style>
    </div>
  );
}