import { ArrowUpRight, BookOpen, Code2, Images, Lightbulb, Newspaper, Trophy, Users } from "lucide-react";
import Link from "next/link";
import { Hero } from "@/components/home/hero";
import { Reveal } from "@/components/home/reveal";
import { SectionHeading } from "@/components/home/section-heading";
import { getPublicHomeData } from "@/services/public-content";
import Image from "next/image";

export const dynamic = "force-dynamic";

export default async function HomePage() {
  const data = await getPublicHomeData();
  const teacherName = data.profile?.user.name ?? "Patawari D., S.Kom";
  const teacherTitle = data.profile?.title ?? "Guru Rekayasa Perangkat Lunak";
  const teacherBio = data.profile?.bio ?? "Mendampingi siswa Rekayasa Perangkat Lunak memahami fondasi, membangun produk, dan mengembangkan kebiasaan belajar yang relevan dengan industri.";
  const teacherSkills = Array.isArray(data.profile?.skills) ? data.profile.skills.filter((skill): skill is string => typeof skill === "string") : ["Web Development", "Database", "Mobile", "IoT", "Artificial Intelligence"];
  const stats = [
    { label: "Materi Terbit", value: data.materialCount, icon: BookOpen },
    { label: "Project Siswa", value: data.projectCount, icon: Code2 },
    { label: "Kegiatan", value: data.activityCount, icon: Lightbulb },
    { label: "Artikel", value: data.articleCount, icon: Newspaper },
    { label: "Siswa", value: data.studentCount, icon: Users },
  ];
  const featuredContent = [
    {
      icon: Code2,
      label: "Project siswa",
      title: data.latestProject?.title,
      description: data.latestProject?.description,
      media: data.latestProject?.thumbnail,
      meta: data.latestProject ? String(data.latestProject.year) : null,
      href: data.latestProject ? `/project/${data.latestProject.slug}` : "/project",
      empty: "Belum ada project yang diterbitkan",
    },
    {
      icon: Images,
      label: "Galeri kegiatan",
      title: data.latestGallery?.title,
      description: data.latestGallery?.description,
      media: data.latestGallery?.cover,
      meta: data.latestGallery ? new Intl.DateTimeFormat("id-ID", { dateStyle: "medium" }).format(data.latestGallery.date) : null,
      href: data.latestGallery ? `/galeri/${data.latestGallery.slug}` : "/galeri",
      empty: "Belum ada galeri yang diterbitkan",
    },
    {
      icon: Newspaper,
      label: "Artikel terbaru",
      title: data.latestArticle?.title,
      description: data.latestArticle?.excerpt,
      media: data.latestArticle?.cover,
      meta: data.latestArticle?.publishedAt ? new Intl.DateTimeFormat("id-ID", { dateStyle: "medium" }).format(data.latestArticle.publishedAt) : null,
      href: data.latestArticle ? `/artikel/${data.latestArticle.slug}` : "/artikel",
      empty: "Belum ada artikel yang diterbitkan",
    },
    {
      icon: Trophy,
      label: "Prestasi siswa",
      title: data.latestAchievement?.name,
      description: data.latestAchievement ? `${data.latestAchievement.studentName} · ${data.latestAchievement.rank}` : null,
      media: data.latestAchievement?.photo,
      meta: data.latestAchievement ? String(data.latestAchievement.year) : null,
      href: "/prestasi-siswa",
      empty: "Belum ada prestasi yang dicatat",
    },
  ];

  return (
    <main>
      <Hero name={teacherName} title={teacherTitle} image={data.profile?.user.image} />
      <section aria-label="Statistik WEBKU" className="bg-white dark:bg-slate-950">
        <div className="mx-auto grid max-w-7xl grid-cols-2 divide-x divide-slate-200 px-5 py-8 sm:px-8 md:grid-cols-5 dark:divide-slate-800">
          {stats.map(({ label, value, icon: Icon }, index) => <div key={label} className={`px-4 py-4 text-center ${index === 4 ? "col-span-2 md:col-span-1" : ""}`}><Icon className="mx-auto size-4 text-emerald-500" /><p className="mt-2 text-3xl font-black tabular-nums">{value}</p><p className="mt-1 text-xs font-medium text-slate-500">{label}</p></div>)}
        </div>
      </section>

      <Reveal><section className="mx-auto grid max-w-7xl gap-12 px-5 py-24 sm:px-8 lg:grid-cols-[.8fr_1.2fr] lg:items-center"><div className="relative mx-auto aspect-[4/5] w-full max-w-sm overflow-hidden rounded-[2rem] bg-slate-900">{data.profile?.user.image ? <Image src={data.profile.user.image} alt={`Foto ${teacherName}`} fill sizes="(max-width: 1024px) 100vw, 384px" unoptimized className="object-cover" /> : <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_30%,rgba(16,185,129,.45),transparent_45%)]" />}<div className="absolute inset-x-6 bottom-6 rounded-2xl border border-white/10 bg-slate-950/50 p-5 backdrop-blur"><p className="text-xs uppercase tracking-widest text-emerald-300">{teacherTitle}</p><p className="mt-2 text-xl font-bold text-white">{teacherName}</p></div></div><div><SectionHeading eyebrow="Tentang Guru" title="Mengajar teknologi melalui praktik yang bermakna" description={teacherBio} /><div className="mt-8 flex flex-wrap gap-2">{teacherSkills.map((skill) => <span key={skill} className="rounded-full border border-slate-200 px-3 py-1.5 text-sm text-slate-600 dark:border-slate-700 dark:text-slate-300">{skill}</span>)}</div><Link href="/tentang" className="mt-8 inline-flex items-center gap-2 font-bold text-emerald-600 hover:text-emerald-700">Kenali profil lengkap <ArrowUpRight className="size-4" /></Link></div></section></Reveal>

      <Reveal><section className="bg-slate-100/70 py-24 dark:bg-slate-900/40"><div className="mx-auto max-w-7xl px-5 sm:px-8"><SectionHeading eyebrow="Materi Terbaru" title="Belajar dari fondasi, tumbuh lewat praktik" description="Materi publik terbaru akan tampil otomatis setelah dipublikasikan oleh guru." />{data.materials.length ? <div className="mt-10 grid gap-5 md:grid-cols-3">{data.materials.map((material) => <article key={material.id} className="rounded-2xl border border-slate-200 bg-white p-6 dark:border-slate-800 dark:bg-slate-950"><p className="text-xs font-bold text-emerald-600">{material.class.name} · Semester {material.semester}</p><h3 className="mt-3 text-xl font-bold">{material.title}</h3><p className="mt-3 line-clamp-3 text-sm leading-6 text-slate-500">{material.description ?? "Materi pembelajaran RPL."}</p><p className="mt-6 text-xs font-semibold text-slate-400">{material.subject.name}</p></article>)}</div> : <div className="mt-10 border-y border-dashed border-slate-300 py-12 text-center dark:border-slate-700"><BookOpen className="mx-auto size-7 text-slate-400" /><p className="mt-3 font-semibold">Belum ada materi yang dipublikasikan</p><p className="mt-1 text-sm text-slate-500">Konten akan muncul dari database, bukan data contoh.</p></div>}</div></section></Reveal>

      <Reveal><section className="mx-auto max-w-7xl px-5 py-24 sm:px-8"><div className="grid gap-12 lg:grid-cols-[.7fr_1.3fr]"><SectionHeading eyebrow="Learning Journey RPL" title="Jalur belajar yang terarah" description="Roadmap dikelola melalui database agar selalu selaras dengan kebutuhan belajar siswa." /><div>{data.roadmap.length ? <ol className="grid gap-3 sm:grid-cols-2">{data.roadmap.map((item, index) => <li key={item.id} className="flex items-center gap-4 border-b border-slate-200 py-4 dark:border-slate-800"><span className="text-3xl font-black text-emerald-500/30">{String(index + 1).padStart(2, "0")}</span><div><p className="font-bold">{item.title}</p><p className="text-sm text-slate-500">{item.technology.name}</p></div></li>)}</ol> : <div className="rounded-3xl border border-dashed border-slate-300 p-10 text-center dark:border-slate-700"><p className="font-semibold">Roadmap belum diterbitkan</p><p className="mt-2 text-sm text-slate-500">Alur pembelajaran akan disusun dari dashboard.</p></div>}</div></div></section></Reveal>

      <section className="bg-slate-950 py-24 text-white"><div className="mx-auto max-w-7xl px-5 sm:px-8"><SectionHeading eyebrow="Karya & Dokumentasi" title="Ruang tumbuh untuk setiap proses" description="Project, galeri, artikel, dan prestasi terbaru ditampilkan langsung dari database." /><div className="mt-14 grid gap-px overflow-hidden rounded-3xl bg-slate-800 sm:grid-cols-2">{featuredContent.map(({ icon: Icon, label, title, description, media, meta, href, empty }) => <Link key={label} href={href} className="group relative min-h-72 overflow-hidden bg-slate-950 p-8 transition hover:bg-slate-900">{media && <Image src={media} alt="" fill sizes="(max-width: 640px) 100vw, 50vw" unoptimized className="object-cover opacity-20 transition duration-500 group-hover:scale-105 group-hover:opacity-30" />}<div className="relative z-10 flex h-full flex-col"><Icon className="size-6 text-emerald-400" /><p className="mt-5 text-xs font-bold uppercase tracking-widest text-emerald-400">{label}</p><h3 className="mt-2 text-xl font-bold">{title ?? empty}</h3>{description && <p className="mt-3 line-clamp-3 text-sm leading-6 text-slate-400">{description}</p>}<span className="mt-auto inline-flex items-center gap-2 pt-6 text-xs font-semibold uppercase tracking-wider text-slate-400">{meta ?? "Lihat semua"}<ArrowUpRight className="size-4 transition group-hover:-translate-y-0.5 group-hover:translate-x-0.5" /></span></div></Link>)}</div></div></section>

      <Reveal><section className="mx-auto max-w-7xl px-5 py-24 sm:px-8"><SectionHeading eyebrow="Teknologi RPL" title="Perangkat untuk mengubah ide menjadi solusi" align="center" />{data.technologies.length ? <div className="mx-auto mt-10 flex max-w-4xl flex-wrap justify-center gap-3">{data.technologies.map((technology) => <span key={technology.id} className="rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-sm font-semibold shadow-sm dark:border-slate-800 dark:bg-slate-900">{technology.name}</span>)}</div> : <p className="mt-8 text-center text-sm text-slate-500">Teknologi akan tampil setelah dikelola melalui dashboard.</p>}</section></Reveal>

      <section className="px-5 pb-24 sm:px-8"><div className="mx-auto max-w-7xl overflow-hidden rounded-[2rem] bg-emerald-500 px-6 py-14 text-center text-white sm:px-12"><p className="text-xs font-bold uppercase tracking-[0.22em] text-emerald-950/60">Mulai perjalananmu</p><h2 className="mx-auto mt-4 max-w-2xl text-3xl font-black tracking-tight sm:text-5xl">Teknologi dipelajari dengan membangun.</h2><p className="mx-auto mt-5 max-w-xl text-emerald-950/70">Pelajari materi yang tersedia, lalu lihat penerapannya melalui karya siswa.</p><div className="mt-8 flex flex-wrap justify-center gap-3"><Link href="/materi" className="rounded-xl bg-slate-950 px-6 py-3 text-sm font-bold text-white transition hover:bg-slate-800">Lihat Materi</Link><Link href="/project" className="rounded-xl border border-emerald-950/20 bg-white/20 px-6 py-3 text-sm font-bold text-emerald-950 transition hover:bg-white/35">Jelajahi Project Siswa</Link></div></div></section>
    </main>
  );
}