"use client";

import {
  BarChart3,
  LayoutDashboard,
  Filter,
  Download,
  Table,
  Activity,
  TrendingUp,
} from "lucide-react";
import { FeaturePageShell, DetailBlock } from "@/components/marketing/feature-page-shell";

export default function AnalyticsPage() {
  return (
    <FeaturePageShell
      badge="Analytics"
      badgeIcon={BarChart3}
      title="Know your guests."
      titleAccent="See the trends."
      subtitle="A real-time dashboard shows total cards, processing status, review progress, and follow-up metrics at a glance. Filter, sort, and export your data anytime."
    >
      <section className="py-12 sm:py-16">
        <div className="mx-auto max-w-4xl px-6 space-y-6">
          <DetailBlock icon={LayoutDashboard} title="Dashboard at a glance">
            <p>
              The moment you log in, you see the numbers that matter: total cards
              processed, cards awaiting review, OCR success rate, and cards assigned
              to you. Quick-action buttons let you jump straight to uploading,
              reviewing, or managing your team.
            </p>
            <p>
              A getting-started guide walks new users through setup, then
              dismisses itself so the dashboard stays clean.
            </p>
          </DetailBlock>

          <DetailBlock icon={Table} title="Powerful card table with advanced filtering" reversed>
            <p>
              The response card grid is built on TanStack Table — the same engine
              behind enterprise data tools. You get:
            </p>
            <ul className="list-disc list-inside space-y-1 mt-2">
              <li>Full-text search across names, emails, phone numbers, and notes</li>
              <li>Filter by OCR status, review status, visit type, date range, and more</li>
              <li>Sort by any column — click once for ascending, twice for descending</li>
              <li>Column visibility toggles to show only what matters to you</li>
              <li>Pagination with configurable page sizes</li>
              <li>Row selection for bulk operations</li>
            </ul>
          </DetailBlock>

          <DetailBlock icon={Activity} title="Status-based stat cards">
            <p>
              Quick-filter chips at the top of the cards view let you jump between
              views with one click:
            </p>
            <ul className="list-disc list-inside space-y-1 mt-2">
              <li><strong>All cards</strong> &mdash; everything in the system</li>
              <li><strong>Completed</strong> &mdash; successfully processed by AI</li>
              <li><strong>Errors</strong> &mdash; cards that need attention</li>
              <li><strong>Unreviewed</strong> &mdash; processed but not yet verified by a human</li>
              <li><strong>My cards</strong> &mdash; assigned to the current user</li>
            </ul>
            <p>
              Each chip shows its count in real-time so you always know what&rsquo;s
              waiting for you.
            </p>
          </DetailBlock>

          <DetailBlock icon={TrendingUp} title="Actionable guest insights" reversed>
            <p>
              Every card captures rich context about your visitors: whether they&rsquo;re
              first-time or returning guests, what spiritual next steps they&rsquo;re
              considering, prayer requests, how they heard about your church, and
              which service they attended.
            </p>
            <p>
              This data powers your follow-up strategy. Filter for all first-time
              guests from last Sunday, see who requested prayer, and identify new
              believers — then route them to the right team member.
            </p>
          </DetailBlock>

          <DetailBlock icon={Filter} title="Card detail view with full history">
            <p>
              Click any card to see the complete record: front and back images,
              every extracted field, confidence scores, assignment history, review
              status, and a timestamped activity log. Edit any field directly,
              add notes, and trigger reprocessing if needed.
            </p>
          </DetailBlock>

          <DetailBlock icon={Download} title="CSV export" reversed>
            <p>
              Export the current view — with all active filters applied — as a CSV
              file. This means you can filter for &ldquo;all first-time guests in
              April&rdquo; and export just that subset. The CSV includes all visible
              columns, ready to import into Excel, Google Sheets, or any reporting
              tool.
            </p>
          </DetailBlock>
        </div>
      </section>
    </FeaturePageShell>
  );
}
