hope-events/frontend/src/content/help/reports.tsx

import React from "react";
import {
  Home, Filter, ListFilter, Download, BarChart2, MessageCircleQuestion,
  Calendar, CalendarClock, EyeOff, Printer, Mail, FileSpreadsheet, MessageCircle,
  CreditCard, Gift, Clock, HandHeart, RefreshCw,
} from "lucide-react";
import { GuideItem } from "@/components/shared/GuideItem";
import type { HelpContent } from "./types";

const ADMIN_EMAIL = "admin@crosscode.co.za";

export const reportsHelpContent: HelpContent = {
  title: "Reporting guide",
  subtitle: "This guide explains how reports work and how to use the available filters.",
  supportContact: { label: "Site administrator", email: ADMIN_EMAIL },
  tabs: [
    {
      key: "overview",
      label: "Overview",
      icon: Home,
      content: (
        <div className="space-y-4">
          <p>Reports help you view key data about your events. You can filter the data, preview it on screen, and export or email it.</p>
          <div className="space-y-4">
            <GuideItem icon={Filter} title="Use filters" tone="brand">
              Apply universal filters (like events and date range) that affect all reports, and report-specific filters for more detailed results.
            </GuideItem>
            <GuideItem icon={BarChart2} title="Preview & customize" tone="green">
              Preview your report, adjust filters, and choose how you want the data to appear.
            </GuideItem>
            <GuideItem icon={Download} title="Export or email" tone="amber">
              Export your report to Excel, PDF, or send it by email or WhatsApp. Tip: select several events in the Feedback summary to compare their ratings (e.g. Camp 2025 vs Camp 2026). The Registration funnel shows where people drop off between viewing an event and paying, by source (short links and utm_source links) and device. It counts only visitors who allowed cookies.
            </GuideItem>
          </div>
        </div>
      ),
    },
    {
      key: "universal",
      label: "Universal filters",
      icon: Filter,
      content: (
        <div className="space-y-4">
          <p>Universal filters live in the sidebar on the left and apply to whichever report you open — you only set them once, not per report.</p>
          <div className="space-y-4">
            <GuideItem icon={Calendar} title="Events" tone="brand">
              Pick one or more events. Every report loads data for exactly these events.
            </GuideItem>
            <GuideItem icon={EyeOff} title="Include past / inactive / closed events" tone="gray">
              Controls which events even appear in the Events list to pick from.
            </GuideItem>
            <GuideItem icon={CalendarClock} title="Date range" tone="blue">
              A preset (This month, Last month, This year) or a custom range. Only applies to reports that are inherently date-based (e.g. Payments between dates, Revenue reports, Cashup audit trail) — reports like Attendees or Ticket usage show a live snapshot and ignore the date range.
            </GuideItem>
          </div>
        </div>
      ),
    },
    {
      key: "specific",
      label: "Report-specific filters",
      icon: ListFilter,
      content: (
        <div className="space-y-4">
          <p>Some reports have extra options that only make sense for that report — these appear at the top of the report popup once it&apos;s open, separate from the universal filters.</p>
          <div className="space-y-4">
            <GuideItem icon={ListFilter} title="Attendees" tone="violet">
              Which single event to show (defaults to the first selected event) and whether to include cancelled registrations.
            </GuideItem>
            <GuideItem icon={BarChart2} title="Registration status breakdown" tone="green">
              Whether to include cancelled registrations in the counts, and whether to count by number of registrations or by ticket quantity (so someone with 3 tickets counts as 3).
            </GuideItem>
            <GuideItem icon={RefreshCw} title="Refresh" tone="brand">
              Adjust a report-specific filter, then use the &quot;Refresh&quot; button inside the popup to re-run the report without closing it.
            </GuideItem>
          </div>
        </div>
      ),
    },
    {
      key: "exporting",
      label: "Exporting reports",
      icon: Download,
      content: (
        <div className="space-y-4">
          <p>Every report can be exported straight from its popup:</p>
          <div className="space-y-4">
            <GuideItem icon={Printer} title="Print" tone="gray">
              Opens a print-ready PDF in a new tab; use your browser&apos;s print button from there.
            </GuideItem>
            <GuideItem icon={Mail} title="Email" tone="blue">
              Sends the PDF to your own account email.
            </GuideItem>
            <GuideItem icon={FileSpreadsheet} title="Excel" tone="green">
              Downloads a styled .xlsx workbook — colored header, key totals, and a chart section where available — matching the on-screen report.
            </GuideItem>
            <GuideItem icon={MessageCircle} title="WhatsApp" tone="violet">
              Sends the PDF to your own account&apos;s WhatsApp number (needs a valid phone number on file).
            </GuideItem>
          </div>
        </div>
      ),
    },
    {
      key: "fields",
      label: "Fields & metrics",
      icon: BarChart2,
      content: (
        <div className="space-y-4">
          <p>A few terms come up across several financial reports and are easy to misread — here&apos;s what each one actually means:</p>
          <div className="space-y-4">
            <GuideItem icon={CreditCard} title="Paid" tone="blue">
              Money the person paid themselves directly (cash/card/eft/online). Never includes money that reached their order via someone else&apos;s donation.
            </GuideItem>
            <GuideItem icon={Gift} title="Paid via donation" tone="violet">
              The portion of an order that was covered by an assigned donation. This is part of what&apos;s &quot;settled&quot; on the order, but it&apos;s the donor&apos;s money, not the registrant&apos;s — so it&apos;s broken out separately and attributed to the donor elsewhere in the report.
            </GuideItem>
            <GuideItem icon={Clock} title="Outstanding" tone="amber">
              What&apos;s still owed on an order, after direct payments and any donation cover.
            </GuideItem>
            <GuideItem icon={HandHeart} title="Unassigned donations" tone="rose">
              Real money already received as a donation that hasn&apos;t been applied to any order yet.
            </GuideItem>
            <GuideItem icon={BarChart2} title="Donations: Used / Unused" tone="green">
              How much of a given donation has been assigned to orders (Used) versus what&apos;s still available to assign (Unused). A donation is never overwritten when assigned — the original donation record always keeps its full original amount.
            </GuideItem>
          </div>
        </div>
      ),
    },
    {
      key: "help",
      label: "Need more help?",
      icon: MessageCircleQuestion,
      content: (
        <div className="space-y-4">
          <p>Still stuck? Reach out to the site administrator — they can check the underlying data with you or flag anything that looks wrong.</p>
          <div className="flex items-start gap-3 border border-gray-100 rounded-xl p-4 bg-gray-50">
            <div className="w-9 h-9 rounded-full bg-brand-50 flex items-center justify-center shrink-0">
              <Mail className="w-4 h-4 text-brand-600" />
            </div>
            <div>
              <div className="font-medium text-gray-800">Site administrator</div>
              <a href={`mailto:${ADMIN_EMAIL}`} className="text-sm text-brand-600 hover:underline">{ADMIN_EMAIL}</a>
            </div>
          </div>
          <p className="text-xs text-gray-500">Financial figures matter — if a number in a report doesn&apos;t look right, it&apos;s always worth asking rather than assuming.</p>
        </div>
      ),
    },
  ],
};