import { BarChart3 } from "lucide-react";
import {
  DocArticle,
  DocSection,
  DocSteps,
  DocStep,
  DocCallout,
  DocNext,
} from "@/components/support/doc-article";

export const metadata = {
  title: "Reports & Exports — Echo Help",
};

export default function ReportsExportsPage() {
  return (
    <DocArticle
      title="Reports &amp; Exports"
      description="Slice your card data, export CSVs, and push the results to your connected tools."
      icon={<BarChart3 className="size-[18px]" />}
    >
      <DocSection title="Built-in reports">
        <p>
          The <strong>Reports</strong> page gives you a running view of:
        </p>
        <ul className="ml-6 list-disc space-y-1">
          <li>New vs. returning visitors over time</li>
          <li>Card volume per collection day</li>
          <li>Top locations / services</li>
          <li>Reviewer throughput &mdash; who confirmed how many cards</li>
        </ul>
        <p>
          Use the filter bar at the top to scope any report by date range,
          collection day, location, or assignee.
        </p>
      </DocSection>

      <DocSection title="CSV export">
        <DocSteps>
          <DocStep index={1} title="Filter the list">
            On the <strong>Response Cards</strong> page, filter to the exact
            set you want to export.
          </DocStep>
          <DocStep index={2} title="Click Export CSV">
            Use the Export button in the toolbar. The CSV includes every mapped
            field plus metadata (upload date, reviewer, collection day).
          </DocStep>
          <DocStep index={3} title="Import into your CRM">
            Most ChMS and CRM tools accept CSV uploads. Check their docs for
            column-name requirements.
          </DocStep>
        </DocSteps>
        <DocCallout tone="tip">
          Need a recurring export? Set up the{" "}
          <strong>CSV Export</strong> integration to drop a CSV to FTP, email,
          or a webhook on a schedule.
        </DocCallout>
      </DocSection>

      <DocSection title="Pushing to integrations">
        <p>
          When a card is <strong>Confirmed</strong>, Echo can push it to any
          connected integration. Configure the trigger per integration (every
          confirm vs. batched daily) under{" "}
          <strong>Settings &rarr; Integrations</strong>.
        </p>
        <p>
          For a full walkthrough of each provider, see the{" "}
          <a href="/docs/integrations">Integrations docs</a>.
        </p>
      </DocSection>

      <DocNext
        href="/docs/faq"
        title="FAQ"
        description="Quick answers to the most common questions."
      />
    </DocArticle>
  );
}
