import { createFileRoute } from '@tanstack/react-router';
import { z } from 'zod';
import { FolderKanban } from 'lucide-react';
import { ProjectSidebar } from '@/components/projects/ProjectSidebar';
import { ProjectDetail } from '@/components/projects/ProjectDetail';
import { Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription } from '@/components/ui/empty';
import { useTranslation } from 'react-i18next';

const searchSchema = z.object({
  projectId: z.string().optional(),
  tab: z.string().optional(),
});

export const Route = createFileRoute('/projects')({
  validateSearch: searchSchema,
  component: ProjectsPage,
});

function ProjectsPage() {
  const { t } = useTranslation();
  const { projectId, tab } = Route.useSearch();
  const navigate = Route.useNavigate();

  function handleSelectProject(id: string) {
    void navigate({ search: { projectId: id } });
  }

  return (
    <div className="flex h-full min-h-0">
      <ProjectSidebar
        selectedProjectId={projectId}
        onSelectProject={handleSelectProject}
      />
      <div className="flex-1 min-h-0 overflow-hidden flex flex-col">
        {projectId ? (
          <ProjectDetail projectId={projectId} initialTab={tab} />
        ) : (
          <Empty className="h-full">
            <EmptyHeader>
              <EmptyMedia variant="icon">
                <FolderKanban />
              </EmptyMedia>
              <EmptyTitle>{t('projects.noProjectSelected')}</EmptyTitle>
              <EmptyDescription>
                {t('projects.noProjectSelectedDescription')}
              </EmptyDescription>
            </EmptyHeader>
          </Empty>
        )}
      </div>
    </div>
  );
}
