"use client";

import styles from "./platform-shell.module.css";

export function PageStatus(props: { busy: boolean; busyLabel?: string; idleLabel?: string }) {
  return (
    <span className={styles.statusChip} data-state={props.busy ? "busy" : "idle"}>
      {props.busy ? props.busyLabel ?? "处理中" : props.idleLabel ?? "已就绪"}
    </span>
  );
}

export function NoticeBanner(props: { message?: string | null }) {
  if (!props.message) return null;
  return <div className={styles.notice}>{props.message}</div>;
}

export function ErrorBanner(props: { title?: string; message?: string | null }) {
  if (!props.message) return null;
  return (
    <div className={styles.error}>
      <div>
        {props.title ? <strong>{props.title}</strong> : null}
        <p>{props.message}</p>
      </div>
    </div>
  );
}

export function EmptyPanel(props: { message: string }) {
  return <div className={styles.emptyState}>{props.message}</div>;
}

export function ConfirmDialog(props: {
  open: boolean;
  title: string;
  message: string;
  confirmLabel?: string;
  cancelLabel?: string;
  tone?: "default" | "danger";
  busy?: boolean;
  onConfirm: () => void;
  onCancel: () => void;
}) {
  if (!props.open) return null;
  return (
    <div className={styles.dialogBackdrop} role="presentation">
      <section
        aria-labelledby="confirm-dialog-title"
        aria-modal="true"
        className={styles.dialogCard}
        role="dialog"
      >
        <div className={styles.sectionHeader}>
          <div>
            <h3 id="confirm-dialog-title">{props.title}</h3>
            <p>{props.message}</p>
          </div>
        </div>
        <div className={styles.buttonRow}>
          <button
            className={props.tone === "danger" ? styles.dangerButton : undefined}
            disabled={props.busy}
            onClick={props.onConfirm}
            type="button"
          >
            {props.busy ? "处理中..." : props.confirmLabel ?? "确认"}
          </button>
          <button
            className={styles.secondaryButton}
            disabled={props.busy}
            onClick={props.onCancel}
            type="button"
          >
            {props.cancelLabel ?? "取消"}
          </button>
        </div>
      </section>
    </div>
  );
}
