import React from "react";
import { Calendar, Ticket, CreditCard, HandHeart, Printer, CheckCircle2, ClipboardList, Clock, SquarePen, History, CheckSquare, Receipt, FileText } from "lucide-react";
import { GuideItem } from "@/components/shared/GuideItem";
import type { HelpContent } from "./types";

/** Help content for the "My Events" dashboard (/dashboard/user), reachable by every role. */
export const dashboardUserHelpContent: HelpContent = {
  title: "My Events help",
  subtitle: "Manage your registrations, tickets, and payments from here.",
  quickLinks: [
    { label: "Browse events", href: "/events", icon: Calendar },
    { label: "Payment history", href: "/dashboard/user/payments", icon: CreditCard },
    { label: "Make a donation", href: "/dashboard/user/donate", icon: HandHeart },
  ],
  tabs: [
    {
      key: "registrations",
      label: "Registrations",
      icon: Calendar,
      content: (
        <div className="space-y-4">
          <p>My Registrations lists every event you&apos;ve signed up for. Tap one to open its details, where you can edit your items, pay an outstanding balance, or cancel.</p>
          <div className="space-y-4">
            <GuideItem icon={CheckCircle2} title="Status badges" tone="brand">
              Pending (just registered), Confirmed, Partially Paid, Paid, or Cancelled — the badge next to each registration shows exactly where it stands.
            </GuideItem>
            <GuideItem icon={ClipboardList} title="Forms" tone="amber">
              Some events need extra details from you (like dietary needs or emergency contacts) before the event. If you see a &quot;forms&quot; badge, tap the registration and fill them in — you can save and come back.
            </GuideItem>
            <GuideItem icon={Clock} title="Early-bird pricing" tone="green">
              A notice appears if an event option is still within its early-bird discount window, so you know when the price is about to go up.
            </GuideItem>
            <GuideItem icon={SquarePen} title="Editing or cancelling" tone="violet">
              Tap a registration to change quantities or options, pay what&apos;s outstanding, or cancel it entirely.
            </GuideItem>
            <GuideItem icon={FileText} title="Invoice" tone="rose">
              The Invoice button sends a PDF breakdown of the registration — itemized cost, any early-bird discount, and what&apos;s still owing (or &quot;Paid in full&quot;) — to your email or WhatsApp, whichever you pick.
            </GuideItem>
            <GuideItem icon={History} title="Show past events" tone="gray">
              Registrations page defaults to upcoming events only — tick &quot;Show past events&quot; at the top to bring back ones that have already happened.
            </GuideItem>
          </div>
        </div>
      ),
    },
    {
      key: "tickets",
      label: "Tickets",
      icon: Ticket,
      content: (
        <div className="space-y-4">
          <p>My Tickets shows a QR code for each ticket you hold — this is what gets scanned at the door.</p>
          <div className="space-y-4">
            <GuideItem icon={CheckSquare} title="Select multiple" tone="brand">
              Tick more than one ticket (or use &quot;Select all&quot;) to send or print them together in one go, instead of one at a time.
            </GuideItem>
            <GuideItem icon={Printer} title="Print, email, or WhatsApp" tone="green">
              Get your selected tickets onto your phone or paper before the event — as a printed page, an email, or a WhatsApp message.
            </GuideItem>
          </div>
        </div>
      ),
    },
    {
      key: "payments",
      label: "Payments & donations",
      icon: CreditCard,
      content: (
        <div className="space-y-4">
          <p>There are three related but separate things here — worth knowing the difference:</p>
          <div className="space-y-4">
            <GuideItem icon={CreditCard} title="Paying an outstanding balance" tone="brand">
              Open a registration with an amount still owing and use Pay Now — this pays online for that specific registration only.
            </GuideItem>
            <GuideItem icon={Receipt} title="Payment history" tone="green">
              The Payment history page lists every payment you&apos;ve made across all your registrations, past and present.
            </GuideItem>
            <GuideItem icon={Receipt} title="Receipts" tone="amber">
              Every payment — in a registration&apos;s Payments list, or on the Payment history page — has its own Receipt button. Pick email or WhatsApp to get a PDF receipt for that specific payment.
            </GuideItem>
            <GuideItem icon={HandHeart} title="Donations" tone="rose">
              A donation isn&apos;t tied to any one registration — make one any time to support an event or the ministry directly. It can later be used to help cover an outstanding balance.
            </GuideItem>
          </div>
        </div>
      ),
    },
  ],
};