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

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

function arr(c: unknown): string[] {
  if (!Array.isArray(c)) return [];
  return c.filter((x): x is string => typeof x === "string");
}

type GradeBand = { label?: string; color?: string; items?: string[] };

function parseGradeBands(raw: unknown): GradeBand[] {
  if (!Array.isArray(raw)) return defaultGradeBands;
  return raw.slice(0, 8).map((b) => {
    const x = b as GradeBand;
    return {
      label: str(x?.label).trim(),
      color: str(x?.color).trim() || "primary",
      items: arr(x?.items),
    };
  });
}

const defaultGradeBands: GradeBand[] = [
  { label: "K–2", color: "salmon", items: ["Handwashing \"water‑off‑while‑scrubbing\" routines", "Bathroom \"drip detective\" tallies", "Reminder decals & songs for younger peers"] },
  { label: "3–5", color: "accent", items: ["Cafeteria pour‑off audits & nudge signs", "Adopt‑a‑Drain mapping & maintenance", "Rain‑barrel placement for the garden"] },
  { label: "6–8", color: "sunflower", items: ["Leak‑detection checks with simple sensors", "Sensor‑guided irrigation scheduling", "Low‑cost emergency filter demos (no drinking)"] },
  { label: "9–12", color: "moss", items: ["Watershed & runoff hotspot mapping", "Smart meter retrofit prototypes & ROI tests", "Partner pilots and scale‑up plans"] },
];

const defaultTitle = "What Your Child Might Do";
const defaultIcon = "🎒";
const defaultSafetyTitle = "🛡️ Safety & Ethics";
const defaultSafetyItems = [
  "Age‑appropriate tools and supervision",
  "Water + electricity separation; PPE in labs",
  "Consent & privacy for interviews/data",
  "On‑campus service for K–2; approved sites for older grades",
];
const defaultSuccessTitle = "📊 What Success Looks Like";
const defaultSuccessSubtitle = "Real savings. Real habits. Real pride.";
const defaultSuccessItems = [
  "Liters saved each week",
  "Leaks found and fixed",
  "Cleaner drains and gardens",
  "Students who can explain the science, math, and choices behind their solution",
];

const colorToClass: Record<string, string> = {
  salmon: "bg-salmon",
  accent: "bg-accent",
  sunflower: "bg-sunflower text-foreground",
  moss: "bg-moss",
  primary: "bg-primary",
};

const BulletItem = ({ children }: { children: React.ReactNode }) => (
  <li className="relative pl-5 py-0.5 text-[12.5px] leading-relaxed text-muted-foreground before:content-[''] before:absolute before:left-0 before:top-[9px] before:w-1.5 before:h-1.5 before:rounded-full before:bg-primary">
    {children}
  </li>
);

const CheckItem = ({ children }: { children: React.ReactNode }) => (
  <li className="relative pl-5 py-0.5 text-[12.5px] leading-relaxed text-muted-foreground before:content-['✓'] before:absolute before:left-0 before:top-0.5 before:text-accent before:font-extrabold before:text-xs">
    {children}
  </li>
);

const GradeLabel = ({ children, className }: { children: React.ReactNode; className?: string }) => (
  <span className={`inline-block text-[11px] font-bold tracking-wide px-2.5 py-0.5 rounded-full text-white mb-1.5 ${className ?? ""}`}>
    {children}
  </span>
);

export function WhatYourChildMightDoBlock({ content }: { content?: Content }) {
  const title = str(content?.title).trim() || defaultTitle;
  const icon = str(content?.icon).trim() || defaultIcon;
  const gradeBands = parseGradeBands(content?.gradeBands);
  const safetyTitle = str(content?.safetyTitle).trim() || defaultSafetyTitle;
  const safetyItems = arr(content?.safetyItems).length > 0 ? arr(content?.safetyItems) : defaultSafetyItems;
  const successTitle = str(content?.successTitle).trim() || defaultSuccessTitle;
  const successSubtitle = str(content?.successSubtitle).trim() || defaultSuccessSubtitle;
  const successItems = arr(content?.successItems).length > 0 ? arr(content?.successItems) : defaultSuccessItems;

  const borderTopClass: Record<string, string> = {
    salmon: "border-t-salmon",
    accent: "border-t-accent",
    sunflower: "border-t-sunflower",
    moss: "border-t-moss",
    primary: "border-t-primary",
  };

  const row1 = gradeBands.slice(0, 3);
  const row2Band = gradeBands[3];

  return (
    <BrandscapeShell variant="narrow">
    <div className="mt-6">
      <h2 className="font-display text-[17px] font-normal text-primary flex items-center gap-2 mb-2">
        <span className="text-base opacity-70">{icon}</span>
        {title}
      </h2>
      <div className="grid sm:grid-cols-3 gap-3">
        {row1.map((band, idx) => (
          <div
            key={idx}
            className={`border border-border rounded-[10px] p-3.5 border-t-[3px] hover:shadow-md transition-shadow ${borderTopClass[band.color ?? "primary"] ?? "border-t-primary"}`}
          >
            <GradeLabel className={colorToClass[band.color ?? "primary"] ?? "bg-primary"}>
              {band.label || `Band ${idx + 1}`}
            </GradeLabel>
            <ul className="list-none">
              {(band.items ?? []).map((item, i) => (
                <BulletItem key={i}>{item}</BulletItem>
              ))}
            </ul>
          </div>
        ))}
      </div>
      <div className="grid sm:grid-cols-3 gap-3 mt-3">
        {row2Band && (
          <div className={`border border-border rounded-[10px] p-3.5 border-t-[3px] hover:shadow-md transition-shadow ${borderTopClass[row2Band.color ?? "moss"] ?? "border-t-moss"}`}>
            <GradeLabel className={colorToClass[row2Band.color ?? "moss"] ?? "bg-moss"}>
              {row2Band.label || "9–12"}
            </GradeLabel>
            <ul className="list-none">
              {(row2Band.items ?? []).map((item, i) => (
                <BulletItem key={i}>{item}</BulletItem>
              ))}
            </ul>
          </div>
        )}
        <div className="bg-mist/10 border border-primary/10 rounded-[10px] p-3.5 hover:shadow-md transition-shadow">
          <h3 className="text-[13px] font-bold text-primary mb-1">{safetyTitle}</h3>
          <ul className="list-none">
            {safetyItems.map((item, i) => (
              <CheckItem key={i}>{item}</CheckItem>
            ))}
          </ul>
        </div>
        <div className="bg-mist/10 border border-primary/10 rounded-[10px] p-3.5 hover:shadow-md transition-shadow">
          <h3 className="text-[13px] font-bold text-primary mb-1">{successTitle}</h3>
          <p className="font-display text-base text-primary leading-tight mb-1.5">{successSubtitle}</p>
          <ul className="list-none">
            {successItems.map((item, i) => (
              <BulletItem key={i}>{item}</BulletItem>
            ))}
          </ul>
        </div>
      </div>
    </div>
    </BrandscapeShell>
  );
}