eCourt-note/components/wordaddin/TemplateToolsPanel.tsx

"use client";

import { useEffect, useMemo, useState } from "react";
import { CornerDownLeft, Crosshair, FilePlus, LoaderCircle, PenLine, ScanSearch, WrapText } from "lucide-react";

import {
  applyTestValues,
  insertBreakAtSelection,
  insertParagraphAtSelection,
  listContentControls,
  selectContentControl,
  supportsAllContentControlTypes,
  type ScannedField,
} from "@/wordaddin/services/templateService";
import { getErrorMessage } from "@/wordaddin/services/errors";

import { MessageBar } from "./MessageBar";

/**
 * แท็บ "เครื่องมือ Template" (แท็บที่สองของ taskpane) — เครื่องมือช่วยทำ template
 * สำหรับคนออกแบบเอกสาร ใช้ได้ทั้ง phase untracked และ tracking เพราะไม่แตะ backend/tracking:
 *  1. สแกน Content Controls ทั้งเอกสาร + เตือน tag ว่าง/ซ้ำ + กระโดดไปเลือกช่อง
 *  2. กรอกค่าทดสอบทุกช่องแล้วเขียนกลับเข้าเอกสารจริง (ดูผลจัดหน้า/ตัดบรรทัดทันที
 *     โดยไม่ต้อง render ผ่าน /api/template/render)
 *  3. แทรกย่อหน้า/ตัวแบ่งบรรทัด/ตัวแบ่งหน้าที่ cursor ตอนจัดโครงสร้าง
 *
 * state ทั้งหมดถือภายใน — เป็น snapshot ชั่วคราวของเอกสาร: สลับแท็บแล้ว unmount = ทิ้ง
 * ค่าทิ้งโดยตั้งใจ (เก็บไว้ก็ stale เสียเองเมื่อผู้ใช้แก้เอกสารระหว่างนั้น)
 */

const BTN_PRIMARY =
  "focus-ring inline-flex items-center gap-1.5 rounded-md bg-primary px-4 py-2.5 text-sm font-medium text-white transition hover:-translate-y-px hover:bg-primary-hover hover:shadow-btn-glow disabled:pointer-events-none disabled:opacity-50";
const BTN_SECONDARY =
  "focus-ring inline-flex items-center gap-1.5 rounded-md border border-line bg-white px-3 py-1.5 text-sm text-ink transition hover:border-primary hover:text-primary disabled:pointer-events-none disabled:opacity-50";
/** px-2 py-1.5 + text-xs ≈ สูง 30px — พ้นเกณฑ์ touch target 24px (WCAG 2.5.8) เหมือน VersionHistoryPanel */
const BTN_ACTION =
  "focus-ring inline-flex items-center gap-1 rounded-md px-2 py-1.5 text-xs text-ink-soft transition hover:bg-primary/[0.06] hover:text-primary disabled:pointer-events-none disabled:opacity-50";

/** ปุ่มแทรกองค์ประกอบ (ย่อหน้า/ตัวแบ่ง) — icon บน label ล่าง 3 ปุ่มต่อแถว */
const BTN_INSERT =
  "focus-ring flex flex-col items-center gap-1 rounded-md border border-line bg-white px-1 py-2 text-xs text-ink transition hover:border-primary hover:text-primary disabled:pointer-events-none disabled:opacity-50";

