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;
