"use client";

import { useParams } from "next/navigation";
import { useCallback, useEffect, useState } from "react";
import { AppShell } from "@/components/app/AppShell";
import {
  AssignmentProgressRoadmap,
  type ProgressPayload,
} from "@/components/assignments/AssignmentProgressRoadmap";
import { Alert } from "@/components/ui/Alert";
import { PageContentSkeleton } from "@/components/ui/Skeleton";
import { ApiError, apiGet } from "@/lib/api";

export default function AssignmentProgressPage() {
  const { id } = useParams<{ id: string }>();
  const assignmentId = Number(id);
  const [data, setData] = useState<ProgressPayload | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  const load = useCallback(async () => {
    if (!assignmentId) return;
    setLoading(true);
    setError(null);
    try {
      const payload = await apiGet<ProgressPayload>(`/assignments/${assignmentId}/progress`);
      setData(payload);
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا در بارگذاری پیشرفت");
    } finally {
      setLoading(false);
    }
  }, [assignmentId]);

  useEffect(() => {
    void load();
  }, [load]);

  return (
    <AppShell title="پیشرفت تمرین" subtitle="مسیر مراحل تکلیف" breadcrumbLabels={{ assignment: data?.assignment.title }}>
      {error ? <Alert tone="error">{error}</Alert> : null}
      {loading ? (
        <PageContentSkeleton rows={4} />
      ) : data ? (
        <AssignmentProgressRoadmap data={data} onUpdated={load} />
      ) : (
        <p className="text-sm text-[var(--muted)]">تمرینی یافت نشد.</p>
      )}
    </AppShell>
  );
}