import Link from "next/link";
import type {
  AreaGuide,
  BlogPost,
  HomepageComposition,
} from "@/lib/cms/contracts";
import type { PublicProperty } from "@/lib/core/contracts";
import { PropertyCard } from "./property-card";

interface HomepageModulesProps {
  composition: HomepageComposition;
  properties: PublicProperty[];
  areas: AreaGuide[];
  posts: BlogPost[];
}

export function HomepageModules({
  composition,
  properties,
  areas,
  posts,
}: HomepageModulesProps) {
  return composition.modules.map((section) => {
    switch (section.type) {
      case "hero":
        return (
          <section className="hero" key={section.id}>
            <div className="hero__content">
              <p className="eyebrow">{section.eyebrow}</p>
              <h1>{section.title}</h1>
              <p className="hero__lead">{section.lead}</p>
              <div className="button-row">
                <Link
                  className="button button--primary"
                  href={section.primaryAction.href}
                >
                  {section.primaryAction.label}
                </Link>
                <Link
                  className="button button--ghost"
                  href={section.secondaryAction.href}
                >
                  {section.secondaryAction.label}
                </Link>
              </div>
            </div>
            <div className="hero__panel" aria-label="NYSA platform principles">
              <span className="hero__signal">NYSA</span>
              <h2>{section.panelTitle}</h2>
              <p>{section.panelBody}</p>
            </div>
          </section>
        );

      case "intent-grid":
        return (
          <section className="section section--intro" key={section.id}>
            <div>
              <p className="eyebrow">{section.eyebrow}</p>
              <h2>{section.title}</h2>
            </div>
            <div className="intent-grid">
              {section.items.map((item, index) => (
                <Link className="intent-card" href={item.href} key={item.href}>
                  <span>{String(index + 1).padStart(2, "0")}</span>
                  <h3>{item.label}</h3>
                  <p>{item.description}</p>
                </Link>
              ))}
            </div>
          </section>
        );

      case "featured-properties":
        return (
          <section className="section section--properties" key={section.id}>
            <div className="section-heading">
              <div>
                <p className="eyebrow">{section.eyebrow}</p>
                <h2>{section.title}</h2>
              </div>
              <p>{section.description}</p>
            </div>
            <div className="property-grid">
              {properties.slice(0, section.limit).map((property) => (
                <PropertyCard
                  key={property.publicPropertyId}
                  property={property}
                />
              ))}
            </div>
          </section>
        );

      case "area-highlights":
        return (
          <section
            className="section home-editorial"
            aria-labelledby={`${section.id}-title`}
            key={section.id}
          >
            <div className="section-heading">
              <div>
                <p className="eyebrow">{section.eyebrow}</p>
                <h2 id={`${section.id}-title`}>{section.title}</h2>
              </div>
              <p>{section.description}</p>
            </div>
            <div className="editorial-grid">
              {areas.slice(0, section.limit).map((area, index) => (
                <article className="editorial-card" key={area.slug}>
                  <span className="editorial-card__number">
                    {String(index + 1).padStart(2, "0")}
                  </span>
                  <p className="eyebrow">{area.character}</p>
                  <h3>{area.name}</h3>
                  <p>{area.introduction}</p>
                  <Link className="text-link" href={`/areas/${area.slug}`}>
                    Explore area <span aria-hidden="true">→</span>
                  </Link>
                </article>
              ))}
            </div>
          </section>
        );

      case "journal":
        return (
          <section
            className="section home-journal"
            aria-labelledby={`${section.id}-title`}
            key={section.id}
          >
            <div className="section-heading">
              <div>
                <p className="eyebrow">{section.eyebrow}</p>
                <h2 id={`${section.id}-title`}>{section.title}</h2>
              </div>
              {section.action ? (
                <Link className="text-link" href={section.action.href}>
                  {section.action.label} <span aria-hidden="true">→</span>
                </Link>
              ) : (
                <p>{section.description}</p>
              )}
            </div>
            <div className="article-list">
              {posts.slice(0, section.limit).map((post) => (
                <article className="article-card" key={post.slug}>
                  <div>
                    <p className="eyebrow">{post.category}</p>
                    <h3>{post.title}</h3>
                    <p>{post.excerpt}</p>
                  </div>
                  <div className="article-card__meta">
                    <span>{post.readingMinutes} min read</span>
                    <span>{post.author}</span>
                    <Link className="text-link" href={`/blogs/${post.slug}`}>
                      Read article <span aria-hidden="true">→</span>
                    </Link>
                  </div>
                </article>
              ))}
            </div>
          </section>
        );

      case "nia-promo":
        return (
          <section className="section nia-promo" key={section.id}>
            <div>
              <p className="eyebrow">{section.eyebrow}</p>
              <h2>{section.title}</h2>
            </div>
            <p>{section.body}</p>
            <Link className="button button--light" href={section.action.href}>
              {section.action.label}
            </Link>
          </section>
        );
    }
  });
}