buzz-sheet/components/admin/save-status.tsx

"use client";

import { AlertCircleIcon, CheckIcon, ClockIcon, SaveIcon } from "lucide-react";
import { useEffect, useRef, useState } from "react";

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Spinner } from "@/components/ui/spinner";
import type { SaveState } from "@/hooks/use-manual-save";
import { cn } from "@/lib/utils";
import { FloatingSavePanel } from "./floating-save-panel";

interface SaveFeedbackProps {
  state: SaveState;
  issues?: readonly string[];
  conflictVersion?: number | null;
  canOverwrite?: boolean;
  onReloadLatest?: () => void;
  onOverwrite?: () => void;
}

function SaveText({ children }: { children: string }) {
  const ref = useRef<HTMLSpanElement>(null);

  useEffect(() => {
    const text = ref.current;
    if (!text) return;
    let active = true;
    const fit = () => {
      if (!active) return;
      text.style.removeProperty("font-size");
      const width = text.clientWidth;
      if (width > 0 && text.scrollWidth > width) {
        const fontSize = Number.parseFloat(window.getComputedStyle(text).fontSize);
        text.style.fontSize = `${Math.floor(fontSize * width / text.scrollWidth * 10) / 10}px`;
      }
    };
    fit();
    const observer = typeof ResizeObserver !== "undefined" ? new ResizeObserver(fit) : null;
    if (text.parentElement) observer?.observe(text.parentElement);
    window.addEventListener("resize", fit);
    void document.fonts?.ready.then(fit);
    return () => {
      active = false;
      observer?.disconnect();
      window.removeEventListener("resize", fit);
    };
  }, [children]);

  return <span ref={ref} className="block min-w-0">{children}</span>;
}

function SaveFeedback({
  state,
  issues = [],
  conflictVersion,
  canOverwrite = false,
  onReloadLatest,
  onOverwrite,
}: SaveFeedbackProps) {
  const [showIssues, setShowIssues] = useState(false);

  if (state === "saving")
    return (
      <Badge variant="secondary" className="max-w-full">
        <Spinner data-icon="inline-start" />
        <SaveText>กำลังบันทึก…</SaveText>
      </Badge>
    );
  if (state === "unsaved")
    return (
      <Badge variant="outline" className="max-w-full">
        <ClockIcon data-icon="inline-start" />
        <SaveText>ยังไม่ได้บันทึก</SaveText>
      </Badge>
    );
  if (state === "incomplete")
    return (
      <div className="flex flex-col items-end gap-2">
        <Button
          type="button"
          variant="outline"
          size="sm"
          onClick={() => setShowIssues((current) => !current)}
          aria-expanded={showIssues}
        >
          <AlertCircleIcon data-icon="inline-start" />
          {showIssues ? "ซ่อนรายการ" : "ตรวจสอบข้อมูลที่ยังไม่ครบ"}
        </Button>
        {showIssues ? (
          <Alert variant="destructive" className="max-w-md">
            <AlertCircleIcon aria-hidden="true" />
            <AlertTitle>กรุณากรอกข้อมูลให้ครบ</AlertTitle>
            <AlertDescription>
              <div className="flex flex-col gap-2">
                <p>
                  แก้ไขรายการด้านล่าง แล้วกดปุ่มบันทึก
                  ข้อมูลที่กรอกไว้ยังไม่หาย
                </p>
                {issues.length ? (
                  <ul className="flex flex-col gap-1">
                    {issues.map((issue, index) => (
                      <li key={`${issue}-${index}`}>{issue}</li>
                    ))}
                  </ul>
                ) : null}
              </div>
            </AlertDescription>
          </Alert>
        ) : null}
      </div>
    );
  if (state === "conflict")
    return (
      <Alert
        id="save-conflict"
        variant="destructive"
        className="max-w-xl scroll-m-6"
      >
        <AlertCircleIcon aria-hidden="true" />
        <AlertTitle>มีการบันทึกข้อมูลใหม่จากผู้แก้ไขคนอื่น</AlertTitle>
        <AlertDescription>
          <div className="flex flex-col gap-3">
            <p>
              กรุณาเลือกโหลดข้อมูลล่าสุดหรือเขียนทับด้วย Draft นี้
              {conflictVersion ? ` (version ${conflictVersion})` : ""}
            </p>
            <div className="flex flex-wrap gap-2">
              {onReloadLatest ? (
                <Button
                  type="button"
                  variant="outline"
                  size="sm"
                  onClick={onReloadLatest}
                >
                  โหลดข้อมูลล่าสุด
                </Button>
              ) : null}
              {onOverwrite ? (
                <Button
                  type="button"
                  variant="destructive"
                  size="sm"
                  disabled={!canOverwrite}
                  onClick={onOverwrite}
                >
                  เขียนทับด้วย Draft นี้
                </Button>
              ) : null}
            </div>
          </div>
        </AlertDescription>
      </Alert>
    );
  if (state === "error")
    return (
      <div className="flex max-w-full items-center gap-2">
        <Badge variant="destructive" className="max-w-full">
          <AlertCircleIcon data-icon="inline-start" />
          <SaveText>บันทึกไม่สำเร็จ</SaveText>
        </Badge>
      </div>
    );
  return (
    <Badge variant="secondary" className="max-w-full">
      <CheckIcon data-icon="inline-start" />
      <SaveText>บันทึกแล้ว</SaveText>
    </Badge>
  );
}

export function SaveStatus({
  canSave,
  onSave,
  ...props
}: SaveFeedbackProps & { canSave: boolean; onSave: () => void }) {
  return (
    <>
      <FloatingSavePanel>
        <div
          role="status"
          aria-live="polite"
          className={cn(
            "flex min-h-0 w-full max-w-full flex-col items-end",
            props.state === "incomplete" || props.state === "conflict"
              ? "shrink touch-pan-y overflow-x-hidden overflow-y-auto"
              : "shrink-0 overflow-hidden",
          )}
        >
          <SaveFeedback {...props} />
        </div>
        <Button
          type="button"
          size="lg"
          className="min-h-11 w-full flex-1"
          disabled={!canSave || props.state === "saving"}
          onClick={onSave}
        >
          {props.state === "saving" ? <Spinner data-icon="inline-start" /> : <SaveIcon data-icon="inline-start" />}
          <SaveText>{props.state === "saving" ? "กำลังบันทึก…" : props.state === "error" ? "ลองบันทึกอีกครั้ง" : "บันทึก"}</SaveText>
        </Button>
      </FloatingSavePanel>
    </>
  );
}