import InputReadOnly from '@/components/input-read-only';
import { Badge } from '@/components/ui/badge';
import UserRejectDialog from '@/components/user/user-reject-dialog';
import { UserVerifyDialog } from '@/components/user/user-verify-dialog';

import prisma from '@/lib/db';
import React from 'react'

export default async function VerifyUserPage({
  params,
}: {
  params: Promise<{
    userId: string;
  }>;
}) {
  const userId = (await params).userId
  const dbUser = await prisma.user.findUnique({
    where: {
      id: userId,
    },
  })
  return (
    <div>
      <div className='flex items-center justify-between text-gray-500 text-2xl font-bold title-bg py-4 px-2 mb-4'>
        <h3 className="">
          Verify user
        </h3>
        <div className='flex gap-2'>
          {dbUser && !dbUser?.verified && <UserVerifyDialog user={dbUser} />}
          {dbUser && !dbUser?.verified && <UserRejectDialog user={dbUser} />}
          {dbUser?.verified && <Badge variant={"secondary"} className='bg-lime-500'>Verified</Badge>}
        </div>

      </div>
      <div className='grid grid-cols-1 md:grid-cols-2 gap-4 items-start justify-start'>
        <div id="database-information">
          <h4 className='p-2 rounded font-semibold'>Database Information</h4>
          <div className='shadow p-2 rounded-md space-y-1 my-2 grid grid-cols-1 md:grid-cols-2 gap-2'>
            <InputReadOnly label="Name" value={dbUser?.name ?? ""} />
            <InputReadOnly label="ID Card" value={dbUser?.id_card ?? ""} />
            <InputReadOnly label="Address" value={dbUser?.address ?? ""} />
            <InputReadOnly label="DOB" value={new Date(dbUser?.dob ?? "").toLocaleDateString("en-US", {
              month: "short",
              day: "2-digit",
              year: "numeric",
            })} />
            <InputReadOnly label="Phone Number" value={dbUser?.phoneNumber ?? ""} />
          </div>
        </div>
        <div id="national-information">
          <h4 className='p-2 rounded font-semibold'>National Information</h4>
          <div className='shadow p-2 rounded-md space-y-1 my-2 grid grid-cols-1 md:grid-cols-2 gap-2'>
            <InputReadOnly label="Name" value={dbUser?.name ?? ""} />
            <InputReadOnly label="ID Card" value={dbUser?.id_card ?? ""} />
            <InputReadOnly label="Address" value={dbUser?.address ?? ""} />
            <InputReadOnly label="DOB" value={new Date(dbUser?.dob ?? "").toLocaleDateString("en-US", {
              month: "short",
              day: "2-digit",
              year: "numeric",
            })} />
            <InputReadOnly label="Phone Number" value={dbUser?.phoneNumber ?? ""} />
          </div>
        </div>
      </div>

    </div>
  )
}