import React from "react";
import { TrendingUp, Zap, Shield, Users, Calendar, BarChart2, Settings } from "lucide-react";
import { GuideItem } from "@/components/shared/GuideItem";
import type { HelpContent } from "./types";

/** Help content for the Admin dashboard root (/dashboard/admin). */
export const dashboardAdminHelpContent: HelpContent = {
  title: "Admin dashboard help",
  subtitle: "An overview of what's happening across all your events.",
  quickLinks: [
    { label: "Manage users", href: "/dashboard/admin/users", icon: Users },
    { label: "Manage events", href: "/dashboard/supervisor/events", icon: Calendar },
    { label: "Reports", href: "/dashboard/supervisor/reports", icon: BarChart2 },
    { label: "Site Settings", href: "/dashboard/admin/settings", icon: Settings },
  ],
  tabs: [
    {
      key: "overview",
      label: "Overview",
      icon: TrendingUp,
      content: (
        <div className="space-y-4">
          <p>The top row and the sections below it summarise your events at a glance — no need to open Reports for a quick check.</p>
          <div className="space-y-4">
            <GuideItem icon={TrendingUp} title="Past month's KPIs" tone="brand">
              Active events, revenue, donations, registrations, and tickets sold — each covers a rolling 30-ish days (today back one month), compared against the equivalent month before that, for an apples-to-apples comparison.
            </GuideItem>
            <GuideItem icon={BarChart2} title="Revenue trend & top events" tone="green">
              A day-by-day revenue chart for the past month, and a ranking of your best-performing events by revenue, registrations, and tickets sold.
            </GuideItem>
            <GuideItem icon={Zap} title="Payments overview" tone="amber">
              Today, past week, and past month totals — a quicker check than opening Reports for a simple "how much came in" question.
            </GuideItem>
          </div>
          <p className="text-xs text-gray-500">For a deeper breakdown, filters, and exports, use Reports instead — this page is a summary, not a substitute.</p>
        </div>
      ),
    },
    {
      key: "actions",
      label: "Quick actions",
      icon: Zap,
      content: (
        <div className="space-y-4">
          <p>The Quick actions grid is a shortcut to every admin tool — managing users and events, taking payments, scanning tickets, reports, messaging attendees, WhatsApp API setup, and post-event cashup.</p>
        </div>
      ),
    },
    {
      key: "roles",
      label: "Roles & permissions",
      icon: Shield,
      content: (
        <div className="space-y-4">
          <p>As an admin you can also open Supervisor and Staff tools — nothing is hidden from you. Other roles see less by design:</p>
          <div className="space-y-4">
            <GuideItem icon={Shield} title="Supervisor" tone="green">
              Sees the same financial overview you do (revenue, donations, top events), but can&apos;t manage users, WhatsApp API settings, or close out event cashups.
            </GuideItem>
            <GuideItem icon={Shield} title="Staff" tone="gray">
              Scan-tickets and event-tickets tools only — no revenue or donation figures at all. That&apos;s intentional, not a bug, if a staff member asks why their dashboard looks different.
            </GuideItem>
          </div>
        </div>
      ),
    },
  ],
};