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

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

type Step = { number?: number; title?: string; description?: string };

function parseSteps(raw: unknown): Step[] {
  if (!Array.isArray(raw) || raw.length === 0) return defaultSteps;
  return raw.slice(0, 10).map((s, idx) => ({
    number: typeof (s as Step)?.number === "number" ? (s as Step).number : idx + 1,
    title: str((s as Step)?.title).trim(),
    description: str((s as Step)?.description).trim(),
  }));
}

const defaultSteps: Step[] = [
  { number: 1, title: "Investigate & Empathize", description: "Observe, interview, and collect baseline data — restroom taps left on, cafeteria pour‑offs, storm‑drain litter." },
  { number: 2, title: "Define & Ideate", description: "Craft \"How might we…?\" questions and brainstorm solutions that are desirable, feasible, and impactful." },
  { number: 3, title: "Prototype & Test", description: "Build simple models (signage, sensors, barrels) and run small pilots to see what truly works." },
  { number: 4, title: "Implement & Serve", description: "With partners, students implement solutions — drain adoption, leak checks, rain‑barrel installation — and track results." },
  { number: 5, title: "Reflect & Demonstrate", description: "Present data‑backed stories at our Innovation & Impact Showcase and hand off maintenance plans." },
];

const defaultTitle = "How It Works — The PBEL Cycle";
const defaultIcon = "🔄";
const defaultFooterLabel = "One Theme · K–12";
const defaultFooterBody = "Our whole school studies the same theme, with developmentally appropriate projects for each grade band.";

const StepNumber = ({ n }: { n: number }) => (
  <span className="inline-flex items-center justify-center w-6 h-6 rounded-full bg-primary text-primary-foreground text-[11px] font-bold mr-1.5 shrink-0">
    {n}
  </span>
);

export function PbelCycleBlock({ content }: { content?: Content }) {
  const title = str(content?.title).trim() || defaultTitle;
  const icon = str(content?.icon).trim() || defaultIcon;
  const steps = parseSteps(content?.steps);
  const footerLabel = str(content?.footerLabel).trim() || defaultFooterLabel;
  const footerBody = str(content?.footerBody).trim() || defaultFooterBody;

  const leftSteps = steps.filter((s) => s.number >= 1 && s.number <= 3);
  const rightSteps = steps.filter((s) => s.number >= 4 && s.number <= 5);

  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 md:grid-cols-2 gap-3.5">
        <div className="border border-border rounded-[10px] p-3.5 hover:shadow-md transition-shadow">
          {leftSteps.map((step, idx) => (
            <div key={idx} className={idx < leftSteps.length - 1 ? "mb-2.5" : ""}>
              <h3 className="flex items-center text-[12.5px] font-bold text-primary mb-0.5">
                <StepNumber n={step.number || idx + 1} /> {step.title || `Step ${idx + 1}`}
              </h3>
              <p className="text-[12.5px] ml-[30px] leading-relaxed text-muted-foreground">{step.description || ""}</p>
            </div>
          ))}
        </div>
        <div className="border border-border rounded-[10px] p-3.5 hover:shadow-md transition-shadow">
          {rightSteps.map((step, idx) => (
            <div key={idx} className={idx < rightSteps.length - 1 ? "mb-2.5" : ""}>
              <h3 className="flex items-center text-[12.5px] font-bold text-primary mb-0.5">
                <StepNumber n={step.number || idx + 4} /> {step.title || `Step ${idx + 4}`}
              </h3>
              <p className="text-[12.5px] ml-[30px] leading-relaxed text-muted-foreground">{step.description || ""}</p>
            </div>
          ))}
          <div className="mt-3">
            <span className="inline-block text-[11px] font-semibold px-2.5 py-0.5 rounded-full bg-sunflower/15 text-moss border border-moss/20">
              {footerLabel}
            </span>
            <p className="text-[12px] text-muted-foreground mt-1">{footerBody}</p>
          </div>
        </div>
      </div>
    </div>
    </BrandscapeShell>
  );
}