'use client';

import { useState, Suspense, useEffect } from 'react';
import Link from 'next/link';
import { useRouter, useSearchParams } from 'next/navigation';
import { ChevronLeft, Eye, EyeOff, Moon, Sun } from 'lucide-react';
import { getApiBase, setSession } from '@/lib/auth';

function AuthBrandingPanel() {
  return (
    <div className="relative hidden h-full min-h-[100dvh] w-full flex-1 items-center bg-brand-950 dark:bg-white/5 lg:grid lg:w-1/2 lg:max-w-[50%]">
      <div className="relative z-[1] flex min-h-[100dvh] w-full items-center justify-center">
        <div className="absolute right-0 top-0 -z-10 w-full max-w-[250px] xl:max-w-[450px]" aria-hidden>
          <img alt="" src="/images/shape/grid-01.svg" className="h-auto w-full" />
        </div>
        <div className="absolute bottom-0 left-0 -z-10 w-full max-w-[250px] rotate-180 xl:max-w-[450px]" aria-hidden>
          <img alt="" src="/images/shape/grid-01.svg" className="h-auto w-full" />
        </div>
        <div className="flex max-w-xs flex-col items-center px-4">
          <Link href="/" className="mb-4 block">
            <img width={231} height={48} alt="Vidikid" src="/images/logo/auth-logo.svg" />
          </Link>
          <p className="text-center text-gray-400 dark:text-white/60">
            Kreş ve anaokulu yönetimi — öğrenci, veli ve personel tek panelde.
          </p>
        </div>
      </div>
    </div>
  );
}

function AuthThemeToggle() {
  const [dark, setDark] = useState(false);

  useEffect(() => {
    setDark(document.documentElement.classList.contains('dark'));
  }, []);

  const toggle = () => {
    document.documentElement.classList.toggle('dark');
    setDark((d) => !d);
  };

  return (
    <button
      type="button"
      onClick={toggle}
      aria-label={dark ? 'Açık tema' : 'Koyu tema'}
      className="fixed bottom-6 right-6 z-50 hidden size-14 items-center justify-center rounded-full bg-blue-600 text-white shadow-lg transition-colors hover:bg-blue-700 sm:inline-flex"
    >
      {dark ? <Sun className="size-5" strokeWidth={2} /> : <Moon className="size-5" strokeWidth={2} />}
    </button>
  );
}

const inputClass =
  'h-11 w-full rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm text-gray-900 shadow-theme-xs placeholder:text-gray-400 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20 dark:border-gray-600 dark:bg-gray-900 dark:text-white dark:placeholder:text-gray-500';

