Edu/apps/portal-shell/src/widgets/teacher/lesson-plan-editor/index.tsx

"use client";

/**
 * lesson-plan-editor（teacher / main）
 *
 * 备课画布：左侧备课列表 + 右侧编辑区。
 * 通过 useWidgetQuery 查询 apollo-router → core-edu 子图的 lessonPlans 数据，
 * 通过 useWidgetMutation 调用 saveLessonPlan 保存。
 * classId 从 URL Search Params 读取（class-selector 切换时自动响应）。
 *
 * 关联：portal-shell spec §5.2.1 URL 驱动、§5.6 统一 Hook
 */
import { useSearchParams } from "next/navigation";
import { useState } from "react";
import {
  useLessonPlans,
  useSaveLessonPlan,
  type LessonPlan,
  type SaveLessonPlanInput,
} from "@/lib/api";
import { PluginSkeleton } from "@/shell/PluginLoader";
import type { PluginProps } from "@/lib/types";

function createEmptyDraft(): LessonPlan {
  return { id: "", title: "", objectives: "", content: "", resources: [] };
}

export default function LessonPlanEditor(
  _props: PluginProps,
): React.ReactElement {
  const searchParams = useSearchParams();
  const classId = searchParams.get("classId") ?? "";

  const { data, loading, refetch } = useLessonPlans(classId);

  const { run: saveLessonPlan, loading: saving } = useSaveLessonPlan();

  const [draft, setDraft] = useState<LessonPlan>(createEmptyDraft());

  if (loading && !data) {
    return <PluginSkeleton variant="table" />;
  }

  if (!classId) {
    return (
      <section className="rounded-xl border border bg-card p-4">
        <h3 className="text-heading-3 text-foreground">备课画布</h3>
        <p className="text-sm text-muted-foreground">请先选择班级</p>
      </section>
    );
  }

  const plans = data ?? [];

  const handleSelect = (plan: LessonPlan): void => {
    setDraft({ ...plan, resources: [...plan.resources] });
  };

  const handleNew = (): void => {
    setDraft(createEmptyDraft());
  };

  const handleResourceAdd = (): void => {
    setDraft((d) => ({ ...d, resources: [...d.resources, ""] }));
  };

  const handleResourceChange = (index: number, value: string): void => {
    setDraft((d) => {
      const next = [...d.resources];
      next[index] = value;
      return { ...d, resources: next };
    });
  };

  const handleResourceRemove = (index: number): void => {
    setDraft((d) => ({
      ...d,
      resources: d.resources.filter((_, i) => i !== index),
    }));
  };

  const handleSave = async (): Promise<void> => {
    if (!draft.title.trim()) {
      return;
    }
    const input: SaveLessonPlanInput = {
      classId,
      id: draft.id || undefined,
      title: draft.title,
      objectives: draft.objectives,
      content: draft.content,
      resources: draft.resources.filter((r) => r.trim().length > 0),
    };
    try {
      const saved = await saveLessonPlan(input);
      setDraft((d) => ({ ...d, id: saved.id }));
      await refetch();
    } catch {
      /* toast: 保存失败 */
    }
  };

  return (
    <section className="rounded-xl border border bg-card p-4">
      <div className="flex items-center justify-between">
        <h3 className="text-heading-3 text-foreground">备课画布</h3>
        <button
          type="button"
          onClick={handleNew}
          className="rounded-md bg-primary px-sm py-xs text-sm text-primary-foreground"
        >
          新建备课
        </button>
      </div>
      <div className="mt-sm flex gap-4">
        <ul className="w-64 shrink-0 space-y-sm">
          {plans.length === 0 ? (
            <li className="text-sm text-muted-foreground">暂无备课记录</li>
          ) : (
            plans.map((p) => (
              <li key={p.id}>
                <button
                  type="button"
                  onClick={() => handleSelect(p)}
                  className={`w-full rounded-md border border px-sm py-xs text-left text-sm ${
                    draft.id === p.id
                      ? "bg-muted text-foreground"
                      : "bg-card text-foreground"
                  }`}
                >
                  {p.title || "未命名备课"}
                </button>
              </li>
            ))
          )}
        </ul>
        <div className="flex-1 space-y-4">
          <label className="flex flex-col space-y-xs">
            <span className="text-sm text-muted-foreground">标题</span>
            <input
              type="text"
              value={draft.title}
              onChange={(e) =>
                setDraft((d) => ({ ...d, title: e.target.value }))
              }
              className="rounded-md border border bg-card px-sm py-xs text-sm text-foreground"
              placeholder="请输入备课标题"
            />
          </label>
          <label className="flex flex-col space-y-xs">
            <span className="text-sm text-muted-foreground">教学目标</span>
            <textarea
              value={draft.objectives}
              onChange={(e) =>
                setDraft((d) => ({ ...d, objectives: e.target.value }))
              }
              className="rounded-md border border bg-card px-sm py-xs text-sm text-foreground"
              rows={3}
              placeholder="请输入教学目标"
            />
          </label>
          <label className="flex flex-col space-y-xs">
            <span className="text-sm text-muted-foreground">教学内容</span>
            <textarea
              value={draft.content}
              onChange={(e) =>
                setDraft((d) => ({ ...d, content: e.target.value }))
              }
              className="rounded-md border border bg-card px-sm py-xs text-sm text-foreground"
              rows={4}
              placeholder="请输入教学内容"
            />
          </label>
          <div className="flex flex-col space-y-xs">
            <span className="text-sm text-muted-foreground">教学资源</span>
            <ul className="space-y-xs">
              {draft.resources.map((r, i) => (
                <li key={i} className="flex gap-xs">
                  <input
                    type="text"
                    value={r}
                    onChange={(e) => handleResourceChange(i, e.target.value)}
                    className="w-full rounded-md border border bg-card px-sm py-xs text-sm text-foreground"
                    placeholder="资源名称或链接"
                  />
                  <button
                    type="button"
                    onClick={() => handleResourceRemove(i)}
                    className="rounded-md bg-muted px-sm py-xs text-sm text-foreground"
                  >
                    移除
                  </button>
                </li>
              ))}
            </ul>
            <button
              type="button"
              onClick={handleResourceAdd}
              className="self-start rounded-md bg-muted px-sm py-xs text-sm text-foreground"
            >
              添加资源
            </button>
          </div>
          <button
            type="button"
            onClick={handleSave}
            disabled={saving || !draft.title.trim()}
            className="rounded-md bg-primary px-md py-xs text-sm text-primary-foreground disabled:opacity-50"
          >
            {saving ? "保存中" : "保存"}
          </button>
        </div>
      </div>
    </section>
  );
}