export function AdminRulesPanel() {
  const highlights = [
    {
      icon: "📝",
      title: "Bulk Upload",
      description: "Paste multiple rules or upload from files (TXT, PDF, DOC, DOCX).",
    },
    {
      icon: "🤖",
      title: "LLM Enhancement",
      description: "Rules are automatically enhanced with edge cases and improved patterns.",
    },
    {
      icon: "⚡",
      title: "Chunk Processing",
      description: "Large rule sets processed in chunks to avoid timeouts.",
    },
    {
      icon: "🔒",
      title: "Tenant Isolation",
      description: "Rules are scoped per tenant, ensuring zero data leakage.",
    },
  ];

  return (
    <div className="rounded-3xl border border-white/10 bg-gradient-to-br from-slate-900/80 to-slate-950/80 p-8 shadow-2xl shadow-slate-950/40">
      <div className="flex flex-col gap-6">
        <div>
          <p className="text-sm font-semibold uppercase tracking-[0.3em] text-cyan-400">🛡️ Admin Controls</p>
          <h2 className="mt-3 text-3xl font-bold text-white">Admin Rule Management</h2>
          <p className="mt-3 text-base leading-relaxed text-slate-300">
            Upload governance policies, red-flag keywords, and compliance workflows. Rules are automatically enhanced by LLM,
            stored in Supabase/SQLite, and enforced across all MCP toolchains with intelligent pattern matching.
          </p>
        </div>

        <div className="grid gap-4 md:grid-cols-2">
          {highlights.map((item) => (
            <div
              key={item.title}
              className="group rounded-xl border border-white/10 bg-white/5 p-5 text-slate-200 transition-all hover:border-cyan-400/40 hover:bg-white/10 hover:shadow-lg hover:shadow-cyan-500/10"
            >
              <div className="flex items-start gap-3">
                <span className="text-2xl">{item.icon}</span>
                <div>
                  <p className="text-sm font-semibold text-cyan-300">{item.title}</p>
                  <p className="mt-2 text-sm leading-relaxed text-slate-300">{item.description}</p>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}