import { useMemo } from 'react';
import { useNavigate } from 'react-router-dom';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import CircularProgress from '@mui/material/CircularProgress';
import { useProgress } from '../hooks/useProgress';
import { getTopics, getSections, getLessonsForTopic } from '../content/loader';
import { SkillNode } from '../components/home/SkillNode';
import { StreakBanner } from '../components/home/StreakBanner';
import { Rambi } from '../components/mascot/Rambi';

// Vertical spacing between nodes
const NODE_GAP = 120;
// Height reserved for a section banner
const SECTION_BANNER_HEIGHT = 70;
// Max horizontal offset from center for the sine wave
const WAVE_AMPLITUDE = 80;
// How wide the path container is
const PATH_WIDTH = 300;

export function HomePage() {
  const navigate = useNavigate();
  const { progress, loading } = useProgress();
  const topics = useMemo(() => getTopics(), []);
  const sections = useMemo(() => getSections(), []);

  const completedLessonIds = useMemo(() => {
    if (!progress) return new Set<string>();
    return new Set(
      progress.lessons.filter((l) => l.completed).map((l) => l.lesson_id),
    );
  }, [progress]);

  const completedTopicIds = useMemo(() => {
    const completed = new Set<string>();
    for (const topic of topics) {
      const lessons = getLessonsForTopic(topic.id);
      if (
        lessons.length > 0 &&
        lessons.every((l) => completedLessonIds.has(l.id))
      ) {
        completed.add(topic.id);
      }
    }
    return completed;
  }, [topics, completedLessonIds]);

  function isTopicLocked(topicId: string): boolean {
    const topic = topics.find((t) => t.id === topicId);
    if (!topic) return true;
    if (topic.prerequisites.length === 0) return false;
    return !topic.prerequisites.every((prereq) =>
      completedTopicIds.has(prereq),
    );
  }

  function isTopicActive(topicId: string): boolean {
    if (isTopicLocked(topicId)) return false;
    if (completedTopicIds.has(topicId)) return false;
    return true;
  }

  function getCompletedLessonsForTopic(topicId: string): number {
    const lessons = getLessonsForTopic(topicId);
    return lessons.filter((l) => completedLessonIds.has(l.id)).length;
  }

  function handleTopicClick(topicId: string) {
    const lessons = getLessonsForTopic(topicId);
    const nextLesson = lessons.find((l) => !completedLessonIds.has(l.id));
    const lesson = nextLesson ?? lessons[0];
    if (lesson) {
      navigate(`/lesson/${topicId}/${lesson.id}`);
    }
  }

  // Compute x offset for each node along a sine wave
  function getNodeX(index: number): number {
    return Math.sin(index * 0.9) * WAVE_AMPLITUDE;
  }

  // Build layout items: section banners + topic nodes with computed Y positions
  const sectionMap = useMemo(() => {
    const map = new Map<number, { name: string; description: string }>();
    for (const s of sections) {
      map.set(s.id, { name: s.name, description: s.description });
    }
    return map;
  }, [sections]);

  // Compute Y offset for each topic, inserting section banner space before each section
  const { topicYPositions, sectionBannerPositions, totalHeight } = useMemo(() => {
    const yPositions: number[] = [];
    const bannerPositions: { y: number; sectionId: number }[] = [];
    let currentY = 0;
    const seenSections = new Set<number>();

    for (let i = 0; i < topics.length; i++) {
      const topic = topics[i];
      if (!seenSections.has(topic.section)) {
        seenSections.add(topic.section);
        if (sectionMap.has(topic.section)) {
          bannerPositions.push({ y: currentY, sectionId: topic.section });
          currentY += SECTION_BANNER_HEIGHT;
        }
      }
      yPositions.push(currentY);
      currentY += NODE_GAP;
    }

    return {
      topicYPositions: yPositions,
      sectionBannerPositions: bannerPositions,
      totalHeight: currentY + 60,
    };
  }, [topics, sectionMap]);

  // Node center positions for the SVG path (accounting for section banners)
  const nodePositions = topics.map((_, i) => ({
    x: PATH_WIDTH / 2 + getNodeX(i),
    y: topicYPositions[i] + 45, // 45 = RING_SIZE/2
  }));

  // Build a smooth curve through all node positions
  function buildPath(): string {
    if (nodePositions.length < 2) return '';
    const pts = nodePositions;
    let d = `M ${pts[0].x} ${pts[0].y}`;
    for (let i = 0; i < pts.length - 1; i++) {
      const curr = pts[i];
      const next = pts[i + 1];
      const midY = (curr.y + next.y) / 2;
      d += ` C ${curr.x} ${midY}, ${next.x} ${midY}, ${next.x} ${next.y}`;
    }
    return d;
  }

  if (loading) {
    return (
      <Box
        sx={{
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          flex: 1,
          py: 8,
        }}
      >
        <CircularProgress color="primary" />
      </Box>
    );
  }

  return (
    <Box sx={{ maxWidth: 500, mx: 'auto', p: 3, width: '100%' }}>
      {/* Streak banner */}
      {progress?.stats && progress.stats.streak_days > 0 && (
        <Box sx={{ mb: 3 }}>
          <StreakBanner streak={progress.stats.streak_days} freezes={progress.stats.streak_freezes} />
        </Box>
      )}

      {/* Mascot greeting */}
      <Box
        sx={{
          display: 'flex',
          alignItems: 'center',
          gap: 2,
          mb: 4,
        }}
      >
        <Rambi mood="idle" size={80} />
        <Box>
          <Typography variant="h5">Kamusta! I&apos;m Rambi!</Typography>
          <Typography variant="body2" color="text.secondary">
            Choose a topic to practice
          </Typography>
        </Box>
      </Box>

      {/* Skill path */}
      {topics.length === 0 ? (
        <Box sx={{ textAlign: 'center', py: 6 }}>
          <Typography color="text.secondary">
            No topics available yet. Check back soon!
          </Typography>
        </Box>
      ) : (
        <Box
          sx={{
            position: 'relative',
            width: PATH_WIDTH,
            height: totalHeight,
            mx: 'auto',
          }}
        >
          {/* SVG connector path */}
          <svg
            width={PATH_WIDTH}
            height={totalHeight}
            style={{ position: 'absolute', top: 0, left: 0, pointerEvents: 'none' }}
          >
            <path
              d={buildPath()}
              fill="none"
              stroke="rgba(255,255,255,0.1)"
              strokeWidth={4}
              strokeDasharray="8 8"
              strokeLinecap="round"
            />
          </svg>

          {/* Section banners */}
          {sectionBannerPositions.map(({ y, sectionId }) => {
            const section = sectionMap.get(sectionId);
            if (!section) return null;
            return (
              <Box
                key={`section-${sectionId}`}
                sx={{
                  position: 'absolute',
                  top: y,
                  left: 0,
                  right: 0,
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  height: SECTION_BANNER_HEIGHT,
                }}
              >
                <Box
                  sx={{
                    bgcolor: 'rgba(206, 130, 255, 0.12)',
                    border: '1px solid rgba(206, 130, 255, 0.3)',
                    borderRadius: 3,
                    px: 3,
                    py: 1,
                    textAlign: 'center',
                  }}
                >
                  <Typography
                    variant="body2"
                    sx={{ color: '#CE82FF', fontWeight: 700, lineHeight: 1.3 }}
                  >
                    Section {sectionId}: {section.name}
                  </Typography>
                  <Typography variant="caption" sx={{ color: 'text.secondary' }}>
                    {section.description}
                  </Typography>
                </Box>
              </Box>
            );
          })}

          {/* Nodes */}
          {topics.map((topic, i) => {
            const totalLessons = getLessonsForTopic(topic.id).length;
            const completedCount = getCompletedLessonsForTopic(topic.id);
            const locked = isTopicLocked(topic.id);
            const active = isTopicActive(topic.id);
            const x = getNodeX(i);

            return (
              <Box
                key={topic.id}
                sx={{
                  position: 'absolute',
                  top: topicYPositions[i],
                  left: '50%',
                  transform: `translateX(calc(-50% + ${x}px))`,
                }}
              >
                <SkillNode
                  topic={topic}
                  completedLessons={completedCount}
                  totalLessons={totalLessons}
                  locked={locked}
                  active={active}
                  onClick={() => handleTopicClick(topic.id)}
                />
              </Box>
            );
          })}
        </Box>
      )}
    </Box>
  );
}