citywalk-stamp/packages/web/src/admin/PageHeader.tsx

import type { ReactNode } from "react";

type Props = {
  eyebrow: string;
  title: string;
  caption?: string;
  action?: ReactNode;
};

export default function PageHeader({ eyebrow, title, caption, action }: Props) {
  return (
    <div className="mb-8 flex items-end justify-between gap-6 flex-wrap">
      <div>
        <div className="flex items-center gap-3 mb-2.5">
          <span className="block w-8 h-px bg-[var(--gold)]" />
          <span
            className="text-[var(--gold)] text-[10px] tracking-[0.35em] uppercase"
            style={{ fontFamily: "'Playfair Display', serif", fontWeight: 500 }}
          >
            {eyebrow}
          </span>
        </div>
        <h1
          className="text-[32px] text-[var(--text-primary)] leading-none"
          style={{ fontFamily: "'Playfair Display', serif", fontWeight: 600, letterSpacing: "-0.01em" }}
        >
          {title}
        </h1>
        {caption && <p className="mt-2 text-[13px] text-[var(--text-muted)]">{caption}</p>}
      </div>
      {action && <div>{action}</div>}
    </div>
  );
}

export function PrimaryButton({ onClick, children }: { onClick: () => void; children: ReactNode }) {
  return (
    <button
      onClick={onClick}
      className="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg text-white text-sm font-medium transition-all hover:brightness-110"
      style={{
        backgroundColor: "var(--terracotta)",
        boxShadow: "0 6px 18px rgba(199,91,57,0.28)",
      }}
    >
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2">
        <path d="M12 5v14M5 12h14" />
      </svg>
      {children}
    </button>
  );
}

export function StatusChip({
  enabled,
  onClick,
}: {
  enabled: boolean;
  onClick: () => void;
}) {
  return (
    <button
      onClick={onClick}
      className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[11px] font-medium transition-colors"
      style={
        enabled
          ? { backgroundColor: "rgba(45,106,79,0.1)", color: "var(--jade)" }
          : { backgroundColor: "rgba(138,132,148,0.12)", color: "var(--text-muted)" }
      }
    >
      <span
        className="inline-block w-1.5 h-1.5 rounded-full"
        style={{
          backgroundColor: enabled ? "var(--jade)" : "var(--text-muted)",
          boxShadow: enabled ? "0 0 6px rgba(45,106,79,0.5)" : "none",
        }}
      />
      {enabled ? "启用" : "禁用"}
    </button>
  );
}

export function ActionButton({
  title,
  onClick,
  variant = "default",
  children,
}: {
  title: string;
  onClick: () => void;
  variant?: "default" | "danger";
  children: ReactNode;
}) {
  const danger = variant === "danger";
  return (
    <button
      title={title}
      onClick={onClick}
      className={`w-8 h-8 flex items-center justify-center rounded-full transition-all ${
        danger
          ? "text-[var(--text-muted)] hover:bg-[rgba(199,91,57,0.1)] hover:text-[var(--terracotta)]"
          : "text-[var(--text-muted)] hover:bg-[rgba(212,165,116,0.12)] hover:text-[var(--text-primary)]"
      }`}
    >
      {children}
    </button>
  );
}

export function EmptyState({ message, action }: { message: string; action?: ReactNode }) {
  return (
    <div className="py-16 flex flex-col items-center gap-4 text-center">
      <div className="relative">
        <span className="absolute inset-0 rounded-full border border-dashed border-[var(--gold)]/30 animate-[rotate-slow_30s_linear_infinite]" />
        <div className="w-16 h-16 rounded-full flex items-center justify-center bg-[var(--bg-paper)]">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="var(--gold)" strokeWidth="1.6">
            <circle cx="12" cy="12" r="10" />
            <path d="M12 8v4M12 16h.01" />
          </svg>
        </div>
      </div>
      <p className="text-sm text-[var(--text-muted)]">{message}</p>
      {action}
    </div>
  );
}

export function LoadingBlock() {
  return (
    <div className="py-20 flex justify-center">
      <div className="w-8 h-8 border-2 border-[var(--gold)] border-t-transparent rounded-full animate-spin" />
    </div>
  );
}

/* ————— Row-action icons ————— */
export const IconEdit = (
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
    <path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7" />
    <path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z" />
  </svg>
);
export const IconCopy = (
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
    <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
    <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" />
  </svg>
);
export const IconQR = (
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
    <rect x="3" y="3" width="7" height="7" />
    <rect x="14" y="3" width="7" height="7" />
    <rect x="3" y="14" width="7" height="7" />
    <path d="M14 14h3v3h-3zM17 17h4M17 21h4M21 14v3" />
  </svg>
);
export const IconDelete = (
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
    <path d="M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6M10 11v6M14 11v6" />
  </svg>
);