import { Text, View } from "@tarojs/components";
import Taro from "@tarojs/taro";
import { useState } from "react";
import BottomTabbar, { type TabbarItem } from "../../components/bottom-tabbar";
import "./index.scss";

type MessageTabKey = "vital" | "system";

type MessageItem = {
  id: string;
  title: string;
  deviceId: string;
  userName: string;
  messageType: string;
  valueText: string;
  occurredAt: string;
  category: MessageTabKey;
};

const tabs: Array<{ key: MessageTabKey; label: string; hasDot?: boolean }> = [
  { key: "vital", label: "体征消息" },
  { key: "system", label: "系统消息", hasDot: true }
];

const messageList: MessageItem[] = [
  {
    id: "vital-1",
    title: "实时监测结果通知",
    deviceId: "A54984651",
    userName: "1201/李小北",
    messageType: "心率异常",
    valueText: "106",
    occurredAt: "2024-07-30 01:15",
    category: "vital"
  },
  {
    id: "vital-2",
    title: "睡眠报告分析通知",
    deviceId: "A54984651",
    userName: "1201/李小北",
    messageType: "HRV异常",
    valueText: "89",
    occurredAt: "2024-07-30 01:15",
    category: "vital"
  },
  {
    id: "vital-3",
    title: "睡眠月报分析通知",
    deviceId: "A54984651",
    userName: "1201/李小北",
    messageType: "睡眠得分",
    valueText: "有20天低于60分",
    occurredAt: "2024-07-30 01:15",
    category: "vital"
  },
  {
    id: "system-1",
    title: "系统升级提醒",
    deviceId: "平台消息",
    userName: "全部用户",
    messageType: "版本更新",
    valueText: "建议升级到最新版本",
    occurredAt: "2024-07-30 09:30",
    category: "system"
  },
  {
    id: "system-2",
    title: "服务时间调整通知",
    deviceId: "平台消息",
    userName: "全部用户",
    messageType: "运营公告",
    valueText: "周日 02:00-04:00 系统维护",
    occurredAt: "2024-07-29 18:00",
    category: "system"
  }
];

const fieldLabels = {
  deviceId: "设备ID",
  userName: "使用人员",
  messageType: "消息类型",
  valueText: "检测数值",
  occurredAt: "发生时间"
};

const navItems: TabbarItem[] = [
  { key: "home", label: "首页", active: false },
  { key: "report", label: "报告", active: false },
  { key: "assistant", label: "小e", active: false },
  { key: "message", label: "消息", active: true, badge: true },
  { key: "mine", label: "我的", active: false }
];

export default function MessagePage() {
  const [activeTab, setActiveTab] = useState<MessageTabKey>("vital");

  const currentMessages = messageList.filter((item) => item.category === activeTab);

  const handleTabClick = (item: TabbarItem) => {
    if (item.key === "message") {
      return;
    }

    if (item.key === "home") {
      Taro.redirectTo({ url: "/pages/index/index" });
      return;
    }

    Taro.showToast({
      title: `${item.label}功能待接入`,
      icon: "none"
    });
  };

  return (
    <View className="message-page">
      <View className="message-page__glow message-page__glow--top" />
      <View className="message-page__glow message-page__glow--side" />

      <View className="message-tabs">
        {tabs.map((item) => {
          const isActive = item.key === activeTab;

          return (
            <View className="message-tabs__item" key={item.key} onClick={() => setActiveTab(item.key)}>
              <Text className={`message-tabs__label ${isActive ? "message-tabs__label--active" : ""}`}>{item.label}</Text>
              {item.hasDot ? <View className="message-tabs__dot" /> : null}
              {isActive ? <View className="message-tabs__line" /> : null}
            </View>
          );
        })}
      </View>

      <View className="message-list">
        {currentMessages.map((item) => (
          <View className="message-card" key={item.id}>
            <Text className="message-card__title">{item.title}</Text>

            <View className="message-card__row">
              <Text className="message-card__label">{fieldLabels.deviceId}</Text>
              <Text className="message-card__value">{item.deviceId}</Text>
            </View>

            <View className="message-card__row">
              <Text className="message-card__label">{fieldLabels.userName}</Text>
              <Text className="message-card__value">{item.userName}</Text>
            </View>

            <View className="message-card__row">
              <Text className="message-card__label">{fieldLabels.messageType}</Text>
              <Text className="message-card__value">{item.messageType}</Text>
            </View>

            <View className="message-card__row">
              <Text className="message-card__label">{fieldLabels.valueText}</Text>
              <Text className="message-card__value">{item.valueText}</Text>
            </View>

            <View className="message-card__row">
              <Text className="message-card__label">{fieldLabels.occurredAt}</Text>
              <Text className="message-card__value">{item.occurredAt}</Text>
            </View>
          </View>
        ))}
      </View>

      <BottomTabbar items={navItems} onItemClick={handleTabClick} />
    </View>
  );
}