import {
  Banner,
  type BannerColor,
  type BannerContent,
  type BannerDirection,
  type BannerSize,
  type BannerType,
} from "./Banner";

type BannerSpec = {
  id: string;
  name: string;
  x: number;
  y: number;
  width: number;
  height: number;
};

type ParsedBannerSpec = BannerSpec & {
  color: BannerColor;
  content: BannerContent;
  dir: BannerDirection;
  size: BannerSize;
  type: BannerType;
};

const figmaTypeToProp: Record<string, BannerType> = {
  Slim: "slim",
  "Single action inline": "single-action-inline",
  "Single action": "single-action",
  Input: "input",
};

const figmaSizeToProp: Record<string, BannerSize> = {
  Floating: "floating",
  "Full width": "full-width",
};

const figmaContentToProp: Record<string, BannerContent> = {
  Title: "title",
  "Title + Description": "title-description",
};

const figmaColorToProp: Record<string, BannerColor> = {
  Brand: "brand",
  Grey: "grey",
  "Brand Light": "brand-light",
};

const bannerSpecs: BannerSpec[] = [
  { id: "237:39514", name: "type=Single action, Size=Full width, Content=Title, color=Brand, RTL=False", x: 1475, y: 377, width: 1440, height: 60 },
  { id: "237:39521", name: "type=Single action, Size=Full width, Content=Title, color=Grey, RTL=False", x: 1475, y: 1144.8330078125, width: 1440, height: 60 },
  { id: "237:39528", name: "type=Single action, Size=Full width, Content=Title, color=Brand Light, RTL=False", x: 1475, y: 1964.8330078125, width: 1440, height: 60 },
  { id: "237:39543", name: "type=Single action, Size=Full width, Content=Title + Description, color=Grey, RTL=False", x: 1475, y: 1228.8330078125, width: 1440, height: 60 },
  { id: "237:39553", name: "type=Single action, Size=Full width, Content=Title + Description, color=Brand Light, RTL=False", x: 1475, y: 2048.8330078125, width: 1440, height: 60 },
  { id: "237:39574", name: "type=Input, Size=Full width, Content=Title, color=Brand, RTL=False", x: 1475, y: 566, width: 1440, height: 60 },
  { id: "237:39583", name: "type=Input, Size=Full width, Content=Title + Description, color=Brand, RTL=False", x: 1475, y: 644, width: 1440, height: 60 },
  { id: "237:39595", name: "type=Input, Size=Full width, Content=Title, color=Grey, RTL=False", x: 1475, y: 1341.8330078125, width: 1440, height: 60 },
  { id: "237:39604", name: "type=Input, Size=Full width, Content=Title, color=Brand Light, RTL=False", x: 1475, y: 2161.8330078125, width: 1440, height: 60 },
  { id: "237:39623", name: "type=Input, Size=Full width, Content=Title + Description, color=Grey, RTL=False", x: 1475, y: 1416.999755859375, width: 1440, height: 60 },
  { id: "237:39635", name: "type=Input, Size=Full width, Content=Title + Description, color=Brand Light, RTL=False", x: 1475, y: 2236.999755859375, width: 1440, height: 60 },
  { id: "237:39660", name: "type=Slim, Size=Full width, Content=Title, color=Brand, RTL=False", x: 1475, y: 63, width: 1440, height: 48 },
  { id: "237:39666", name: "type=Slim, Size=Full width, Content=Title, color=Grey, RTL=False", x: 1475, y: 806.5, width: 1440, height: 48 },
  { id: "237:39672", name: "type=Slim, Size=Full width, Content=Title, color=Brand Light, RTL=False", x: 1475, y: 1617.3330078125, width: 1440, height: 48 },
  { id: "237:39685", name: "type=Slim, Size=Full width, Content=Title + Description, color=Grey, RTL=False", x: 1475, y: 884.5, width: 1440, height: 52 },
  { id: "237:39694", name: "type=Slim, Size=Full width, Content=Title + Description, color=Brand Light, RTL=False", x: 1475, y: 1695.3330078125, width: 1440, height: 52 },
  { id: "237:39713", name: "type=Single action, Size=Floating, Content=Title, color=Brand, RTL=False", x: 69, y: 377, width: 1217, height: 60 },
  { id: "237:39720", name: "type=Single action, Size=Floating, Content=Title + Description, color=Brand, RTL=False", x: 69, y: 458, width: 1217, height: 60 },
  { id: "237:39730", name: "type=Single action, Size=Full width, Content=Title + Description, color=Brand, RTL=False", x: 1475, y: 458, width: 1440, height: 60 },
  { id: "237:39740", name: "type=Single action, Size=Floating, Content=Title, color=Grey, RTL=False", x: 69, y: 1144.8330078125, width: 1217, height: 64 },
  { id: "237:39747", name: "type=Single action, Size=Floating, Content=Title, color=Brand Light, RTL=False", x: 69, y: 1964.8330078125, width: 1217, height: 60 },
  { id: "237:39762", name: "type=Single action, Size=Floating, Content=Title + Description, color=Grey, RTL=False", x: 69, y: 1228.8330078125, width: 1217, height: 64 },
  { id: "237:39772", name: "type=Single action, Size=Floating, Content=Title + Description, color=Brand Light, RTL=False", x: 69, y: 2048.8330078125, width: 1217, height: 60 },
  { id: "237:39793", name: "type=Slim, Size=Floating, Content=Title, color=Brand, RTL=False", x: 69, y: 63, width: 1217, height: 48 },
  { id: "237:39799", name: "type=Single action inline, Size=Floating, Content=Title, color=Brand, RTL=False", x: 69, y: 210, width: 1217, height: 60 },
  { id: "237:39805", name: "type=Single action inline, Size=Floating, Content=Title, color=Grey, RTL=False", x: 69, y: 973.41650390625, width: 1217, height: 60 },
  { id: "237:39811", name: "type=Single action inline, Size=Floating, Content=Title, color=Brand Light, RTL=False", x: 69, y: 1784.25, width: 1217, height: 60 },
  { id: "237:39824", name: "type=Single action inline, Size=Full width, Content=Title, color=Brand, RTL=False", x: 1475, y: 210, width: 1440, height: 60 },
  { id: "237:39830", name: "type=Single action inline, Size=Full width, Content=Title, color=Grey, RTL=False", x: 1475, y: 973.41650390625, width: 1440, height: 60 },
  { id: "237:39836", name: "type=Single action inline, Size=Full width, Content=Title, color=Brand Light, RTL=False", x: 1475, y: 1784.25, width: 1440, height: 60 },
  { id: "237:39849", name: "type=Single action inline, Size=Floating, Content=Title, color=Brand, RTL=True", x: 3119, y: 210, width: 1217, height: 60 },
  { id: "237:39855", name: "type=Single action inline, Size=Floating, Content=Title, color=Grey, RTL=True", x: 3119, y: 972.249755859375, width: 1217, height: 60 },
  { id: "237:39861", name: "type=Single action inline, Size=Floating, Content=Title, color=Brand Light, RTL=True", x: 3119, y: 1784.25, width: 1217, height: 60 },
  { id: "237:39874", name: "type=Single action inline, Size=Full width, Content=Title, color=Brand, RTL=True", x: 4525, y: 210, width: 1440, height: 60 },
  { id: "237:39880", name: "type=Single action inline, Size=Full width, Content=Title, color=Grey, RTL=True", x: 4525, y: 972.249755859375, width: 1440, height: 60 },
  { id: "237:39886", name: "type=Single action inline, Size=Full width, Content=Title, color=Brand Light, RTL=True", x: 4525, y: 1784.25, width: 1440, height: 60 },
  { id: "237:39899", name: "type=Slim, Size=Floating, Content=Title + Description, color=Brand, RTL=False", x: 69, y: 134, width: 1217, height: 52 },
  { id: "237:39908", name: "type=Single action inline, Size=Floating, Content=Title + Description, color=Brand, RTL=False", x: 69, y: 291, width: 1217, height: 60 },
  { id: "237:39917", name: "type=Single action inline, Size=Floating, Content=Title + Description, color=Grey, RTL=False", x: 69, y: 1054.41650390625, width: 1217, height: 60 },
  { id: "237:39926", name: "type=Single action inline, Size=Floating, Content=Title + Description, color=Brand Light, RTL=False", x: 69, y: 1865.25, width: 1217, height: 60 },
  { id: "237:39945", name: "type=Single action inline, Size=Full width, Content=Title + Description, color=Brand, RTL=False", x: 1475, y: 291, width: 1440, height: 60 },
  { id: "237:39954", name: "type=Single action inline, Size=Full width, Content=Title + Description, color=Grey, RTL=False", x: 1475, y: 1054.41650390625, width: 1440, height: 60 },
  { id: "237:39963", name: "type=Single action inline, Size=Full width, Content=Title + Description, color=Brand Light, RTL=False", x: 1475, y: 1865.25, width: 1440, height: 60 },
  { id: "237:39982", name: "type=Single action inline, Size=Floating, Content=Title + Description, color=Brand, RTL=True", x: 3119, y: 291, width: 1217, height: 60 },
  { id: "237:39991", name: "type=Single action inline, Size=Floating, Content=Title + Description, color=Grey, RTL=True", x: 3119, y: 1053.249755859375, width: 1217, height: 60 },
  { id: "237:40000", name: "type=Single action inline, Size=Floating, Content=Title + Description, color=Brand Light, RTL=True", x: 3119, y: 1865.25, width: 1217, height: 60 },
  { id: "237:40019", name: "type=Single action inline, Size=Full width, Content=Title + Description, color=Brand, RTL=True", x: 4525, y: 291, width: 1440, height: 60 },
  { id: "237:40028", name: "type=Single action inline, Size=Full width, Content=Title + Description, color=Grey, RTL=True", x: 4525, y: 1053.249755859375, width: 1440, height: 60 },
  { id: "237:40037", name: "type=Single action inline, Size=Full width, Content=Title + Description, color=Brand Light, RTL=True", x: 4525, y: 1865.25, width: 1440, height: 60 },
  { id: "237:40056", name: "type=Slim, Size=Floating, Content=Title + Description, color=Brand, RTL=True", x: 3119, y: 134, width: 1217, height: 52 },
  { id: "237:40065", name: "type=Slim, Size=Full width, Content=Title + Description, color=Brand, RTL=False", x: 1475, y: 134, width: 1440, height: 52 },
  { id: "237:40074", name: "type=Slim, Size=Full width, Content=Title + Description, color=Brand, RTL=True", x: 4525, y: 134, width: 1440, height: 52 },
  { id: "237:40083", name: "type=Slim, Size=Floating, Content=Title, color=Grey, RTL=False", x: 69, y: 820.5, width: 1217, height: 48 },
  { id: "237:40089", name: "type=Slim, Size=Floating, Content=Title, color=Brand Light, RTL=False", x: 69, y: 1631.3330078125, width: 1217, height: 48 },
  { id: "237:40103", name: "type=Slim, Size=Floating, Content=Title + Description, color=Grey, RTL=False", x: 69, y: 892.5, width: 1217, height: 52 },
  { id: "237:40112", name: "type=Slim, Size=Floating, Content=Title + Description, color=Brand Light, RTL=False", x: 69, y: 1703.3330078125, width: 1217, height: 52 },
  { id: "237:40132", name: "type=Input, Size=Floating, Content=Title, color=Brand, RTL=False", x: 69, y: 558, width: 1217, height: 60 },
  { id: "237:40141", name: "type=Input, Size=Floating, Content=Title + Description, color=Brand, RTL=False", x: 69, y: 639, width: 1217, height: 60 },
  { id: "237:40153", name: "type=Input, Size=Floating, Content=Title, color=Grey, RTL=False", x: 69, y: 1341.8330078125, width: 1217, height: 60 },
  { id: "237:40162", name: "type=Input, Size=Floating, Content=Title, color=Brand Light, RTL=False", x: 69, y: 2161.8330078125, width: 1217, height: 60 },
  { id: "237:40181", name: "type=Input, Size=Floating, Content=Title + Description, color=Grey, RTL=False", x: 69, y: 1422.8330078125, width: 1217, height: 60 },
  { id: "237:40193", name: "type=Input, Size=Floating, Content=Title + Description, color=Brand Light, RTL=False", x: 69, y: 2242.8330078125, width: 1217, height: 60 },
  { id: "237:40218", name: "type=Single action, Size=Full width, Content=Title, color=Brand, RTL=True", x: 4525, y: 369.1666259765625, width: 1440, height: 60 },
  { id: "237:40225", name: "type=Single action, Size=Full width, Content=Title + Description, color=Brand, RTL=True", x: 4525, y: 450.1666259765625, width: 1440, height: 60 },
  { id: "237:40235", name: "type=Single action, Size=Full width, Content=Title, color=Grey, RTL=True", x: 4525, y: 1141.8330078125, width: 1440, height: 60 },
  { id: "237:40242", name: "type=Single action, Size=Full width, Content=Title, color=Brand Light, RTL=True", x: 4525, y: 1961.8330078125, width: 1440, height: 60 },
  { id: "237:40257", name: "type=Single action, Size=Full width, Content=Title + Description, color=Grey, RTL=True", x: 4525, y: 1217.8330078125, width: 1440, height: 60 },
  { id: "237:40267", name: "type=Single action, Size=Full width, Content=Title + Description, color=Brand Light, RTL=True", x: 4525, y: 2037.8330078125, width: 1440, height: 60 },
  { id: "237:40288", name: "type=Input, Size=Full width, Content=Title, color=Brand, RTL=True", x: 4525, y: 550, width: 1440, height: 60 },
  { id: "237:40297", name: "type=Input, Size=Full width, Content=Title + Description, color=Brand, RTL=True", x: 4525, y: 628, width: 1440, height: 60 },
  { id: "237:40309", name: "type=Input, Size=Full width, Content=Title, color=Grey, RTL=True", x: 4525, y: 1340.8330078125, width: 1440, height: 60 },
  { id: "237:40318", name: "type=Input, Size=Full width, Content=Title, color=Brand Light, RTL=True", x: 4525, y: 2160.8330078125, width: 1440, height: 60 },
  { id: "237:40337", name: "type=Input, Size=Full width, Content=Title + Description, color=Grey, RTL=True", x: 4525, y: 1422.8330078125, width: 1440, height: 60 },
  { id: "237:40349", name: "type=Input, Size=Full width, Content=Title + Description, color=Brand Light, RTL=True", x: 4525, y: 2242.8330078125, width: 1440, height: 60 },
  { id: "237:40374", name: "type=Slim, Size=Full width, Content=Title, color=Brand, RTL=True", x: 4525, y: 63, width: 1440, height: 48 },
  { id: "237:40380", name: "type=Slim, Size=Full width, Content=Title, color=Grey, RTL=True", x: 4525, y: 786.5, width: 1440, height: 48 },
  { id: "237:40386", name: "type=Slim, Size=Full width, Content=Title, color=Brand Light, RTL=True", x: 4525, y: 1597.3330078125, width: 1440, height: 48 },
  { id: "237:40399", name: "type=Slim, Size=Full width, Content=Title + Description, color=Grey, RTL=True", x: 4525, y: 874.3330078125, width: 1440, height: 52 },
  { id: "237:40408", name: "type=Slim, Size=Full width, Content=Title + Description, color=Brand Light, RTL=True", x: 4525, y: 1685.166015625, width: 1440, height: 52 },
  { id: "237:40427", name: "type=Single action, Size=Floating, Content=Title, color=Brand, RTL=True", x: 3119, y: 369.1666259765625, width: 1217, height: 60 },
  { id: "237:40434", name: "type=Single action, Size=Floating, Content=Title + Description, color=Brand, RTL=True", x: 3119, y: 450.1666259765625, width: 1217, height: 60 },
  { id: "237:40444", name: "type=Single action, Size=Floating, Content=Title, color=Grey, RTL=True", x: 3119, y: 1142.8330078125, width: 1217, height: 60 },
  { id: "237:40451", name: "type=Single action, Size=Floating, Content=Title, color=Brand Light, RTL=True", x: 3119, y: 1962.8330078125, width: 1217, height: 60 },
  { id: "237:40466", name: "type=Single action, Size=Floating, Content=Title + Description, color=Grey, RTL=True", x: 3119, y: 1225.8330078125, width: 1217, height: 60 },
  { id: "237:40476", name: "type=Single action, Size=Floating, Content=Title + Description, color=Brand Light, RTL=True", x: 3119, y: 2045.8330078125, width: 1217, height: 60 },
  { id: "237:40497", name: "type=Slim, Size=Floating, Content=Title, color=Brand, RTL=True", x: 3119, y: 63, width: 1217, height: 48 },
  { id: "237:40503", name: "type=Slim, Size=Floating, Content=Title, color=Grey, RTL=True", x: 3119, y: 798.5, width: 1217, height: 48 },
  { id: "237:40509", name: "type=Slim, Size=Floating, Content=Title, color=Brand Light, RTL=True", x: 3119, y: 1609.3330078125, width: 1217, height: 48 },
  { id: "237:40523", name: "type=Slim, Size=Floating, Content=Title + Description, color=Grey, RTL=True", x: 3119, y: 874.5, width: 1217, height: 52 },
  { id: "237:40532", name: "type=Slim, Size=Floating, Content=Title + Description, color=Brand Light, RTL=True", x: 3119, y: 1685.3330078125, width: 1217, height: 52 },
  { id: "237:40552", name: "type=Input, Size=Floating, Content=Title, color=Brand, RTL=True", x: 3119, y: 560, width: 1217, height: 60 },
  { id: "237:40561", name: "type=Input, Size=Floating, Content=Title + Description, color=Brand, RTL=True", x: 3119, y: 636, width: 1217, height: 60 },
  { id: "237:40573", name: "type=Input, Size=Floating, Content=Title, color=Grey, RTL=True", x: 3119, y: 1337.8330078125, width: 1217, height: 60 },
  { id: "237:40582", name: "type=Input, Size=Floating, Content=Title, color=Brand Light, RTL=True", x: 3119, y: 2157.8330078125, width: 1217, height: 60 },
  { id: "237:40601", name: "type=Input, Size=Floating, Content=Title + Description, color=Grey, RTL=True", x: 3119, y: 1417, width: 1217, height: 60 },
  { id: "237:40613", name: "type=Input, Size=Floating, Content=Title + Description, color=Brand Light, RTL=True", x: 3119, y: 2237, width: 1217, height: 60 },
];

