import type { Metadata } from "next";
import { eq } from "drizzle-orm";
import { UserCircle } from "lucide-react";
import { requireUser } from "@/lib/auth/admin-guard";
import { db } from "@/lib/db/client";
import { users } from "@/lib/db/schema";
import { ProfileForm } from "./ProfileForm";

export const metadata: Metadata = {
  title: "Profile",
  robots: { index: false, follow: false },
};
export const dynamic = "force-dynamic";

export default async function ProfilePage() {
  const session = await requireUser();
  const userId = (session.user as { id?: string }).id;
  if (!userId) return null;

  const [row] = await db
    .select({
      name: users.name,
      country: users.country,
      institution: users.institution,
      professionalRole: users.professionalRole,
      bio: users.bio,
      specialty: users.specialty,
      yearsExperience: users.yearsExperience,
      orcidUrl: users.orcidUrl,
      linkedinUrl: users.linkedinUrl,
      websiteUrl: users.websiteUrl,
      twitterUrl: users.twitterUrl,
      avatarPath: users.avatarPath,
      visibleInDirectory: users.visibleInDirectory,
    })
    .from(users)
    .where(eq(users.id, userId))
    .limit(1);

  if (!row) return null;

  return (
    <>
      <div className="mb-6 flex items-start gap-4">
        <span className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-[var(--color-mist)] text-[var(--color-blue)]">
          <UserCircle className="h-5 w-5" aria-hidden />
        </span>
        <div>
          <div className="text-[11px] font-bold uppercase tracking-[0.15em] text-[var(--color-blue)]">
            Your account
          </div>
          <h1 className="mt-1 font-display text-[28px] md:text-[34px] font-extrabold leading-tight tracking-[-0.02em] text-[var(--color-ink)]">
            Profile
          </h1>
          <p className="mt-2 max-w-xl text-[14px] leading-relaxed text-[var(--color-slate)]">
            Update how you appear to other OrthoGlobe members. Everything
            except the photo and bio defaults to what you entered on
            application.
          </p>
        </div>
      </div>

      <ProfileForm
        name={row.name}
        country={row.country}
        institution={row.institution}
        professionalRole={row.professionalRole}
        bio={row.bio ?? ""}
        specialty={row.specialty ?? ""}
        yearsExperience={row.yearsExperience}
        orcidUrl={row.orcidUrl}
        linkedinUrl={row.linkedinUrl}
        websiteUrl={row.websiteUrl}
        twitterUrl={row.twitterUrl}
        avatarPath={row.avatarPath}
        visibleInDirectory={row.visibleInDirectory}
      />
    </>
  );
}
