MathApp_frontend/src/screens/UnitScreen.tsx

import { useState } from 'react';
import { motion } from 'motion/react';
import { Check, CheckCircle2, Circle, Lock, Play, Sparkles } from 'lucide-react';
import { api, type HomeNode } from '@/api';
import { useAppData } from '@/state/AppData';
import { findUnit, nextLessonOf, unitColor, unitProgress } from '@/state/curriculum';
import { useNav } from '@/nav/Navigator';
import { useAsync } from '@/lib/useAsync';
import { Sheet } from '@/components/Sheet';
import { EmptyState, ErrorState, LoadingState, PrimaryButton, ProgressBar, Screen, ScreenHeader } from '@/components/ui';
import { ZigzagPath, zigzagPositions } from '@/components/ZigzagPath';
import { iconFor } from '@/components/NodeIcon';
import { toFa } from '@/lib/format';

const NODE_SIZE = 76;

/** نقشه‌ی جزیره‌های یک فصل، مثلِ مسیرِ دولینگو. */
export function UnitScreen({ unitId }: { unitId: string }) {
  const { home, homeError, refreshHome, companion } = useAppData();
  const [openNode, setOpenNode] = useState<HomeNode | null>(null);
  const found = findUnit(home, unitId);

  if (!found) {
    return (
      <Screen>
        <ScreenHeader title="…" color="#91ADC6" back />
        {homeError ? <ErrorState error={homeError} onRetry={() => void refreshHome()} /> : home ? <EmptyState text="این فصل پیدا نشد" /> : <LoadingState />}
      </Screen>
    );
  }

  const { unit, unitIndex } = found;
  const color = unitColor(unitIndex);
  const progress = unitProgress(unit);
  const points = zigzagPositions(unit.nodes.length, 125, 90);
  const height = points.length ? points[points.length - 1].y + 150 : 400;

  return (
    <Screen className="bg-[#f7f8ff]">
      <ScreenHeader
        title={unit.title}
        subtitle={unit.blurb || `${toFa(progress.done)} از ${toFa(progress.total)} جزیره`}
        color={color}
        back
        mascot={{ char: companion, mood: progress.percent >= 50 ? 'happy' : 'idle', size: 72 }}
      >
        <div className="mt-4">
          <div className="mb-1.5 flex justify-between text-[10px] text-white/75">
            <span>پیشرفتِ تو</span>
            <span>{toFa(progress.percent)}٪</span>
          </div>
          <ProgressBar percent={progress.percent} color="#fff" track="rgba(0,0,0,.1)" height={10} />
        </div>
      </ScreenHeader>

      <div className="flex-1 overflow-y-auto">
        {unit.nodes.length === 0 ? (
          <EmptyState text="این فصل هنوز جزیره‌ای نداره" />
        ) : (
          <div className="relative mx-auto w-full max-w-[400px]" style={{ height }}>
            <ZigzagPath points={points} height={height} colorOf={(i) => (unit.nodes[i].status === 'completed' ? color : null)} />
            {unit.nodes.map((node, i) => {
              const locked = node.status === 'locked';
              const done = node.status === 'completed';
              const current = !locked && !done;
              const Icon = iconFor(node.icon, i);
              return (
                <motion.div
                  key={node.id}
                  initial={{ opacity: 0, scale: 0.7 }}
                  animate={{ opacity: 1, scale: 1 }}
                  transition={{ delay: i * 0.04, type: 'spring', stiffness: 220, damping: 16 }}
                  className="absolute -translate-x-1/2 -translate-y-1/2"
                  style={{ left: `${points[i].x}%`, top: points[i].y }}
                >
                  {current && (
                    <>
                      <div
                        className="absolute -top-14 left-1/2 z-20 -translate-x-1/2 whitespace-nowrap rounded-2xl border-2 bg-white px-3 py-1.5 text-[11px] font-black shadow-lg"
                        style={{ color, borderColor: color }}
                      >
                        {node.title}
                        <span className="absolute -bottom-2 left-1/2 h-3 w-3 -translate-x-1/2 rotate-45 border-b-2 border-r-2 bg-white" style={{ borderColor: color }} />
                      </div>
                      <motion.div
                        animate={{ scale: [1, 1.18, 1], opacity: [0.25, 0.05, 0.25] }}
                        transition={{ duration: 1.8, repeat: Infinity }}
                        className="absolute inset-[-13px] rounded-full"
                        style={{ backgroundColor: color }}
                      />
                    </>
                  )}
                  <button
                    type="button"
                    aria-label={`${node.title}${locked ? ' (قفل)' : done ? ' (تمام‌شده)' : ''}`}
                    onClick={() => setOpenNode(node)}
                    className="relative z-10 flex items-center justify-center rounded-full transition-transform active:translate-y-1"
                    style={{
                      width: NODE_SIZE,
                      height: NODE_SIZE,
                      backgroundColor: locked ? '#e5e4ec' : done ? color : '#fff',
                      border: current ? `4px solid ${color}` : 'none',
                      boxShadow: locked ? '0 6px 0 #cccbd6' : done ? `0 7px 0 ${color}99` : `0 7px 0 ${color}55, 0 0 0 5px white`,
                    }}
                  >
                    {locked ? (
                      <Lock size={24} strokeWidth={2.5} className="text-[#aaa9b8]" />
                    ) : done ? (
                      <Check size={31} color="white" strokeWidth={3.5} />
                    ) : (
                      <Icon size={28} style={{ color }} strokeWidth={2.5} />
                    )}
                  </button>
                  {!current && (
                    <div className="absolute left-1/2 top-full mt-2.5 w-28 -translate-x-1/2 truncate rounded-lg bg-[#f7f8ff]/90 text-center text-[10px] font-bold text-muted">
                      {node.title}
                    </div>
                  )}
                </motion.div>
              );
            })}
            <div className="absolute left-1/2 flex -translate-x-1/2 flex-col items-center" style={{ top: height - 70 }}>
              <span className="mb-1 text-[10px] font-bold text-[#aaa9bd]">{progress.done === progress.total ? 'این فصل تموم شد!' : 'ادامه بده!'}</span>
              <span className="flex h-11 w-11 items-center justify-center rounded-2xl" style={{ backgroundColor: `${color}18` }}>
                <Sparkles size={20} style={{ color }} />
              </span>
            </div>
          </div>
        )}
      </div>

      <NodeSheet node={openNode} color={color} onClose={() => setOpenNode(null)} />
    </Screen>
  );
}

