frontend/components/admin-rules-panel.tsx

export function AdminRulesPanel() {
  const highlights = [
    {
      title: "Bulk Upload",
      description: "Paste multiple compliance rules at once and push them to the MCP backend.",
    },
    {
      title: "Governance Timeline",
      description: "Track when each rule was last updated for audit-readiness.",
    },
    {
      title: "Rule Severity",
      description: "Tag entries as advisory, warning, or block-listed for automated enforcement.",
    },
    {
      title: "Tenant Isolation",
      description: "Rules are scoped per tenant, ensuring zero data leakage.",
    },
  ];

  return (
    <div className="rounded-3xl border border-slate-800/80 bg-slate-900/60 p-8 shadow-2xl shadow-slate-950/40">
      <div className="flex flex-col gap-4">
        <div>
          <p className="text-sm font-semibold uppercase tracking-[0.3em] text-cyan-400">Admin Controls</p>
          <h2 className="mt-3 text-3xl font-semibold text-white">Admin Rule Ingestion</h2>
          <p className="mt-3 text-base text-slate-300">
            Upload governance policies, red-flag keywords, and compliance workflows directly into the IntegraChat admin
            service. Rules are stored in the backend&apos;s SQLite demo store and enforced across all MCP toolchains.
          </p>
        </div>

        <div className="grid gap-4 md:grid-cols-2">
          {highlights.map((item) => (
            <div
              key={item.title}
              className="rounded-2xl border border-white/5 bg-white/5 p-4 text-slate-200 transition hover:border-cyan-400/40"
            >
              <p className="text-sm font-semibold text-cyan-300">{item.title}</p>
              <p className="mt-2 text-sm text-slate-300">{item.description}</p>
            </div>
          ))}
        </div>

        <div className="flex flex-wrap gap-3">
          <button className="rounded-full bg-gradient-to-r from-cyan-400 to-blue-500 px-6 py-2 text-sm font-semibold text-slate-950 shadow-lg shadow-cyan-500/30">
            Launch Admin Console
          </button>
          <button className="rounded-full border border-white/20 px-6 py-2 text-sm font-semibold text-white hover:border-cyan-400/60">
            View Rule Templates
          </button>
        </div>
      </div>
    </div>
  );
}