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 Cycle = { title?: string; color?: string; items?: string[] };

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

const defaultCycles: Cycle[] = [
  { title: "Cycle 1 · Sep–Oct — Discover & Define", color: "primary", items: ["Investigations & empathy interviews", "Baseline data collected", "Early \"quick‑win\" nudges"] },
  { title: "Cycle 2 · Nov–Jan — Prototype & Pilot", color: "sunflower", items: ["Build simple models and test", "One short pilot per team"] },
  { title: "Cycle 3 · Feb–May — Implement & Demonstrate", color: "accent", items: ["Scale what works with partners", "Track savings & adoption", "Innovation & Impact Showcase (May)"] },
];

const defaultTitle = "Year Timeline at a Glance";
const defaultIcon = "📅";
const defaultTraits = ["Resilient Problem Solver", "Caring Citizen", "Respectful Relationship Builder", "Inspiring Communicator", "Bold Visionary Leader", "Balanced Person"];

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

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 YearTimelineAtGlanceBlock({ content }: { content?: Content }) {
  const title = str(content?.title).trim() || defaultTitle;
  const icon = str(content?.icon).trim() || defaultIcon;
  const cycles = parseCycles(content?.cycles);
  const portraitTraits = arr(content?.portraitTraits).length > 0 ? arr(content?.portraitTraits) : defaultTraits;

  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="border border-border rounded-[10px] p-4">
        {cycles.map((cycle, idx) => (
          <div key={idx} className="flex gap-2.5 items-start mb-1.5">
            <span className={`w-2.5 h-2.5 rounded-full mt-1.5 shrink-0 ${dotColorClass[cycle.color ?? "primary"] ?? "bg-primary"}`} />
            <div>
              {cycle.title && <h3 className="text-[12.5px] font-bold text-primary mb-0.5">{cycle.title}</h3>}
              <ul className="list-none mt-0.5">
                {(cycle.items ?? []).map((item, i) => (
                  <BulletItem key={i}>{item}</BulletItem>
                ))}
              </ul>
            </div>
          </div>
        ))}
        <div className="flex flex-wrap gap-1.5 mt-2">
          {portraitTraits.map((t, i) => (
            <span key={i} className="text-[11px] font-semibold px-2.5 py-1 rounded-full bg-primary/10 text-primary border border-primary/15">
              {t}
            </span>
          ))}
        </div>
      </div>
    </div>
    </BrandscapeShell>
  );
}