"use client";

// ============================================================
// Rules Checklist — the 1–13 business rules in one place.
// (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";

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) => (
          <div className="card rule-card" key={r.n} style={{ ["--accent" as string]: r.tagColor }}>
            <div className="rule-top">
              <span className="rule-n">{String(r.n).padStart(2, "0")}</span>
              <Pill tone="custom" style={{ color: r.tagColor, background: `color-mix(in srgb, ${r.tagColor} 16%, transparent)` }}>{r.tag}</Pill>
            </div>
            <div className="rule-title"><Icon name="check-circle" size={16} /> {r.title}</div>
            <p className="rule-detail">{r.detail}</p>
          </div>
        ))}
      </div>
    </div>
  );
}