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");
}

const defaultTitle = "Our Service Learning Plan (IPARDE)";
const defaultIcon = "🔗";

const defaultStepLabels = ["Investigate", "Prepare", "Action", "Reflect", "Demo", "Evaluate"];
const defaultStepClasses = [
  "text-primary-foreground bg-primary/90",
  "text-primary-foreground bg-primary",
  "text-primary bg-mist",
  "text-white bg-moss",
  "text-white bg-accent",
  "text-primary bg-sunflower",
];

const defaultItems = [
  "**Investigation:** Baseline audits & interviews (campus and neighborhood)",
  "**Action:** Leak checks, drain adoption, rain‑barrel installs, irrigation improvements",
  "**Demonstration:** Students share results and hand off maintenance plans to partners",
];

function parseStepLabels(raw: unknown): string[] {
  if (!Array.isArray(raw)) return [...defaultStepLabels];
  const list = raw.filter((x): x is string => typeof x === "string").slice(0, 8);
  const out = list.slice(0, 6);
  while (out.length < 6) out.push(defaultStepLabels[out.length] ?? "");
  return out;
}

function renderItemText(text: string) {
  const parts = text.split(/(\*\*[^*]+\*\*)/g);
  return parts.map((p, i) => {
    const bold = p.match(/^\*\*(.+)\*\*$/);
    if (bold) return <strong key={i} className="text-primary">{bold[1]}</strong>;
    return <span key={i}>{p}</span>;
  });
}

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>
);

export function ServiceLearningIpardBlock({ content }: { content?: Content }) {
  const title = str(content?.title).trim() || defaultTitle;
  const icon = str(content?.icon).trim() || defaultIcon;
  const stepLabels = parseStepLabels(content?.stepLabels);
  const items = arr(content?.items).length > 0 ? arr(content?.items) : defaultItems;

  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="flex rounded-[10px] overflow-hidden mb-2.5">
        {stepLabels.map((label, i) => (
          <span
            key={i}
            className={`flex-1 text-center py-1.5 text-[10.5px] font-bold uppercase tracking-wide ${defaultStepClasses[i] ?? "bg-muted text-muted-foreground"}`}
          >
            {label || `Step ${i + 1}`}
          </span>
        ))}
      </div>
      <div className="border border-border rounded-[10px] p-3">
        <ul className="list-none">
          {items.map((item, i) => (
            <BulletItem key={i}>{renderItemText(item)}</BulletItem>
          ))}
        </ul>
      </div>
    </div>
    </BrandscapeShell>
  );
}