/** اجزای مشترک رابط پنل مدیریت */
import type { ReactNode } from "react";

export function AdminHeader({ title, description, actions }: { title: string; description?: string; actions?: ReactNode }) {
  return (
    <header className="mb-6 flex flex-wrap items-end justify-between gap-3">
      <div>
        <h1 className="text-xl font-extrabold md:text-2xl">{title}</h1>
        {description && <p className="mt-1 text-sm text-muted">{description}</p>}
      </div>
      {actions && <div className="flex flex-wrap gap-2">{actions}</div>}
    </header>
  );
}

export function Card({ children, className = "", title }: { children: ReactNode; className?: string; title?: string }) {
  return (
    <section className={`min-w-0 rounded-2xl bg-paper p-4 md:p-5 ${className}`}>
      {title && <h2 className="mb-4 text-sm font-bold">{title}</h2>}
      {children}
    </section>
  );
}

/** جدول ساده و واکنش‌گرا (در موبایل اسکرول افقی) */
export function Table({ head, children }: { head: string[]; children: ReactNode }) {
  return (
    <div className="-mx-4 overflow-x-auto md:mx-0">
      <table className="w-full min-w-[640px] text-sm">
        <thead>
          <tr className="border-b border-line text-start text-xs text-muted">
            {head.map((h) => (
              <th key={h} className="px-3 py-2 text-start font-medium">{h}</th>
            ))}
          </tr>
        </thead>
        <tbody className="divide-y divide-line [&_td]:px-3 [&_td]:py-3 [&_td]:align-middle">{children}</tbody>
      </table>
    </div>
  );
}

export function Pill({ children, tone = "mist" }: { children: ReactNode; tone?: "mist" | "ink" | "line" }) {
  const cls = { mist: "bg-mist text-ink-soft", ink: "bg-ink text-paper", line: "border border-line text-muted" }[tone];
  return <span className={`inline-flex rounded-full px-2.5 py-0.5 text-[11px] whitespace-nowrap ${cls}`}>{children}</span>;
}

export function Empty({ children }: { children: ReactNode }) {
  return <p className="py-10 text-center text-sm text-muted">{children}</p>;
}

/** پیام موفقیت بعد از ذخیره (با ?saved=1 در آدرس) */
export function SavedNotice({ show, text = "تغییرات ذخیره شد" }: { show: boolean; text?: string }) {
  if (!show) return null;
  return <p className="mb-4 rounded-xl bg-ink px-4 py-3 text-sm text-paper" role="status">✓ {text}</p>;
}