'use client';
import { Button } from '@/components/ui/button';
import { useApiWithToast } from '@/src/hooks/useApiWithToast';
import { ProjectService, useProjects } from '@/src/services/ProjectService';
import { Column } from '@/src/types/admin';
import { Project } from '@/src/types/project';
import Image from 'next/image';
import { useState } from 'react';
import { AdminTable } from './common/AdminTable';
import { FaTrashAlt } from 'react-icons/fa';

export function AdminProjectsTable() {
  const [searchTerm, setSearchTerm] = useState('');
  const [selectedProject, setSelectedProject] = useState<Project | undefined>(undefined);
  const [page, setPage] = useState(1);
  const { projects, isLoading, mutate, pagination } = useProjects(searchTerm, page);
  const { handle, isLoading: isDeleting } = useApiWithToast();

  const columns: Column<Project>[] = [
    {
      header: 'Project',
      cell: (project) => (
        <div className='flex items-center gap-3'>
          <div className='h-10 w-10 rounded overflow-hidden relative bg-neutral-700'>
            {project.image && <Image src={project.image} alt={project.title} fill className='object-cover' />}
          </div>
          <div>
            <p className='font-medium'>{project.title}</p>
            <p className='text-xs text-neutral-400 truncate max-w-xs'>
              {project.description?.substring(0, 50)}
              {project.description?.length && project.description.length > 50 ? '...' : ''}
            </p>
          </div>
        </div>
      ),
    },
    {
      header: 'Technologies',
      cell: (project) => (
        <div className='flex flex-wrap gap-1'>
          {project.technologies.slice(0, 3).map((tech) => (
            <span key={tech} className='px-2 py-1 bg-neutral-700 text-neutral-300 rounded-full text-xs'>
              {tech}
            </span>
          ))}
          {project.technologies.length > 3 && (
            <span className='px-2 py-1 bg-neutral-700 text-neutral-300 rounded-full text-xs'>
              +{project.technologies.length - 3}
            </span>
          )}
        </div>
      ),
    },
    {
      header: 'Actions',
      align: 'right',
      cell: (project) => (
        <Button variant='ghost' size='sm' onClick={() => setSelectedProject(project)}>
          <FaTrashAlt className='h-4 w-4' />
        </Button>
      ),
    },
  ];

  return (
    <AdminTable<Project>
      title='Projects'
      data={projects}
      isLoading={isLoading}
      columns={columns}
      searchTerm={searchTerm}
      onSearchChange={setSearchTerm}
      idField='id'
      selectedItem={selectedProject}
      onModalConfirm={async (project) => {
        await handle(ProjectService.deleteProject(project.id), { mutate: () => mutate() });
      }}
      onClose={() => setSelectedProject(undefined)}
      isDeleting={isDeleting}
      modalTitle='Delete Project'
      modalDescription='Are you sure you want to delete this project? This action cannot be undone.'
      onPageChange={setPage}
      pagination={pagination}
    />
  );
}
