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

export const metadata = {
  title: "Forms & Templates — Echo Help",
};

export default function FormsTemplatesPage() {
  return (
    <DocArticle
      title="Forms &amp; Templates"
      description="Define what fields Echo should pull from each card, map them to your data model, and validate before going live."
      icon={<FileText className="size-[18px]" />}
    >
      <DocSection title="What is a form template?">
        <p>
          A <strong>form template</strong> is a schema that describes the
          fields on a physical response card. When Echo processes an uploaded
          image or PDF, it uses your active template to decide what to extract
          (e.g., <em>Name</em>, <em>Email</em>, <em>First-time visitor</em>,
          etc.) and where to put the values.
        </p>
        <p>
          You can have as many templates as you want &mdash; one per card type,
          event, or campaign.
        </p>
      </DocSection>

      <DocSection title="Creating a template">
        <DocSteps>
          <DocStep index={1} title="Open the template editor">
            Go to <strong>Settings &rarr; Form Templates</strong> and click{" "}
            <strong>New template</strong>.
          </DocStep>
          <DocStep index={2} title="Upload a sample card">
            Upload a clean, filled-in sample. Echo uses it for the preview and
            to test extraction later.
          </DocStep>
          <DocStep index={3} title="Add fields">
            For each piece of data on the card, add a field with:
            <ul className="ml-6 mt-2 list-disc space-y-1">
              <li>
                <strong>Label</strong> &mdash; human-readable name (e.g.,{" "}
                &ldquo;Preferred Name&rdquo;).
              </li>
              <li>
                <strong>Type</strong> &mdash; text, email, phone, checkbox,
                choice, or multi-line.
              </li>
              <li>
                <strong>Mapping</strong> &mdash; which person attribute this
                field writes to (e.g.,{" "}
                <code>person.email</code>, <code>person.visitType</code>).
              </li>
              <li>
                <strong>Required?</strong> &mdash; required fields block{" "}
                <em>Confirm</em> until filled.
              </li>
            </ul>
          </DocStep>
          <DocStep index={4} title="Test extraction">
            Hit <strong>Test</strong>. Echo runs OCR on your sample and shows
            exactly what it would write to each field. Iterate on labels and
            mappings until the output is correct.
          </DocStep>
          <DocStep index={5} title="Publish">
            Mark the template as <strong>Active</strong> and set it as the
            default (or assign per upload source).
          </DocStep>
        </DocSteps>
      </DocSection>

      <DocSection title="Field mapping tips">
        <DocCallout tone="tip" title="Match field labels to what's printed">
          The AI uses your field labels as hints. If your card says &ldquo;Best
          way to reach you?&rdquo;, name that field the same way &mdash; it
          improves accuracy dramatically.
        </DocCallout>
        <DocCallout tone="tip" title="Use choice fields for checkboxes">
          For rows of checkboxes (e.g., &ldquo;First time / Returning /
          Member&rdquo;), use the <strong>Choice</strong> field type and list
          the options exactly as they appear on the card.
        </DocCallout>
      </DocSection>

      <DocSection title="Handling multiple card designs">
        <p>
          If you have more than one card design in rotation (e.g., visitor cards
          vs. prayer request cards), create one template per design and assign
          the right template at upload time or per upload source. Echo does{" "}
          <em>not</em> auto-detect which template fits a given card.
        </p>
      </DocSection>

      <DocNext
        href="/docs/integrations"
        title="Integrations"
        description="Push confirmed data to Planning Center, Google Sheets, Monday, and more."
      />
    </DocArticle>
  );
}
