import type {
  ChartSingleData,
  DefinitionCardData,
  EquationFocusData,
  FullscreenVideoData,
  FullscreenVideoCenterCaptionData,
  FullscreenVideoTitleData,
  FullscreenSplitData,
  GlitchComponentFrameData,
  ProcessFlowData,
  QuoteImageData,
  SlideTemplateKey,
  SlideTemplateProps,
  SquareVideoData,
  SquareYellowData
} from "./templates";

export type SlideTemplateFieldType =
  | "text"
  | "textarea"
  | "lines"
  | "image"
  | "video"
  | "latex";

export interface SlideTemplateFieldDefinition {
  name: string;
  type: SlideTemplateFieldType;
  label: string;
  placeholder?: string;
  description?: string;
  required?: boolean;
}

export interface SlideTemplateDefinition {
  componentKey: SlideTemplateKey;
  label: string;
  description: string;
  displayMode: "square" | "fullscreen";
  supportedDisplayModes?: Array<"square" | "fullscreen">;
  fields: SlideTemplateFieldDefinition[];
}

export interface SlideTemplateAvailability {
  componentKey: SlideTemplateKey;
  label: string;
  description: string;
  displayMode: "square" | "fullscreen";
  fields: SlideTemplateFieldDefinition[];
}

export interface SlideTemplateDraft {
  props: SlideTemplateProps;
  latexString?: string;
}

const squareYellowDefaults: SquareYellowData = {
  header: "",
  imageSrc: "",
  imageAlt: ""
};

const squareVideoDefaults: SquareVideoData = {
  header: "",
  videoSrc: "",
  posterSrc: ""
};

const fullscreenSplitDefaults: FullscreenSplitData = {
  eyebrow: "",
  title: "",
  body: "",
  imageSrc: "",
  imageAlt: "",
  imagePosition: "left"
};

const fullscreenVideoDefaults: FullscreenVideoData = {
  header: "",
  videoSrc: "",
  posterSrc: "",
  caption: ""
};

const fullscreenVideoTitleDefaults: FullscreenVideoTitleData = {
  title: "No need to be discrete",
  videoSrc: "",
  posterSrc: ""
};

const fullscreenVideoCenterCaptionDefaults: FullscreenVideoCenterCaptionData = {
  caption: "",
  videoSrc: "",
  posterSrc: ""
};

const equationFocusDefaults: EquationFocusData = {
  header: "",
  eyebrow: "",
  title: "",
  annotation: ""
};

const quoteImageDefaults: QuoteImageData = {
  eyebrow: "",
  quote: "",
  attribution: "",
  imageSrc: "",
  imageAlt: "",
  imagePosition: "left"
};

const chartSingleDefaults: ChartSingleData = {
  header: "",
  eyebrow: "",
  title: "",
  body: "",
  points: []
};

const processFlowDefaults: ProcessFlowData = {
  eyebrow: "",
  title: "",
  steps: []
};

const definitionCardDefaults: DefinitionCardData = {
  header: "",
  eyebrow: "",
  term: "",
  definition: "",
  example: ""
};

const glitchComponentFrameDefaults: GlitchComponentFrameData = {
  header: "",
  componentId: "",
  componentUrl: "",
  caption: ""
};

export const slideTemplateDefinitions: Record<
  SlideTemplateKey,
  SlideTemplateDefinition
