"use client";

import Link from "next/link";
import { RotateCcw, X } from "lucide-react";

import { StatusNote } from "@/components/ui/StatusNote";
import { buttonClass } from "@/lib/ui/variants";
import {
  isPinned,
  kindLabel,
  reasonLabel,
  RECENT_N_MAX,
  RECENT_N_MIN,
  type InjectionEntity,
  type InjectionEntityRef,
} from "@/lib/workbench/injection";
import { useInjection } from "@/lib/workbench/useInjection";

interface ChapterAssistantProps {
  projectId: string;
  chapterNo: number;
}

// 右栏「本章助手」（UX §6.3）。
// 「本章注入（透明）」读 B0 端点，列出确定性选中的设定/角色 + 入选理由徽标，
// 并让作者 📌置顶 / ✕排除 / 调近 N 章（可控版）——「看到的=写章用的」信任牌（不变量 #6）。
// 桌面 aside 包裹；移动端经 Workbench 抽屉复用 AssistantContent。
export function ChapterAssistant({ projectId, chapterNo }: ChapterAssistantProps) {
  return (
    <aside className="hidden border-l border-line bg-panel py-4 lg:block">
      <AssistantContent projectId={projectId} chapterNo={chapterNo} />
    </aside>
  );
}

export function AssistantContent({ projectId, chapterNo }: ChapterAssistantProps) {
  const injection = useInjection(projectId, chapterNo);
  const data = injection.data;
  const selected = data?.selected ?? [];
  const excluded = data?.excluded ?? [];

  return (
    <div className="px-4">
      <div className="flex items-center justify-between">
        <h2 className="text-sm font-semibold text-ink">本章助手</h2>
        {injection.saving ? (
          <span className="text-[10px] text-ink-soft">保存中…</span>
        ) : null}
      </div>

      <section className="mt-4">
        <div className="flex items-center justify-between">
          <h3 className="text-xs font-semibold uppercase tracking-wide text-ink-soft">
            本章注入（透明）
          </h3>
          {data ? (
            <RecentStepper
              value={data.recent_n}
              disabled={injection.saving}
              onChange={injection.setRecentN}
            />
          ) : null}
        </div>

        {injection.loading ? (
          <p className="mt-2 text-xs text-ink-soft">加载注入信息…</p>
        ) : !data ? (
          // 首次加载失败：data 仍为空 → 满屏错误框 + 重试。
          <StatusNote variant="danger" className="mt-2 text-xs" title="注入信息暂不可用">
            <p>请检查后端连接后重试。</p>
            <button
              type="button"
              onClick={injection.reload}
              className={buttonClass({ variant: "outline", size: "sm", className: "mt-2" })}
            >
              <RotateCcw className="h-3.5 w-3.5" aria-hidden="true" />
              重试
            </button>
          </StatusNote>
        ) : (
          <>
            {injection.saveError ? (
              // 保存失败：悬浮提示，不替换列表；可关闭 + 重试上一次覆盖。
              <StatusNote variant="danger" className="mt-2 text-xs" title={injection.saveError}>
                <div className="mt-1 flex items-center gap-2">
                  <button
                    type="button"
                    onClick={() => void injection.retrySave()}
                    disabled={injection.saving}
                    className={buttonClass({ variant: "outline", size: "sm" })}
                  >
                    <RotateCcw className="h-3.5 w-3.5" aria-hidden="true" />
                    重试
                  </button>
                  <button
                    type="button"
                    onClick={injection.clearSaveError}
                    aria-label="关闭保存失败提示"
                    className={buttonClass({ variant: "ghost", size: "sm" })}
                  >
                    <X className="h-3.5 w-3.5" aria-hidden="true" />
                    关闭
                  </button>
                </div>
              </StatusNote>
            ) : null}

            {selected.length === 0 ? (
              <p className="mt-2 rounded border border-dashed border-line bg-bg p-3 text-xs text-ink-soft">
                本章暂无注入实体（先在大纲点名设定/角色，或从下方排除项恢复）。
              </p>
            ) : (
              <ul className="mt-2 space-y-2">
                {selected.map((entity) => (
                  <EntityRow
                    key={`${entity.kind}:${entity.name}`}
                    entity={entity}
                    pinned={isPinned(
                      { pinned: data.pinned, excluded: data.excluded, recent_n: data.recent_n },
                      entity,
                    )}
                    disabled={injection.saving}
                    onTogglePin={injection.togglePin}
                    onExclude={injection.exclude}
                  />
                ))}
              </ul>
            )}
          </>
        )}

        {excluded.length > 0 ? (
          <div className="mt-3">
            <h4 className="text-[10px] uppercase tracking-wide text-ink-soft">
              已排除（不注入）
            </h4>
            <ul className="mt-1 space-y-1">
              {excluded.map((ref) => (
                <ExcludedRow
                  key={`${ref.kind}:${ref.name}`}
                  refItem={ref}
                  disabled={injection.saving}
                  onRestore={injection.restore}
                />
              ))}
            </ul>
          </div>
        ) : null}
      </section>

      <section className="mt-6">
        <h3 className="text-xs font-semibold uppercase tracking-wide text-ink-soft">
          四审
        </h3>
        <p className="mt-2 text-xs text-ink-soft">
          一致性 / 伏笔 / 文风 / 节奏，在审稿页逐条裁决。
        </p>
        <Link
          href={`/projects/${projectId}/review?chapter=${chapterNo}`}
          className={buttonClass({ variant: "outline", size: "sm", className: "mt-2" })}
        >
          去审稿 →
        </Link>
      </section>
    </div>
  );
}

