widget.tsx

import { useState } from "react";
import {
  McpUseProvider,
  useWidget,
  useWidgetTheme,
  useCallTool,
  type WidgetMetadata,
} from "mcp-use/react";
import { Brand } from "../shared/branding";
import { z } from "zod";

// ── Schema ──────────────────────────────────────────────────────────────────

const courseSchema = z.object({
  id: z.number(),
  title: z.string(),
  description: z.string().nullable(),
  thumbnail_url: z.string().nullable(),
  tags: z.union([z.array(z.string()), z.string(), z.null()]),
  lesson_count: z.number(),
  enrolled: z.boolean(),
  has_access: z.boolean(),
  covered_by_plan: z.boolean(),
});

const propsSchema = z.object({
  total: z.number(),
  has_subscription: z.boolean(),
  courses: z.array(courseSchema),
});

export const widgetMetadata: WidgetMetadata = {
  description:
    "School course catalog grid showing which courses the student has access to and which their plan covers",
  props: propsSchema,
  exposeAsTool: false,
  metadata: {
    invoking: "Browsing catalog...",
    invoked: "Catalog ready",
  },
};

type Props = z.infer<typeof propsSchema>;

// ── Helpers ──────────────────────────────────────────────────────────────────

function normalizeTags(tags: string[] | string | null): string[] {
  if (!tags) return [];
  if (Array.isArray(tags)) return tags;
  try {
    const parsed = JSON.parse(tags);
    if (Array.isArray(parsed)) return parsed;
  } catch {
    // not JSON
  }
  return tags.split(",").map((t) => t.trim()).filter(Boolean);
}

// ── Component ────────────────────────────────────────────────────────────────

