import type { Metadata } from "next";
import { AtSign, BookOpen, Code2, GraduationCap, MapPin } from "lucide-react";
import { Reveal } from "@/components/home/reveal";
import { getPublicHomeData } from "@/services/public-content";
import Image from "next/image";

export const dynamic = "force-dynamic";

export const metadata: Metadata = {
  title: "Tentang Guru",
  description: "Profil Patawari D., S.Kom, Guru Rekayasa Perangkat Lunak dan pengelola WEBKU.",
};

const defaultSkills = ["Web Development", "PHP", "JavaScript", "TypeScript", "MySQL", "React", "Next.js", "Flutter", "Git", "Arduino", "ESP32", "IoT", "Artificial Intelligence"];

export default async function AboutPage() {
  const { profile } = await getPublicHomeData();
  const skills = Array.isArray(profile?.skills) ? profile.skills.filter((item): item is string => typeof item === "string") : defaultSkills;
  const name = profile?.user.name ?? "Patawari D., S.Kom";

  return (
    <main>
      <section className="relative overflow-hidden border-b border-slate-200 py-20 dark:border-slate-800 sm:py-28">
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_20%_10%,rgba(16,185,129,.13),transparent_35%)]" />
        <div className="relative mx-auto max-w-7xl px-5 sm:px-8"><p className="text-xs font-bold uppercase tracking-[0.24em] text-emerald-600">Tentang Guru</p><h1 className="mt-5 max-w-4xl text-5xl font-black tracking-[-0.04em] text-slate-950 sm:text-7xl dark:text-white">Menghubungkan ruang kelas dengan dunia teknologi.</h1></div>
      </section>

      <Reveal><section className="mx-auto grid max-w-7xl gap-12 px-5 py-20 sm:px-8 lg:grid-cols-[.75fr_1.25fr]"><aside><div className="aspect-[4/5] max-w-md overflow-hidden rounded-[2rem] bg-gradient-to-br from-emerald-400 to-emerald-700 p-6"><div className="relative grid h-full place-items-center overflow-hidden rounded-[1.5rem] border border-white/20 bg-slate-950/10">{profile?.user.image ? <Image src={profile.user.image} alt={`Foto ${name}`} fill sizes="(max-width: 1024px) 100vw, 400px" unoptimized className="object-cover" /> : <div className="text-center"><div className="mx-auto grid size-36 place-items-center rounded-full border-4 border-white/30 bg-white/10 text-5xl font-black text-white">{name.split(" ").map((part) => part[0]).join("").slice(0, 2).toUpperCase()}</div><p className="mt-6 text-lg font-bold text-white">{name}</p><p className="text-sm text-emerald-50">Guru Rekayasa Perangkat Lunak</p></div>}</div></div></aside><div><p className="text-lg font-bold text-emerald-600">{name}</p><h2 className="mt-3 text-3xl font-black tracking-tight sm:text-4xl">{profile?.title ?? "Guru Rekayasa Perangkat Lunak"}</h2><p className="mt-6 text-base leading-8 text-slate-600 dark:text-slate-300">{profile?.bio ?? "Berfokus mendampingi siswa memahami cara kerja teknologi, menyusun solusi secara sistematis, dan menghasilkan karya perangkat lunak yang bermanfaat. Pembelajaran dirancang untuk menyeimbangkan konsep, praktik, kolaborasi, dan karakter profesional."}</p><div className="mt-10 grid gap-4 sm:grid-cols-2"><Info icon={GraduationCap} label="Profesi" value={profile?.title ?? "Guru RPL"} /><Info icon={MapPin} label="Sekolah" value={profile?.school ?? "Belum dicantumkan"} /><Info icon={BookOpen} label="Jurusan" value={profile?.department ?? "Rekayasa Perangkat Lunak"} /><Info icon={AtSign} label="Email publik" value={profile?.publicEmail ?? "Belum dicantumkan"} /></div></div></section></Reveal>

      <section className="bg-slate-950 py-20 text-white"><div className="mx-auto grid max-w-7xl gap-10 px-5 sm:px-8 lg:grid-cols-[.65fr_1.35fr]"><div><Code2 className="size-7 text-emerald-400" /><h2 className="mt-5 text-3xl font-black">Bidang keahlian</h2><p className="mt-4 leading-7 text-slate-400">Teknologi yang digunakan untuk membimbing pembelajaran dan pengembangan project siswa.</p></div><div className="flex flex-wrap content-start gap-3">{skills.map((skill) => <span key={skill} className="rounded-full border border-slate-700 bg-slate-900 px-4 py-2 text-sm font-semibold text-slate-200">{skill}</span>)}</div></div></section>
    </main>
  );
}

function Info({ icon: Icon, label, value }: { icon: typeof GraduationCap; label: string; value: string }) {
  return <div className="border-l-2 border-emerald-500 pl-4"><Icon className="size-4 text-emerald-500" /><p className="mt-3 text-xs font-bold uppercase tracking-wider text-slate-400">{label}</p><p className="mt-1 font-semibold">{value}</p></div>;
}