import { motion } from "framer-motion";
import { BrandscapeShell } from "@/components/BrandscapeShell";

type Content = Record<string, unknown>;

const fade = {
  hidden: { opacity: 0, y: 8 },
  visible: (i: number) => ({
    opacity: 1,
    y: 0,
    transition: { delay: i * 0.05, duration: 0.45, ease: "easeOut" as const },
  }),
};

function str(value: unknown): string {
  return typeof value === "string" ? value : "";
}

function cssVarToken(value: unknown, fallback: string): string {
  const raw = str(value).trim();
  if (!raw) return fallback;
  return raw.startsWith("--") ? raw : `--${raw}`;
}

function composeLabel(leftTitle: string, middleTitle: string, rightText: string): string {
  return [leftTitle, middleTitle, rightText].map((part) => part.trim()).filter(Boolean).join(" · ");
}

function pageSideLabel(currentPageLabel: string, totalPageLabel: string): string {
  const current = currentPageLabel.trim();
  const total = totalPageLabel.trim();
  if (current && total) return `${current} / ${total}`;
  return current || total;
}

/**
 * PBEL family-flyer footer bar (reference: /course/pbel-water FooterBar).
 * Separate from the Landing Footer / Site Settings footer.
 */
export function PbelGuideFooterBlock({ content }: { content?: Content }) {
  const leftTitle = str(content?.leftTitle);
  const middleTitle = str(content?.middleTitle);
  const rightText = str(content?.rightText);
  const currentPageLabel = str(content?.currentPageLabel);
  const totalPageLabel = str(content?.totalPageLabel);
  const animationIndex = typeof content?.animationIndex === "number" ? content.animationIndex : 10;

  const label = composeLabel(leftTitle, middleTitle, rightText);
  const pageLabel = pageSideLabel(currentPageLabel, totalPageLabel);

  const dot1 = cssVarToken(content?.dot1Color, "--primary");
  const dot2 = cssVarToken(content?.dot2Color, "--accent");
  const dot3 = cssVarToken(content?.dot3Color, "--sunflower");

  return (
    <BrandscapeShell variant="narrow">
      <motion.footer
        data-component="pbel-guide-footer"
        variants={fade}
        initial="hidden"
        whileInView="visible"
        viewport={{ once: true }}
        custom={animationIndex}
        className="mt-auto pt-3.5 border-t border-border flex justify-between items-center text-[11px] text-muted-foreground opacity-70"
      >
        <span>{label}</span>
        <span className="flex items-center gap-1.5">
          {pageLabel}
          <span
            className="inline-block w-1.5 h-1.5 rounded-full ml-1"
            style={{ backgroundColor: `hsl(var(${dot1}))` }}
            aria-hidden
          />
          <span
            className="inline-block w-1.5 h-1.5 rounded-full"
            style={{ backgroundColor: `hsl(var(${dot2}))` }}
            aria-hidden
          />
          <span
            className="inline-block w-1.5 h-1.5 rounded-full"
            style={{ backgroundColor: `hsl(var(${dot3}))` }}
            aria-hidden
          />
        </span>
      </motion.footer>
    </BrandscapeShell>
  );
}