"use client";

import Link from "next/link";
import { useCallback, useEffect, useState } from "react";
import { Alert } from "@/components/ui/Alert";
import { Button } from "@/components/ui/Button";
import { Select } from "@/components/ui/Field";
import { PageContentSkeleton } from "@/components/ui/Skeleton";
import {
  AssignmentSubmissionsPanel,
  UploadAssignmentMaterialsModal,
} from "@/components/teacher/AssignmentSubmissionsPanel";
import { categoryLabel } from "@/components/teacher/AssignmentEditorForm";
import { ApiError, apiGet } from "@/lib/api";

export interface AssignmentCardStats {
  total_students: number;
  submissions_count: number;
  graded_count: number;
  submissions_percent: number | null;
  graded_percent: number | null;
}

export interface AssignmentCard {
  id: number;
  title: string;
  instructions?: string | null;
  category?: string | null;
  max_score?: number | string | null;
  ends_at?: string | null;
  is_active: boolean;
  status_label: "active" | "closed" | "expired";
  steps_count?: number;
  steps?: Array<{ id: number; title: string; step_type: string }>;
  stats: AssignmentCardStats;
}

interface ClassAssignmentsResponse {
  total_students: number;
  assignments: AssignmentCard[];
}

const STATUS_FILTERS = [
  ["all", "همه وضعیت‌ها"],
  ["active", "فعال"],
  ["closed", "بسته"],
  ["expired", "منقضی"],
] as const;

function formatDueDate(value?: string | null): string {
  if (!value) return "بدون موعد";
  try {
    return new Date(value).toLocaleDateString("fa-IR");
  } catch {
    return value;
  }
}

function statusBadge(label: AssignmentCard["status_label"]): { text: string; className: string } {
  switch (label) {
    case "active":
      return { text: "فعال", className: "bg-emerald-50 text-emerald-700" };
    case "expired":
      return { text: "منقضی", className: "bg-amber-50 text-amber-700" };
    case "closed":
      return { text: "بسته", className: "bg-slate-100 text-slate-600" };
  }
}

function ProgressBar({
  label,
  count,
  total,
  percent,
  tone,
}: {
  label: string;
  count: number;
  total: number;
  percent: number | null;
  tone: "teal" | "slate";
}) {
  const width = percent != null ? Math.min(100, Math.max(0, percent)) : 0;
  const barColor = tone === "teal" ? "bg-primary" : "bg-slate-300";

  return (
    <div>
      <div className="mb-1 flex items-center justify-between text-xs text-[var(--muted)]">
        <span>{label}</span>
        <span>
          {count}/{total}
          {percent != null ? ` (${percent}%)` : " (—)"}
        </span>
      </div>
      <div className="h-2 overflow-hidden rounded-full bg-slate-100">
        <div className={`h-full rounded-full ${barColor}`} style={{ width: `${width}%` }} />
      </div>
    </div>
  );
}