> = {
  SquareYellow: {
    componentKey: "SquareYellow",
    label: "Square image + header",
    description: "Square image with a short external header.",
    displayMode: "square",
    fields: [
      {
        name: "header",
        type: "text",
        label: "Header",
        placeholder: "Short headline",
        required: true
      },
      {
        name: "imageSrc",
        type: "image",
        label: "Image",
        placeholder: "https://...",
        required: true
      },
      {
        name: "imageAlt",
        type: "text",
        label: "Alt text",
        placeholder: "Describe the image",
        required: true
      }
    ]
  },
  SquareVideo: {
    componentKey: "SquareVideo",
    label: "Square video + header",
    description: "Square video inside a framed square slide with a short header.",
    displayMode: "square",
    fields: [
      {
        name: "header",
        type: "text",
        label: "Header",
        placeholder: "Short headline",
        required: true
      },
      {
        name: "videoSrc",
        type: "video",
        label: "Video",
        placeholder: "https://...",
        required: true
      },
      {
        name: "posterSrc",
        type: "image",
        label: "Poster image",
        placeholder: "https://..."
      }
    ]
  },
  FullscreenSplit: {
    componentKey: "FullscreenSplit",
    label: "Fullscreen split",
    description: "Two-panel fullscreen slide with image and text.",
    displayMode: "fullscreen",
    fields: [
      {
        name: "header",
        type: "text",
        label: "Header",
        placeholder: "Short header"
      },
      {
        name: "title",
        type: "text",
        label: "Title",
        placeholder: "Main title",
        required: true
      },
      {
        name: "body",
        type: "textarea",
        label: "Body",
        placeholder: "Short supporting text",
        required: true
      },
      {
        name: "imageSrc",
        type: "image",
        label: "Image",
        placeholder: "https://...",
        required: true
      },
      {
        name: "imageAlt",
        type: "text",
        label: "Alt text",
        placeholder: "Describe the image",
        required: true
      },
      {
        name: "imagePosition",
        type: "text",
        label: "Image position",
        placeholder: "left or right"
      }
    ]
  },
  FullscreenVideo: {
    componentKey: "FullscreenVideo",
    label: "Fullscreen video",
    description: "Full-bleed video slide with optional overlay text.",
    displayMode: "fullscreen",
    fields: [
      {
        name: "header",
        type: "text",
        label: "Header",
        placeholder: "Short header"
      },
      {
        name: "videoSrc",
        type: "video",
        label: "Video",
        placeholder: "https://...",
        required: true
      },
      {
        name: "posterSrc",
        type: "image",
        label: "Poster image",
        placeholder: "https://..."
      },
      {
        name: "caption",
        type: "textarea",
        label: "Caption",
        placeholder: "Short framing note"
      }
    ]
  },
  FullscreenVideoTitle: {
    componentKey: "FullscreenVideoTitle",
    label: "Fullscreen video + title",
    description: "Full-bleed video with one oversized overlaid title.",
    displayMode: "fullscreen",
    fields: [
      {
        name: "title",
        type: "text",
        label: "Title",
        placeholder: "No need to be discrete"
      },
      {
        name: "videoSrc",
        type: "video",
        label: "Video",
        placeholder: "https://...",
        required: true
      },
      {
        name: "posterSrc",
        type: "image",
        label: "Poster image",
        placeholder: "https://..."
      }
    ]
  },
  FullscreenVideoCenterCaption: {
    componentKey: "FullscreenVideoCenterCaption",
    label: "Fullscreen video + centered caption",
    description: "Full-bleed video with one oversized centered caption.",
    displayMode: "fullscreen",
    fields: [
      {
        name: "caption",
        type: "text",
        label: "Caption",
        placeholder: "Short centered statement"
      },
      {
        name: "videoSrc",
        type: "video",
        label: "Video",
        placeholder: "https://...",
        required: true
      },
      {
        name: "posterSrc",
        type: "image",
        label: "Poster image",
        placeholder: "https://..."
      }
    ]
  },
  EquationFocus: {
    componentKey: "EquationFocus",
    label: "Equation focus",
    description: "One display equation with a short annotation.",
    displayMode: "fullscreen",
    supportedDisplayModes: ["square", "fullscreen"],
    fields: [
      {
        name: "header",
        type: "text",
        label: "Header",
        placeholder: "Short header"
      },
      {
        name: "title",
        type: "text",
        label: "Title",
        placeholder: "What does the equation show?",
        required: true
      },
      {
        name: "latexString",
        type: "latex",
        label: "LaTeX equation",
        placeholder: "\\bar{x} = \\frac{1}{N}\\sum_{i=0}^{N} x_i",
        required: true
      },
      {
        name: "annotation",
        type: "textarea",
        label: "Annotation",
        placeholder: "One short explanation"
      }
    ]
  },
  QuoteImage: {
    componentKey: "QuoteImage",
    label: "Quote + image",
    description: "Strong quote paired with one image.",
    displayMode: "fullscreen",
    fields: [
      {
        name: "eyebrow",
        type: "text",
        label: "Eyebrow",
        placeholder: "Optional eyebrow"
      },
      {
        name: "quote",
        type: "textarea",
        label: "Quote",
        placeholder: "Short quote",
        required: true
      },
      {
        name: "attribution",
        type: "text",
        label: "Attribution",
        placeholder: "Person or source"
      },
      {
        name: "imageSrc",
        type: "image",
        label: "Image",
        placeholder: "https://...",
        required: true
      },
      {
        name: "imageAlt",
        type: "text",
        label: "Alt text",
        placeholder: "Describe the image",
        required: true
      },
      {
        name: "imagePosition",
        type: "text",
        label: "Image position",
        placeholder: "left or right"
      }
    ]
  },
  ChartSingle: {
    componentKey: "ChartSingle",
    label: "Single chart",
    description: "One compact chart with a short framing line.",
    displayMode: "fullscreen",
    fields: [
      {
        name: "header",
        type: "text",
        label: "Header",
        placeholder: "Short header"
      },
      {
        name: "title",
        type: "text",
        label: "Title",
        placeholder: "Chart title",
        required: true
      },
      {
        name: "body",
        type: "textarea",
        label: "Body",
        placeholder: "Short interpretation"
      },
      {
        name: "points",
        type: "lines",
        label: "Data points",
        placeholder: "Label: value",
        description: "One point per line. Format each line as label: value."
      }
    ]
  },
  ProcessFlow: {
    componentKey: "ProcessFlow",
    label: "Process flow",
    description: "Short pipeline with 3 to 5 steps.",
    displayMode: "fullscreen",
    fields: [
      {
        name: "eyebrow",
        type: "text",
        label: "Eyebrow",
        placeholder: "Optional eyebrow"
      },
      {
        name: "title",
        type: "text",
        label: "Title",
        placeholder: "Process title",
        required: true
      },
      {
        name: "steps",
        type: "lines",
        label: "Steps",
        placeholder: "One step per line",
        required: true
      }
    ]
  },
  DefinitionCard: {
    componentKey: "DefinitionCard",
    label: "Definition card",
    description: "Term, definition, and optional example.",
    displayMode: "fullscreen",
    fields: [
      {
        name: "header",
        type: "text",
        label: "Header",
        placeholder: "Short header"
      },
      {
        name: "term",
        type: "text",
        label: "Term",
        placeholder: "Key term",
        required: true
      },
      {
        name: "definition",
        type: "textarea",
        label: "Definition",
        placeholder: "Short definition",
        required: true
      },
      {
        name: "example",
        type: "textarea",
        label: "Example",
        placeholder: "Optional example"
      }
    ]
  },
  GlitchComponentFrame: {
    componentKey: "GlitchComponentFrame",
    label: "Interactive Glitch component",
    description: "Hosted Glitch component embedded inside the slide surface.",
    displayMode: "fullscreen",
    fields: [
      {
        name: "header",
        type: "text",
        label: "Header",
        placeholder: "Short header"
      },
      {
        name: "componentId",
        type: "text",
        label: "Component id",
        placeholder: "lightlane",
        required: true
      },
      {
        name: "componentUrl",
        type: "text",
        label: "Component URL",
        placeholder: "Optional hosted URL",
        description: "Optional URL for iframe-hosted components. Leave empty for known local component ids."
      },
      {
        name: "caption",
        type: "textarea",
        label: "Caption",
        placeholder: "Short framing note"
      }
    ]
  }
};

