import {
  SettingsFormCard,
  type SettingFieldDef,
} from '@/components/admin/shared/settings-form-card';
import { PageHeader } from '@/components/shared/page-header';
import { PdfLogoUploader } from '@/components/admin/branding/pdf-logo-uploader';
import { EmailPreviewCard } from '@/components/admin/branding/email-preview-card';

const DEFAULT_EMAIL_HEADER_HTML = `<!-- Optional pre-body header -->
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
  <tr>
    <td align="center" style="padding:16px 0;">
      <a href="https://example.com" style="text-decoration:none;color:#1e293b;font-family:Arial,sans-serif;font-size:14px;font-weight:600;">
        Your brand name
      </a>
    </td>
  </tr>
</table>`;

const DEFAULT_EMAIL_FOOTER_HTML = `<!-- Optional sub-body footer -->
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
  <tr>
    <td align="center" style="padding:24px 0;color:#64748b;font-family:Arial,sans-serif;font-size:12px;">
      &copy; ${new Date().getFullYear()} Your Company &middot;
      <a href="https://example.com" style="color:#64748b;">Visit our website</a> &middot;
      <a href="mailto:hello@example.com" style="color:#64748b;">hello@example.com</a>
    </td>
  </tr>
</table>`;

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',
    description:
      'Used in email headers and the branded auth shell. Recommended: square PNG with transparent background.',
    type: 'image-upload',
    imageAspect: 1,
    defaultValue: '',
  },
  {
    key: 'branding_email_background_url',
    label: 'Email background image',
    description:
      'Blurred photo shown behind the white email card and the auth-shell (login / reset password) pages. Leave blank to render a plain off-white backdrop. Recommended: 1920x1080 JPG, pre-blurred to ~20px gaussian so it reads as a soft background even on small clients.',
    type: 'image-upload',
    // 16:9 - landscape. Without an explicit aspect, the cropper falls
    // back to 1:1 and renders a circular mask (intended for avatars),
    // which is the wrong UX for a viewport-cover background.
    imageAspect: 16 / 9,
    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. Tap "Insert default" to start from the baseline template.',
    type: 'html',
    defaultValue: '',
    defaultTemplate: DEFAULT_EMAIL_HEADER_HTML,
  },
  {
    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: '',
    defaultTemplate: DEFAULT_EMAIL_FOOTER_HTML,
  },
];

export default function BrandingSettingsPage() {
  return (
    <div className="space-y-6">
      <PageHeader
        title="Branding"
        description="Logo, primary color, app name, and email header/footer HTML used by the branded auth shell and outgoing email templates."
      />
      <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)}
      />
      <EmailPreviewCard />
      <PdfLogoUploader />
    </div>
  );
}
