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

"use client";

import { AlertCircleIcon, CheckIcon, ClockIcon, SaveIcon } from "lucide-react";
import { 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";

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

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

  if (state === "saving")
    return (
      <Badge variant="secondary">
        <Spinner data-icon="inline-start" />
        กำลังบันทึก…
      </Badge>
    );
  if (state === "unsaved")
    return (
      <Badge variant="outline">
        <ClockIcon data-icon="inline-start" />
        ยังไม่ได้บันทึก
      </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 items-center gap-2">
        <Badge variant="destructive">
          <AlertCircleIcon data-icon="inline-start" />
          บันทึกไม่สำเร็จ
        </Badge>
      </div>
    );
  return (
    <Badge variant="secondary">
      <CheckIcon data-icon="inline-start" />
      บันทึกแล้ว
    </Badge>
  );
}

export function SaveStatus({
  canSave,
  onSave,
  ...props
}: SaveFeedbackProps & { canSave: boolean; onSave: () => void }) {
  return (
    <>
      <div className="h-24" aria-hidden="true" />
      <div className="fixed right-4 bottom-[calc(1rem+env(safe-area-inset-bottom))] z-40 flex max-h-[70dvh] w-fit max-w-[calc(100vw-2rem)] flex-col items-end gap-3 overflow-y-auto rounded-xl border bg-background p-3 shadow-lg sm:right-6">
        <div role="status" aria-live="polite">
          <SaveFeedback {...props} />
        </div>
        <Button
          type="button"
          size="lg"
          disabled={!canSave || props.state === "saving"}
          onClick={onSave}
        >
          {props.state === "saving" ? <Spinner data-icon="inline-start" /> : <SaveIcon data-icon="inline-start" />}
          {props.state === "saving" ? "กำลังบันทึก…" : props.state === "error" ? "ลองบันทึกอีกครั้ง" : "บันทึก"}
        </Button>
      </div>
    </>
  );
}