import Link from "next/link";
import type { Metadata } from "next";
import {
  CheckCircle2,
  Coins,
  FileText,
  ListChecks,
  MessageCircleQuestion,
  RefreshCcw,
  ShieldCheck,
} from "lucide-react";
import { getCurrentUser } from "@/lib/session";
import { URUNLER, DENEME_KREDISI } from "@/lib/credits";
import { Button } from "@/components/ui/button";
import { SectionEyebrow } from "@/components/pixel-decor";
import { Parallax } from "@/components/parallax";
import { SatinAlForm } from "./satin-al-form";
import { SiteFooter } from "@/components/site-footer";

export const metadata: Metadata = {
  title: "Tercih Dönemi Paketi",
  description:
    "Tek seferlik Tercih Dönemi Paketi: yapay zekâ destekli kişisel 24 tercihlik liste, risk analizi, liste revizyonları ve soru hakkı. Abonelik yok.",
  alternates: { canonical: "/paket" },
};

function tl(kurus: number) {
  return (kurus / 100).toLocaleString("tr-TR", { maximumFractionDigits: 0 });
}

const OZELLIKLER = [
  {
    icon: ListChecks,
    text: "Sıralamana özel, gerekçeli 24 tercihlik dengeli liste",
  },
  {
    icon: ShieldCheck,
    text: "Her tercih için yerleşme olasılığı ve risk analizi (son 4 yıl trend)",
  },
  { icon: FileText, text: "Veliyle paylaşılabilir PDF rapor" },
  { icon: RefreshCcw, text: "2 liste revizyon hakkı" },
  {
    icon: MessageCircleQuestion,
    text: `${URUNLER.paket.credits} AI danışman sorusu (her mesaj 1 kredi)`,
  },
] as const;

export default async function PaketPage({
  searchParams,
}: {
  searchParams: Promise<{ hata?: string }>;
}) {
  const [u, { hata }] = await Promise.all([getCurrentUser(), searchParams]);
  // Ödeme callback'i doğrulama hatasında buraya ?hata=token|siparis ile döner
  const odemeHatasi = hata === "token" || hata === "siparis";

  return (
    <div className="flex min-h-screen flex-col bg-slate-50 text-slate-900">
        <main className="mx-auto w-full max-w-3xl flex-1 px-4 py-16">
          {odemeHatasi ? (
            <div
              role="alert"
              className="mb-8 rounded-2xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-800"
            >
              Ödemen doğrulanamadı. Kartından çekim yapıldıysa kredilerin birkaç
              dakika içinde otomatik tanımlanır; tanımlanmazsa aşağıdan tekrar
              deneyebilirsin — çekim yapılmadıysa hiçbir ücret ödemedin.
            </div>
          ) : null}
          <Parallax fromStart strength={12} className="text-center">
            <SectionEyebrow>Tek seferlik ödeme · Abonelik yok</SectionEyebrow>
            <h1 className="mt-4 font-heading text-3xl font-bold sm:text-4xl">
              İnsan danışmanın işini,{" "}
              <span className="text-primary">onda bir fiyatına</span>
            </h1>
            <p className="mx-auto mt-3 max-w-xl text-slate-600">
              Tercih danışmanları bu dönemde 2.000–10.000 TL alıyor. KolayTercih
              aynı işi gerçek YÖK Atlas verisiyle, dakikalar içinde yapar.
            </p>
          </Parallax>

          <Parallax
            strength={6}
            className="mt-10 grid gap-6 sm:grid-cols-[1fr_auto]"
          >
            {/* Ana paket */}
            <section className="rounded-2xl border-2 border-orange-500 bg-white p-8 shadow-sm">
              <div className="flex items-baseline justify-between">
                <h2 className="font-heading text-xl font-bold">
                  Tercih Dönemi Paketi
                </h2>
                <p className="font-heading text-3xl font-bold">
                  {tl(URUNLER.paket.amountKurus)} TL
                </p>
              </div>
              <ul className="mt-6 space-y-3">
                {OZELLIKLER.map((o) => (
                  <li key={o.text} className="flex items-start gap-3 text-sm">
                    <o.icon
                      className="mt-0.5 size-4 shrink-0 text-emerald-600"
                      aria-hidden
                    />
                    {o.text}
                  </li>
                ))}
              </ul>
              <div className="mt-8">
                {u ? (
                  u.hasPaket ? (
                    <div className="flex items-center gap-2 rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm font-medium text-emerald-800">
                      <CheckCircle2 className="size-4" aria-hidden />
                      Paketin aktif —{" "}
                      <Link href="/" className="underline">
                        listeni oluştur
                      </Link>
                    </div>
                  ) : (
                    <SatinAlForm
                      urun="paket"
                      label={`${tl(URUNLER.paket.amountKurus)} TL — Paketi al`}
                      vurgulu
                    />
                  )
                ) : (
                  <Button
                    asChild
                    className="h-12 w-full cursor-pointer bg-orange-500 px-8 text-white transition-colors duration-200 hover:bg-orange-600"
                  >
                    <Link
                      href={`/giris?callback=${encodeURIComponent("/paket")}`}
                    >
                      Giriş yap ve {DENEME_KREDISI} deneme kredisi kazan
                    </Link>
                  </Button>
                )}
              </div>
              <p className="mt-4 text-center text-xs text-slate-500">
                iyzico güvenli ödeme · Kart bilgilerin bize hiç ulaşmaz ·{" "}
                <Link
                  href="/kosullar#iade"
                  className="underline hover:text-slate-700"
                >
                  İade koşulları
                </Link>
              </p>
            </section>

            {/* Top-up */}
            <section className="flex h-fit flex-col rounded-2xl border border-slate-200 bg-white p-6 shadow-sm sm:w-56">
              <div className="flex items-center gap-2">
                <Coins className="size-4 text-amber-500" aria-hidden />
                <h2 className="font-heading font-bold">Kredi bitti mi?</h2>
              </div>
              <p className="mt-2 flex-1 text-sm text-slate-600">
                +{URUNLER.topup.credits} soru hakkı,{" "}
                {tl(URUNLER.topup.amountKurus)} TL.
              </p>
              <div className="mt-4">
                {u ? (
                  <SatinAlForm
                    urun="topup"
                    label={`+${URUNLER.topup.credits} kredi al`}
                  />
                ) : (
                  <Button
                    asChild
                    variant="outline"
                    className="h-11 w-full cursor-pointer"
                  >
                    <Link
                      href={`/giris?callback=${encodeURIComponent("/paket")}`}
                    >
                      Önce giriş yap
                    </Link>
                  </Button>
                )}
              </div>
            </section>
          </Parallax>

          <p className="mt-10 text-center text-xs leading-relaxed text-slate-500">
            KolayTercih bir karar destek aracıdır; öneriler resmî YÖK Atlas
            verisine dayanır ancak yerleşme garantisi verilmez. Tercih
            listesinin nihai sorumluluğu adaya aittir. Sorun mu var?{" "}
            <Link href="/iletisim" className="underline hover:text-slate-700">
              Bize yaz
            </Link>
            .
          </p>
        </main>
      <SiteFooter />
    </div>
  );
}