'use client'

import { useId } from 'react'
import { SecurityCard } from './settings/securityPrimitives.js'
import { AccountSecurity } from './profile/AccountSecurity.js'

export interface ProfileProps {
  onNavigate?: (path: string) => void
  session?: { user?: { name?: string; email?: string; role?: string } }
}

function roleLabel(role?: string): string {
  if (!role) return 'Member'
  return role.charAt(0).toUpperCase() + role.slice(1).toLowerCase()
}

export function Profile({ session }: ProfileProps = {}) {
  const accountHeadingId = useId()
  const user = session?.user

  return (
    <div className="p-3 pr-6 sm:p-4 sm:pr-8">
      <div className="mb-4">
        <h1 className="text-foreground mb-1 text-2xl font-medium">Your profile</h1>
        <p className="text-muted-foreground text-sm">
          Manage your account details and sign-in security.
        </p>
      </div>

      <div className="grid max-w-3xl gap-4">
        <SecurityCard
          headingId={accountHeadingId}
          title="Account"
          description="Your identity within this CMS. Contact an administrator to change your role."
        >
          <dl className="divide-border divide-y text-sm">
            <div className="flex items-center justify-between gap-3 py-2">
              <dt className="text-muted-foreground">Name</dt>
              <dd className="text-foreground">{user?.name ?? '—'}</dd>
            </div>
            <div className="flex items-center justify-between gap-3 py-2">
              <dt className="text-muted-foreground">Email</dt>
              <dd className="text-foreground">{user?.email ?? '—'}</dd>
            </div>
            <div className="flex items-center justify-between gap-3 py-2">
              <dt className="text-muted-foreground">Role</dt>
              <dd className="text-foreground">{roleLabel(user?.role)}</dd>
            </div>
          </dl>
        </SecurityCard>

        <AccountSecurity />
      </div>
    </div>
  )
}