export default function CourseCatalog() {
  const { props, isPending, sendFollowUpMessage } = useWidget<Props>();
  const theme = useWidgetTheme();
  // Explicit generics: the tool-registry types are generated by `mcp-use dev`
  // and this tool is registered in a sibling file not yet picked up locally.
  const { callTool: enrollInCourse } = useCallTool<{ course_id: number }>(
    "lms_enroll_in_course"
  );
  // Per-item state, tracked by course_id — one shared hook instance serves
  // every card, so which card is pending/enrolled must be tracked separately.
  const [pendingIds, setPendingIds] = useState<Set<number>>(new Set());
  const [enrolledIds, setEnrolledIds] = useState<Set<number>>(new Set());
  const [enrollError, setEnrollError] = useState<string | null>(null);
  const dark = theme === "dark";

  if (isPending) {
    return (
      <McpUseProvider autoSize>
        <Brand />
        <div className={dark ? "dark" : ""}>
          <div className="bg-zinc-50 p-10 text-center font-sans text-zinc-400 dark:bg-zinc-950 dark:text-zinc-500">
            <div className="mx-auto mb-3 size-9 animate-spin rounded-full border-[3px] border-zinc-200 border-t-[var(--brand-600)] dark:border-zinc-800 dark:border-t-[var(--brand-400)]" />
            <p className="m-0 text-sm">Browsing catalog…</p>
          </div>
        </div>
      </McpUseProvider>
    );
  }

  const { total, has_subscription, courses } = props;

  const handleEnroll = (courseId: number, title: string) => {
    setPendingIds((prev) => new Set(prev).add(courseId));
    setEnrollError(null);
    enrollInCourse(
      { course_id: courseId },
      {
        onSuccess: () => {
          setEnrolledIds((prev) => new Set(prev).add(courseId));
          sendFollowUpMessage(
            `I just enrolled in ${title} — what should I start with?`
          );
        },
        onError: () =>
          setEnrollError(`Could not enroll in "${title}". Please try again.`),
        onSettled: () => {
          setPendingIds((prev) => {
            const next = new Set(prev);
            next.delete(courseId);
            return next;
          });
        },
      }
    );
  };

  return (
    <McpUseProvider autoSize>
      <Brand />
      <div className={dark ? "dark" : ""}>
        <div className="mx-auto max-w-[820px] bg-zinc-50 p-6 font-sans dark:bg-zinc-950">
          <div className="mb-4.5 flex flex-wrap items-baseline justify-between gap-2">
            <h1 className="m-0 text-[22px] font-bold tracking-tight text-zinc-900 dark:text-zinc-100">
              Course Catalog
            </h1>
            <span className="text-[13px] text-zinc-500 dark:text-zinc-400">
              {total} published course{total === 1 ? "" : "s"}
              {has_subscription ? " · subscription active" : ""}
            </span>
          </div>

          {enrollError && (
            <div
              className="mb-3 rounded-[10px] bg-red-50 px-[13px] py-[9px] text-[13px] text-red-700 dark:bg-red-950 dark:text-red-400"
              role="alert"
            >
              {enrollError}
            </div>
          )}

          {courses.length === 0 ? (
            <div className="rounded-xl border border-zinc-200 bg-white p-10 text-center dark:border-zinc-800 dark:bg-zinc-900">
              <div className="mb-2 text-[32px]">📚</div>
              <p className="m-0 text-[15px] font-semibold text-zinc-900 dark:text-zinc-100">
                No published courses found
              </p>
            </div>
          ) : (
            <div className="grid grid-cols-[repeat(auto-fill,minmax(230px,1fr))] gap-3.5">
              {courses.map((course) => {
                const tags = normalizeTags(course.tags).slice(0, 3);
                return (
                  <div
                    key={course.id}
                    className="flex flex-col overflow-hidden rounded-xl border border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-900"
                  >
                    {/* Thumbnail */}
                    <div
                      className="flex h-24 items-center justify-center bg-zinc-100 bg-cover bg-center text-[28px] dark:bg-zinc-800"
                      style={
                        course.thumbnail_url
                          ? { backgroundImage: `url(${course.thumbnail_url})` }
                          : undefined
                      }
                    >
                      {!course.thumbnail_url && "📖"}
                    </div>

                    <div className="flex flex-1 flex-col gap-2 p-3.5">
                      <div>
                        <div className="text-[14.5px] leading-[1.3] font-semibold text-zinc-900 dark:text-zinc-100">
                          {course.title}
                        </div>
                        {course.description && (
                          <div className="mt-1 line-clamp-2 text-xs leading-[1.45] text-zinc-400 dark:text-zinc-500">
                            {course.description}
                          </div>
                        )}
                      </div>

                      {tags.length > 0 && (
                        <div className="flex flex-wrap gap-[5px]">
                          {tags.map((tag) => (
                            <span
                              key={tag}
                              className="rounded-lg bg-zinc-100 px-2 py-0.5 text-[10.5px] font-semibold text-zinc-500 dark:bg-zinc-800 dark:text-zinc-400"
                            >
                              {tag}
                            </span>
                          ))}
                        </div>
                      )}

                      <div className="mt-auto flex items-center justify-between gap-2">
                        <span className="text-[11.5px] text-zinc-400 dark:text-zinc-500">
                          {course.lesson_count} lesson
                          {course.lesson_count === 1 ? "" : "s"}
                        </span>
                        {course.enrolled || enrolledIds.has(course.id) ? (
                          <span className="rounded-full bg-green-100 px-[9px] py-[3px] text-[11px] font-bold text-green-600 dark:bg-green-900 dark:text-green-400">
                            ✓ Enrolled
                          </span>
                        ) : course.covered_by_plan ? (
                          <button
                            onClick={() => handleEnroll(course.id, course.title)}
                            disabled={pendingIds.has(course.id)}
                            className="cursor-pointer rounded-full border-none bg-[var(--brand-600)] px-2.5 py-[3px] text-[11px] font-bold text-white disabled:cursor-default disabled:opacity-60 dark:bg-[var(--brand-400)]"
                          >
                            {pendingIds.has(course.id) ? "Enrolling…" : "Enroll"}
                          </button>
                        ) : course.has_access ? (
                          <span className="rounded-full bg-[var(--brand-100)] px-[9px] py-[3px] text-[11px] font-bold text-[var(--brand-600)] dark:bg-[var(--brand-950)] dark:text-[var(--brand-400)]">
                            Access
                          </span>
                        ) : (
                          <span className="text-[11px] text-zinc-400 dark:text-zinc-500">
                            Not in plan
                          </span>
                        )}
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          )}
        </div>
      </div>
    </McpUseProvider>
  );
}