import { BrandscapeShell } from "@/components/BrandscapeShell";
type Content = Record<string, unknown>;

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

const defaultHeading = "Core Skills Your Child Will Master";
const defaultHeadingIcon = "🎯";
const defaultSkills = [
  { title: "Observation & Inquiry", emoji: "🔍", items: ["Making detailed observations using all senses", "Asking testable questions", "Recording findings accurately"] },
  { title: "Investigation & Evidence", emoji: "🧪", items: ["Designing simple investigations", "Collecting and organizing data", "Using evidence to support claims"] },
];

type SkillItem = { title: string; emoji: string; items: string[] };

function ensureSkill(raw: unknown): SkillItem {
  const o = raw && typeof raw === "object" ? (raw as Record<string, unknown>) : {};
  const rawItems = o.items;
  const items = Array.isArray(rawItems)
    ? rawItems.filter((x): x is string => typeof x === "string").map((s) => s.trim()).filter(Boolean)
    : [];
  return {
    title: str(o.title).trim() || "Skill",
    emoji: str(o.emoji).trim() || "•",
    items: items.length ? items : ["Item"],
  };
}

function ensureSkills(raw: unknown): SkillItem[] {
  if (!Array.isArray(raw) || raw.length === 0) return defaultSkills;
  return raw.slice(0, 12).map(ensureSkill);
}

/** Normalize saved editor payload so preview and API always receive a stable skills array. */
export function normalizeCourseCoreSkillsContent(content: Content): Content {
  const rawSkills = content.skills;
  if (!Array.isArray(rawSkills)) {
    return { ...content };
  }

  return {
    ...content,
    skills: rawSkills.map((entry) => {
      const skill = entry && typeof entry === "object" ? (entry as Record<string, unknown>) : {};
      const items = Array.isArray(skill.items)
        ? (skill.items as unknown[])
            .filter((item): item is string => typeof item === "string")
            .map((item) => item.trim())
        : [];
      return {
        title: str(skill.title).trim(),
        emoji: str(skill.emoji).trim() || "•",
        items,
      };
    }),
  };
}

export function CourseCoreSkillsBlock({ content }: { content?: Content }) {
  const normalized = normalizeCourseCoreSkillsContent(content ?? {});
  const heading = str(normalized.heading).trim() || defaultHeading;
  const headingIcon = str(normalized.headingIcon).trim() || defaultHeadingIcon;
  const skills = ensureSkills(normalized.skills);

  return (
    <BrandscapeShell variant="content" paddingY>
    <section className="w-full min-w-0">
      <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>
      <div className="grid md:grid-cols-2 gap-4">
        {skills.map((skill, index) => (
          <div
            key={`${index}-${skill.title}`}
            className="bg-card rounded-xl p-5 border border-border hover:border-deep-sea transition-colors"
          >
            <h3 className="font-display text-sm font-bold text-deep-sea mb-3 flex items-center gap-2">
              <span className="text-xl">{skill.emoji}</span> {skill.title}
            </h3>
            <ul className="space-y-1.5">
              {skill.items.map((item, i) => (
                <li key={i} className="text-muted-foreground text-sm flex items-start gap-2">
                  <span className="text-deep-sea font-bold text-xs mt-0.5">✓</span> {item}
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </section>
    </BrandscapeShell>
  );
}