import {
  For,
  Show,
  createEffect,
  createMemo,
  createSignal,
  type JSX,
} from "solid-js";
import type { CourseKind, RecordType, WorkListItem, ExamListItem } from "~/service/wk";
import type { AccountItem } from "~/store/account";
import type { CourseType } from "~/types/Course";
import type { RecordItem } from "~/service/wk";

const stripHtml = (value: string) => value.replace(/<[^>]+>/g, "").trim();

type RecordTypeOption = {
  label: string;
  value: RecordType;
};
type CourseRecordTypeOption = {
  label: string;
  value: CourseKind;
};
type RecordFilter = "all" | "unlearned" | "learned";

interface CourseWorkspaceProps {
  selectedAccount: AccountItem | null;
  selectedCourseList: CourseType[];
  selectedCourseId: number | null;
  selectedCourse: CourseType | null;
  recordType: RecordType;
  courseKind: CourseKind;
  currentCourseKindLabel: string;
  showingCachedRecords: boolean;
  recordTypeOptions: RecordTypeOption[];
  courseRecordTypeOptions: CourseRecordTypeOption[];
  records: RecordItem[];
  workList: WorkListItem[];
  examList: ExamListItem[];
  studyLogs: string[];
  recordsLoading: boolean;
  recordError: string;
  isRefreshingRecords: boolean;
  isRefreshingCourseRecords: boolean;
  isRunningStudy: boolean;
  isRefreshingLogs: boolean;
  autoScrollLogs: boolean;
  showLogTimestamps: boolean;
  densityMode: "comfortable" | "compact";
  logFontSize: number;
  onSelectCourse: (courseId: number) => void;
  onRefreshRecords: () => void;
  onRefreshCourseRecords: () => void;
  onChangeRecordType: (value: RecordType) => void;
  onChangeCourseRecordType: (value: CourseKind) => void;
  onStartStudy: () => void;
  onStopStudy: () => void;
  onRefreshLogs: () => void;
  onClearLogs: () => void;
  renderRecordState: (value: string) => string;
}

const EmptyState = (props: { children: JSX.Element }) => (
  <div class="rounded-3xl border border-dashed border-zinc-300 bg-white px-4 py-8 text-center text-zinc-500">
    {props.children}
  </div>
);

const extractTimestamp = (message: string) => {
  const match = message.match(/^\[(\d{2}:\d{2}:\d{2})\]\s*/);
  return match?.[1] ?? null;
};

const stripTimestamp = (message: string) => {
  return message.replace(/^\[(\d{2}:\d{2}:\d{2})\]\s*/, "");
};

