import { FormStatus } from "@/components/dashboard/form-status";
import { requireTeacher } from "@/lib/auth/session";
import { prisma } from "@/lib/db/prisma";
import { updateProfile } from "../actions";
import Image from "next/image";

export default async function ProfilePage({ searchParams }: { searchParams: Promise<{ status?: string }> }) {
  const session = await requireTeacher(); const { status } = await searchParams;
  const profile = await prisma.teacherProfile.findUnique({ where: { userId: session.user.id }, include: { user: { select: { name: true, email: true, image: true } } } });
  const social = profile?.socialLinks && typeof profile.socialLinks === "object" && !Array.isArray(profile.socialLinks) ? profile.socialLinks as Record<string, unknown> : {};
  return <div className="mx-auto max-w-5xl"><p className="text-xs font-bold uppercase tracking-[.2em] text-emerald-600">Identitas publik</p><h1 className="mt-2 text-3xl font-black">Profil Guru</h1><p className="mt-2 text-slate-500">Informasi ini ditampilkan pada halaman publik WEBKU.</p><div className="mt-8"><FormStatus status={status} /><form action={updateProfile} className="space-y-6"><FormSection title="Foto profil"><div className="flex flex-col gap-5 sm:flex-row sm:items-center">{profile?.user.image ? <Image src={profile.user.image} alt="Foto profil guru saat ini" width={128} height={128} unoptimized className="size-32 rounded-2xl border border-slate-200 object-cover dark:border-slate-700" /> : <div className="grid size-32 place-items-center rounded-2xl bg-emerald-100 text-3xl font-black text-emerald-700 dark:bg-emerald-950 dark:text-emerald-300">{(profile?.user.name ?? session.user.name ?? "G").split(" ").map((part) => part[0]).join("").slice(0, 2).toUpperCase()}</div>}<div><label className="block text-sm font-semibold" htmlFor="photo">Unggah foto baru</label><input id="photo" name="photo" type="file" accept="image/jpeg,image/png,image/webp" className="mt-2 block max-w-full text-sm file:mr-4 file:rounded-lg file:border-0 file:bg-emerald-500 file:px-4 file:py-2 file:font-bold file:text-white" /><p className="mt-2 text-xs text-slate-500">Format JPEG, PNG, atau WebP. Maksimal 5 MB. Gunakan foto persegi agar hasil terbaik.</p></div></div></FormSection><FormSection title="Informasi utama"><div className="grid gap-5 sm:grid-cols-2"><Field name="name" label="Nama lengkap" defaultValue={profile?.user.name ?? session.user.name ?? ""} required /><Field name="title" label="Profesi / gelar" defaultValue={profile?.title ?? ""} /><Field name="school" label="Sekolah" defaultValue={profile?.school ?? ""} /><Field name="department" label="Jurusan" defaultValue={profile?.department ?? ""} /><Field name="publicEmail" label="Email publik" type="email" defaultValue={profile?.publicEmail ?? ""} /><div className="sm:col-span-2"><TextArea name="bio" label="Bio" defaultValue={profile?.bio ?? ""} /></div></div></FormSection><FormSection title="Tautan sosial"><div className="grid gap-5 sm:grid-cols-2">{["github", "youtube", "instagram", "linkedin"].map((name) => <Field key={name} name={name} label={name[0].toUpperCase() + name.slice(1)} type="url" defaultValue={typeof social[name] === "string" ? String(social[name]) : ""} placeholder="https://" />)}</div></FormSection><button className="rounded-xl bg-emerald-500 px-6 py-3 font-bold text-white hover:bg-emerald-600">Simpan profil</button></form></div></div>;
}

function FormSection({ title, children }: { title: string; children: React.ReactNode }) { return <section className="rounded-2xl border border-slate-200 bg-white p-6 dark:border-slate-800 dark:bg-slate-900"><h2 className="mb-6 font-bold">{title}</h2>{children}</section>; }
function Field({ label, ...props }: React.InputHTMLAttributes<HTMLInputElement> & { label: string }) { return <label className="block"><span className="text-sm font-semibold">{label}</span><input {...props} className="mt-2 h-11 w-full rounded-xl border border-slate-200 bg-transparent px-4 outline-none focus:border-emerald-500 focus:ring-3 focus:ring-emerald-500/10 dark:border-slate-700" /></label>; }
function TextArea({ label, ...props }: React.TextareaHTMLAttributes<HTMLTextAreaElement> & { label: string }) { return <label className="block"><span className="text-sm font-semibold">{label}</span><textarea {...props} rows={6} className="mt-2 w-full resize-y rounded-xl border border-slate-200 bg-transparent px-4 py-3 outline-none focus:border-emerald-500 focus:ring-3 focus:ring-emerald-500/10 dark:border-slate-700" /></label>; }