import { lazy, Suspense, useEffect } from 'react';
import { useParams } from 'react-router';
import { api } from '../utils/api';

const CONTENT_MAP: Record<string, React.LazyExoticComponent<React.ComponentType>> = {
  'env-intro': lazy(() => import('../content/DevEnvIntro')),
  'initial-setup': lazy(() => import('../content/InitialSetup')),
  'gitea-usage': lazy(() => import('../content/GiteaUsage')),
  'nexus-usage': lazy(() => import('../content/NexusUsage')),
  'git-workflow': lazy(() => import('../content/GitWorkflow')),
  'chat-bot': lazy(() => import('../content/ChatBotIntegration')),
  'starting-project': lazy(() => import('../content/StartingProject')),
  'design-system': lazy(() => import('../content/DesignSystem')),
  'ci-cd': lazy(() => import('../content/CiCdGuide')),
};

export function GuidePage() {
  const { section } = useParams<{ section: string }>();
  const Content = section ? CONTENT_MAP[section] : null;

  useEffect(() => {
    if (section) {
      api.post('/activity/track', { pagePath: `/dev/${section}` }).catch(() => {});
    }
  }, [section]);

  if (!Content) {
    return (
      <div className="max-w-4xl mx-auto py-12 px-6">
        <h1 className="text-3xl font-bold text-text-primary mb-4">페이지를 찾을 수 없습니다</h1>
        <p className="text-text-secondary">요청한 가이드 섹션이 존재하지 않습니다.</p>
      </div>
    );
  }

  return (
    <Suspense
      fallback={
        <div className="flex items-center justify-center py-20">
          <div className="animate-spin h-6 w-6 border-3 border-accent border-t-transparent rounded-full" />
        </div>
      }
    >
      <Content />
    </Suspense>
  );
}