"use client";

import { useCallback, useEffect, useState } from "react";
import { Alert } from "@/components/ui/Alert";
import { Button } from "@/components/ui/Button";
import { Field, Input } from "@/components/ui/Field";
import { ApiError, apiGet } from "@/lib/api";
import { categoryLabel } from "@/components/teacher/assignment-editor-types";
import type { StepDraft } from "@/components/teacher/assignment-editor-types";

export interface AssignmentLibraryItem {
  id: number;
  title: string;
  category?: string | null;
  instructions?: string | null;
  max_score?: number | string | null;
  class_room_id: number;
  class_name?: string | null;
  steps_count: number;
  created_at?: string | null;
}

export interface AssignmentTemplatePayload {
  title: string;
  instructions: string;
  maxScore: string;
  category: string;
  steps: StepDraft[];
}

function formatDate(value?: string | null): string {
  if (!value) return "";
  try {
    return new Date(value).toLocaleDateString("fa-IR");
  } catch {
    return value;
  }
}

export function AssignmentTemplatePicker({
  excludeAssignmentId,
  onApply,
  onClose,
}: {
  excludeAssignmentId?: number | null;
  onApply: (payload: AssignmentTemplatePayload) => void;
  onClose: () => void;
}) {
  const [items, setItems] = useState<AssignmentLibraryItem[]>([]);
  const [query, setQuery] = useState("");
  const [loading, setLoading] = useState(true);
  const [applyingId, setApplyingId] = useState<number | null>(null);
  const [error, setError] = useState<string | null>(null);

  const load = useCallback(async () => {
    setLoading(true);
    setError(null);
    try {
      const params = new URLSearchParams();
      if (excludeAssignmentId) params.set("exclude_id", String(excludeAssignmentId));
      if (query.trim()) params.set("q", query.trim());
      const suffix = params.toString() ? `?${params.toString()}` : "";
      const rows = await apiGet<AssignmentLibraryItem[]>(`/teacher/assignments/library${suffix}`);
      setItems(rows);
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا در بارگذاری تکالیف");
    } finally {
      setLoading(false);
    }
  }, [excludeAssignmentId, query]);

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

  const apply = async (item: AssignmentLibraryItem) => {
    setApplyingId(item.id);
    setError(null);
    try {
      const [assignment, steps] = await Promise.all([
        apiGet<{
          title: string;
          instructions?: string | null;
          max_score?: number | string | null;
          category?: string | null;
        }>(`/assignments/${item.id}`),
        apiGet<
          Array<{
            title: string;
            instructions?: string | null;
            step_type: import("@/components/teacher/assignment-editor-types").StepType;
            content_url?: string | null;
            content_attachments?: import("@/components/teacher/StepAttachmentsEditor").StepAttachment[] | null;
            auto_check: boolean;
            required_outputs?: import("@/components/teacher/assignment-editor-types").OutputFormat[] | null;
            allow_late_submission: boolean;
            late_penalty_percent?: number;
            max_score?: number | string | null;
          }>
        >(`/assignments/${item.id}/steps`),
      ]);

      onApply({
        title: assignment.title,
        instructions: assignment.instructions ?? "",
        maxScore: String(assignment.max_score ?? 20),
        category: assignment.category ?? "homework",
        steps: steps.map((step) => ({
          title: step.title,
          instructions: step.instructions ?? "",
          step_type: step.step_type,
          content_url: step.content_url ?? "",
          content_attachments: step.content_attachments ?? [],
          pending_attachments: [],
          starts_at: "",
          ends_at: "",
          auto_check: step.auto_check,
          required_outputs: step.required_outputs?.length
            ? step.required_outputs
            : step.step_type === "submit"
              ? ["text"]
              : [],
          allow_late_submission: step.allow_late_submission,
          late_penalty_percent: String(step.late_penalty_percent ?? 0),
          max_score: String(step.max_score ?? assignment.max_score ?? 20),
        })),
      });
      onClose();
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا در بارگذاری الگو");
    } finally {
      setApplyingId(null);
    }
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4">
      <div className="flex max-h-[85vh] w-full max-w-2xl flex-col rounded-2xl border border-[var(--border)] bg-white shadow-xl">
        <div className="border-b border-[var(--border)] p-5">
          <h3 className="text-lg font-bold">استفاده از تکلیف قبلی</h3>
          <p className="mt-1 text-sm text-[var(--muted)]">
            محتوا و مراحل کپی می‌شوند؛ موعد هر مرحله را جداگانه تنظیم کنید.
          </p>
          <div className="mt-4">
            <Field label="جستجو">
              <Input
                value={query}
                onChange={(e) => setQuery(e.target.value)}
                placeholder="عنوان تکلیف…"
              />
            </Field>
          </div>
        </div>

        <div className="flex-1 overflow-y-auto p-5">
          {error ? <Alert tone="error">{error}</Alert> : null}
          {loading ? (
            <p className="text-sm text-[var(--muted)]">در حال بارگذاری…</p>
          ) : items.length === 0 ? (
            <p className="text-sm text-[var(--muted)]">تکلیف قبلی یافت نشد.</p>
          ) : (
            <div className="space-y-2">
              {items.map((item) => (
                <div
                  key={item.id}
                  className="flex flex-wrap items-center justify-between gap-3 rounded-xl border border-[var(--border)] p-4"
                >
                  <div className="min-w-0">
                    <p className="font-medium">{item.title}</p>
                    <p className="text-xs text-[var(--muted)]">
                      {item.class_name ?? `کلاس #${item.class_room_id}`}
                      {" · "}
                      {categoryLabel(item.category)}
                      {" · "}
                      {item.steps_count} مرحله
                      {item.created_at ? ` · ${formatDate(item.created_at)}` : ""}
                    </p>
                  </div>
                  <Button
                    variant="secondary"
                    className="text-sm"
                    loading={applyingId === item.id}
                    onClick={() => void apply(item)}
                  >
                    انتخاب
                  </Button>
                </div>
              ))}
            </div>
          )}
        </div>

        <div className="border-t border-[var(--border)] p-4 text-left">
          <Button variant="secondary" onClick={onClose} disabled={applyingId != null}>
            بستن
          </Button>
        </div>
      </div>
    </div>
  );
}