"use client";

// ============================================================
// Rules Checklist — the 1–13 business rules in one place.
// A single filter bar + a uniform (brand-orange) card grid:
// each rule card has a ghost watermark number, an icon and an
// "enforced" footer. No per-category colours.
// (house 181 · OTP to registered mobile · KYC two-docs ·
//  password policy · ticket lifecycle · …)
// ============================================================

import { useMemo, useState } from "react";
import { rules } from "./account-data";
import { Icon, PageHead, Pill, Segmented } from "./ui";

// Each rule category maps to a glyph so cards read at a glance.
const TAG_ICON: Record<string, string> = {
  Profile: "user", Security: "shield", KYC: "verify", Support: "chat",
  Notifications: "bell", Privacy: "privacy",
};

export function Rules() {
  const tags = useMemo(() => ["All", ...Array.from(new Set(rules.map((r) => r.tag)))], []);
  const [tag, setTag] = useState("All");
  const list = tag === "All" ? rules : rules.filter((r) => r.tag === tag);

  return (
    <div className="view">
      <PageHead
        eyebrow="Reference"
        title="Rules Checklist"
        subtitle="The 13 business rules that govern Profile & Support — one source of truth."
        icon="check-circle"
        actions={<Pill tone="blue">{rules.length} rules</Pill>}
      />

      <Segmented value={tag} onChange={setTag} options={tags.map((t) => ({ value: t, label: t }))} />

      <div className="rules-grid view-body">
        {list.map((r) => (
          <article className="card rule-card" key={r.n}>
            <span className="rule-watermark" aria-hidden>{String(r.n).padStart(2, "0")}</span>
            <div className="rule-top">
              <span className="rule-ic"><Icon name={TAG_ICON[r.tag] ?? "check-circle"} size={18} /></span>
              <Pill tone="muted">{r.tag}</Pill>
            </div>
            <div className="rule-title">{r.title}</div>
            <p className="rule-detail">{r.detail}</p>
            <div className="rule-foot"><Icon name="shield-check" size={13} /> Enforced · Rule {r.n}</div>
          </article>
        ))}
      </div>
    </div>
  );
}