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

export const metadata = {
  title: "Uploading Cards — Echo Help",
};

export default function UploadingCardsPage() {
  return (
    <DocArticle
      title="Uploading Cards"
      description="Everything about getting response cards into Echo — manual uploads, email ingestion, FTP watchers, and the OCR processing lifecycle."
      icon={<Upload className="size-[18px]" />}
    >
      <DocSection title="Supported file types">
        <ul className="ml-6 list-disc space-y-1">
          <li>
            <strong>PDF</strong> &mdash; single-page or multi-page. Multi-page
            PDFs are split into one card per page.
          </li>
          <li>
            <strong>Images</strong> &mdash; JPG, JPEG, PNG, GIF, TIFF, BMP.
          </li>
          <li>
            Maximum file size is <strong>25 MB</strong> per file,{" "}
            <strong>50 files</strong> per upload batch.
          </li>
        </ul>
      </DocSection>

      <DocSection title="Manual upload">
        <DocSteps>
          <DocStep index={1} title="Open the Upload dialog">
            Click the <strong>Upload</strong> button in the top bar, or press{" "}
            <code>&#8984;K</code> &rarr; <strong>Upload Documents</strong>.
          </DocStep>
          <DocStep index={2} title="Pick a collection day (optional)">
            Tagging the upload with a collection day (e.g., &ldquo;Easter
            Sunday&rdquo;) makes later reporting easier.
          </DocStep>
          <DocStep index={3} title="Drag &amp; drop files">
            Drop files anywhere on the dialog. Echo uploads them to storage and
            queues each for OCR immediately.
          </DocStep>
        </DocSteps>
      </DocSection>

      <DocSection title="Email ingestion (email-watch)">
        <p>
          Echo can monitor an email inbox and automatically ingest any cards
          sent as attachments. Configure it under{" "}
          <strong>Settings &rarr; Upload Sources &rarr; Email</strong>:
        </p>
        <DocSteps>
          <DocStep index={1} title="Create a dedicated inbox">
            Ideally a Gmail or IMAP-capable inbox only used for Echo (e.g.,{" "}
            <code>cards@yourchurch.org</code>).
          </DocStep>
          <DocStep index={2} title="Paste IMAP credentials">
            Echo stores the credentials encrypted and uses a long-lived IMAP
            IDLE connection to pick up new mail within seconds.
          </DocStep>
          <DocStep index={3} title="Send a test">
            Forward a card to the watched address. It should appear in{" "}
            <strong>Response Cards</strong> within a minute.
          </DocStep>
        </DocSteps>
        <DocCallout tone="warning" title="Use an app password">
          For Gmail, create an App Password &mdash; your main account password
          will not work.
        </DocCallout>
      </DocSection>

      <DocSection title="FTP watchers">
        <p>
          If your scanner drops files to an FTP/SFTP location, Echo can poll it
          and pull new files in automatically. Configure under{" "}
          <strong>Settings &rarr; Upload Sources &rarr; FTP</strong>. Both FTP
          and SFTP are supported.
        </p>
        <DocCallout tone="tip">
          Set your scanner to drop each scan into its own subfolder named for
          the date &mdash; Echo tags the upload with that subfolder name so you
          can group scans later.
        </DocCallout>
      </DocSection>

      <DocSection title="The OCR processing lifecycle">
        <p>Every uploaded file moves through these states:</p>
        <ul className="ml-6 list-disc space-y-1">
          <li>
            <strong>Uploaded</strong> &mdash; file is stored, waiting for a
            worker.
          </li>
          <li>
            <strong>Processing</strong> &mdash; AI is extracting fields against
            your active form template.
          </li>
          <li>
            <strong>Needs Review</strong> &mdash; extraction succeeded; a human
            should confirm unclear fields.
          </li>
          <li>
            <strong>Confirmed</strong> &mdash; reviewer has signed off; card is
            ready for export/integration push.
          </li>
          <li>
            <strong>Failed</strong> &mdash; extraction couldn&rsquo;t run (bad
            image, unreadable handwriting, etc.). The file is retained so you
            can retry.
          </li>
        </ul>
      </DocSection>

      <DocNext
        href="/docs/forms-templates"
        title="Forms & Templates"
        description="Build the templates that tell Echo what to extract from each card."
      />
    </DocArticle>
  );
}
