"use client";

import type { ReactNode } from "react";
import { ChevronRight, GraduationCap, X } from "lucide-react";
import {
  AltSayfa,
  AltSayfaKapat,
  AltSayfaGovde,
  AltSayfaIcerik,
  AltSayfaAciklama,
  AltSayfaBaslik,
  AltSayfaTetik,
} from "@/components/ui/alt-sayfa";
import { AcilisSahnesi } from "@/components/ui/acilis-sahnesi";

/**
 * Üniversite ve bölüm sayfasında özet kartlarının altındaki ayrıntı satırı
 * ("Akademik göstergeler ›", "Mezun istihdamı ›"; Apple Sağlık'taki "Tüm
 * verileri göster" gibi): sık bakılan sayılar
 * kartlarda, ayrıntı bir dokunuş derinde. İkinci satır içeride ne olduğunu
 * önceden söyler. Ayrıntı alttan açılan çekmecede; çekmece ve kapatma
 * çarpısı cta-sira-form.tsx'teki çekmeceyle birebir aynı sınıf setinde.
 * Kartlar sunucuda üretilip `children` olarak gelir; açılış koreografisini
 * AcilisSahnesi (`src/components/ui/acilis-sahnesi.tsx`, kartlı mod) oynatır.
 */
export function AkademikAyrinti({
  baglam,
  onizleme,
  baslik = "Akademik göstergeler",
  ikon,
  children,
}: {
  /** Çekmece başlığının altındaki bağlam satırı (üniversite ya da bölüm adı) */
  baglam: string;
  onizleme: string;
  baslik?: string;
  /** İkon kutusunun içi; verilmezse mezuniyet kepi */
  ikon?: ReactNode;
  children: ReactNode;
}) {
  return (
    <AltSayfa>
      <AltSayfaTetik asChild>
        <button
          type="button"
          className="mt-4 flex w-full cursor-pointer items-center gap-4 group rounded-2xl border border-slate-200 bg-card p-4 text-left transition-[background-color,border-color,transform] duration-150 hover:border-orange-500 hover:bg-orange-50/60 active:scale-[0.99] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring sm:p-5"
        >
          <span className="flex size-11 shrink-0 items-center justify-center rounded-xl bg-primary/10">
            {ikon ?? (
              <GraduationCap className="size-5 text-primary" aria-hidden />
            )}
          </span>
          <span className="min-w-0 flex-1">
            <span className="block font-heading text-lg font-bold text-slate-900">
              {baslik}
            </span>
            <span className="block truncate text-sm text-slate-500">
              {onizleme}
            </span>
          </span>
          <ChevronRight
            className="size-5 shrink-0 text-slate-400 transition-[color,transform] duration-150 group-hover:translate-x-0.5 group-hover:text-orange-500"
            aria-hidden
          />
        </button>
      </AltSayfaTetik>
      <AltSayfaIcerik>
        <AltSayfaKapat className="absolute top-3 right-3 z-10 flex size-9 cursor-pointer items-center justify-center rounded-full border border-slate-200 bg-popover text-slate-500 transition-[background-color,transform] duration-150 hover:bg-slate-100 hover:text-slate-800 active:scale-[0.96]">
          <X className="size-4" aria-hidden />
          <span className="sr-only">Kapat</span>
        </AltSayfaKapat>
        <AltSayfaGovde className="px-4 pt-3 pb-[max(1.25rem,env(safe-area-inset-bottom))] sm:px-6">
          <AltSayfaBaslik className="px-10 text-center font-heading text-2xl font-bold text-slate-900">
            {baslik}
          </AltSayfaBaslik>
          <AltSayfaAciklama className="mt-1 px-10 text-center text-sm text-slate-500">
            {baglam}
          </AltSayfaAciklama>
          <AcilisSahnesi>{children}</AcilisSahnesi>
        </AltSayfaGovde>
      </AltSayfaIcerik>
    </AltSayfa>
  );
}