import {
  SettingsFormCard,
  type SettingFieldDef,
} from '@/components/admin/shared/settings-form-card';

const FIELDS: SettingFieldDef[] = [
  {
    key: 'branding_app_name',
    label: 'App name',
    description: 'Shown in the email subject prefix and the in-app header.',
    type: 'string',
    placeholder: 'Port Nimara CRM',
    defaultValue: '',
  },
  {
    key: 'branding_logo_url',
    label: 'Logo URL',
    description:
      'Public HTTPS URL of the logo used in email headers and the branded auth shell. Recommended size: 240×80 PNG with transparent background.',
    type: 'string',
    placeholder: 'https://example.com/logo.png',
    defaultValue: '',
  },
  {
    key: 'branding_primary_color',
    label: 'Primary color',
    description: 'Used for buttons and links in transactional email templates.',
    type: 'color',
    defaultValue: '#1e293b',
  },
  {
    key: 'branding_email_header_html',
    label: 'Email header HTML',
    description: 'Optional HTML rendered above each email body. Leave blank to use the default.',
    type: 'html',
    defaultValue: '',
  },
  {
    key: 'branding_email_footer_html',
    label: 'Email footer HTML',
    description: 'Optional HTML rendered at the very bottom of each email (above the signature).',
    type: 'html',
    defaultValue: '',
  },
];

export default function BrandingSettingsPage() {
  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-semibold">Branding</h1>
        <p className="text-sm text-muted-foreground">
          Logo, primary color, app name, and email header/footer HTML used by the branded auth shell
          and outgoing email templates.
        </p>
      </div>
      <SettingsFormCard
        title="Identity"
        description="App name, logo, and primary color."
        fields={FIELDS.slice(0, 3)}
      />
      <SettingsFormCard
        title="Email branding"
        description="HTML fragments rendered around every transactional email."
        fields={FIELDS.slice(3)}
      />
    </div>
  );
}
