import { useMemo, useState } from 'react';
import { Button as Button } from '../b-end.js';
import { Tabs as Tabs } from '../b-end.js';
import SmartIndicator from '../../SmartIndicator.jsx';
import MultiTabChartPreview from '../components/MultiTabChartPreview';
import RankingCardPreview from '../components/RankingCardPreview';
import CommentCardPreview from '../components/CommentCardPreview';
import communityIcon from '../components/assets/monitor-icon-community.svg';
import hotIssueIcon from '../components/assets/monitor-icon-hot.svg';
import topicIcon from '../components/assets/monitor-icon-topic.svg';
import voiceIcon from '../components/assets/monitor-icon-voice.svg';
import { DASHBOARD_PAGE_TITLE } from '../typography';
import DashboardModuleTitle from '../components/DashboardModuleTitle';

const TOP_INDICATOR_CARDS = [
  {
    id: 'positive',
    title: '正向声量歌曲',
    value: '857',
    trendValue: '11.12%',
    trendDirection: 'up',
    status: 'danger',
    data: [68, 74, 59, 62, 48, 66, 79, 56, 64, 64, 69, 55],
  },
  {
    id: 'all',
    title: '全部监控歌曲',
    value: '1657',
    trendValue: '11.12%',
    trendDirection: 'up',
    status: 'danger',
    data: [66, 73, 61, 64, 52, 70, 81, 58, 67, 61, 72, 58],
  },
  {
    id: 'negative',
    title: '负向声量歌曲',
    value: '432',
    trendValue: '11.12%',
    trendDirection: 'down',
    status: 'success',
    data: [58, 66, 54, 60, 49, 67, 79, 55, 64, 58, 70, 57],
  },
];

const RANKING_ITEMS = [
  {
    rank: 1,
    title: '支付模块需紧急关注',
    tag: '故障',
    ratio: 11.12,
    summary: '支付相关告警昨日增长156%，涉及支付回调等接口；目前支持的三方账号注册',
  },
  {
    rank: 2,
    title: '支付模块需紧急关注',
    tag: '故障',
    ratio: -6.48,
    summary: '支付相关告警昨日增长156%，涉及支付回调等接口；目前支持的三方账号注册',
  },
  {
    rank: 3,
    title: '支付模块需紧急关注',
    tag: '故障',
    ratio: 11.12,
    summary: '支付相关告警昨日增长156%，涉及支付回调等接口；目前支持的三方账号注册',
  },
  {
    rank: 4,
    title: '支付模块需紧急关注',
    tag: '故障',
    ratio: -3.25,
    summary: '支付相关告警昨日增长156%，涉及支付回调等接口；目前支持的三方账号注册',
  },
  {
    rank: 5,
    title: '支付模块需紧急关注',
    tag: '故障',
    ratio: 9.9,
    summary: '支付相关告警昨日增长156%，涉及支付回调等接口；目前支持的三方账号注册',
  },
];

const COMMENT_ITEMS = [
  { biz: '社区', content: '平台与维修员按六四分成，客源垄断导致消费者维权困难！', time: '07:56' },
  {
    biz: '直播',
    content: '救命啊！我昨天一时冲动申请注销账号，现在特别后悔。我的粉丝和视频都是辛辛苦苦积累的，不想就这样丢掉。听说有注销冷静期，现在能撤销注销吗？',
    time: '07:56',
    focusLabel: '重点关注',
  },
  { biz: '生服', content: '只要打开水龙头，收费100？', time: '07:56' },
  { biz: '生服', content: '只要打开水龙头，收费100？', time: '07:56' },
  { biz: '电商', content: '用户因退换货运费超出部分申请补偿，客服协助处理。', time: '07:56' },
  { biz: '生服', content: '只要打开水龙头，收费100？', time: '07:56' },
  { biz: '社区', content: '维保服务承诺48小时上门，但实际排队超过三天，投诉无人跟进。', time: '07:56' },
];

const NAV_CHANNELS = ['全部', '社区', '直播', '电商', '生服', '商业化', '财经', '番茄', '头条', '豆包'];

