import { Button, Image, Text, View } from "@tarojs/components";
import Taro, { useDidShow } from "@tarojs/taro";
import { useMemo, useState } from "react";
import { getContents } from "../../api/contents";
import "./index.scss";

type MemberItem = {
  id?: number;
  title?: string;
  source?: string;
  summary?: string;
  image?: string;
  coverImageUrl?: string;
  cover_image_url?: string;
};

const tabs = ["全部"];

export default function MemberShowcasePage() {
  const [activeTab] = useState("全部");
  const [items, setItems] = useState<MemberItem[]>([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");

  useDidShow(() => {
    void (async () => {
      setLoading(true);
      try {
        const data = await getContents({ type: "member_showcase", page: 1, pageSize: 48 });
        setItems(Array.isArray(data) ? data : []);
        setError("");
      } catch (e: any) {
        setError(e?.message || "加载失败");
      } finally {
        setLoading(false);
      }
    })();
  });

  const rows = useMemo(() => items, [items]);

  return (
    <View className="member-showcase-page">
      <View className="member-showcase-page__body">
        <View className="member-showcase-tabs">
          {tabs.map((tab) => (
            <View key={tab} className={`member-showcase-tabs__item ${activeTab === tab ? "is-active" : ""}`}>
              <Text>{tab}</Text>
            </View>
          ))}
        </View>

        {error ? (
          <View className="member-showcase-state is-error">
            <Text>{error}</Text>
          </View>
        ) : null}

        {loading ? (
          <View className="member-showcase-state">
            <Text>加载中...</Text>
          </View>
        ) : null}

        {!loading && !error && rows.length === 0 ? (
          <View className="member-showcase-state">
            <Text>暂无会员风采</Text>
          </View>
        ) : null}

        <View className="member-showcase-grid">
          {rows.map((item) => {
            const id = Number(item.id || 0);
            const title = item.title || "会员风采";
            const source = item.source || "会员风采";
            const summary = item.summary || "暂无简介";
            const image = item.image || item.coverImageUrl || item.cover_image_url || "";
            return (
              <View key={id || title} className="member-showcase-card">
                <View className="member-showcase-card__image-wrap">
                  {image ? (
                    <Image className="member-showcase-card__image" src={image} mode="aspectFill" />
                  ) : (
                    <View className="member-showcase-card__image member-showcase-card__image--empty">
                      <Text>暂无图片</Text>
                    </View>
                  )}
                </View>

                <Text className="member-showcase-card__name">{title}</Text>

                <View className="member-showcase-card__meta">
                  <Text>{source}</Text>
                  <Text>{summary}</Text>
                </View>

                <Button
                  className="member-showcase-card__button"
                  onClick={() => {
                    if (!id) {
                      Taro.showToast({ title: "暂无详情", icon: "none" });
                      return;
                    }
                    void Taro.navigateTo({ url: `/pages/member-detail/index?id=${id}` });
                  }}
                >
                  详情
                </Button>
              </View>
            );
          })}
        </View>
      </View>
    </View>
  );
}
