import { motion } from "framer-motion";
import { quarters } from "@/data/curriculum";

type Content = Record<string, unknown>;

type TableRow = { strand: string; courses: string[] };

const quarterColors: Record<string, string> = {
  moss: "bg-moss",
  "deep-sea": "bg-deep-sea",
  valencia: "bg-valencia",
  sunflower: "bg-sunflower",
};

const defaultHeading = "Curriculum Architecture";
const defaultTitle = "9 Core + 4 DNA Strands = 1 Integrated Project";
const defaultSubtitle =
  "Core Courses run all year. DNA Strand Courses rotate every 9 weeks, building a progressive skill sequence.";
const defaultRows: TableRow[] = [
  { strand: "🗣️ Human Skills", courses: ["Communication", "Storytelling", "Leadership", "Impact"] },
  { strand: "🧪 Human Science", courses: ["Brain Science", "Health Science", "Medical Science", "Decision Science"] },
  { strand: "🎨 Design & Arts", courses: ["Design & Making", "Visual Comm", "Makers Lab", "Makers Lab"] },
  { strand: "💻 CT & Engineering", courses: ["CS Thinking", "Data Science", "AI Literacy", "Robotics"] },
];

function ensureTableRow(raw: unknown): TableRow {
  if (raw && typeof raw === "object" && "strand" in raw) {
    const o = raw as Record<string, unknown>;
    const strand = typeof o.strand === "string" ? o.strand : "";
    const rawCourses = o.courses;
    const courses = Array.isArray(rawCourses) ? rawCourses.map((c) => (typeof c === "string" ? c : "")) : [];
    return { strand, courses };
  }
  return { strand: "", courses: [] };
}

export function CurriculumArchitectureBlock({ content }: { content?: Content }) {
  const heading = (content?.heading as string) ?? defaultHeading;
  const title = (content?.title as string) ?? defaultTitle;
  const subtitle = (content?.subtitle as string) ?? defaultSubtitle;
  const rawRows = content?.rows;
  const rows: TableRow[] = Array.isArray(rawRows) ? rawRows.map(ensureTableRow) : defaultRows;

  return (
    <motion.section
      className="py-16 bg-card"
      initial={{ opacity: 0, y: 30 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true }}
      transition={{ duration: 0.5 }}
    >
      <div className="container mx-auto px-6 max-w-5xl">
        <div className="text-center mb-12">
          <p className="font-display text-xs tracking-[0.2em] uppercase text-deep-sea mb-2">{heading}</p>
          <h2 className="font-display text-3xl md:text-4xl font-bold text-foreground">{title}</h2>
          <p className="text-muted-foreground mt-3 max-w-2xl mx-auto">{subtitle}</p>
        </div>
        <div className="overflow-x-auto">
          <table className="w-full text-sm">
            <thead>
              <tr>
                <th className="font-display text-left p-3 text-muted-foreground text-xs uppercase tracking-wider">Strand</th>
                {quarters.map((q) => (
                  <th key={q.id} className="font-display p-3 text-xs uppercase tracking-wider text-center">
                    <span className={`inline-block px-3 py-1 rounded-full ${quarterColors[q.color] ?? "bg-muted"} text-milk`}>
                      Q{q.id}
                    </span>
                  </th>
                ))}
              </tr>
            </thead>
            <tbody className="divide-y divide-border">
              {rows.map((row, ri) => {
                const cells = quarters.length > 0 ? [...row.courses].slice(0, quarters.length) : row.courses;
                while (cells.length < quarters.length) cells.push("");
                return (
                  <tr key={ri} className="hover:bg-muted/50 transition-colors">
                    <td className="p-3 font-display font-medium text-foreground">{row.strand}</td>
                    {cells.map((course, i) => (
                      <td key={i} className="p-3 text-center text-muted-foreground">
                        {course}
                      </td>
                    ))}
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>
    </motion.section>
  );
}