import { z } from "zod";
import {
  Building2,
  UsersRound,
  UserPlus,
  HeartHandshake,
  Megaphone,
  GraduationCap,
  User,
  Heart,
  Flag,
  type LucideIcon,
} from "lucide-react";
import { registerSection } from "./registry";
import { registerSchema } from "./schemas";

const LAYOUT = "target_audience";

const ICON_MAP: Record<string, LucideIcon> = {
  "building-2": Building2,
  "users-round": UsersRound,
  "user-plus": UserPlus,
  "heart-handshake": HeartHandshake,
  megaphone: Megaphone,
  "graduation-cap": GraduationCap,
  user: User,
  heart: Heart,
  flag: Flag,
};

export const TargetAudienceSchema = z.object({
  accent: z.enum(["purple", "green"]).default("purple"),
  eyebrow: z.string().default(""),
  title_lines: z.array(z.string()).default([]),
  chips: z
    .array(
      z.object({
        icon: z.string().default(""),
        label: z.string().default(""),
      }),
    )
    .default([]),
});

export type TargetAudienceData = z.infer<typeof TargetAudienceSchema>;

function ChipIcon({ name }: { name: string }) {
  const Icon = ICON_MAP[name];
  if (!Icon) return null;
  return <Icon width={16} height={16} aria-hidden />;
}

export function TargetAudience({ data }: { data: TargetAudienceData }) {
  const isGreen = data.accent === "green";
  return (
    <section className="sec" data-screen-label="Audience">
      <div className="wrap">
        <div className="section-title">
          {data.eyebrow ? (
            <span className={isGreen ? "eyebrow green" : "eyebrow"}>
              <span className="pip" />
              {data.eyebrow}
            </span>
          ) : null}
          {data.title_lines.length > 0 ? (
            <h2 className={isGreen ? "h-section green" : "h-section"}>
              {data.title_lines.map((line, i) => (
                <span key={i} dangerouslySetInnerHTML={{ __html: line + (i < data.title_lines.length - 1 ? "<br/>" : "") }} />
              ))}
            </h2>
          ) : null}
        </div>
        <div className={isGreen ? "chip-list green" : "chip-list"} style={{ justifyContent: "center" }}>
          {data.chips.map((chip, i) => (
            <span key={i} className="chip">
              <ChipIcon name={chip.icon} />
              {chip.label}
            </span>
          ))}
        </div>
      </div>
    </section>
  );
}

registerSection<TargetAudienceData>(LAYOUT, TargetAudience);
registerSchema(LAYOUT, TargetAudienceSchema);