import { Info } from 'lucide-react';

import { PageHeader } from '@/components/shared/page-header';
import { RegistryDrivenForm } from '@/components/admin/shared/registry-driven-form';
import { SalesEmailConfigCard } from '@/components/admin/sales-email-config-card';
import { EmailRoutingCard } from '@/components/admin/email-routing-card';
import { SmtpTestSendCard } from '@/components/admin/email/smtp-test-send-card';

export default function EmailSettingsPage() {
  return (
    <div className="space-y-6">
      <PageHeader
        title="Email Settings"
        description="Per-port outgoing email configuration. SMTP credentials and the From address default to environment variables when these fields are blank. Header/footer HTML lives under Branding."
      />

      {/* Explainer for the "two accounts" model — addresses the recurring
          UAT question "why are there separate SMTP credentials for sales
          and noreply?". Keeps the answer in front of the admin before
          they reach the per-card form below. */}
      <div className="rounded-md border border-border bg-muted/40 px-4 py-3 text-sm">
        <div className="flex items-start gap-2">
          <Info className="mt-0.5 size-4 shrink-0 text-muted-foreground" aria-hidden />
          <div className="space-y-1 text-muted-foreground">
            <p>
              <strong className="text-foreground">Why two accounts?</strong> Transactional emails
              (signing invites, notifications, password resets) ship from your noreply mailbox over
              the SMTP credentials below. Rep-authored sales emails (one-off messages, proposal
              sends) ship from the sales mailbox with separate credentials so replies land in a
              human-monitored inbox.
            </p>
            <p>
              The noreply credentials are also used by the supplemental-info workflow + portal
              activation, i.e. anywhere the platform sends on its own initiative. The sales
              credentials are only used when a rep clicks Send in the compose UI.
            </p>
          </div>
        </div>
      </div>

      {/* Registry-driven so each field shows the "Using env fallback /
          port / global / default" badge inline — admins can tell at a
          glance which fields are coming from .env vs. UI overrides. */}
      <RegistryDrivenForm
        sections={['email.from']}
        title="From address (noreply)"
        description="Identity headers used by system-generated emails. Set the From + Reply-To here; the matching SMTP credentials live in the next card."
      />
      <RegistryDrivenForm
        sections={['email.smtp']}
        title="SMTP transport overrides (noreply)"
        description="Optional per-port SMTP credentials for the noreply mailbox. Leave blank to use the global env defaults. Each field shows its current source (env / port / default) so you can tell what's active without checking the deploy."
      />
      <SmtpTestSendCard />
      <SalesEmailConfigCard />
      <EmailRoutingCard />
    </div>
  );
}