import ImageLoader from "@/components/ui/ImageLoader";
import moment from "moment";
import React from "react";
import { Text, View } from "react-native";
import RenderHTML from "react-native-render-html";
import FilePreview from "../FilePreview";
import { useColor } from "@/hooks/useColor";
import { Clock, ChatCircleDots } from "phosphor-react-native";

type Props = {
  tran: (text: string) => string;
  replies: any[] | undefined;
};

const Replies: React.FC<Props> = ({ tran, replies }) => {
  const { primary } = useColor();
  return (
    <View className="mt-4">
      <View className="flex-row items-center gap-x-2 mb-6">
        <View
          className="h-1 w-8 rounded-full"
          style={{ backgroundColor: primary.base }}
        />
        <Text className="text-xl font-manrope-bold text-slate-800">
          {tran("Replies")}
        </Text>
      </View>

      <View className="gap-y-6">
        {replies && replies.length > 0 ? (
          replies.map((item: any, index: number) => {
            const isMe = item?.isMyMessage;
            return (
              <View
                key={index}
                className={`rounded-2xl border ${isMe ? "bg-white border-slate-100" : "bg-slate-50 border-slate-200"}`}
              >
                <View className="flex-row items-center justify-between p-4 border-b border-slate-50">
                  <View className="flex-row items-center gap-x-3">
                    <View className="size-10 rounded-full overflow-hidden border-2 border-white shadow-sm">
                      <ImageLoader
                        src={item?.reply?.avatar}
                        user={item?.reply}
                        alt="avatar"
                        width={40}
                        height={40}
                        className="h-full w-full"
                      />
                    </View>
                    <View>
                      <Text className="font-manrope-bold text-slate-900">
                        {isMe ? tran("You") : item?.sender || tran("Staff")}
                      </Text>
                      <View
                        className={`px-2 py-0.5 rounded-full self-start ${isMe ? "bg-primary/10" : "bg-slate-200"}`}
                      >
                        <Text
                          className={`text-[10px] font-manrope-bold uppercase tracking-wider ${isMe ? "text-primary" : "text-slate-500"}`}
                        >
                          {isMe ? tran("Client") : tran("Support")}
                        </Text>
                      </View>
                    </View>
                  </View>

                  <View className="flex-row items-center gap-x-1">
                    <Clock size={12} color="#94a3b8" />
                    <Text className="text-xs font-manrope-medium text-slate-400">
                      {item?.time || moment(item?.created_at).fromNow()}
                    </Text>
                  </View>
                </View>

                <View className="p-4">
                  <RenderHTML
                    contentWidth={300}
                    source={{ html: item?.text || "" }}
                    tagsStyles={tagsStyles}
                  />

                  {item?.attachments?.length > 0 && (
                    <View className="mt-4 pt-4 border-t border-slate-100">
                      <View className="flex-row flex-wrap gap-2">
                        {item.attachments.map((file: string, index: number) => (
                          <FilePreview key={index} item={file} index={index} />
                        ))}
                      </View>
                    </View>
                  )}
                </View>
              </View>
            );
          })
        ) : (
          <View className="py-12 items-center justify-center bg-slate-50 rounded-3xl border border-dashed border-slate-200">
            <ChatCircleDots size={48} color="#cbd5e1" weight="duotone" />
            <Text className="mt-3 text-slate-400 font-manrope-semibold">
              {tran("No replies yet")}
            </Text>
          </View>
        )}
      </View>
    </View>
  );
};

export default Replies;

const tagsStyles = {
  body: {
    color: "#475569",
    fontFamily: "Manrope-Medium",
    fontSize: 15,
    lineHeight: 22,
  },
  p: {
    marginBottom: 8,
  },
};
