import { mdiChartTimelineVariant } from '@mdi/js';
import axios from 'axios';
import Head from 'next/head';
import { useRouter } from 'next/router';
import React, { ReactElement, useEffect, useState } from 'react';
import { toast, ToastContainer } from 'react-toastify';
import BaseButton from '../../components/BaseButton';
import CardBox from '../../components/CardBox';
import LayoutAuthenticated from '../../layouts/Authenticated';
import SectionMain from '../../components/SectionMain';
import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
import { getPageTitle } from '../../config';

type ProjectItem = {
  id: string;
  name: string;
  slug: string;
  phase: string;
  description?: string | null;
};

const ProjectsListPage = () => {
  const router = useRouter();
  const [projects, setProjects] = useState<ProjectItem[]>([]);
  const [isLoading, setIsLoading] = useState(false);
  const [isCreating, setIsCreating] = useState(false);
  const [isCloning, setIsCloning] = useState(false);
  const [isCloneOpen, setIsCloneOpen] = useState(false);
  const [cloneSourceId, setCloneSourceId] = useState('');

  const loadProjects = async () => {
    setIsLoading(true);
    try {
      const response = await axios.get(
        '/projects?limit=100&page=0&sort=desc&field=updatedAt',
      );
      const rows = Array.isArray(response?.data?.rows)
        ? response.data.rows
        : [];
      setProjects(rows);
      if (rows.length > 0 && !cloneSourceId) {
        setCloneSourceId(rows[0].id);
      }
    } catch (error: any) {
      console.error(
        'Failed to load projects list:',
        error?.message || 'Unknown error',
      );
      toast('Failed to load projects', {
        type: 'error',
        position: 'bottom-center',
      });
    } finally {
      setIsLoading(false);
    }
  };

  useEffect(() => {
    loadProjects();
  }, []);

  const buildNewProjectDraft = () => {
    const stamp = Date.now();
    return {
      name: `New Project ${new Date(stamp).toISOString().slice(0, 16).replace('T', ' ')}`,
      slug: `project-${stamp}`,
      description: '',
      phase: 'dev',
    };
  };

  const handleOpenProjectAssets = async (projectId: string) => {
    await router.push(`/projects/${projectId}`);
  };

  const handleCreateNewProject = async () => {
    setIsCreating(true);
    try {
      const response = await axios.post('/projects', {
        data: buildNewProjectDraft(),
      });
      const createdId = response?.data?.id;

      if (!createdId) {
        throw new Error('Project was created but id is missing in response');
      }

      await router.push(`/projects/${createdId}`);
    } catch (error: any) {
      console.error(
        'Failed to create project:',
        error?.message || 'Unknown error',
      );
      toast('Failed to create project', {
        type: 'error',
        position: 'bottom-center',
      });
    } finally {
      setIsCreating(false);
    }
  };

  const handleCloneProject = async () => {
    if (!cloneSourceId) {
      toast('Select source project first', {
        type: 'warning',
        position: 'bottom-center',
      });
      return;
    }

    setIsCloning(true);
    try {
      const response = await axios.post(`/projects/${cloneSourceId}/clone`);
      const createdId = response?.data?.id;

      if (!createdId) {
        throw new Error('Cloned project id is missing in response');
      }

      await router.push(`/projects/${createdId}`);
    } catch (error: any) {
      console.error(
        'Failed to clone project:',
        error?.message || 'Unknown error',
      );
      toast('Failed to clone project', {
        type: 'error',
        position: 'bottom-center',
      });
    } finally {
      setIsCloning(false);
    }
  };

  return (
    <>
      <Head>
        <title>{getPageTitle('Projects')}</title>
      </Head>
      <SectionMain>
        <SectionTitleLineWithButton
          icon={mdiChartTimelineVariant}
          title='Projects'
          main
        >
          {''}
        </SectionTitleLineWithButton>

        <CardBox
          className='mb-6'
          cardBoxClassName='flex flex-wrap items-center gap-3'
        >
          <BaseButton
            color='info'
            label={isCreating ? 'Creating...' : 'New Project'}
            onClick={handleCreateNewProject}
            disabled={isCreating || isCloning}
          />
          <BaseButton
            color='lightDark'
            label='Clone Project'
            onClick={() => setIsCloneOpen((prev) => !prev)}
            disabled={isCreating || isCloning || projects.length === 0}
          />

          {isCloneOpen && (
            <div className='flex items-center gap-2 ml-0 md:ml-2 w-full md:w-auto'>
              <select
                className='w-full md:w-80 border border-gray-300 rounded px-2 py-2 bg-white dark:bg-dark-800'
                value={cloneSourceId}
                onChange={(event) => setCloneSourceId(event.target.value)}
                disabled={isCreating || isCloning || projects.length === 0}
              >
                {projects.map((project) => (
                  <option key={project.id} value={project.id}>
                    {project.name}
                  </option>
                ))}
              </select>
              <BaseButton
                color='success'
                label={isCloning ? 'Cloning...' : 'Create Clone'}
                onClick={handleCloneProject}
                disabled={isCreating || isCloning || !cloneSourceId}
              />
            </div>
          )}
        </CardBox>

        <div className='grid grid-cols-1 lg:grid-cols-2 2xl:grid-cols-3 gap-4'>
          {!isLoading &&
            projects.map((project) => (
              <button
                key={project.id}
                type='button'
                className='text-left'
                onClick={() => handleOpenProjectAssets(project.id)}
              >
                <CardBox className='h-full hover:shadow-md transition-shadow'>
                  <h3 className='text-lg font-semibold'>{project.name}</h3>
                  <p className='text-sm text-gray-500 mt-1'>
                    Slug: {project.slug}
                  </p>
                  <p className='text-sm text-gray-500 mt-1'>
                    Phase: {project.phase}
                  </p>
                  {!!project.description && (
                    <p className='text-sm text-gray-600 mt-3 line-clamp-3'>
                      {project.description}
                    </p>
                  )}
                </CardBox>
              </button>
            ))}

          {!isLoading && projects.length === 0 && (
            <CardBox>
              <p>No projects found.</p>
            </CardBox>
          )}
        </div>
      </SectionMain>
      <ToastContainer />
    </>
  );
};

ProjectsListPage.getLayout = function getLayout(page: ReactElement) {
  return (
    <LayoutAuthenticated permission='READ_PROJECTS'>{page}</LayoutAuthenticated>
  );
};

export default ProjectsListPage;