export const slideTemplateDefinitionList = Object.values(
  slideTemplateDefinitions
);

export const slideTemplateAvailabilityList: SlideTemplateAvailability[] =
  slideTemplateDefinitionList.flatMap((definition) => {
    const supportedDisplayModes =
      definition.supportedDisplayModes ?? [definition.displayMode];

    return supportedDisplayModes.map((displayMode) => ({
      componentKey: definition.componentKey,
      label: definition.label,
      description: definition.description,
      displayMode,
      fields: definition.fields
    }));
  });

export const slideTemplateAvailabilityByDisplayMode = {
  square: slideTemplateAvailabilityList.filter(
    (definition) => definition.displayMode === "square"
  ),
  fullscreen: slideTemplateAvailabilityList.filter(
    (definition) => definition.displayMode === "fullscreen"
  )
} satisfies Record<"square" | "fullscreen", SlideTemplateAvailability[]>;

export const slideTemplateDrafts: Record<SlideTemplateKey, SlideTemplateDraft> = {
  SquareYellow: {
    props: squareYellowDefaults
  },
  SquareVideo: {
    props: squareVideoDefaults
  },
  FullscreenSplit: {
    props: fullscreenSplitDefaults
  },
  FullscreenVideo: {
    props: fullscreenVideoDefaults
  },
  FullscreenVideoTitle: {
    props: fullscreenVideoTitleDefaults
  },
  FullscreenVideoCenterCaption: {
    props: fullscreenVideoCenterCaptionDefaults
  },
  EquationFocus: {
    props: equationFocusDefaults,
    latexString: ""
  },
  QuoteImage: {
    props: quoteImageDefaults
  },
  ChartSingle: {
    props: chartSingleDefaults
  },
  ProcessFlow: {
    props: processFlowDefaults
  },
  DefinitionCard: {
    props: definitionCardDefaults
  },
  GlitchComponentFrame: {
    props: glitchComponentFrameDefaults
  }
};

export function getSlideTemplateDefinition(componentKey: SlideTemplateKey) {
  return slideTemplateDefinitions[componentKey];
}

export function getSlideTemplateAvailability(displayMode?: "square" | "fullscreen") {
  if (!displayMode) {
    return slideTemplateAvailabilityList;
  }

  return slideTemplateAvailabilityByDisplayMode[displayMode];
}

export function getSlideTemplateDraft(componentKey: SlideTemplateKey) {
  return slideTemplateDrafts[componentKey];
}