export function ClassAssignmentsTab({
  classRoomId,
  subjectId,
  scheduleId,
}: {
  classRoomId: number;
  subjectId?: number | null;
  scheduleId?: number | null;
}) {
  const [status, setStatus] = useState<string>("all");
  const [assignments, setAssignments] = useState<AssignmentCard[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  const [submissionsId, setSubmissionsId] = useState<number | null>(null);
  const [materialsId, setMaterialsId] = useState<number | null>(null);

  const assignmentQuery = () => {
    const params = new URLSearchParams();
    if (subjectId) params.set("subject_id", String(subjectId));
    if (scheduleId) params.set("schedule_id", String(scheduleId));
    const qs = params.toString();
    return qs ? `?${qs}` : "";
  };

  const newAssignmentHref = `/teacher/classes/${classRoomId}/assignments/new${assignmentQuery()}`;
  const editAssignmentHref = (id: number) =>
    `/teacher/classes/${classRoomId}/assignments/${id}/edit${assignmentQuery()}`;
  const gradingHref = (id: number) =>
    `/teacher/classes/${classRoomId}/assignments/${id}/grading${assignmentQuery()}`;

  const load = useCallback(async () => {
    setLoading(true);
    setError(null);
    try {
      const params = new URLSearchParams({ status });
      if (subjectId) params.set("subject_id", String(subjectId));
      const data = await apiGet<ClassAssignmentsResponse>(
        `/teacher/classes/${classRoomId}/assignments?${params.toString()}`,
      );
      setAssignments(data.assignments);
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا در بارگذاری تکالیف");
    } finally {
      setLoading(false);
    }
  }, [classRoomId, subjectId, status]);

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

  return (
    <div className="space-y-4">
      <div className="flex flex-wrap items-center justify-between gap-3">
        <div>
          <h2 className="text-lg font-bold">تکالیف کلاسی</h2>
          <p className="text-sm text-[var(--muted)]">
            تکالیف و تمرین‌های این کلاس را مدیریت کنید
          </p>
        </div>
        <div className="flex flex-wrap items-center gap-2">
          <Select
            value={status}
            onChange={(e) => setStatus(e.target.value)}
            className="min-w-[140px]"
          >
            {STATUS_FILTERS.map(([value, label]) => (
              <option key={value} value={value}>
                {label}
              </option>
            ))}
          </Select>
          <Link href={newAssignmentHref}>
            <Button>+ تکلیف جدید</Button>
          </Link>
        </div>
      </div>

      {error ? <Alert tone="error">{error}</Alert> : null}

      {loading ? (
        <PageContentSkeleton rows={3} />
      ) : assignments.length === 0 ? (
        <div className="rounded-2xl border border-dashed border-[var(--border)] bg-white p-8 text-center text-sm text-[var(--muted)]">
          هنوز تکلیفی ثبت نشده است.
        </div>
      ) : (
        <div className="space-y-4">
          {assignments.map((item) => {
            const badge = statusBadge(item.status_label);
            const stats = item.stats;
            const total = stats.total_students;

            return (
              <article
                key={item.id}
                className="rounded-2xl border border-[var(--border)] bg-white p-4 shadow-sm"
              >
                <div className="flex flex-wrap items-start justify-between gap-3">
                  <div className="flex gap-3">
                    <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-violet-50 text-violet-600">
                      📄
                    </div>
                    <div>
                      <h3 className="font-bold">{item.title}</h3>
                      {item.instructions ? (
                        <p className="mt-1 line-clamp-2 text-sm text-[var(--muted)]">
                          {item.instructions}
                        </p>
                      ) : null}
                      <div className="mt-2 flex flex-wrap gap-2">
                        <span className={`rounded-full px-2.5 py-0.5 text-xs font-semibold ${badge.className}`}>
                          {badge.text}
                        </span>
                        <span className="rounded-full bg-violet-50 px-2.5 py-0.5 text-xs font-semibold text-violet-700">
                          {categoryLabel(item.category)}
                        </span>
                        <span className="rounded-full bg-slate-100 px-2.5 py-0.5 text-xs font-semibold text-slate-600">
                          {item.max_score ?? 20} بارم
                        </span>
                        <span className="rounded-full bg-teal-50 px-2.5 py-0.5 text-xs font-semibold text-teal-700">
                          {item.steps_count ?? item.steps?.length ?? 1} مرحله
                        </span>
                      </div>
                    </div>
                  </div>
                  <div className="text-sm text-[var(--muted)]">
                    موعد: {formatDueDate(item.ends_at)}
                  </div>
                </div>

                <div className="mt-4 grid gap-3 sm:grid-cols-2">
                  <ProgressBar
                    label="ارسال‌ها"
                    count={stats.submissions_count}
                    total={total}
                    percent={stats.submissions_percent}
                    tone="slate"
                  />
                  <ProgressBar
                    label="نمرات"
                    count={stats.graded_count}
                    total={stats.submissions_count || total}
                    percent={stats.graded_percent}
                    tone="teal"
                  />
                </div>

                <div className="mt-4 flex flex-wrap gap-2 border-t border-[var(--border)] pt-4">
                  <Link href={gradingHref(item.id)}>
                    <Button className="text-sm">تصحیح تکلیف</Button>
                  </Link>
                  <Button
                    variant="secondary"
                    className="text-sm"
                    onClick={() => setSubmissionsId(item.id)}
                  >
                    پیش‌نمایش سریع
                  </Button>
                  <Button
                    variant="secondary"
                    className="text-sm"
                    onClick={() => setMaterialsId(item.id)}
                  >
                    بارگذاری مطالب
                  </Button>
                  <Link href={editAssignmentHref(item.id)}>
                    <Button variant="ghost" className="text-sm">
                      ویرایش
                    </Button>
                  </Link>
                  <a
                    href={`/assignments/${item.id}`}
                    className="inline-flex items-center rounded-xl px-3 py-2 text-sm text-primary hover:bg-teal-50"
                  >
                    پیش‌نمایش پیشرفت فراگیر
                  </a>
                </div>
              </article>
            );
          })}
        </div>
      )}

      <AssignmentSubmissionsPanel
        open={submissionsId != null}
        assignmentId={submissionsId}
        classRoomId={classRoomId}
        queryString={assignmentQuery()}
        onClose={() => setSubmissionsId(null)}
        onGraded={load}
      />

      <UploadAssignmentMaterialsModal
        open={materialsId != null}
        assignmentId={materialsId}
        onClose={() => setMaterialsId(null)}
        onUploaded={load}
      />
    </div>
  );
}