"use client";

import { memo, useState } from "react";
import { ASSETS, getAssetPath } from "../../../../lib/assetUtils";
import { logger } from "../../../../lib/logger";
import QuoteBlockView from "./QuoteBlock.view";
import type { QuoteBlockProps, VariantConfig } from "./QuoteBlock.types";

/** Figma: portrait variants standard | compact | extended; **`statement`** = Section/Quote (22137‑890679; **`lg`** single paragraph **21967‑24638** — About + use cases). */
const QuoteBlockContainer = memo<QuoteBlockProps>(
  ({
    variant: variantProp = "standard",
    className = "",
    quote = "The rules of decision-making must be open and available to everyone, and this can happen only if they are formalized.",
    quoteSecondary,
    author = "Jo Freeman",
    source = "The Tyranny of Structurelessness",
    avatarSrc = getAssetPath(ASSETS.QUOTE_AVATAR),
    id,
    fallbackAvatarSrc = getAssetPath(ASSETS.QUOTE_AVATAR),
    onError,
  }) => {
    const [imageError, setImageError] = useState(false);

    // Variant configurations
    const variants: Record<string, VariantConfig> = {
      compact: {
        container:
          "py-[var(--spacing-scale-032)] px-[var(--spacing-scale-016)]",
        card: "py-[var(--spacing-scale-032)] px-[var(--spacing-scale-016)] md:py-[var(--spacing-scale-040)] md:px-[var(--spacing-scale-024)] rounded-[var(--radius-measures-radius-small)]",
        gap: "gap-[var(--spacing-scale-016)] md:gap-[var(--spacing-scale-024)]",
        avatarGap: "gap-[var(--spacing-scale-012)]",
        avatar: "w-[48px] h-[48px] md:w-[64px] md:h-[64px]",
        quote: "text-[16px] leading-[120%] md:text-[20px] md:leading-[110%]",
        author: "text-[10px] leading-[120%] md:text-[12px]",
        source: "text-[10px] leading-[120%] md:text-[12px]",
        showDecor: false,
      },
      standard: {
        container:
          "md:py-[var(--spacing-scale-032)] md:px-[var(--spacing-scale-016)] lg:p-[var(--spacing-scale-064)]",
        card: "py-[var(--spacing-scale-064)] px-[var(--spacing-scale-020)] md:py-[var(--spacing-scale-064)] md:px-[var(--spacing-scale-048)] md:rounded-[var(--radius-measures-radius-medium)] lg:py-[var(--spacing-scale-064)] lg:pl-[120px] lg:pr-[320px]",
        gap: "gap-[var(--spacing-scale-024)] md:gap-[var(--spacing-scale-048)] lg:gap-[var(--spacing-scale-064)] xl:gap-[105px]",
        avatarGap:
          "gap-[var(--spacing-scale-020)] lg:gap-[var(--spacing-scale-018)] xl:gap-[var(--spacing-scale-032)]",
        avatar:
          "md:w-[120px] md:h-[120px] lg:w-[150px] lg:h-[150px] xl:w-[200px] xl:h-[200px]",
        quote:
          "text-xx-small-display md:text-small-display lg:text-large-display xl:text-x-large-display",
        author:
          "text-x-small-uppercase md:text-large-uppercase lg:text-x-large-uppercase xl:text-xx-large-uppercase",
        source:
          "text-x-small-uppercase md:text-large-uppercase lg:text-x-large-uppercase xl:text-xx-large-uppercase",
        showDecor: true,
      },
      extended: {
        container:
          "py-[var(--spacing-scale-048)] px-[var(--spacing-scale-024)] md:py-[var(--spacing-scale-064)] md:px-[var(--spacing-scale-032)] lg:py-[var(--spacing-scale-080)] lg:px-[var(--spacing-scale-048)]",
        card: "py-[var(--spacing-scale-080)] px-[var(--spacing-scale-032)] md:py-[var(--spacing-scale-096)] md:px-[var(--spacing-scale-064)] md:rounded-[var(--radius-measures-radius-large)] lg:py-[var(--spacing-scale-112)] lg:pl-[160px] lg:pr-[400px]",
        gap: "gap-[var(--spacing-scale-032)] md:gap-[var(--spacing-scale-064)] lg:gap-[var(--spacing-scale-080)] xl:gap-[140px]",
        avatarGap:
          "gap-[var(--spacing-scale-032)] lg:gap-[var(--spacing-scale-040)] xl:gap-[var(--spacing-scale-048)]",
        avatar:
          "w-[80px] h-[80px] md:w-[140px] md:h-[140px] lg:w-[180px] lg:h-[180px] xl:w-[240px] xl:h-[240px]",
        quote:
          "text-[20px] leading-[120%] md:text-[40px] md:leading-[110%] md:tracking-[0px] lg:text-[60px] xl:text-[72px]",
        author:
          "text-[14px] leading-[120%] md:text-[20px] md:leading-[120%] md:tracking-[0.24px] lg:text-[28px] xl:text-[36px]",
        source:
          "text-[14px] leading-[120%] md:text-[20px] md:leading-[120%] md:tracking-[0.24px] lg:text-[28px] xl:text-[36px]",
        showDecor: true,
      },
      statement: {
        container:
          "flex w-full flex-col items-center px-[var(--spacing-scale-032)] py-[var(--spacing-scale-048)] md:px-[var(--spacing-scale-096)] md:py-[var(--space-1200)]",
        card: "",
        gap: "",
        avatarGap: "",
        avatar: "",
        quote: "",
        author: "",
        source: "",
        showDecor: false,
        statementLayout: true,
      },
    };

    const config = variants[variantProp] || variants.standard;

    // Use provided ID or generate a stable one based on content
    const baseId =
      id ||
      (variantProp === "statement"
        ? "statement-quote"
        : `quote-${author.toLowerCase().replace(/\s+/g, "-")}`);
    const quoteId = `${baseId}-content`;
    const authorId = `${baseId}-author`;

    const handleImageError = (error: unknown) => {
      logger.warn(
        `QuoteBlock: Failed to load avatar image for ${author}:`,
        error,
      );
      setImageError(true);

      if (onError) {
        onError({
          type: "image_load_error",
          message: `Failed to load avatar for ${author}`,
          author,
          avatarSrc,
          error,
        });
      }
    };

    // Validate required props
    if (variantProp === "statement") {
      if (!quote?.trim() || !quoteSecondary?.trim()) {
        logger.error(
          "QuoteBlock: statement variant requires non-empty quote and quoteSecondary",
        );
        if (onError) {
          onError({
            type: "missing_props",
            message:
              "QuoteBlock statement variant requires quote and quoteSecondary",
            quote: !!(quote?.trim() && quoteSecondary?.trim()),
          });
        }
        return null;
      }
    } else if (!quote || !author) {
      logger.error("QuoteBlock: Missing required props (quote or author)");
      if (onError) {
        onError({
          type: "missing_props",
          message: "QuoteBlock requires quote and author props",
          quote: !!quote,
          author,
        });
      }
      return null; // Don't render if missing required props
    }

    // Determine which avatar to use
    const currentAvatarSrc = imageError ? fallbackAvatarSrc : avatarSrc;

    return (
      <QuoteBlockView
        className={className}
        quote={quote}
        quoteSecondary={quoteSecondary}
        author={author}
        source={source}
        quoteId={quoteId}
        authorId={authorId}
        config={config}
        imageError={imageError}
        currentAvatarSrc={currentAvatarSrc}
        onImageError={handleImageError}
      />
    );
  },
);

QuoteBlockContainer.displayName = "QuoteBlock";

export default QuoteBlockContainer;