/** برگه‌ی جزیره: درس‌هایش، و دکمه‌ی شروعِ درسِ بعدی. */
function NodeSheet({ node, color, onClose }: { node: HomeNode | null; color: string; onClose: () => void }) {
  const nav = useNav();
  const lessons = useAsync(() => (node ? api.nodeLessons(node.id) : Promise.resolve(null)), [node?.id]);
  const next = node ? nextLessonOf(node) : null;
  const locked = node?.status === 'locked';

  const open = (lessonId: number) => {
    if (!node) return;
    onClose();
    nav.push({ name: 'lesson', lessonId, nodeId: node.id });
  };

  // فقط درس‌هایی که سوال دارند در lessonIds هستند؛ بقیه هنوز آزمون ندارند.
  const playable = new Set(node?.lessonIds ?? []);
  const list = lessons.data?.lessons.filter((l) => playable.has(Number(l.id))) ?? [];
  const doneCount = list.filter((l) => l.done).length;

  return (
    <Sheet open={node !== null} onClose={onClose} title={node?.title}>
      {locked ? (
        <div className="flex flex-col items-center gap-3 py-4 text-center">
          <span className="flex h-14 w-14 items-center justify-center rounded-full bg-soft">
            <Lock size={24} className="text-muted" />
          </span>
          <p className="text-sm leading-7 text-muted">این جزیره هنوز قفله. جزیره‌ی قبلی رو تموم کن تا باز بشه.</p>
        </div>
      ) : (
        <>
          {lessons.loading ? (
            <div className="py-6 text-center text-sm text-muted">دارم درس‌ها رو میارم…</div>
          ) : lessons.error ? (
            <ErrorState error={lessons.error} onRetry={lessons.reload} />
          ) : (
            <>
              <p className="mb-3 text-xs text-muted">
                {toFa(doneCount)} از {toFa(list.length)} درس تموم شده
              </p>
              <ul className="mb-5 flex max-h-72 flex-col gap-1.5 overflow-y-auto">
                {list.map((lesson) => {
                  const isNext = Number(lesson.id) === next;
                  return (
                    <li key={lesson.id}>
                      <button
                        type="button"
                        onClick={() => open(Number(lesson.id))}
                        className={`flex w-full items-center gap-3 rounded-2xl border px-3 py-2.5 text-right text-sm ${
                          isNext ? 'border-2 bg-white font-bold' : 'border-line bg-white'
                        }`}
                        style={isNext ? { borderColor: color } : undefined}
                      >
                        {lesson.done ? (
                          <CheckCircle2 size={18} className="flex-shrink-0 text-mint" />
                        ) : isNext ? (
                          <Play size={16} className="flex-shrink-0" style={{ color }} fill={color} />
                        ) : (
                          <Circle size={18} className="flex-shrink-0 text-faint" />
                        )}
                        <span className={`flex-1 ${lesson.done ? 'text-muted' : 'text-ink'}`}>{lesson.title}</span>
                      </button>
                    </li>
                  );
                })}
              </ul>
            </>
          )}
          {next != null && (
            <PrimaryButton color={color} onClick={() => open(next)}>
              <Play size={18} fill="white" /> {node?.status === 'completed' ? 'مرور دوباره' : 'شروعِ درسِ بعدی'}
            </PrimaryButton>
          )}
        </>
      )}
    </Sheet>
  );
}