function getField(name: string, field: string) {
  const match = name.match(new RegExp(`${field}=([^,]+)`));
  if (!match) throw new Error(`Missing ${field} in ${name}`);
  return match[1];
}

function parseBannerSpec(spec: BannerSpec): ParsedBannerSpec {
  const type = figmaTypeToProp[getField(spec.name, "type")];
  const size = figmaSizeToProp[getField(spec.name, "Size")];
  const content = figmaContentToProp[getField(spec.name, "Content")];
  const color = figmaColorToProp[getField(spec.name, "color")];

  if (!type || !size || !content || !color) {
    throw new Error(`Unsupported Banner variant: ${spec.name}`);
  }

  return {
    ...spec,
    color,
    content,
    dir: getField(spec.name, "RTL") === "True" ? "rtl" : "ltr",
    size,
    type,
  };
}

const parsedBannerSpecs = bannerSpecs.map(parseBannerSpec);

function getBannerDemoCopy(dir: BannerDirection) {
  const rtl = dir === "rtl";

  return {
    actionLabel: rtl ? "\u062a\u0637\u0628\u064a\u0642" : "Button",
    closeLabel: rtl ? "\u0625\u063a\u0644\u0627\u0642" : "Dismiss banner",
    description: rtl
      ? "\u0627\u0643\u062a\u0634\u0641 \u0622\u062e\u0631 \u0627\u0644\u062a\u062d\u062f\u064a\u062b\u0627\u062a \u0641\u064a \u0625\u0635\u062f\u0627\u0631\u0646\u0627 \u0627\u0644\u062c\u062f\u064a\u062f"
      : "Discover the Latest Updates in Our New Release",
    inputAriaLabel: rtl ? "\u062d\u0642\u0644 \u0627\u0644\u0628\u0627\u0646\u0631" : "Banner input",
    inputPlaceholder: rtl ? "\u0627\u0644\u0646\u0635" : "Placeholder",
    linkLabel: rtl ? "\u0627\u0644\u0631\u0627\u0628\u0637" : "Link button",
    title: rtl ? "\u0623\u062e\u0628\u0627\u0631 \u0645\u0647\u0645\u0629!" : "Big news!",
  };
}

export function BannerBoard() {
  return (
    <section className="banner-page" aria-label="Design system banner implementation">
      <div className="figma-banner-board" aria-label="Figma Banner component matrix">
        {parsedBannerSpecs.map((spec) => (
          <div
            className="figma-board__item figma-board__item--banner"
            data-figma-name={spec.name}
            data-node-id={spec.id}
            key={spec.id}
            style={{
              left: spec.x,
              top: spec.y,
              width: spec.width,
              height: spec.height,
            }}
          >
            <Banner
              {...getBannerDemoCopy(spec.dir)}
              ariaLabel={`${spec.dir.toUpperCase()} ${spec.color} ${spec.type} banner`}
              color={spec.color}
              content={spec.content}
              dir={spec.dir}
              showInlineAction={!(spec.type === "slim" && spec.color === "brand-light")}
              size={spec.size}
              type={spec.type}
            />
          </div>
        ))}
      </div>
    </section>
  );
}
