import type { ButtonHTMLAttributes, InputHTMLAttributes, ReactNode, SelectHTMLAttributes, TextareaHTMLAttributes } from "react";

export function PageTitle({ title, subtitle, action }: { title: string; subtitle?: string; action?: ReactNode }) {
  return (
    <div className="button-row" style={{ justifyContent: "space-between", alignItems: "flex-start" }}>
      <div>
        <div className="ac-title-bar">{title}</div>
        {subtitle ? <p className="muted hx-text-sm" style={{ margin: "0.7rem 0 0", maxWidth: "52rem" }}>{subtitle}</p> : null}
      </div>
      {action}
    </div>
  );
}

type CardTone = "brand" | "mint" | "peach" | "lavender" | "sky";

export function Card({
  title,
  children,
  action,
  tone
}: {
  title?: string;
  children: ReactNode;
  action?: ReactNode;
  tone?: CardTone;
}) {
  const toneClass = tone ? `card--${tone}` : "";
  const hasHead = Boolean(title || action);

  return (
    <section className={`card ${toneClass}`.trim()}>
      {hasHead ? (
        <div className="card-head">
          {title ? <h2>{title}</h2> : <span />}
          {action}
        </div>
      ) : null}
      <div className={hasHead ? "card-body" : undefined}>
        {children}
      </div>
    </section>
  );
}

export function Field({ label, children, hint }: { label: string; children: ReactNode; hint?: string }) {
  return (
    <div className="field">
      <label>{label}</label>
      {children}
      {hint ? <small className="subtle">{hint}</small> : null}
    </div>
  );
}

export function Input(props: InputHTMLAttributes<HTMLInputElement>) {
  return <input className="input" {...props} />;
}

export function Textarea(props: TextareaHTMLAttributes<HTMLTextAreaElement>) {
  return <textarea className="textarea" {...props} />;
}

export function Select(props: SelectHTMLAttributes<HTMLSelectElement>) {
  return <select className="select" {...props} />;
}

type ButtonVariant = "primary" | "ghost" | "danger" | "soft" | "secondary";

export function Button({
  variant = "secondary",
  children,
  loading,
  type = "button",
  ...props
}: ButtonHTMLAttributes<HTMLButtonElement> & { variant?: ButtonVariant; loading?: boolean }) {
  const cls = variant === "primary" ? "ac-btn-primary" : variant === "danger" ? "ac-btn-danger" : variant === "soft" ? "ac-btn-soft" : "ac-btn-secondary";
  const disabled = loading || props.disabled;
  return (
    <button type={type} className={`ac-btn ${cls}${loading ? " ac-btn--loading" : ""}`} {...props} disabled={disabled} aria-busy={loading || undefined}>
      {loading ? (
        <>
          <span className="ac-btn-spinner" aria-hidden="true" />
          <span>{children}</span>
        </>
      ) : (
        children
      )}
    </button>
  );
}

type BadgeVariant = "brand" | "sky" | "success" | "warning" | "danger" | "neutral";

export function Badge({ children, variant = "neutral" }: { children: ReactNode; variant?: BadgeVariant }) {
  return <span className={`badge badge-${variant}`}>{children}</span>;
}

export function StatCard({ label, value, hint }: { label: string; value: ReactNode; hint?: string }) {
  return (
    <div className="card">
      <div className="muted hx-text-sm">{label}</div>
      <div style={{ fontSize: "1.85rem", fontWeight: 900, lineHeight: 1.2 }}>{value}</div>
      {hint ? <div className="subtle hx-text-sm">{hint}</div> : null}
    </div>
  );
}

export function QuickLinkCard({ title, desc, onClick }: { title: string; desc: string; onClick: () => void }) {
  return (
    <button className="card" style={{ textAlign: "left", cursor: "pointer" }} onClick={onClick}>
      <strong>{title}</strong>
      <p className="muted" style={{ margin: "0.35rem 0 0" }}>{desc}</p>
    </button>
  );
}

export function ErrorText({ error }: { error?: unknown }) {
  if (!error) return null;
  const message = error instanceof Error ? error.message : String(error);
  return <p className="error-text">{message}</p>;
}

export function CopyableId({ value }: { value: string }) {
  return (
    <button className="badge badge-neutral" onClick={() => navigator.clipboard.writeText(value)} title="複製 ID">
      {value.slice(0, 8)}
    </button>
  );
}
