import React from "react";
import { HStack, Image, Text, Box } from "@chakra-ui/react";
import { MerchantSupportChannels } from "~/types/bot";
import { openGoftinoChat } from "~/utils/goftino";
import { openRaychatChat } from "~/utils/raychat";
import { openGapifyChat } from "~/utils/gapify";

interface HorizontalChannelsListProps {
  channels: MerchantSupportChannels | undefined;
}

const defaultIcons = {
  goftino: "https://www.goftino.com/static/assets/img/favicon.png",
  raychat: "https://raychat.io/app-icon/favicon-32x32.png",
  gapify: "https://gapify.ai/wp-content/uploads/2025/04/Trans-logo-100x100.png",
  customLink: "https://cdn-icons-png.flaticon.com/512/2099/2099190.png",
  telegram: "https://cdn-icons-png.flaticon.com/512/2111/2111646.png",
  whatsapp: "https://cdn-icons-png.flaticon.com/512/733/733585.png",
};

const defaultNames = {
  goftino: "گفتینو",
  raychat: "رایچت",
  gapify: "گپیفای",
  customLink: "لینک",
  telegram: "تلگرام",
  whatsapp: "واتساپ",
};

const normalizeString = (value: unknown) =>
  typeof value === "string" ? value.trim() : "";

const resolveChannelView = (
  type:
    | "goftino"
    | "raychat"
    | "gapify"
    | "customLink"
    | "telegram"
    | "whatsapp",
  icon: unknown,
  name: unknown,
) => {
  return {
    icon: normalizeString(icon) || defaultIcons[type],
    name: normalizeString(name) || defaultNames[type],
  };
};

const getEnabledChannels = (channels: MerchantSupportChannels | undefined) => {
  if (!channels) return [];

  const enabledChannels: Array<{
    type:
      | "goftino"
      | "raychat"
      | "gapify"
      | "customLink"
      | "telegram"
      | "whatsapp";
    icon: string;
    name: string;
    data: any;
  }> = [];

  if (channels.goftino?.enabled) {
    const view = resolveChannelView(
      "goftino",
      channels.goftino.icon,
      channels.goftino.name,
    );
    enabledChannels.push({
      type: "goftino",
      icon: view.icon,
      name: view.name,
      data: channels.goftino,
    });
  }
  if (channels.raychat?.enabled) {
    const view = resolveChannelView(
      "raychat",
      channels.raychat.icon,
      channels.raychat.name,
    );
    enabledChannels.push({
      type: "raychat",
      icon: view.icon,
      name: view.name,
      data: channels.raychat,
    });
  }
  if (channels.gapify?.enabled) {
    const view = resolveChannelView(
      "gapify",
      channels.gapify.icon,
      channels.gapify.name,
    );
    enabledChannels.push({
      type: "gapify",
      icon: view.icon,
      name: view.name,
      data: channels.gapify,
    });
  }
  if (channels.customLink?.enabled) {
    const view = resolveChannelView(
      "customLink",
      channels.customLink.icon,
      channels.customLink.name,
    );
    enabledChannels.push({
      type: "customLink",
      icon: view.icon,
      name: view.name,
      data: channels.customLink,
    });
  }
  if (channels.telegram?.enabled) {
    const view = resolveChannelView(
      "telegram",
      channels.telegram.icon,
      channels.telegram.name,
    );
    enabledChannels.push({
      type: "telegram",
      icon: view.icon,
      name: view.name,
      data: channels.telegram,
    });
  }
  if (channels.whatsapp?.enabled) {
    const view = resolveChannelView(
      "whatsapp",
      channels.whatsapp.icon,
      channels.whatsapp.name,
    );
    enabledChannels.push({
      type: "whatsapp",
      icon: view.icon,
      name: view.name,
      data: channels.whatsapp,
    });
  }

  return enabledChannels;
};

const handleChannelClick = (
  type:
    | "goftino"
    | "raychat"
    | "gapify"
    | "customLink"
    | "telegram"
    | "whatsapp",
  data: any,
) => {
  switch (type) {
    case "whatsapp":
      const phoneNumber = data.phoneNumber?.replace(/\s/g, "");
      const message = data.welcomeMessage
        ? `?text=${encodeURIComponent(data.welcomeMessage)}`
        : "";
      window.open(`https://wa.me/${phoneNumber}${message}`, "_blank");
      break;
    case "telegram":
      window.open(`https://t.me/${data.username}`, "_blank");
      break;
    case "customLink":
      window.open(data.linkUrl, "_blank");
      break;
    case "goftino":
      openGoftinoChat();
      window.dispatchEvent(new Event("mori:close-widget"));
      break;
    case "raychat":
      openRaychatChat();
      window.dispatchEvent(new Event("mori:close-widget"));
      break;
    case "gapify":
      openGapifyChat();
      window.dispatchEvent(new Event("mori:close-widget"));
      break;
  }
};

export const HorizontalChannelsList: React.FC<HorizontalChannelsListProps> = ({
  channels,
}) => {
  const enabledChannels = getEnabledChannels(channels);

  if (enabledChannels.length === 0) {
    return null;
  }

  return (
    <HStack
      gap={3}
      w="full"
      alignItems="center"
      justifyContent="start"
      wrap={"wrap"}
    >
      {enabledChannels.map((channel, index) => (
        <Box
          key={`${channel.type}-${index}`}
          display="flex"
          alignItems="center"
          gap={3}
          cursor="pointer"
          borderRadius="16px"
          padding="6px 8px"
          bg="lightBackground"
          _hover={{
            bg: "veryLightBackground",
            transform: "scale(1.05)",
          }}
          transition="all 0.2s ease"
          onClick={() => handleChannelClick(channel.type, channel.data)}
          flexShrink={0}
        >
          <Image
            src={channel.icon}
            alt={channel.name}
            boxSize={{ base: "22px", md: "24px" }}
            borderRadius="full"
            objectFit="cover"
            onError={(event) => {
              const fallbackIcon = defaultIcons[channel.type];
              if (event.currentTarget.src !== fallbackIcon) {
                event.currentTarget.src = fallbackIcon;
              }
            }}
          />
          <Text
            fontSize={{ base: "12px", md: "14px" }}
            fontWeight="400"
            color="text"
            whiteSpace="nowrap"
          >
            {channel.name}
          </Text>
        </Box>
      ))}
    </HStack>
  );
};