/*
 * Contact module.
 *
 * The contact block from the old landing page, plus the one thing a prospect
 * actually needs before emailing: the exact list of columns to send. That list is
 * fetched from /api/audit/schema rather than hard-coded, so it cannot drift away
 * from what the parser really accepts.
 *
 * IIFE-wrapped and published on window.ContactModule — see AppShell.jsx.
 */

(function () {
  const { PageContainer, PageHeader, Section, Icons } = window.Shell;

  const CHANNELS = [
    {
      label: 'General inquiries',
      value: 'wms@arka.com',
      href: 'mailto:wms@arka.com',
      hint: 'Partnerships, contracts, or a walkthrough of the audit.',
    },
    {
      label: 'Platform access',
      value: 'support@arka.com',
      href: 'mailto:support@arka.com',
      hint: 'Accounts, uploads that will not parse, anything broken.',
    },
    {
      label: 'Headquarters',
      value: 'Austin, Texas',
      hint: 'United States, Central Time.',
    },
  ];

  function ContactModule() {
    const [groups, setGroups] = React.useState([]);

    React.useEffect(() => {
      let live = true;
      fetch('/api/audit/schema')
        .then(r => r.json())
        .then(d => {
          if (live) setGroups(d.files || []);
        })
        .catch(() => {});
      return () => {
        live = false;
      };
    }, []);

    return (
      <PageContainer>
        <PageHeader
          title="Contact"
          description="Partnerships, contracts, or a walkthrough of Arka WMS."
          actions={
            <a
              href="mailto:wms@arka.com"
              className="inline-flex items-center gap-2 rounded-full bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
            >
              Email us
              <Icons.External className="h-4 w-4" />
            </a>
          }
        />

        <div className="grid gap-4 sm:grid-cols-3">
          {CHANNELS.map(c => (
            <div key={c.label} className="rounded-2xl border border-border bg-card p-5">
              <div className="text-2xs font-bold uppercase tracking-widest text-primary-ink">
                {c.label}
              </div>
              {c.href ? (
                <a
                  href={c.href}
                  className="mt-2 block text-base font-semibold text-foreground underline decoration-foreground/25 underline-offset-4 hover:decoration-primary-ink"
                >
                  {c.value}
                </a>
              ) : (
                <div className="mt-2 text-base font-semibold text-foreground">{c.value}</div>
              )}
              <p className="mt-1.5 text-sm text-muted-foreground">{c.hint}</p>
            </div>
          ))}
        </div>

        <Section
          title="What to send"
          description="Two tables: your order history and the box catalog it ships in. Column names do not have to match — they are matched automatically and shown for confirmation."
          actions={
            <div className="flex flex-wrap gap-2">
              <a
                href="/api/audit/template-orders.csv"
                className="inline-flex items-center gap-2 rounded-full border border-border px-3.5 py-1.5 text-sm font-medium text-foreground transition-colors hover:bg-card-raised"
              >
                Orders template
              </a>
              <a
                href="/api/audit/template-boxes.csv"
                className="inline-flex items-center gap-2 rounded-full border border-border px-3.5 py-1.5 text-sm font-medium text-foreground transition-colors hover:bg-card-raised"
              >
                Boxes template
              </a>
            </div>
          }
        >
          <div className="rounded-2xl border border-border bg-card p-5">
            {groups.length === 0 ? (
              <p className="text-sm text-muted-foreground">Loading the schema…</p>
            ) : (
              <div className="grid gap-6 sm:grid-cols-2">
                {groups.map(group => (
                  <div key={group.role}>
                    <div className="text-2xs font-bold uppercase tracking-widest text-primary-ink">
                      {group.title}
                    </div>
                    <p className="mt-1 text-xs text-muted-foreground">{group.grain}</p>
                    <ul className="mt-3 space-y-1.5 text-sm">
                      {/* Every column is mandatory; the two whose requirement spans
                          files (Order ID / Shipment ID, Transportation cost) carry
                          their own note from the server. */}
                      {group.fields.map(f => (
                        <li key={f.field} className="flex items-baseline gap-2">
                          <span className="text-primary-ink">•</span>
                          <span className="text-foreground">{f.label}</span>
                          {f.note && (
                            <span className="text-xs text-muted-foreground">{f.note}</span>
                          )}
                        </li>
                      ))}
                    </ul>
                  </div>
                ))}
              </div>
            )}
            <p className="mt-4 border-t border-border pt-4 text-xs leading-relaxed text-muted-foreground">
              Box ID has to appear in both tables — it is what matches an order to the box it
              shipped in. Transportation cost is required, but it can sit in either one: per
              shipment in the order history, or per box type in the catalog. Files stay in memory for the length of the
              run — nothing is written to disk or shared. If the export is easier to produce as a
              spreadsheet than a CSV, send the spreadsheet; .xlsx and .xlsb are both read directly.
            </p>
          </div>
        </Section>

        <div className="h-8" />
      </PageContainer>
    );
  }

  window.ContactModule = ContactModule;
})();