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

type Content = Record<string, unknown>;

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

const defaultHeading = "Developing the Whole Child";
const defaultHeadingIcon = "🎨";
const defaultSubtitle = "This course intentionally develops all six Portrait of the Learner dimensions:";
const defaultDimensions = [
  { name: "Inspiring Communicator", emoji: "💬", pct: 85 },
  { name: "Balanced Person", emoji: "⚖️", pct: 60 },
  { name: "Caring Citizen", emoji: "🌍", pct: 80 },
  { name: "Respectful Relationship Builder", emoji: "🤝", pct: 65 },
  { name: "Bold Visionary Leader", emoji: "🚀", pct: 55 },
  { name: "Resilient Problem Solver", emoji: "💪", pct: 75 },
];

type DimensionItem = { name: string; emoji: string; pct: number };

function ensureDimension(raw: unknown): DimensionItem {
  const o = raw && typeof raw === "object" ? (raw as Record<string, unknown>) : {};
  const pct = typeof o.pct === "number" ? Math.min(100, Math.max(0, o.pct)) : typeof o.pct === "string" ? parseInt(String(o.pct), 10) || 0 : 0;
  return {
    name: str(o.name).trim() || "Dimension",
    emoji: str(o.emoji).trim() || "✨",
    pct: Number.isNaN(pct) ? 0 : pct,
  };
}

function ensureDimensions(raw: unknown): DimensionItem[] {
  if (!Array.isArray(raw) || raw.length === 0) return defaultDimensions;
  return raw.slice(0, 12).map(ensureDimension);
}

export function CoursePortraitBlock({ content }: { content?: Content }) {
  const heading = str(content?.heading).trim() || defaultHeading;
  const headingIcon = str(content?.headingIcon).trim() || defaultHeadingIcon;
  const subtitle = str(content?.subtitle).trim() || defaultSubtitle;
  const dimensions = ensureDimensions(content?.dimensions);

  return (
    <BrandscapeShell variant="content" paddingY>
    <motion.section
      className="w-full min-w-0"
      initial={{ opacity: 0, y: 20 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true }}
      transition={{ duration: 0.5 }}
    >
      <h2 className="font-display text-xl font-bold text-deep-sea mb-4 flex items-center gap-2 border-b-2 border-deep-sea pb-2">
        <span className="text-2xl">{headingIcon}</span> {heading}
      </h2>
      <p className="text-muted-foreground text-sm mb-4">{subtitle}</p>
      <div className="space-y-3">
        {dimensions.map((dim) => (
          <div key={dim.name}>
            <div className="flex items-center justify-between mb-1">
              <span className="font-display text-sm font-semibold text-foreground flex items-center gap-2">
                <span>{dim.emoji}</span> {dim.name}
              </span>
              <span className="font-display text-sm font-bold text-deep-sea">{dim.pct}%</span>
            </div>
            <div className="w-full h-5 bg-secondary rounded-full overflow-hidden">
              <motion.div
                className="h-full rounded-full orion-gradient"
                initial={{ width: 0 }}
                whileInView={{ width: `${dim.pct}%` }}
                viewport={{ once: true }}
                transition={{ duration: 0.8, ease: "easeOut" }}
              />
            </div>
          </div>
        ))}
      </div>
    </motion.section>
    </BrandscapeShell>
  );
}