function LoginForm() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const [form, setForm] = useState({
    email: '',
    password: '',
    tenantSlug: searchParams.get('slug') ?? '',
  });
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');
  const [showPassword, setShowPassword] = useState(false);
  const justRegistered = searchParams.get('registered') === '1';

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    setError('');
    try {
      const res = await fetch(`${getApiBase()}/v1/auth/login`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Cache-Control': 'no-cache',
        },
        body: JSON.stringify(form),
      });
      let data: Record<string, unknown> = {};
      try {
        data = await res.json();
      } catch {
        /* empty body */
      }
      if (!res.ok) {
        setError((data.message as string) || `Giriş başarısız (${res.status})`);
        return;
      }
      const payload = (data.data ?? data) as Record<string, unknown>;
      setSession(
        (payload.accessToken as string) ?? '',
        (payload.refreshToken as string) ?? '',
        payload.user ?? {},
      );
      const role = ((payload.user as Record<string, unknown> | undefined)?.role as string | undefined) ?? '';
      const defaultRedirect =
        role === 'SUPER_ADMIN'
          ? '/platform/dashboard'
          : role === 'TEACHER'
            ? '/teacher/dashboard'
            : role === 'PARENT'
              ? '/parent/dashboard'
              : '/school/dashboard';
      const redirect = searchParams.get('redirect') || defaultRedirect;
      const normalizedRedirect = redirect.startsWith('/admin/')
        ? redirect.replace('/admin/', role === 'SUPER_ADMIN' ? '/platform/' : '/school/')
        : redirect.startsWith('/teacher/') && role !== 'TEACHER'
          ? defaultRedirect
          : redirect.startsWith('/parent/') && role !== 'PARENT'
            ? defaultRedirect
            : redirect;
      router.push(normalizedRedirect);
    } catch {
      setError('Bağlantı hatası. API sunucusunun çalıştığından emin olun.');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="mx-auto flex w-full max-w-2xl flex-1 flex-col px-6 py-8 sm:px-10 md:px-12 lg:px-14 lg:py-10">
      <div className="mb-6 sm:mb-8 sm:pt-4">
        <Link
          href="/"
          className="inline-flex items-center gap-1 text-sm text-gray-500 transition-colors hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200"
        >
          <ChevronLeft className="size-5 shrink-0" strokeWidth={2} />
          Ana sayfaya dön
        </Link>
      </div>

      <div className="flex flex-1 flex-col justify-center pb-10">
        <div className="mb-6 sm:mb-8">
          <h1 className="mb-2 text-3xl font-bold tracking-tight text-gray-900 dark:text-white">Giriş yap</h1>
          <p className="text-sm text-gray-500 dark:text-gray-400">E-posta ve şifrenizle panele erişin.</p>
        </div>

        {justRegistered ? (
          <div className="mb-5 rounded-lg border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-800 dark:border-emerald-900/50 dark:bg-emerald-950/40 dark:text-emerald-200">
            Kayıt tamamlandı. Giriş yapabilirsiniz.
          </div>
        ) : null}

        {error ? (
          <div className="mb-4 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700 dark:border-red-900/50 dark:bg-red-950/40 dark:text-red-200">
            {error}
          </div>
        ) : null}

        <form onSubmit={handleSubmit} className="space-y-5">
          <div>
            <label htmlFor="login-email" className="mb-1.5 block text-[0.875rem] font-medium text-gray-700 dark:text-gray-300">
              E-posta<span className="text-red-500">*</span>
            </label>
            <input
              id="login-email"
              type="email"
              autoComplete="email"
              placeholder="admin@okul.com"
              value={form.email}
              onChange={(e) => setForm({ ...form, email: e.target.value })}
              className={inputClass}
              required
            />
          </div>

          <div>
            <label htmlFor="login-slug" className="mb-1.5 block text-[0.875rem] font-medium text-gray-700 dark:text-gray-300">
              Okul kodu (slug)
            </label>
            <input
              id="login-slug"
              type="text"
              autoComplete="organization"
              placeholder="ornek-kres"
              value={form.tenantSlug}
              onChange={(e) => setForm({ ...form, tenantSlug: e.target.value.toLowerCase().trim() })}
              className={inputClass}
            />
            <p className="mt-1.5 text-xs text-gray-500 dark:text-gray-400">
              Okul, öğretmen ve veli girişleri için. Süper yönetici için boş bırakabilirsiniz.
            </p>
          </div>

          <div>
            <div className="mb-1.5 flex items-center justify-between gap-2">
              <label htmlFor="login-password" className="block text-[0.875rem] font-medium text-gray-700 dark:text-gray-300">
                Şifre<span className="text-red-500">*</span>
              </label>
              <Link
                href="/forgot-password"
                className="shrink-0 text-xs font-medium text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
              >
                Şifremi unuttum
              </Link>
            </div>
            <div className="relative">
              <input
                id="login-password"
                type={showPassword ? 'text' : 'password'}
                autoComplete="current-password"
                placeholder="••••••••"
                value={form.password}
                onChange={(e) => setForm({ ...form, password: e.target.value })}
                className={`${inputClass} pr-12`}
                required
              />
              <button
                type="button"
                className="absolute right-3 top-1/2 -translate-y-1/2 rounded p-1 text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-white"
                aria-label={showPassword ? 'Şifreyi gizle' : 'Şifreyi göster'}
                onClick={() => setShowPassword((p) => !p)}
              >
                {showPassword ? <Eye className="size-5" strokeWidth={2} /> : <EyeOff className="size-5" strokeWidth={2} />}
              </button>
            </div>
          </div>

          <button
            type="submit"
            disabled={loading}
            className="flex w-full items-center justify-center rounded-lg bg-blue-600 px-4 py-3 text-sm font-semibold text-white shadow-sm transition-colors hover:bg-blue-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:focus-visible:ring-offset-gray-900"
          >
            {loading ? 'Giriş yapılıyor…' : 'Giriş yap'}
          </button>
        </form>

        <p className="mt-8 text-center text-sm text-gray-600 dark:text-gray-400 sm:text-left">
          Hesabınız yok mu?{' '}
          <Link href="/register" className="font-semibold text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">
            Ücretsiz kaydolun
          </Link>
        </p>

        {process.env.NODE_ENV === 'development' ? (
          <div className="mt-6 rounded-xl border border-gray-200 bg-gray-50 px-4 py-3 text-xs text-gray-600 dark:border-gray-700 dark:bg-gray-800/50 dark:text-gray-400">
            <span className="font-semibold text-gray-800 dark:text-gray-200">Demo:</span> super@vidikid.com / 123456
          </div>
        ) : null}
      </div>
    </div>
  );
}

function LoginLeftSkeleton() {
  return (
    <div className="mx-auto w-full max-w-2xl flex-1 space-y-6 px-6 py-16 sm:px-10 md:px-12 lg:px-14">
      <div className="h-4 w-40 animate-pulse rounded bg-gray-200 dark:bg-gray-700" />
      <div className="h-10 w-3/4 animate-pulse rounded-lg bg-gray-200 dark:bg-gray-700" />
      <div className="h-24 animate-pulse rounded-xl bg-gray-100 dark:bg-gray-800" />
    </div>
  );
}

export default function LoginPage() {
  return (
    <div className="flex min-h-[100dvh] flex-col bg-white dark:bg-gray-900 lg:flex-row">
      <div className="flex min-h-[100dvh] w-full flex-1 flex-col overflow-y-auto lg:w-1/2 lg:max-w-[50%]">
        <Suspense fallback={<LoginLeftSkeleton />}>
          <LoginForm />
        </Suspense>
      </div>
      <AuthBrandingPanel />
      <AuthThemeToggle />
    </div>
  );
}