function TemplateToolsPanel({ onBusyChange }: { onBusyChange?: (busy: boolean) => void }) {
  /** null = ยังไม่เคยสแกน (empty state ต่างจาก [] = สแกนแล้วไม่มีช่อง) */
  const [fields, setFields] = useState<ScannedField[] | null>(null);
  const [scanning, setScanning] = useState(false);
  const [applying, setApplying] = useState(false);
  const [insertingParagraph, setInsertingParagraph] = useState(false);
  const [insertingBreak, setInsertingBreak] = useState<"line" | "page" | null>(null);
  /** ค่าฟอร์มต่อ tag — key คือ tag ที่ trim แล้วไม่ว่างและไม่ซ้ำ */
  const [values, setValues] = useState<Record<string, string>>({});
  const [error, setError] = useState<string | null>(null);
  const [warning, setWarning] = useState<string | null>(null);
  const [success, setSuccess] = useState<string | null>(null);
  /** คำเตือนความสามารถของ host (WordApi <1.5 เห็นเฉพาะ rich text CC) — แยก state จาก warning
   *  ผลลัพธ์ของ operation เพราะเป็นข้อจำกัดของ host ตลอด session ห้ามโดน banner อื่นล้าง/ทับ */
  const [capabilityWarning, setCapabilityWarning] = useState<string | null>(null);

  const busy = scanning || applying || insertingParagraph || insertingBreak !== null;

  /** รายงาน busy ให้ TaskpaneApp ปิด toggle แท็บระหว่าง operation ที่เขียนเอกสาร — กันสลับไปแท็บ
   *  Versioning กด Save & Version แล้ว stamp/capture ซ้อน operation ที่ยังรันอยู่ (panel unmount
   *  แล้ว promise ของ service ก็ยังเขียนเอกสารต่อ) · cleanup ส่ง false ตอน unmount กันปุ่มค้าง disabled */
  useEffect(() => {
    onBusyChange?.(busy);
    return () => onBusyChange?.(false);
  }, [busy, onBusyChange]);

  /** tag ที่ไม่ว่างไม่ซ้ำ (เอาตัวแรกของ tag ซ้ำ) — เป็น key ของฟอร์มค่าทดสอบ */
  const uniqueTags = useMemo(() => {
    if (!fields) return [];
    const seen = new Set<string>();
    const tags: string[] = [];
    for (const field of fields) {
      const tag = field.tag.trim();
      if (tag === "" || seen.has(tag)) continue;
      seen.add(tag);
      tags.push(tag);
    }
    return tags;
  }, [fields]);

  const emptyTagCount = useMemo(
    () => (fields ? fields.filter((field) => field.tag.trim() === "").length : 0),
    [fields],
  );

  /** tag ที่มีมากกว่า 1 ช่อง (เทียบหลัง trim) — render pipeline อ่านค่าเฉพาะช่องแรกของ tag จึงต้องเตือน */
  const duplicateTags = useMemo(() => {
    if (!fields) return [];
    const counts = new Map<string, number>();
    for (const field of fields) {
      const tag = field.tag.trim();
      if (tag === "") continue;
      counts.set(tag, (counts.get(tag) ?? 0) + 1);
    }
    return Array.from(counts.entries())
      .filter(([, count]) => count > 1)
      .map(([tag]) => tag);
  }, [fields]);

  /** มีอย่างน้อยหนึ่งช่องที่กรอกค่า — กันกดเขียนตอนฟอร์มว่างทั้งหมด (service จะไม่แตะอะไรเลย
   *  แล้ว UI ไปตีความ appliedCount 0 ว่า "ช่องถูกลบไป" ซึ่งเข้าใจผิด) */
  const hasFilledValue = useMemo(
    () => uniqueTags.some((tag) => (values[tag] ?? "").trim() !== ""),
    [uniqueTags, values],
  );

  /**
   * สแกนเอกสาร + เติมค่าฟอร์ม
   * - merge=false (กดปุ่มสแกนเอง): seed ฟอร์มใหม่ทั้งหมดจากค่าปัจจุบันของช่องแรกของแต่ละ tag
   *    พร้อมรีเซ็ต success/warning เดิม (ผลลัพธ์รอบก่อนไม่เกี่ยวกับ list รอบใหม่แล้ว)
   * - merge=true (หลังเขียนค่า): คงค่าที่ผู้ใช้พิมพ์ค้างไว้ เติมเฉพาะ tag ใหม่ที่ยังไม่มีในฟอร์ม
   *    และตัด tag ที่หายไปจากเอกสารทิ้ง — ทั้งสองอยู่บนผลสแกนรอบใหม่เสมอ
   *    **ไม่แตะ success/warning** เพราะ handler ที่เรียกจัด banner ผลลัพธ์ของตัวเองอยู่
   *    (คำเตือนความสามารถของ host แยก state ต่างหาก จึงไม่ทับกัน)
   */
  const runScan = async (merge: boolean) => {
    setScanning(true);
    setError(null);
    if (!merge) {
      setSuccess(null);
      setWarning(null);
    }
    try {
      const scanned = await listContentControls();
      setFields(scanned);
      // Word ต่ำกว่า WordApi 1.5 (เช่น Office 2019) มองเห็นเฉพาะ rich text CC — template ของศาล
      // ส่วนใหญ่เป็น plain text CC; เป็นข้อจำกัดของ host ตลอด session จึงเช็คให้ทุกรอบสแกน
      setCapabilityWarning(
        supportsAllContentControlTypes()
          ? null
          : "Word รุ่นนี้มองเห็นเฉพาะช่องแบบ rich text — ช่องแบบ plain text ต้องใช้ Word ที่รองรับ WordApi 1.5 (เช่น Microsoft 365) จึงแสดงและเขียนค่าได้",
      );
      setValues((previous) => {
        // สร้างใหม่จาก tag ของผลสแกนรอบนี้เท่านั้น — merge เอาแค่ค่าเดิมของ tag ที่ยังอยู่
        // (tag ที่ถูกลบจากเอกสารตัดทิ้ง ไม่ให้ค้างไปโดน missingTags รอบเขียนถัด ๆ ไป)
        const next: Record<string, string> = {};
        const seen = new Set<string>();
        for (const field of scanned) {
          const tag = field.tag.trim();
          if (tag === "" || seen.has(tag)) continue;
          seen.add(tag);
          next[tag] = merge && tag in previous ? previous[tag] : field.text;
        }
        return next;
      });
    } catch (scanError) {
      setError(getErrorMessage(scanError, "สแกนช่องในเอกสารไม่สำเร็จ"));
    } finally {
      setScanning(false);
    }
  };

  const handleView = async (id: number) => {
    setError(null);
    try {
      await selectContentControl(id);
    } catch (viewError) {
      setError(getErrorMessage(viewError, "เลือกช่องไม่สำเร็จ"));
    }
  };

  /** แทรกย่อหน้าว่างที่ cursor — เห็นผลในเอกสารทันทีจึงไม่ต้องแจ้ง success รบกวน */
  const handleInsertParagraph = async () => {
    setInsertingParagraph(true);
    setError(null);
    try {
      await insertParagraphAtSelection();
    } catch (insertError) {
      setError(getErrorMessage(insertError, "แทรกย่อหน้าไม่สำเร็จ"));
    } finally {
      setInsertingParagraph(false);
    }
  };

  const handleInsertBreak = async (breakKind: "line" | "page") => {
    setInsertingBreak(breakKind);
    setError(null);
    try {
      await insertBreakAtSelection(breakKind);
    } catch (insertError) {
      setError(
        getErrorMessage(insertError, breakKind === "page" ? "แทรกตัวแบ่งหน้าไม่สำเร็จ" : "แทรกตัวแบ่งบรรทัดไม่สำเร็จ"),
      );
    } finally {
      setInsertingBreak(null);
    }
  };

  const handleApply = async () => {
    setApplying(true);
    setError(null);
    setSuccess(null);
    setWarning(null);
    try {
      const result = await applyTestValues(values);
      if (result.appliedCount === 0 && result.failures.length === 0) {
        setWarning("ไม่พบช่องที่ตรงกับค่าที่กรอก (อาจถูกลบไปหลังสแกน) — กดสแกนใหม่");
      } else {
        if (result.appliedCount > 0) {
          setSuccess(`เขียนค่าทดสอบลงแล้ว ${result.appliedCount} ช่อง`);
        }
        const problems: string[] = [];
        if (result.missingTags.length > 0) {
          problems.push(`ไม่พบช่อง tag: ${result.missingTags.join(", ")}`);
        }
        if (result.failures.length > 0) {
          const first = result.failures[0];
          problems.push(
            `เขียนไม่สำเร็จ ${result.failures.length} tag (${result.failures
              .map((failure) => failure.tag)
              .join(", ")}) — ${first.reason}`,
          );
        }
        if (problems.length > 0) {
          setWarning(
            `${problems.join(" · ")} — ถ้าเอกสารนี้ถูกล็อค (Review → Restrict Editing) ให้ปลดก่อนจึงเขียนค่าได้`,
          );
        }
      }
      // สแกนใหม่ให้ค่าย่อใน list ตรงเอกสารจริง — คงค่าฟอร์มไว้ให้แก้ต่อ
      await runScan(true);
    } catch (applyError) {
      setError(getErrorMessage(applyError, "เขียนค่าลงเอกสารไม่สำเร็จ"));
    } finally {
      setApplying(false);
    }
  };

  return (
    /* ห้ามใส่ items-start — ลูกทุกตัวจะหดตามเนื้อหา (เหมือน branch tracking ของ TaskpaneApp) */
    <div className="flex flex-col gap-2 pt-4">
      {error ? <MessageBar intent="error">{error}</MessageBar> : null}
      {warning ? <MessageBar intent="warning">{warning}</MessageBar> : null}
      {success ? <MessageBar intent="success">{success}</MessageBar> : null}
      {capabilityWarning ? <MessageBar intent="warning">{capabilityWarning}</MessageBar> : null}

      {/* §1 ตรวจสอบ Content Controls */}
      <div className="mt-2 flex items-baseline justify-between gap-2">
        <h3 className="font-display text-sm font-semibold text-ink">ตรวจสอบ Content Controls</h3>
        {fields ? <span className="text-xs text-ink-soft">{fields.length} ช่อง</span> : null}
      </div>
      <button
        type="button"
        className={`${BTN_SECONDARY} w-full justify-center`}
        disabled={busy}
        aria-busy={scanning}
        onClick={() => void runScan(false)}
      >
        {scanning ? (
          <LoaderCircle className="size-4 animate-spin" aria-hidden />
        ) : (
          <ScanSearch className="size-4" aria-hidden />
        )}
        สแกนช่องในเอกสาร
      </button>

      {fields && (emptyTagCount > 0 || duplicateTags.length > 0) ? (
        <MessageBar intent="warning">
          {emptyTagCount > 0 ? `มี ${emptyTagCount} ช่องที่ยังไม่ได้ตั้ง tag` : ""}
          {emptyTagCount > 0 && duplicateTags.length > 0 ? " · " : ""}
          {duplicateTags.length > 0
            ? `tag ซ้ำ: ${duplicateTags.join(", ")} — ตอน render ระบบอ่านเฉพาะช่องแรกของ tag`
            : ""}
        </MessageBar>
      ) : null}

      {!fields && !scanning ? (
        <p className="text-sm text-ink-soft">กดสแกนเพื่อดูรายการช่องในเอกสาร</p>
      ) : null}
      {fields && fields.length === 0 && !scanning ? (
        <p className="text-sm text-ink-soft">ไม่พบ content control ในเอกสาร</p>
      ) : null}

      {fields && fields.length > 0 ? (
        <ol className="relative">
          {fields.length > 1 ? <span className="absolute bottom-2 left-[3.5px] top-2 w-px bg-line" aria-hidden /> : null}
          {fields.map((field, index) => (
            <li className="relative pb-3 pl-4 last:pb-0" key={field.id}>
              <span
                className={`absolute left-0 top-[5px] size-2 rounded-full ${
                  field.tag.trim() === "" ? "border border-warning bg-canvas" : "bg-ink"
                }`}
                aria-hidden
              />
              <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
                <span className="text-xs text-ink-faint">{index + 1}.</span>
                <span
                  className="break-all text-sm font-medium text-ink"
                  title={`tag: ${field.tag || "—"} · title: ${field.title || "—"} · type: ${field.type}`}
                >
                  {field.tag.trim() === "" ? "(ไม่มี tag)" : field.tag.trim()}
                </span>
                <span className="rounded-full bg-ink/[0.06] px-1.5 py-px text-[11px] text-ink-soft">
                  {field.kind === "inline" ? "ในบรรทัด" : "บล็อก"}
                </span>
                <span className="ml-auto">
                  <button
                    type="button"
                    className={BTN_ACTION}
                    disabled={busy}
                    onClick={() => void handleView(field.id)}
                  >
                    <Crosshair className="size-3.5" aria-hidden />
                    ดูช่อง
                  </button>
                </span>
              </div>
              <p className="mt-0.5 truncate text-xs text-ink-soft" title={field.text}>
                {field.text.trim() === "" ? "(ว่าง)" : field.text}
              </p>
            </li>
          ))}
        </ol>
      ) : null}

      {/* §2 กรอกค่าทดสอบ */}
      {uniqueTags.length > 0 ? (
        <>
          <h3 className="mt-4 font-display text-sm font-semibold text-ink">กรอกค่าทดสอบ</h3>
          <p className="text-sm text-ink-soft">
            แก้ค่าแล้วกดเขียนลงเอกสารเพื่อดูผลจัดหน้าจริง — ช่องที่เว้นว่างจะไม่ถูกแตะ
          </p>
          <div className="flex flex-col gap-2" aria-busy={applying}>
            {uniqueTags.map((tag, index) => (
              <div key={tag} className="flex flex-col gap-1">
                <label className="text-sm font-medium text-ink break-all" htmlFor={`wordaddin-template-value-${index}`}>
                  {tag}
                </label>
                <input
                  id={`wordaddin-template-value-${index}`}
                  className="genesis-input block w-full"
                  value={values[tag] ?? ""}
                  onChange={(event) => setValues((previous) => ({ ...previous, [tag]: event.target.value }))}
                  disabled={busy}
                />
              </div>
            ))}
          </div>
          <button
            type="button"
            className={`${BTN_PRIMARY} w-full justify-center`}
            disabled={busy || !hasFilledValue}
            onClick={() => void handleApply()}
          >
            <PenLine className="size-4" aria-hidden />
            {applying ? "กำลังเขียนค่า…" : "เขียนค่าลงเอกสาร"}
          </button>
        </>
      ) : fields ? (
        <p className="mt-4 text-sm text-ink-soft">ไม่มีช่องที่ตั้ง tag ไว้ — สแกนก่อนจึงจะกรอกค่าทดสอบได้</p>
      ) : (
        <p className="mt-4 text-sm text-ink-soft">สแกนก่อนเพื่อกรอกค่าทดสอบ</p>
      )}

      {/* §3 ปุ่มแทรกองค์ประกอบหน้า — เสริมตอนจัดโครงสร้าง template (ตรวจด้วย formatting marks ตามปกติ:
          Ctrl+Shift+8 — สลับผ่าน add-in ไม่ได้เพราะ Office.js ไม่มี API) */}
      <h3 className="mt-4 font-display text-sm font-semibold text-ink">แทรกย่อหน้า / ตัวแบ่ง</h3>
      <div className="grid grid-cols-3 gap-1">
        <button
          type="button"
          className={BTN_INSERT}
          disabled={busy}
          aria-busy={insertingParagraph}
          title="แทรกย่อหน้าว่างที่ตำแหน่ง cursor (เหมือนกด Enter)"
          onClick={() => void handleInsertParagraph()}
        >
          {insertingParagraph ? (
            <LoaderCircle className="size-4 animate-spin" aria-hidden />
          ) : (
            <CornerDownLeft className="size-4" aria-hidden />
          )}
          ย่อหน้า
        </button>
        <button
          type="button"
          className={BTN_INSERT}
          disabled={busy}
          aria-busy={insertingBreak === "line"}
          title="ขึ้นบรรทัดใหม่ในย่อหน้าเดิม (Shift+Enter)"
          onClick={() => void handleInsertBreak("line")}
        >
          {insertingBreak === "line" ? (
            <LoaderCircle className="size-4 animate-spin" aria-hidden />
          ) : (
            <WrapText className="size-4" aria-hidden />
          )}
          แบ่งบรรทัด
        </button>
        <button
          type="button"
          className={BTN_INSERT}
          disabled={busy}
          aria-busy={insertingBreak === "page"}
          title="ขึ้นหน้าใหม่ (Ctrl+Enter)"
          onClick={() => void handleInsertBreak("page")}
        >
          {insertingBreak === "page" ? (
            <LoaderCircle className="size-4 animate-spin" aria-hidden />
          ) : (
            <FilePlus className="size-4" aria-hidden />
          )}
          แบ่งหน้า
        </button>
      </div>
    </div>
  );
}

export default TemplateToolsPanel;