import React, { ReactNode } from "react";

import { CheckPlansProps } from "@shared/types/micro-components";

export interface carouselFieldsInterface {
  __typename: "ComponentCarousel";
  sys: {
    id: string;
  };
  entryName?: string;
  anchorId?: string;
  title?: string;
  subTitle?: string;
  rotationTiming?: number;
  showArrows?: boolean;
  autoRotate?: boolean;
  initialSlideIndex?: number;
  infiniteScroll?: boolean;
  mobileNavigationType?: boolean;
  disclaimerText?: {
    json: any;
  };
  backgroundColor?: "blue" | "green" | "orange" | "purple" | "white";
  items: {
    items: Array<CarouselItemsType>;
  };
}

export type CarouselItemsType =
  | TestimonialCardFields
  | ProductCardFields
  | CardFields;

export interface TestimonialCardFields {
  __typename: "ComponentTestimonialCard";
  sys: {
    id: string;
  };
  title?: string;
  author?: string;
  role?: string;
  rating?: number;
  quote?: ReactNode;
  authorImage?: {
    url: string;
    title?: string;
    width?: number;
    height?: number;
  } | null;
  avatarurl?: string;
}

export interface ProductCardFields {
  __typename: "ComponentProductCard";
  sys: {
    id: string;
  };
  speed?: string;
  price?: string;
  priceSuffix?: string;
  techType?: string;
  highlighted?: boolean;
  productCardDescription?: string;
  benefitsTitle?: string;
  benefitsExpanded?: boolean;
  innerBadge?: string;
  productCategory?: string;
  // GraphQL patterns for nested references
  benefits?: {
    items: Array<any>;
  };
  giftRewards?: {
    list?: {
      items: Array<any>;
    };
  };
  cta?: {
    buttonLabel?: string;
    [key: string]: any;
  };
  innerBadgeIcon?: {
    url: string;
    [key: string]: any;
  };
}

export interface CardFields {
  __typename: "ComponentCard";
  sys: {
    id: string;
  };
  title?: string;
  subtitle?: string;
  eyebrow?: string;
  body?: { json: any };
  image?: { url: string; [key: string]: any };
  cta?: { buttonLabel?: string; [key: string]: any };
  ctaBottom?: { buttonLabel?: string; [key: string]: any };
}

export interface CarouselWithTestimonialCards
  extends Omit<carouselFieldsInterface, "items"> {
  items: {
    items: TestimonialCardFields[];
  };
}

export interface CarouselWithProductCards
  extends Omit<carouselFieldsInterface, "items"> {
  items: {
    items: ProductCardFields[];
  };
}

export const backgroundColorMap = {
  blue: "bg-bg-fill-inverse",
  green: "bg-border-success",
  orange: "bg-orange-500",
  purple: "bg-purple-500",
  white: "bg-white",
};

export type CarouselProps = {
  fields: carouselFieldsInterface;
  hasTestimonialCards: boolean;
  hasProductCards: boolean;
  disclaimerText: ReactNode;
  backgroundColor: string;
  activeTab: string;
  setActiveTab: (tab: string) => void;
  tabs: string[];
  showSwitch?: boolean;
  testimonialAutoScroll?: boolean;
  onModalButtonClick?: (id?: string) => void;
  renderCheckPlans?: (overrides?: CheckPlansProps) => React.ReactNode;
};

export interface TabSwitchProps {
  tabs: string[];
  activeTab: string;
  onChange: (tab: string) => void;
  className?: string;
}

export const DEFAULT_TABS = ["Business Ready", "Internet Only"];