"use client";

// /sonuc?sira= yokken: kayıtlı profil varsa oraya taşı; yoksa kapıyı aç.
// Sıra bilgisi localStorage'daki TercihProfili ile tüm uygulamada ortak.

import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import Link from "next/link";
import { ArrowLeft, Trophy } from "lucide-react";
import { Button } from "@/components/ui/button";
import { PagePixelDivider } from "@/components/pixel-decor";
import { sonucHref } from "@/features/sihirbaz/sihirbaz-sabitler";
import {
  sonucaGitIste,
  useProfilKapisi,
} from "@/features/liste/hooks/use-tercih-profili";

export function SiraGerekli() {
  const router = useRouter();
  const { profil, profilYuklendi } = useProfilKapisi();
  const [yonleniyor, setYonleniyor] = useState(false);

  useEffect(() => {
    if (!profilYuklendi) return;
    if (profil) {
      setYonleniyor(true);
      router.replace(sonucHref(profil));
    }
  }, [profil, profilYuklendi, router]);

  if (!profilYuklendi || yonleniyor || profil) {
    return (
      <main className="mx-auto flex max-w-2xl flex-col items-center px-4 py-24 text-center">
        <p className="text-sm text-slate-500">Sıralaman kontrol ediliyor…</p>
      </main>
    );
  }

  return (
    <main className="mx-auto flex max-w-2xl flex-col items-center px-4 py-24 text-center">
      <h1 className="font-heading text-2xl font-bold">
        Geçerli bir sıralama gerekli
      </h1>
      <p className="mt-3 text-slate-600">
        Listeni kurabilmek için YKS başarı sıralamanı gir. Kaydettiğin sıra tüm
        uygulamada kullanılır.
      </p>
      <PagePixelDivider seed={59} className="mx-auto mt-6" />
      <div className="mt-6 flex flex-wrap items-center justify-center gap-3">
        <Button
          type="button"
          onClick={() => {
            const { href } = sonucaGitIste();
            if (href) router.push(href);
          }}
          className="cursor-pointer bg-orange-500 text-white hover:bg-orange-600"
        >
          <Trophy className="size-4" aria-hidden />
          Sıralamamı gir
        </Button>
        <Button asChild variant="outline" className="cursor-pointer">
          <Link href="/">
            <ArrowLeft className="size-4" aria-hidden />
            Ana sayfaya dön
          </Link>
        </Button>
      </div>
    </main>
  );
}