import React from 'react';
import { PhotoWithFallback } from '../elements';
import type { WebsitePhotos } from '../../types/api/website-photos';
import type { FormDefinition } from '../../types/api/form';
import type { SiteConfig } from '../../types/config';
import { ContactSectionForm } from './contact-section-form';

function getLegalUrlsFromConfig(config: SiteConfig | null | undefined): { privacyPolicyUrl?: string; termsOfServiceUrl?: string } {
  if (!config?.navigation?.footer) return {};
  const flat = config.navigation.footer.flat();
  const privacy = flat.find((l) => l.label === 'Privacy Policy')?.href;
  const terms = flat.find((l) => l.label === 'Terms of Service')?.href;
  return { privacyPolicyUrl: privacy, termsOfServiceUrl: terms };
}

interface ContactSectionProps {
    websitePhotos?: WebsitePhotos | null;
    title?: string;
    subtitle?: string;
    /** When provided, contact form fields are rendered from this definition. */
    formDefinition?: FormDefinition | null;
    /** Optional site config; used to derive Privacy Policy / Terms of Service URLs for the consent checkbox links. */
    config?: SiteConfig | null;
}

const ContactSection = ({
    websitePhotos,
    title = "",
    subtitle = "",
    formDefinition,
    config,
}: ContactSectionProps) => {
    const { privacyPolicyUrl, termsOfServiceUrl } = getLegalUrlsFromConfig(config);
    const contactPhoto = websitePhotos?.contact;
    const contactImageUrl = contactPhoto?.url;
    const finalContactImage = contactImageUrl && contactImageUrl.trim() !== "" ? contactImageUrl : undefined;
    const finalContactImageAlt = contactPhoto?.alt || "Contact image";

    return (
        <section className="bg-primary py-16 md:pt-16 md:pb-24">
            <div className="mx-auto w-full max-w-container px-4 md:px-8">
                <div className="grid grid-cols-1 gap-12 md:gap-16 lg:grid-cols-2">
                    <div className="flex w-full flex-col gap-12">
                        <div className="flex flex-col">
                            <h2 className="text-display-md font-semibold text-primary">
                                {title}
                            </h2>
                            {subtitle && (
                                <p className="mt-4 text-lg text-tertiary md:mt-5 md:text-xl">
                                    {subtitle}
                                </p>
                            )}
                        </div>
                        <ContactSectionForm
                            formDefinition={formDefinition}
                            privacyPolicyUrl={privacyPolicyUrl}
                            termsOfServiceUrl={termsOfServiceUrl}
                        />
                    </div>

                    <div className="max-lg:hidden h-full min-h-0">
                        <PhotoWithFallback
                            photoUrl={finalContactImage}
                            photoAlt={finalContactImageAlt}
                            fallbackId="contact-section-image"
                            className="h-full w-full object-cover"
                        />
                    </div>
                </div>
            </div>
        </section>
    );
};

export default ContactSection;
