'use client';
import { Badge } from '@/components/ui/badge';
import { FaCodeBranch, FaGlobe } from 'react-icons/fa';
import { getGitProviderIcon } from '@/components/icons/GitProviderIcons';
import { VercelProjectProps } from '@/types/deployment';

export function DeploymentOverview({ project }: VercelProjectProps) {
  const latestDeployment = project.latestDeployments?.[0];
  return (
    <div>
      <h3 className='text-xl mt-4 font-semibold mb-4 text-white'>Project details</h3>
      <div className='grid gap-6 text-white'>
        <div className='flex items-center gap-4 justify-between border-[1px] p-2 rounded-lg border-neutral-300'>
          <div className='flex flex-row gap-2 items-center'>
            {getGitProviderIcon(project.link?.type)}
            <div>
              <h3 className='text-lg font-semibold'>{project.name}</h3>
            </div>
          </div>
          <Badge variant='outline' className='ml-aut bg-neutral-800 text-neutral-300'>
            {project.framework ?? 'Unknown Framework'}
          </Badge>
        </div>

        <div className='grid gap-4'>
          <div>
            <h4 className='text-md font-medium mb-2 text-neutral-300'>Production Branch</h4>
            <div className='flex items-center gap-2 text-sm'>
              <FaCodeBranch />
              <span>{project.link?.productionBranch}</span>
            </div>
          </div>

          <div>
            <h4 className='text-md font-medium mb-2 text-neutral-300'>Domains</h4>
            <div className='space-y-2'>
              {latestDeployment?.alias?.map((alias) => (
                <a
                  key={alias}
                  href={`https://${alias}`}
                  target='_blank'
                  rel='noopener noreferrer'
                  className='flex items-center gap-2 text-sm hover:text-neutral-300'
                >
                  <FaGlobe />
                  {alias}
                </a>
              ))}
            </div>
          </div>

          <div>
            <h4 className='text-md font-medium mb-2 text-neutral-300'>Latest Deployment</h4>
            <div className='space-y-1 text-sm'>
              <div>
                Status: <Badge>{latestDeployment?.readyState ?? 'Unknown'}</Badge>
              </div>
              <p>Created: {new Date(latestDeployment?.createdAt ?? 0).toLocaleString()}</p>
              <p>Message: {latestDeployment?.meta?.githubCommitMessage ?? 'No message'}</p>
            </div>
          </div>
        </div>

        <div className='rounded-lg'>
          <p className='text-md text-neutral-400'>
            To update the deployment, push your changes to the{' '}
            <code className='bg-neutral-700 px-2 py-1 rounded'>{project.link?.productionBranch}</code> branch. Vercel
            will automatically deploy your changes.
          </p>
        </div>
      </div>
    </div>
  );
}
