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."
      />
      {/* 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"
        description="Identity headers used by system-generated emails."
      />
      <RegistryDrivenForm
        sections={['email.smtp']}
        title="SMTP transport overrides"
        description="Optional per-port SMTP credentials. 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>
  );
}