interface EntityRowProps {
  entity: InjectionEntity;
  pinned: boolean;
  disabled: boolean;
  onTogglePin: (ref: InjectionEntityRef) => void;
  onExclude: (ref: InjectionEntityRef) => void;
}

function EntityRow({ entity, pinned, disabled, onTogglePin, onExclude }: EntityRowProps) {
  const ref: InjectionEntityRef = { kind: entity.kind, name: entity.name };
  return (
    <li className="rounded border border-line bg-bg p-2">
      <div className="flex items-center gap-2">
        <span className="rounded bg-panel px-1.5 py-0.5 text-[10px] text-ink-soft">
          {kindLabel(entity.kind)}
        </span>
        <span className="text-sm text-ink">{entity.name}</span>
        <div className="ml-auto flex items-center gap-1">
          <button
            type="button"
            disabled={disabled}
            aria-pressed={pinned}
            title={pinned ? "取消置顶" : "置顶（强制注入）"}
            onClick={() => onTogglePin(ref)}
            className={`rounded px-1.5 py-0.5 text-[11px] disabled:opacity-50 ${
              pinned
                ? "bg-[var(--color-cinnabar-wash)] text-cinnabar"
                : "text-ink-soft hover:bg-panel"
            }`}
          >
            📌
          </button>
          <button
            type="button"
            disabled={disabled}
            title="排除（不注入本章）"
            aria-label={`排除 ${entity.name}`}
            onClick={() => onExclude(ref)}
            className="rounded px-1.5 py-0.5 text-[11px] text-ink-soft hover:bg-panel disabled:opacity-50"
          >
            ✕
          </button>
        </div>
      </div>
      <div className="mt-1.5 flex flex-wrap gap-1">
        {(entity.reasons ?? []).map((reason) => (
          <span
            key={reason}
            className="rounded bg-[var(--color-cinnabar-wash)] px-1.5 py-0.5 text-[10px] text-cinnabar"
          >
            {reasonLabel(reason)}
          </span>
        ))}
      </div>
    </li>
  );
}

interface ExcludedRowProps {
  refItem: InjectionEntityRef;
  disabled: boolean;
  onRestore: (ref: InjectionEntityRef) => void;
}

function ExcludedRow({ refItem, disabled, onRestore }: ExcludedRowProps) {
  return (
    <li className="flex items-center gap-2 rounded border border-dashed border-line px-2 py-1">
      <span className="text-[10px] text-ink-soft">{kindLabel(refItem.kind)}</span>
      <span className="text-xs text-ink-soft line-through">{refItem.name}</span>
      <button
        type="button"
        disabled={disabled}
        title="恢复（回到自动判定）"
        onClick={() => onRestore(refItem)}
        className="ml-auto rounded px-1.5 py-0.5 text-[11px] text-cinnabar hover:bg-[var(--color-cinnabar-wash)] disabled:opacity-50"
      >
        ↩ 恢复
      </button>
    </li>
  );
}

interface RecentStepperProps {
  value: number;
  disabled: boolean;
  onChange: (n: number) => void;
}

// 「关联近 N 章」步进器：覆盖近况摘要回看章数（钳在 [MIN, MAX]）。
function RecentStepper({ value, disabled, onChange }: RecentStepperProps) {
  return (
    <div className="flex items-center gap-1 text-[11px] text-ink-soft">
      <span>近</span>
      <button
        type="button"
        disabled={disabled || value <= RECENT_N_MIN}
        aria-label="减少关联章数"
        onClick={() => onChange(value - 1)}
        className="rounded border border-line px-1.5 leading-tight hover:bg-panel disabled:opacity-40"
      >
        −
      </button>
      <span className="w-4 text-center tabular-nums text-ink">{value}</span>
      <button
        type="button"
        disabled={disabled || value >= RECENT_N_MAX}
        aria-label="增加关联章数"
        onClick={() => onChange(value + 1)}
        className="rounded border border-line px-1.5 leading-tight hover:bg-panel disabled:opacity-40"
      >
        +
      </button>
      <span>章</span>
    </div>
  );
}