import type { ReactNode } from "react";

export const fieldCls =
  "w-full px-3.5 py-2.5 bg-white border border-[var(--border-default)] rounded-lg text-sm text-[var(--text-primary)] placeholder:text-[var(--text-muted)]/60 focus:outline-none focus:border-[var(--gold)] focus:ring-2 focus:ring-[var(--gold)]/15 transition-all";

export function Field({
  label,
  required,
  hint,
  children,
}: {
  label: string;
  required?: boolean;
  hint?: string;
  children: ReactNode;
}) {
  return (
    <div>
      <label className="flex items-baseline justify-between mb-1.5">
        <span className="text-[13px] font-medium text-[var(--text-secondary)]">
          {label}
          {required && <span className="text-[var(--terracotta)] ml-0.5">*</span>}
        </span>
        {hint && <span className="text-[10px] tracking-[0.2em] uppercase text-[var(--text-muted)]">{hint}</span>}
      </label>
      {children}
    </div>
  );
}

export function ErrorRow({ text }: { text: string }) {
  return (
    <div
      className="flex items-center gap-2 px-3.5 py-2.5 rounded-lg text-sm"
      style={{ backgroundColor: "rgba(199, 91, 57, 0.08)", color: "var(--terracotta)" }}
    >
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2">
        <circle cx="12" cy="12" r="10" />
        <path d="M12 8v4M12 16h.01" />
      </svg>
      {text}
    </div>
  );
}

export function HintRow({ text }: { text: string }) {
  return (
    <div className="flex items-center gap-2.5 px-3.5 py-2.5 rounded-lg bg-[var(--bg-paper)] border border-[var(--border-muted)]">
      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="var(--gold)" strokeWidth="2">
        <circle cx="12" cy="12" r="10" />
        <path d="M12 16v-4M12 8h.01" />
      </svg>
      <span className="text-xs text-[var(--text-secondary)]">{text}</span>
    </div>
  );
}

export function FormFooter({
  onCancel,
  onSave,
  saving,
  primaryLabel = "保存",
  disabled,
}: {
  onCancel: () => void;
  onSave: () => void;
  saving: boolean;
  primaryLabel?: string;
  disabled?: boolean;
}) {
  return (
    <div className="px-7 py-5 bg-white/40 border-t border-[var(--border-muted)] flex justify-end gap-3">
      <button
        type="button"
        onClick={onCancel}
        className="px-5 py-2.5 rounded-lg text-sm font-medium text-[var(--text-secondary)] hover:bg-[var(--bg-paper)] transition-colors"
      >
        取消
      </button>
      <button
        type="button"
        onClick={onSave}
        disabled={saving || disabled}
        className="px-6 py-2.5 rounded-lg text-white text-sm font-medium transition-all disabled:opacity-40 hover:brightness-110"
        style={{
          backgroundColor: "var(--terracotta)",
          boxShadow: "0 4px 14px rgba(199,91,57,0.3)",
        }}
      >
        {saving ? "保存中..." : primaryLabel}
      </button>
    </div>
  );
}
