import { useState } from 'react';
import { Button as Button } from '../b-end.js';
import { Icon as Icon } from '../b-end.js';
import { NavBar as NavBar } from '../b-end.js';
import { Tabs as Tabs } from '../b-end.js';
import { Tag as Tag } from '../b-end.js';
import SmartIndicator from '../../SmartIndicator.jsx';
import AISummaryPreview from '../components/AISummaryPreview';
import VoiceFeedbackTrendSection from '../components/VoiceFeedbackTrendSection';

const TOP_TAB_ITEMS = [
  { label: '整体概览' },
  { label: '商品问题' },
  { label: '价格问题' },
  { label: '交易产品' },
  { label: '产品功能' },
  { label: '营销活动' },
  { label: '售后问题' },
  { label: '配送问题' },
  { label: '骑手服务' },
  { label: '系统bug' },
  { label: '安全风控' },
  { label: '内容宣传' },
  { label: '更多' },
];

const INDICATOR_ITEMS = [
  {
    id: 'consumer-cpo',
    title: '消费者广义CPO',
    value: '47,987',
    trendValue: '11.12%',
    trendDirection: 'up',
    status: 'success',
    data: [64, 73, 59, 66, 54, 69, 76, 61, 68, 63, 71, 60, 77, 67],
  },
  {
    id: 'consumer-volume',
    title: '消费者广义进线量',
    value: '23,981',
    trendValue: '8.24%',
    trendDirection: 'up',
    status: 'success',
    data: [55, 62, 58, 61, 56, 67, 72, 63, 66, 60, 68, 61, 70, 65],
  },
  {
    id: 'pay-order',
    title: '支付订单量',
    value: '4,687',
    trendValue: '2.11%',
    trendDirection: 'up',
    status: 'success',
    data: [49, 58, 51, 60, 53, 64, 67, 55, 63, 57, 65, 59, 66, 61],
  },
  {
    id: 'narrow-cpo',
    title: '消费者狭义CPO',
    value: '2,683',
    trendValue: '-1.94%',
    trendDirection: 'down',
    status: 'danger',
    data: [46, 53, 49, 54, 48, 58, 60, 51, 57, 52, 59, 54, 61, 56],
  },
  {
    id: 'narrow-volume',
    title: '消费者狭义进线量',
    value: '4,568',
    trendValue: '3.72%',
    trendDirection: 'up',
    status: 'success',
    data: [48, 57, 50, 56, 52, 61, 65, 54, 60, 55, 63, 58, 66, 62],
  },
];

const VOICE_FILTER_ITEMS = [
  { id: 'all', label: '全部' },
  { id: 'picked', label: '精选' },
  { id: 'with-image', label: '有图' },
  { id: 'manual-service', label: '人工服务' },
];

const VOICE_ROWS = [
  {
    id: 'voice-1',
    text: '为什么发布的图文作品没有图文标识，以及为什么同样操作，其他账号发布的图文可以左右滑动查看，而自己的账号发布的视频没有图文标识',
    tags: ['安全治理&风控', '处置误伤'],
    source: '账号治理',
    status: '未解决',
    level: '5星',
    time: '2026-01-12 07:56',
    views: '60',
  },
  {
    id: 'voice-2',
    text: '登录时提示安全验证及扫脸失败的原因与解决办法。用户询问常用设备上账号重新登录为何需验证。用户咨询未验证过的账号验证时次数过多的解决办法。',
    tags: ['安全治理&风控', '审核时间过长'],
    source: '服务监督',
    status: '未解决',
    level: '4星',
    time: '2026-01-12 07:56',
    views: '60',
  },
  {
    id: 'voice-3',
    text: '发布前的图片设置自动调整前后顺序，发布后自动调整了字体大小和位置，导致文字消失和文字放大超出屏幕等问题',
    tags: ['安全治理&风控', '治理标准未对齐'],
    source: '服务监督',
    status: '未解决',
    level: '5星',
    time: '2026-01-12 07:56',
    views: '60',
  },
];

