import { redirect } from 'next/navigation';
import type { Metadata } from 'next';

import { getPortalSession } from '@/lib/portal/auth';
import { ChangePasswordForm } from '@/components/portal/change-password-form';

export const metadata: Metadata = { title: 'Profile' };

export default async function PortalProfilePage() {
  const session = await getPortalSession();
  if (!session) redirect('/portal/login');

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-semibold text-gray-900">Profile</h1>
        <p className="text-sm text-gray-500 mt-1">
          Read-only contact details and self-service password change.
        </p>
      </div>

      <div className="bg-white rounded-lg border p-6 space-y-2 text-sm">
        <div className="flex items-baseline justify-between">
          <span className="text-gray-500">Email</span>
          <span className="font-medium">{session.email}</span>
        </div>
        <p className="text-xs text-gray-400 pt-1">
          To update name, phone, or address, please contact your port team - they keep the records
          authoritative.
        </p>
      </div>

      <div className="bg-white rounded-lg border p-6">
        <h2 className="text-base font-semibold text-gray-900 mb-1">Change password</h2>
        <p className="text-sm text-gray-500 mb-4">
          You&rsquo;ll need your current password to confirm.
        </p>
        <ChangePasswordForm />
      </div>
    </div>
  );
}
