"use client";

import React, { useEffect, useState } from "react";
import { useSession } from "next-auth/react";
import Link from "next/link";
import { getCookieSession, type AuthUser } from "@/lib/auth-api";

export default function ProfilePage() {
  const { data: session, status } = useSession();
  const [cookieUser, setCookieUser] = useState<AuthUser | null | undefined>(undefined);

  useEffect(() => {
    getCookieSession().then((s) =>
      setCookieUser(s.loggedIn && s.user ? s.user : null)
    );
  }, []);

  const loading = status === "loading" || cookieUser === undefined;

  if (loading) {
    return (
      <div className="container mx-auto flex min-h-[60vh] items-center justify-center px-4">
        <p className="text-neutral-500">Yükleniyor...</p>
      </div>
    );
  }

  if (session?.user) {
    const u = session.user;
    return (
      <div className="container mx-auto max-w-lg px-4 py-12">
        <h1 className="text-2xl font-bold text-neutral-900 dark:text-white">
          Profil
        </h1>
        <div className="mt-6 rounded-xl border border-neutral-200 bg-white p-6 dark:border-neutral-800 dark:bg-neutral-900">
          <p className="text-sm text-neutral-500 dark:text-neutral-400">
            {u.email ?? u.name ?? "Oturum açıldı"}
          </p>
          {u.name && (
            <p className="mt-1 font-medium text-neutral-900 dark:text-white">
              {u.name}
            </p>
          )}
        </div>
        <p className="mt-4 text-sm text-neutral-500 dark:text-neutral-400">
          <Link href="/" className="text-blue-600 hover:underline dark:text-blue-400">
            Ana sayfaya dön
          </Link>
        </p>
      </div>
    );
  }

  if (cookieUser) {
    const u = cookieUser;
    return (
      <div className="container mx-auto max-w-lg px-4 py-12">
        <h1 className="text-2xl font-bold text-neutral-900 dark:text-white">
          Profil
        </h1>
        <div className="mt-6 rounded-xl border border-neutral-200 bg-white p-6 dark:border-neutral-800 dark:bg-neutral-900">
          <p className="text-sm text-neutral-500 dark:text-neutral-400">
            {u.email}
          </p>
          <p className="mt-1 font-medium text-neutral-900 dark:text-white">
            {u.first_name} {u.last_name}
          </p>
          {u.username && (
            <p className="mt-1 text-sm text-neutral-600 dark:text-neutral-400">
              @{u.username}
            </p>
          )}
        </div>
        <p className="mt-4 text-sm text-neutral-500 dark:text-neutral-400">
          <Link href="/" className="text-blue-600 hover:underline dark:text-blue-400">
            Ana sayfaya dön
          </Link>
        </p>
      </div>
    );
  }

  return (
    <div className="container mx-auto max-w-lg px-4 py-12">
      <h1 className="text-2xl font-bold text-neutral-900 dark:text-white">
        Profil
      </h1>
      <p className="mt-4 text-neutral-600 dark:text-neutral-400">
        Bu sayfayı görmek için giriş yapmalısınız.
      </p>
      <div className="mt-4 flex gap-3">
        <Link
          href="/auth/login"
          className="text-sm font-medium text-blue-600 hover:underline dark:text-blue-400"
        >
          Giriş yap
        </Link>
        <Link
          href="/auth/register"
          className="text-sm font-medium text-blue-600 hover:underline dark:text-blue-400"
        >
          Kayıt ol
        </Link>
      </div>
    </div>
  );
}