export default function VoiceFeedbackScreenPattern() {
  const [activeIndicatorId, setActiveIndicatorId] = useState('');

  return (
    <div className="h-full w-full min-w-0 overflow-hidden bg-blueGrey-200">
      <div className="flex h-full min-h-0">
        <div className="h-full shrink-0">
          <NavBar platform="ola" showUtilityActions />
        </div>
        <main className="flex min-h-0 min-w-0 flex-1 overflow-hidden p-3">
          <section className="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden rounded-xl bg-surface px-4 pb-4 pt-3 min-[1440px]:px-5">
            <header className="shrink-0">
              <Tabs variant="line" size="md" items={TOP_TAB_ITEMS} defaultIndex={0} />
            </header>

            <div className="dashboard-scrollbar-hide min-h-0 flex-1 overflow-y-auto overflow-x-visible pt-2">
              <section className="flex min-w-0 flex-wrap items-stretch gap-3 overflow-visible">
                {INDICATOR_ITEMS.map((item) => (
                  <div key={item.id} className="min-w-[270px] flex-[1_1_270px] overflow-visible">
                    <SmartIndicator
                      title={item.title}
                      value={item.value}
                      trend="环比"
                      trendValue={item.trendValue}
                      trendDirection={item.trendDirection}
                      status={item.status}
                      data={item.data.map((value, index) => ({ value, at: `${index}` }))}
                      layout="horizontal"
                      valueFontSize={18}
                      selected={activeIndicatorId === item.id}
                      onClick={() => setActiveIndicatorId((prev) => (prev === item.id ? '' : item.id))}
                      style={{ width: '100%', minWidth: 0, maxWidth: '100%' }}
                    />
                  </div>
                ))}
              </section>

              <div className="mt-2 overflow-hidden">
                <VoiceFeedbackTrendSection embedded />
              </div>

              <section className="mt-5 min-h-0 overflow-hidden">
                <header className="mb-2 flex min-w-0 items-center justify-between gap-3">
                  <div className="flex min-w-0 flex-1 items-center gap-3">
                    <h3
                      className="truncate text-base font-semibold text-foreground"
                      style={{ fontWeight: 'var(--font-weight-semibold, 600)' }}
                    >
                      用户原声
                    </h3>
                    <Tabs
                      className="shrink-0"
                      variant="segment"
                      size="sm"
                      items={VOICE_FILTER_ITEMS.map((item) => ({ label: item.label }))}
                      defaultIndex={0}
                    />
                  </div>
                  <Button variant="outline-black" size="md" className="font-semibold">
                    查看全部
                  </Button>
                </header>

                <div className="mb-2 w-full min-w-0">
                  <AISummaryPreview variant="cluster-summary" />
                </div>

                <div className="mb-2 inline-flex items-center gap-3 text-sm text-foreground-muted">
                  <Button variant="text-brand" size="sm">全选</Button>
                  <span>统计周期: 2026-03-01 〜 2026-05-24</span>
                </div>

                <div className="space-y-2 overflow-hidden">
                  {VOICE_ROWS.map((item) => (
                    <article key={item.id} className="overflow-hidden rounded-lg border border-border-default bg-surface px-3 py-3">
                      <p className="mb-3 text-sm font-semibold leading-5 text-foreground">{item.text}</p>
                      <div className="flex min-w-0 items-center justify-between gap-3 text-xs text-foreground-muted">
                        <div className="inline-flex min-w-0 flex-wrap items-center gap-2">
                          <span>根因标签</span>
                          {item.tags.map((tag) => (
                            <Tag key={tag} variant="red" size="m">{tag}</Tag>
                          ))}
                          <span>| 处罚来源: {item.source}</span>
                          <span>| 服务结果</span>
                          <Tag variant="grey" size="m">{item.status}</Tag>
                          <Tag variant="grey" size="m">{item.level}</Tag>
                        </div>
                        <div className="inline-flex shrink-0 items-center gap-3">
                          <span>{item.time}</span>
                          <span>浏览 {item.views}</span>
                          <Icon name="dots-horizontal-stroked" size="sm" />
                        </div>
                      </div>
                    </article>
                  ))}
                </div>
              </section>
            </div>
          </section>
        </main>
      </div>
    </div>
  );
}
