import Image from "next/image";
import Link from "next/link";
import {
  ArrowRight,
  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 { Parallax } from "@/components/parallax";
import { Skeleton } from "@/components/ui/skeleton";
import { SatinAlForm } from "./satin-al-form";

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} Yapay Zeka danışman sorusu (her mesaj 1 kredi)`,
  },
] as const;

// Paket + top-up kartları: kullanıcının paket/kredi durumuna göre CTA'lar
// değişir, okuma burada yaşar.
export async function PaketSatinAl() {
  const u = await getCurrentUser();

  return (
    <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
              />
            )
          ) : (
            <div className="space-y-2">
              <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 — sonra {tl(URUNLER.paket.amountKurus)} TL&apos;ye
                  al
                  <ArrowRight className="size-4" aria-hidden />
                </Link>
              </Button>
              <p className="text-center text-xs text-slate-500">
                Girişte {DENEME_KREDISI} deneme kredisi de tanımlanır.
              </p>
            </div>
          )}
        </div>
        <Image
          src="/odeme/iyzico-logo-band.svg"
          alt="iyzico ile Öde — Mastercard, Visa, American Express ve Troy ile güvenli ödeme"
          width={429}
          height={32}
          className="mx-auto mt-5 h-5 w-auto"
        />
        <p className="mt-3 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">
          {/* Top-up hasPaket vermez: paketsiz biri alırsa parasını verip
              yine maskeli liste görür. Satın alma yalnızca paketliye
              açık; paketsize durum dürüstçe açıklanır. */}
          {u?.hasPaket ? (
            <SatinAlForm
              urun="topup"
              label={`+${URUNLER.topup.credits} kredi — ${tl(URUNLER.topup.amountKurus)} TL`}
            />
          ) : u ? (
            <p className="rounded-xl border border-slate-200 bg-slate-50 px-3 py-2.5 text-xs leading-5 text-slate-600">
              Ek kredi, kilitli analizleri açmaz — o yüzden önce paket
              gerekir. Paket zaten {URUNLER.paket.credits} kredi içerir;
              bitince buradan yükleyebilirsin.
            </p>
          ) : (
            <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>
  );
}

export function PaketSatinAlSkeleton() {
  return (
    <div
      aria-live="polite"
      className="mt-10 grid gap-6 sm:grid-cols-[1fr_auto]"
    >
      <Skeleton className="h-80 w-full rounded-2xl" />
      <Skeleton className="h-80 w-full rounded-2xl sm:w-64" />
    </div>
  );
}