export default function Monitor315Pattern() {
  const [activeChannelIndex, setActiveChannelIndex] = useState(0);
  const navTabItems = useMemo(
    () => NAV_CHANNELS.map((label) => ({ label })),
    [],
  );

  return (
    <div
      className="h-full w-full min-w-0 overflow-hidden bg-blueGrey-200"
      style={{
        minHeight: 0,
        '--semi-color-danger': '#F2496F',
        '--semi-color-success': '#24CDA5',
      }}
    >
      <div className="h-full min-w-0 px-6 pb-6 pt-4">
        <div className="flex h-full min-h-0 flex-col gap-3">
          <header className="flex h-14 shrink-0 min-w-0 items-center gap-3 overflow-hidden">
            <h2
              className={`shrink-0 truncate whitespace-nowrap ${DASHBOARD_PAGE_TITLE}`}
              style={{ fontWeight: 'var(--font-weight-semibold, 600)' }}
            >
              热点监控大屏
            </h2>
            <div className="order-3 min-w-0 basis-full overflow-x-auto dashboard-scrollbar-hide min-[1200px]:order-none min-[1200px]:basis-auto min-[1200px]:flex-1">
              <Tabs
                variant="pill"
                size="md"
                items={navTabItems}
                activeIndex={activeChannelIndex}
                onChange={setActiveChannelIndex}
              />
            </div>
            <div className="inline-flex min-w-0 shrink-0 flex-col items-end gap-1 whitespace-nowrap overflow-hidden">
              <span className="text-xs tracking-[0.72px] text-blueGrey-500">数据自3月15日 18:00起累计</span>
              <div className="inline-flex items-center rounded bg-blueGrey-100 p-1 text-sm font-semibold">
                <span className="rounded bg-white px-2 py-1 text-blueGrey-900">实时</span>
                <span className="px-2 py-1 text-blueGrey-600">时间范围</span>
              </div>
            </div>
          </header>

          <div className="grid min-h-0 flex-1 grid-cols-1 gap-3 overflow-hidden min-[1200px]:grid-cols-[minmax(0,1fr)_360px]">
            <section className="grid min-h-0 grid-rows-[auto_minmax(0,1fr)] gap-3">
              <div className="min-h-[184px] shrink-0 overflow-hidden rounded-xl bg-white pt-4 px-5 pb-5">
                <div className="mb-4">
                  <DashboardModuleTitle
                    title="315 用户原声业务分布"
                    titleIconSrc={communityIcon}
                    subtitle="说明文字占位说明文字占位说明文字占位"
                  />
                </div>

                <div className="flex min-h-0 min-w-0 flex-wrap gap-3 overflow-visible">
                  {TOP_INDICATOR_CARDS.map((card) => (
                    <div key={card.id} className="flex min-w-[270px] flex-[1_1_270px] overflow-visible">
                      <SmartIndicator
                        title={card.title}
                        value={card.value}
                        trend="环比"
                        trendValue={card.trendValue}
                        trendDirection={card.trendDirection}
                        status={card.status}
                        layout="horizontal"
                        horizontalKind="text-first"
                        sparklineHeight={56}
                        valueFontSize={18}
                        data={card.data.map((value, index) => ({ value, at: `${index + 1}` }))}
                        style={{ width: '100%', minWidth: 0, maxWidth: '100%', flex: '1 1 auto' }}
                      />
                    </div>
                  ))}
                </div>
              </div>

              <div className="h-full min-h-0 [&>*]:h-full">
                <MultiTabChartPreview
                  title="议题用户反馈分布"
                  subtitle="说明文字占位说明文字占位说明文字占位"
                  titleIconSrc={topicIcon}
                  containerMaxWidth="none"
                />
              </div>
            </section>

            <section className="grid h-full min-h-0 min-w-0 grid-rows-[auto_minmax(0,1fr)] gap-3 overflow-hidden min-[1200px]:min-w-[360px]">
              <div className="min-w-0 overflow-hidden rounded-xl bg-white pt-4 px-5 pb-5">
                <div className="mb-4 flex min-w-0 items-center justify-between gap-3">
                  <div className="inline-flex min-w-0 items-center gap-2">
                    <img src={hotIssueIcon} alt="" aria-hidden="true" className="h-6 w-6 shrink-0" />
                    <h3 className="truncate text-lg font-semibold leading-6 text-blueGrey-900">热门问题</h3>
                  </div>
                  <Button variant="primary" size="md" className="shrink-0 px-4">
                    查看全部
                  </Button>
                </div>
                <RankingCardPreview embedded items={RANKING_ITEMS} />
              </div>
              <div className="h-full min-h-0 min-w-0 overflow-hidden">
                <CommentCardPreview
                  fillHeight
                  title="实时用户原声"
                  subtitle="说明文字占位说明文字占位说明文字占位"
                  titleIconSrc={voiceIcon}
                  items={COMMENT_ITEMS}
                />
              </div>
            </section>
          </div>
        </div>
      </div>
    </div>
  );
}