const CourseWorkspace = (props: CourseWorkspaceProps) => {
  let logContainerRef: HTMLDivElement | undefined;
  const [recordFilter, setRecordFilter] = createSignal<RecordFilter>("all");

  createEffect(() => {
    props.studyLogs.length;

    if (!props.autoScrollLogs) {
      return;
    }

    requestAnimationFrame(() => {
      const element = logContainerRef;
      if (element) {
        element.scrollTo({ top: element.scrollHeight, behavior: "smooth" });
      }
    });
  });

  createEffect(() => {
    if (logContainerRef) {
      logContainerRef.style.fontSize = `${props.logFontSize}px`;
    }
  });

  const compact = () => props.densityMode === "compact";
  const recordStats = createMemo(() => {
    const learned = props.records.filter((record) => {
      const stateText = props.renderRecordState(record.state) || "未知状态";
      return stateText.includes("已学") || record.progress === "1.00";
    }).length;
    const total = props.records.length;

    return {
      total,
      learned,
      unlearned: Math.max(0, total - learned),
    };
  });
  const filteredRecords = createMemo(() => {
    if (recordFilter() === "all") {
      return props.records;
    }

    return props.records.filter((record) => {
      const stateText = props.renderRecordState(record.state) || "未知状态";
      const learned = stateText.includes("已学") || record.progress === "1.00";
      return recordFilter() === "learned" ? learned : !learned;
    });
  });

  return (
    <section class="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden rounded-[22px] border border-white/80 bg-white/85 shadow-[0_12px_34px_-24px_rgba(15,23,42,0.26)]">
      <div class="flex flex-col gap-1.5 border-b border-zinc-200/80 px-3 py-2.5 sm:flex-row sm:items-center sm:justify-between">
        <div>
          <p class="text-[15px] font-semibold text-zinc-900 sm:text-base">
            课程工作台
          </p>
          <p class="mt-0.5 text-xs text-zinc-500 sm:text-sm">
            课程、记录与日志统一查看
          </p>
        </div>
        <Show when={props.selectedAccount}>
          <div class="rounded-full bg-cyan-50 px-2 py-0.5 text-xs text-cyan-700">
            {props.selectedAccount?.user.name}
          </div>
        </Show>
      </div>

      <Show
        when={props.selectedAccount}
        fallback={
          <div class="flex h-full items-center justify-center px-6 text-zinc-500">
            选择左侧账号后，这里会显示课程、记录和运行日志。
          </div>
        }
      >
        <div
          class={
            compact()
              ? "grid min-h-0 flex-1 gap-1.5 p-1.5 lg:grid-cols-[280px_minmax(0,1fr)]"
              : "grid min-h-0 flex-1 gap-2 p-2 lg:grid-cols-[300px_minmax(0,1fr)]"
          }
        >
          <div class="flex min-h-0 flex-col overflow-hidden rounded-[18px] border border-zinc-200 bg-[linear-gradient(180deg,rgba(248,250,252,0.9),rgba(255,255,255,0.95))]">
            <div class="flex flex-wrap items-center justify-between gap-1.5 border-b border-zinc-200 px-2.5 py-2">
              <div>
                <p class="text-xs font-semibold text-zinc-800 sm:text-sm">
                  课程列表
                </p>
                <p class="mt-1 text-xs text-zinc-500">点击课程查看对应记录</p>
              </div>
              <div class="flex flex-wrap items-center gap-2">
                <select
                  class="rounded-lg border border-zinc-200 bg-white px-2 py-1 text-xs transition outline-none focus:border-cyan-400"
                  value={props.courseKind}
                  onChange={(event) =>
                    props.onChangeCourseRecordType(
                      event.currentTarget.value as CourseKind,
                    )
                  }
                >
                  <For each={props.courseRecordTypeOptions}>
                    {(item) => <option value={item.value}>{item.label}</option>}
                  </For>
                </select>
                <button
                  type="button"
                  class="rounded-lg border border-zinc-200 bg-white px-2 py-1 text-xs text-zinc-700 transition hover:bg-zinc-100 active:bg-zinc-200 disabled:cursor-not-allowed disabled:opacity-60"
                  disabled={props.isRefreshingCourseRecords}
                  onClick={props.onRefreshCourseRecords}
                >
                  {props.isRefreshingCourseRecords ? "刷新中..." : "刷新记录"}
                </button>
              </div>
            </div>

            <div class={compact() ? "flex min-h-0 flex-1 flex-col gap-1 overflow-y-auto p-1.5" : "flex min-h-0 flex-1 flex-col gap-1.5 overflow-y-auto p-2"}>
              <Show when={props.selectedCourseList.length === 0}>
                <EmptyState>
                  当前“{props.currentCourseKindLabel}
                  ”下没有课程，请切换分类或刷新课程列表。
                </EmptyState>
              </Show>

              <For each={props.selectedCourseList}>
                {(course) => {
                  const selected = () => course.id === props.selectedCourseId;

                  return (
                    <button
                      type="button"
                      class={
                        selected()
                          ? compact()
                            ? "rounded-[16px] border border-cyan-300 bg-[linear-gradient(145deg,rgba(236,254,255,0.95),rgba(240,253,244,0.95))] px-2 py-2 text-left shadow-sm"
                            : "rounded-[18px] border border-cyan-300 bg-[linear-gradient(145deg,rgba(236,254,255,0.95),rgba(240,253,244,0.95))] px-2.5 py-2.5 text-left shadow-sm"
                          : compact()
                            ? "rounded-[16px] border border-zinc-200 bg-white px-2 py-2 text-left shadow-sm transition hover:border-cyan-200 hover:bg-cyan-50/30"
                            : "rounded-[18px] border border-zinc-200 bg-white px-2.5 py-2.5 text-left shadow-sm transition hover:border-cyan-200 hover:bg-cyan-50/30"
                      }
                      onClick={() => props.onSelectCourse(course.id)}
                    >
                      <p class="truncate text-sm font-semibold text-zinc-900">
                        {course.name}
                      </p>
                      <div class="mt-1 grid gap-0.5 text-xs text-zinc-600">
                        <p>课程号：{course.id}</p>
                        <p>老师：{course.teacher}</p>
                        <p>进度：{course.progress}</p>
                      </div>
                    </button>
                  );
                }}
              </For>
            </div>
          </div>

          <div
            class={
              compact()
                ? "grid min-h-0 gap-1.5 grid-rows-[minmax(0,1fr)_minmax(140px,30vh)]"
                : "grid min-h-0 gap-2 grid-rows-[minmax(0,1fr)_minmax(140px,30vh)]"
            }
          >
            <div class="flex min-h-0 flex-col overflow-hidden rounded-[18px] border border-zinc-200 bg-[linear-gradient(180deg,rgba(248,250,252,0.9),rgba(255,255,255,0.95))]">
              <div class="flex flex-wrap items-center justify-between gap-1.5 border-b border-zinc-200 px-2.5 py-2">
                <div>
                  <p class="text-xs font-semibold text-zinc-800 sm:text-sm">
                    记录列表
                  </p>
                  <p class="mt-1 text-xs text-zinc-500">
                    {props.selectedCourse
                      ? props.selectedCourse.name
                      : "请选择课程"}
                  </p>
                  <Show
                    when={props.showingCachedRecords && !props.recordsLoading}
                  >
                    <p class="mt-1 text-xs text-amber-600">
                      当前显示的是本地缓存记录。
                    </p>
                  </Show>
                </div>

                <div class="flex flex-wrap items-center gap-1.5">
                  <button
                    type="button"
                    class="rounded-lg border border-zinc-200 bg-white px-2 py-1 text-xs text-zinc-700 transition hover:bg-zinc-100 active:bg-zinc-200 disabled:cursor-not-allowed disabled:opacity-60"
                    disabled={
                      !props.selectedCourse || props.isRefreshingRecords
                    }
                    onClick={props.onRefreshRecords}
                  >
                    {props.isRefreshingRecords ? "刷新中..." : "刷新记录"}
                  </button>

                  <select
                    class="rounded-lg border border-zinc-200 bg-white px-2 py-1 text-xs transition outline-none focus:border-cyan-400"
                    value={props.recordType}
                    onChange={(event) =>
                      props.onChangeRecordType(
                        event.currentTarget.value as RecordType,
                      )
                    }
                  >
                    <For each={props.recordTypeOptions}>
                      {(item) => (
                        <option
                          value={item.value}
                          disabled={item.value === "/discuss"}
                          class={item.value === "/discuss" ? "text-zinc-400" : ""}
                        >
                          {item.label}
                        </option>
                      )}
                    </For>
                  </select>

                  <Show when={props.recordType === ""}>
                    <button
                      type="button"
                      class="rounded-lg border border-cyan-200 bg-cyan-50 px-2 py-1 text-xs text-cyan-700 transition hover:bg-cyan-100 active:bg-cyan-200"
                      onClick={
                        props.isRunningStudy
                          ? props.onStopStudy
                          : props.onStartStudy
                      }
                    >
                      {props.isRunningStudy ? "停止刷课" : "开始刷课"}
                    </button>
                  </Show>
                </div>
              </div>
              <Show when={props.recordType === ""}>
              <div class="flex flex-wrap items-center justify-between gap-1.5 border-b border-zinc-200/70 px-2.5 py-1.5">
                <div class="flex flex-wrap items-center gap-1.5 text-xs">
                  <button
                    type="button"
                    class={recordFilter() === "all" ? "rounded-full border border-zinc-200 bg-zinc-100 px-2.5 py-0.5 font-medium text-zinc-700 active:bg-zinc-200" : "rounded-full border border-zinc-200 bg-white px-2.5 py-0.5 text-zinc-600 transition hover:bg-zinc-100 active:bg-zinc-200"}
                    onClick={() => setRecordFilter("all")}
                  >
                    全部 {recordStats().total}
                  </button>
                  <button
                    type="button"
                    class={recordFilter() === "unlearned" ? "rounded-full border border-amber-200 bg-amber-100 px-2.5 py-0.5 font-medium text-amber-700 active:bg-amber-200" : "rounded-full border border-amber-200 bg-white px-2.5 py-0.5 text-amber-700 transition hover:bg-amber-50 active:bg-amber-100"}
                    onClick={() => setRecordFilter("unlearned")}
                  >
                    未学 {recordStats().unlearned}
                  </button>
                  <button
                    type="button"
                    class={recordFilter() === "learned" ? "rounded-full border border-emerald-200 bg-emerald-100 px-2.5 py-0.5 font-medium text-emerald-700 active:bg-emerald-200" : "rounded-full border border-emerald-200 bg-white px-2.5 py-0.5 text-emerald-700 transition hover:bg-emerald-50 active:bg-emerald-100"}
                    onClick={() => setRecordFilter("learned")}
                  >
                    已学 {recordStats().learned}
                  </button>
                </div>
                <p class="text-xs text-zinc-500">
                  当前筛选：{recordFilter() === "all" ? "全部" : recordFilter() === "unlearned" ? "未学" : "已学"}
                </p>
              </div>
              </Show>
              <Show when={props.recordType === "/work" && props.workList.length > 0}>
              <div class="flex items-center gap-1.5 border-b border-zinc-200/70 px-2.5 py-1.5 text-xs text-zinc-500">
                共 {props.workList.length} 条作业记录
              </div>
              </Show>
              <Show when={props.recordType === "/exam" && props.examList.length > 0}>
              <div class="flex items-center gap-1.5 border-b border-zinc-200/70 px-2.5 py-1.5 text-xs text-zinc-500">
                共 {props.examList.length} 条考试记录
              </div>
              </Show>

              <div
                class={
                  compact()
                    ? "min-h-0 flex-1 overflow-y-auto p-1.5"
                    : "min-h-0 flex-1 overflow-y-auto p-2"
                }
              >
                <Show when={props.recordsLoading}>
                  <EmptyState>正在加载记录...</EmptyState>
                </Show>

                <Show when={!props.recordsLoading && props.recordError}>
                  <div class="rounded-3xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-600">
                    {props.recordError}
                  </div>
                </Show>

                <Show
                  when={
                    !props.recordsLoading &&
                    !props.recordError &&
                    !props.selectedCourse
                  }
                >
                  <EmptyState>点击左侧课程后，在这里查看对应记录。</EmptyState>
                </Show>

                <Show
                  when={
                    !props.recordsLoading &&
                    !props.recordError &&
                    props.selectedCourse &&
                    props.recordType === "" &&
                    filteredRecords().length === 0
                  }
                >
                  <EmptyState>
                    {props.records.length === 0
                      ? "当前分类下没有记录。"
                      : "当前筛选下没有记录。"}
                  </EmptyState>
                </Show>

                <Show
                  when={
                    !props.recordsLoading &&
                    !props.recordError &&
                    props.selectedCourse &&
                    props.recordType === "/work" &&
                    props.workList.length === 0
                  }
                >
                  <EmptyState>当前课程下没有作业记录。</EmptyState>
                </Show>

                <Show
                  when={
                    !props.recordsLoading &&
                    !props.recordError &&
                    props.selectedCourse &&
                    props.recordType === "/exam" &&
                    props.examList.length === 0
                  }
                >
                  <EmptyState>当前课程下没有考试记录。</EmptyState>
                </Show>

                <Show when={props.recordType === ""}>
                  <div class={compact() ? "flex flex-col gap-1.5" : "flex flex-col gap-2"}>
                    <For each={filteredRecords()}>
                      {(record) => {
                        const stateText =
                          props.renderRecordState(record.state) || "未知状态";
                        const learned =
                          stateText.includes("已学") || record.progress === "1.00";

                        return (
                          <div
                            class={
                              learned
                                ? compact()
                                  ? "rounded-[16px] border border-emerald-200 bg-emerald-50/35 px-2 py-1.5 shadow-sm"
                                  : "rounded-[18px] border border-emerald-200 bg-emerald-50/35 px-2.5 py-2.5 shadow-sm"
                                : compact()
                                  ? "rounded-[16px] border border-amber-200 bg-amber-50/35 px-2 py-1.5 shadow-sm"
                                  : "rounded-[18px] border border-amber-200 bg-amber-50/35 px-2.5 py-2.5 shadow-sm"
                            }
                          >
                            <div class="flex flex-wrap items-start justify-between gap-2">
                              <div class="min-w-0 flex-1">
                                <p class="truncate text-sm font-semibold text-zinc-900">
                                  {record.name}
                                </p>
                                <p class="mt-1 text-xs text-zinc-500">
                                  记录 ID：{record.id} | 章节：{record.chapterId}
                                </p>
                              </div>
                              <span
                                class={
                                  learned
                                    ? "rounded-full bg-emerald-100 px-3 py-1 text-xs font-medium text-emerald-700"
                                    : "rounded-full bg-amber-100 px-3 py-1 text-xs font-medium text-amber-700"
                                }
                              >
                                {stateText}
                              </span>
                            </div>

                            <div class="mt-2 grid gap-1 text-xs text-zinc-600 md:grid-cols-2 xl:grid-cols-3">
                              <p>视频时长：{record.videoDuration}</p>
                              <p>学习秒数：{record.duration}</p>
                              <p>学习进度：{record.progress}</p>
                              <p>开始时间：{record.beginTime || "-"}</p>
                              <p>完成时间：{record.finalTime || "-"}</p>
                              <p>查看次数：{record.viewCount}</p>
                            </div>
                          </div>
                        );
                      }}
                    </For>
                  </div>
                </Show>

                <Show when={props.recordType === "/work"}>
                  <div class={compact() ? "flex flex-col gap-1.5" : "flex flex-col gap-2"}>
                    <For each={props.workList}>
                      {(work) => {
                        const stateRaw = stripHtml(work.state);
                        const stateText = stateRaw || "未做";
                        const done = stateRaw.includes("已阅") || stateRaw.includes("已提交") || stateRaw.includes("已完成");

                        return (
                          <div
                            class={
                              done
                                ? compact()
                                  ? "rounded-[16px] border border-emerald-200 bg-emerald-50/35 px-2 py-1.5 shadow-sm"
                                  : "rounded-[18px] border border-emerald-200 bg-emerald-50/35 px-2.5 py-2.5 shadow-sm"
                                : compact()
                                  ? "rounded-[16px] border border-amber-200 bg-amber-50/35 px-2 py-1.5 shadow-sm"
                                  : "rounded-[18px] border border-amber-200 bg-amber-50/35 px-2.5 py-2.5 shadow-sm"
                            }
                          >
                            <div class="flex flex-wrap items-start justify-between gap-2">
                              <div class="min-w-0 flex-1">
                                <p class="truncate text-sm font-semibold text-zinc-900">
                                  {work.title || work.name}
                                </p>
                                <p class="mt-1 text-xs text-zinc-500">
                                  作业 ID：{work.id} | 章节：{work.chapterId}
                                </p>
                              </div>
                              <span
                                class={
                                  done
                                    ? "rounded-full bg-emerald-100 px-3 py-1 text-xs font-medium text-emerald-700"
                                    : "rounded-full bg-amber-100 px-3 py-1 text-xs font-medium text-amber-700"
                                }
                              >
                                {stateText}
                              </span>
                            </div>

                            <div class="mt-2 grid gap-1 text-xs text-zinc-600 md:grid-cols-2 xl:grid-cols-3">
                              <p>类型：{work.typeName || work.type || "-"}</p>
                              <p>总分：{work.score || "-"}</p>
                              <p>得分：{stripHtml(work.finalScore) || "-"}</p>
                              <p>题目数：{work.topicNumber || "-"}</p>
                              <p>添加时间：{work.addTime || "-"}</p>
                              <p>完成时间：{work.finishTime !== "-" ? work.finishTime : "-"}</p>
                            </div>
                          </div>
                        );
                      }}
                    </For>
                  </div>
                </Show>

                <Show when={props.recordType === "/exam"}>
                  <div class={compact() ? "flex flex-col gap-1.5" : "flex flex-col gap-2"}>
                    <For each={props.examList}>
                      {(exam) => {
                        const stateRaw = stripHtml(exam.state);
                        const stateText = stateRaw || "未做";
                        const done = stateRaw.includes("已阅") || stateRaw.includes("已提交") || stateRaw.includes("已完成");

                        return (
                          <div
                            class={
                              done
                                ? compact()
                                  ? "rounded-[16px] border border-emerald-200 bg-emerald-50/35 px-2 py-1.5 shadow-sm"
                                  : "rounded-[18px] border border-emerald-200 bg-emerald-50/35 px-2.5 py-2.5 shadow-sm"
                                : compact()
                                  ? "rounded-[16px] border border-amber-200 bg-amber-50/35 px-2 py-1.5 shadow-sm"
                                  : "rounded-[18px] border border-amber-200 bg-amber-50/35 px-2.5 py-2.5 shadow-sm"
                            }
                          >
                            <div class="flex flex-wrap items-start justify-between gap-2">
                              <div class="min-w-0 flex-1">
                                <p class="truncate text-sm font-semibold text-zinc-900">
                                  {exam.title || exam.name}
                                </p>
                                <p class="mt-1 text-xs text-zinc-500">
                                  考试 ID：{exam.id} | 章节：{exam.chapterId}
                                </p>
                              </div>
                              <span
                                class={
                                  done
                                    ? "rounded-full bg-emerald-100 px-3 py-1 text-xs font-medium text-emerald-700"
                                    : "rounded-full bg-amber-100 px-3 py-1 text-xs font-medium text-amber-700"
                                }
                              >
                                {stateText}
                              </span>
                            </div>

                            <div class="mt-2 grid gap-1 text-xs text-zinc-600 md:grid-cols-2 xl:grid-cols-3">
                              <p>限时：{exam.limitedTime ? `${exam.limitedTime}分钟` : "-"}</p>
                              <p>总分：{exam.score || "-"}</p>
                              <p>得分：{stripHtml(exam.finalScore) || "-"}</p>
                              <p>题目数：{exam.topicNumber || "-"}</p>
                              <p>添加时间：{exam.addTime || "-"}</p>
                              <p>完成时间：{exam.finishTime !== "-" ? exam.finishTime : "-"}</p>
                            </div>
                          </div>
                        );
                      }}
                    </For>
                  </div>
                </Show>
              </div>
            </div>

            <div class="flex min-h-0 flex-col overflow-hidden rounded-[18px] border border-zinc-200 bg-white">
              <div class="flex items-center justify-between border-b border-zinc-200 px-2.5 py-2">
                <div>
                  <p class="text-xs font-semibold text-zinc-800 sm:text-sm">
                    运行日志
                  </p>
                  <p class="mt-1 text-xs text-zinc-500">
                    输出会自动滚动到最新位置
                  </p>
                </div>

                <div class="flex items-center gap-2">
                  <button
                    type="button"
                    class="rounded-lg border border-zinc-200 px-2 py-0.5 text-xs text-zinc-700 transition hover:bg-zinc-100 active:bg-zinc-200 disabled:cursor-not-allowed disabled:opacity-60"
                    disabled={props.isRefreshingLogs}
                    onClick={props.onRefreshLogs}
                  >
                    {props.isRefreshingLogs ? "刷新中..." : "刷新日志"}
                  </button>
                  <button
                    type="button"
                    class="rounded-lg border border-zinc-200 px-2 py-0.5 text-xs text-zinc-700 transition hover:bg-zinc-100 active:bg-zinc-200"
                    onClick={props.onClearLogs}
                  >
                    清空日志
                  </button>
                </div>
              </div>

              <div
                ref={logContainerRef}
                class="min-h-0 flex-1 overflow-y-auto bg-zinc-950 px-2 py-1.5 font-mono text-emerald-300"
              >
                <Show
                  when={props.studyLogs.length > 0}
                  fallback={<p>暂无日志输出。</p>}
                >
                  <div class="space-y-1">
                    <For each={props.studyLogs}>
                      {(log, index) => (
                        <p>
                          [{index() + 1}]{" "}
                          {props.showLogTimestamps && extractTimestamp(log)
                            ? `${extractTimestamp(log)} `
                            : ""}
                          {stripTimestamp(log)}
                        </p>
                      )}
                    </For>
                  </div>
                </Show>
              </div>
            </div>
          </div>
        </div>
      </Show>
    </section>
  );
};

export default CourseWorkspace;