import CreateProject from '@/components/CreateProject';
import { getUserProjects } from '@/server/actions'
import { LogoutLink, getKindeServerSession } from '@kinde-oss/kinde-auth-nextjs/server';

export default async function page() {
  /**
   * @type Project[]
   * @typedef Project
   * @property {string} id
   * @property {string} name
   * @property {string} description
   * @property {string} kinde_owner_id
   */
  const projects = await getUserProjects()
  const { getUser } = getKindeServerSession()
  const user = await getUser()
  console.log(projects);

  return (
    <div className='container mx-auto pt-10'>
        <h1 className='text-3xl font-bold'>Dashboard</h1>
        <p className='text-xl text-gray-400'>
            Welcome back, {user?.given_name ?? "No name"}!
        </p>
        <LogoutLink className='text-blue-500'>Logout</LogoutLink>
        <div className='mt-10'>
            <h2 className='text-2xl font-bold'>Your Projects</h2>
            
           <CreateProject user_id={user.id} />

            <ul>
                {projects.map((project) => (
                    <li key={project.id} className='mt-3 bg-[#1a1b1b] rounded-md p-2'>
                        {project?.kinde_owner_id === user?.id && (
                            <span className='text-sm font-bold text-gray-100 bg-green-500 rounded-2xl p-2'>Owner</span>
                        )}
                        <h3 className='text-xl font-bold'>{project?.name}</h3>
                        <p className='text-gray-400'>{project?.description}</p>
                        <a href={`/dash/editor/${project?.id}`} className='text-blue-500'>View Project</a>
                    </li>
                ))}

                {projects.length === 0 && (
                    <p className='text-gray-400'>You don't have any projects yet.</p>
                )}              
            </ul>
        </div>
    </div>
  )
}