import { getServerSession } from "next-auth/next";
import { authOptions } from "@/lib/auth";
import { redirect } from "next/navigation";
import { User, LogOut, Settings } from "lucide-react";
import LogoutButton from "./LogoutButton";

export const metadata = {
  title: "Member Area | Ranata Tour",
};

export default async function MemberPage() {
  const session = await getServerSession(authOptions);

  if (!session) {
    redirect("/login");
  }

  return (
    <section className="min-h-screen bg-slate-50 py-24">
      <div className="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
        <div className="mb-8">
          <h1 className="text-3xl font-bold text-slate-900">Dashboard Member</h1>
          <p className="text-slate-500 mt-1">Selamat datang kembali, {session.user?.name}!</p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {/* Sidebar / Profile Card */}
          <div className="md:col-span-1">
            <div className="bg-white rounded-2xl p-6 shadow-sm border border-slate-200">
              <div className="flex flex-col items-center text-center">
                <div className="w-24 h-24 bg-red-50 rounded-full flex items-center justify-center mb-4 text-merah-ranata">
                  <User className="w-10 h-10" />
                </div>
                <h2 className="text-lg font-bold text-slate-900">{session.user?.name}</h2>
                <p className="text-sm text-slate-500 mb-6">{session.user?.email}</p>

                <div className="w-full flex flex-col gap-2">
                  <button className="w-full flex items-center gap-2 justify-center py-2.5 px-4 rounded-xl text-sm font-medium text-slate-700 bg-slate-50 hover:bg-slate-100 border border-slate-200 transition">
                    <Settings className="w-4 h-4" /> Edit Profil
                  </button>
                  <LogoutButton />
                </div>
              </div>
            </div>
          </div>

          {/* Main Content */}
          <div className="md:col-span-2 space-y-6">
            <div className="bg-white rounded-2xl p-8 shadow-sm border border-slate-200">
              <h3 className="text-xl font-bold text-slate-900 mb-4">Riwayat Pesanan</h3>
              <div className="flex flex-col items-center justify-center py-12 text-center">
                <div className="w-16 h-16 bg-slate-50 rounded-full flex items-center justify-center mb-4 text-slate-400">
                  <User className="w-8 h-8" />
                </div>
                <p className="text-slate-500 font-medium">Belum ada riwayat pesanan.</p>
                <p className="text-sm text-slate-400 mt-1">Pesanan Anda akan muncul di sini setelah Anda melakukan pemesanan.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}