import { motion } from "framer-motion";
import { staggerContainer, fadeUpItem } from "@/components/PageTransition";

type Content = Record<string, unknown>;

export type SummitDayItem = {
  day: string;
  title: string;
  emoji: string;
  color: string;
  items: string[];
};

const defaultEyebrow = "Year-End Celebration";
const defaultTitle = "🏆 Design to Impact Summit";
const defaultSubtitle =
  "A 3-day culminating event where students showcase their year-long journey from problem to impact.";
const defaultInviteTitle = "Who's at the Summit?";

const defaultDays: SummitDayItem[] = [
  {
    day: "Day 1",
    title: "Grades 9–12",
    emoji: "🎓",
    color: "--deep-sea",
    items: [
      "Venture-level presentations & partner pilots",
      "ROI analysis and scale-up pitches",
      "Industry mentor Q&A panels",
      "Portfolio defense & reflection",
    ],
  },
  {
    day: "Day 2",
    title: "Grades 6–8",
    emoji: "🔬",
    color: "--valencia",
    items: [
      "Solution concept demos & prototype showcases",
      "Data-driven impact presentations",
      "Interactive demo stations for visitors",
      "Student-led panel discussions",
    ],
  },
  {
    day: "Day 3",
    title: "Grades K–5",
    emoji: "🌱",
    color: "--sunflower",
    items: [
      "Discovery & problem framing exhibitions",
      "Hands-on prototype showcase stations",
      "Family celebration & gratitude walls",
      "Impact awards & next-year vision casting",
    ],
  },
];

const defaultInvitees = [
  "Students & Families",
  "Community Partners",
  "Industry Mentors",
  "School Leadership",
  "Local Government",
  "Fellow Schools",
];

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

function parseDays(content: Content | undefined): SummitDayItem[] {
  const raw = content?.days;
  if (!Array.isArray(raw) || raw.length === 0) return defaultDays;
  return raw
    .filter((x): x is Record<string, unknown> => x != null && typeof x === "object")
    .map((o) => ({
      day: str(o.day).trim() || "Day",
      title: str(o.title).trim() || "",
      emoji: str(o.emoji).trim() || "•",
      color: str(o.color).trim() || "--deep-sea",
      items: Array.isArray(o.items) ? o.items.map((i) => str(i).trim()).filter(Boolean) : [],
    }));
}

function parseInvitees(content: Content | undefined): string[] {
  const raw = content?.invitees;
  if (!Array.isArray(raw) || raw.length === 0) return defaultInvitees;
  return raw
    .map((p) => (typeof p === "string" ? p : typeof (p as { label?: unknown })?.label === "string" ? (p as { label: string }).label : ""))
    .map((s) => s.trim())
    .filter(Boolean);
}

export function DesignImpactSummitBlock({ content }: { content?: Content }) {
  const eyebrow = str(content?.eyebrow).trim() || defaultEyebrow;
  const title = str(content?.title).trim() || defaultTitle;
  const subtitle = str(content?.subtitle).trim() || defaultSubtitle;
  const inviteTitle = str(content?.inviteTitle).trim() || defaultInviteTitle;
  const days = parseDays(content);
  const invitees = parseInvitees(content);

  return (
    <section className="py-14 bg-muted/30">
      <div className="container mx-auto px-6 max-w-5xl">
        <motion.div
          className="text-center mb-10"
          initial={{ opacity: 0, y: 10 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
        >
          <p className="font-display text-xs tracking-[0.2em] uppercase text-valencia mb-2">{eyebrow}</p>
          <h2 className="font-display text-xl md:text-2xl font-bold text-foreground">{title}</h2>
          <p className="text-muted-foreground text-sm mt-2 max-w-lg mx-auto">{subtitle}</p>
        </motion.div>

        <motion.div
          className="grid md:grid-cols-3 gap-5 mb-8"
          variants={staggerContainer}
          initial="initial"
          whileInView="animate"
          viewport={{ once: true }}
        >
          {days.map((day) => (
            <motion.div key={day.day} variants={fadeUpItem} className="bg-card rounded-xl overflow-hidden border border-border">
              <div
                className="p-3 text-center font-display font-bold text-white tracking-wider uppercase text-xs"
                style={{ backgroundColor: `hsl(var(${day.color}))` }}
              >
                <span className="text-base mr-1">{day.emoji}</span> {day.day}
                {day.title ? ` — ${day.title}` : ""}
              </div>
              <div className="p-5">
                <ul className="space-y-2">
                  {day.items.map((item, i) => (
                    <li key={i} className="text-muted-foreground text-xs flex items-start gap-2">
                      <span className="text-primary font-bold text-[10px] mt-0.5">✓</span> {item}
                    </li>
                  ))}
                </ul>
              </div>
            </motion.div>
          ))}
        </motion.div>

        <motion.div
          className="bg-card border border-border rounded-xl p-6 text-center"
          initial={{ opacity: 0, y: 10 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
        >
          <h3 className="font-display text-sm font-bold text-foreground mb-3">{inviteTitle}</h3>
          <div className="flex flex-wrap justify-center gap-2">
            {invitees.map((who) => (
              <span
                key={who}
                className="text-[11px] font-display font-semibold px-3 py-1.5 rounded-full bg-valencia/10 text-valencia border border-valencia/20"
              >
                {who}
              </span>
            ))}
          </div>
        </motion.div>
      </div>
    </section>
  );
}