import { useEffect, useMemo, useState } from 'react';
import Avatar from '../components/Avatar';
import Button from '../components/Button';
import Card from '../components/Card';
import Icon from '../components/Icon';
import Tabs from '../components/Tabs';
import Tag from '../components/Tag';
import { getTeamMemberByIndex, getTeamMemberByName } from '../teamMembers';
import { FilterBar, PAGE_FRAME_CONTENT_WITH_TOPBAR_MARGIN, WHITE_CARD_STYLE } from './pageListShared';

/**
 * TabTopBarListPage — B 端"胶囊 Tab 标题栏 + 卡片列表 + 详情面板"模板（列表示例 3）
 *
 * 模板结构（自上而下）：
 *   · TopBar：胶囊 Tab 一级导航 + 操作按钮组
 *   · 白卡（自上而下）：
 *       筛选栏
 *       └ 横向两栏：左卡片流（flex-1 可滚动） + 右详情面板（shrink-0 460px，可关闭）
 *
 * 极简版交互：
 *   · 默认选中第 1 张卡片，详情面板渲染该卡片数据
 *   · 点击当前已选中卡片 → 详情收起（toggle 语义），列表撑满整个白卡宽度
 *   · 点击其他卡片 → 切换选中并保持/重新打开详情
 *   · 详情面板右上角"×" → 等同 toggle 收起
 *   · 切换顶部 Tab → 数据集换、详情默认重置为该集第 1 条
 *   · 详情打开/收起为宽度 + 透明度 slow(300ms) 缓动过渡，无突兀闪现
 */

const FILTERS = [
  {
    label: '知识类型',
    options: ['QA', '文档', '案例'],
  },
  {
    label: '创建人',
    options: ['林小北', '陈一诺', '周知远', '顾清禾'],
  },
  {
    label: '状态',
    options: ['生效', '已发布', '草稿', '审核中', '已停用'],
  },
];
const DETAIL_WIDTH = 'min(460px, 40vw)';

/* 状态 → Tag 颜色变体（Tag.variant） */
const STATUS_TAG_VARIANT = {
  '生效': 'green',
  '已发布': 'green',
  '草稿': 'grey',
  '审核中': 'orange',
  '已停用': 'red',
  '已下架': 'red',
};

function assignTeamCreators(items, offset = 0) {
  return items.map((item, index) => ({
    ...item,
    creator: getTeamMemberByIndex(offset + index)?.name || item.creator,
  }));
}

const RAW_KNOWLEDGE_TABS = [
  {
    key: 'qa',
    label: 'QA对知识',
    createLabel: '创建QA对',
    iconName: 'message-text-square-01-stroked',
    typeLabel: 'QA',
    data: [
      {
        id: 'qa-1',
        title: '退款流程问答',
        summary: '覆盖订单未发货 / 已发货 / 已签收三阶段的退款规则与超时处置。',
        status: '生效',
        creator: '林小北',
        updatedAt: '2026-04-21 10:30',
        tags: ['退款', '售后'],
        question: '抖音生服订单已签收后还能申请退款吗？',
        answer: '已签收订单仍可在 7 天无理由保障期内发起退款，需提供商品照片或服务异常说明，平台介入后通常 24h 内出结果。',
      },
      {
        id: 'qa-2',
        title: '账号注销问答',
        summary: '提供账号注销前的资产清算与最终确认流程，含余额退还规则。',
        status: '生效',
        creator: '陈一诺',
        updatedAt: '2026-04-20 18:45',
        tags: ['账号', '注销'],
        question: '注销账号后未消费的余额怎么办？',
        answer: '注销前需将账户余额提现或转赠他人；若余额低于提现门槛，可联系客服走线下退款流程。',
      },
      {
        id: 'qa-3',
        title: '会员权益问答',
        summary: '常见会员等级、积分、优惠券获取规则的标准答案。',
        status: '审核中',
        creator: '周知远',
        updatedAt: '2026-04-19 14:12',
        tags: ['会员', '权益'],
        question: 'V4 会员能享受哪些独家折扣？',
        answer: 'V4 会员享 8.8 折通用券、生日双倍积分、专属客服通道，及每月 1 次免预约的精选活动名额。',
      },
      {
        id: 'qa-4',
        title: '物流查询问答',
        summary: '抖音生服 / 主端 / 抖音电商三端物流查询统一话术。',
        status: '生效',
        creator: '顾清禾',
        updatedAt: '2026-04-18 09:20',
        tags: ['物流', '查询'],
        question: '订单显示已发货但快递无更新怎么办？',
        answer: '建议先核对快递单号是否正确，若 24h 仍无更新可联系商家或在订单详情发起客服介入。',
      },
      {
        id: 'qa-5',
        title: '发票申请问答',
        summary: '电子发票、增值税发票申请条件与开票流程。',
        status: '草稿',
        creator: '许言川',
        updatedAt: '2026-04-17 16:05',
        tags: ['发票', '开票'],
        question: '什么订单可以开具增值税专用发票？',
        answer: '企业实名认证账户下单的订单可在订单完成后 30 天内申请增值税专票，需提供完整税务信息。',
      },
    ],
  },
  {
    key: 'doc',
    label: '文档知识',
    createLabel: '上传文档',
    iconName: 'file-04-stroked',
    typeLabel: '文档',
    data: [
      {
        id: 'doc-1',
        title: '商家入驻指引-2026版',
        summary: '商家从入驻申请到首单履约的全流程指引，覆盖资质审核、店铺装修、商品上架、营销配置、客服接入五大节点。',
        status: '生效',
        creator: '林小北',
        updatedAt: '2026-04-21 09:10',
        tags: ['商家入驻', '指引'],
        question: '入驻指引适用范围',
        answer: '本指引面向 2026 年新入驻抖音生服平台的商家，已入驻商家可参考增量章节做能力升级。',
      },
      {
        id: 'doc-2',
        title: '客服培训手册',
        summary: '新客服入职 14 天上岗培训内容沉淀，含话术库、SOP、应急处理三大模块。',
        status: '生效',
        creator: '陈一诺',
        updatedAt: '2026-04-20 12:00',
        tags: ['客服培训', '话术'],
        question: '培训手册章节构成',
        answer: '共分基础认知、产品熟悉、话术演练、模拟实战、上岗考核五个阶段，建议按周分段完成。',
      },
      {
        id: 'doc-3',
        title: '风险识别 SOP',
        summary: '高风险订单 / 异常会话的识别与处置标准，含风险评分阈值与转人工触发条件。',
        status: '审核中',
        creator: '周知远',
        updatedAt: '2026-04-19 17:30',
        tags: ['风险', 'SOP'],
        question: '风险订单分级标准',
        answer: 'L1: 风控评分 60-79（系统自动复核）；L2: 80-94（人工复核）；L3: ≥95（直接拦截 + 介入）。',
      },
    ],
  },
  {
    key: 'case',
    label: '案例库',
    createLabel: '新建案例',
    iconName: 'atom-01-stroked',
    typeLabel: '案例',
    data: [
      {
        id: 'case-1',
        title: '团购退款超时案例',
        summary: '商家承诺 2 小时退款超时未到账的标准处置示例，含赔付金额计算与商家追责流程。',
        status: '生效',
        creator: '苏锦书',
        updatedAt: '2026-04-21 11:08',
        tags: ['团购', '退款'],
        question: '案例适用场景',
        answer: '适用于团购券/套餐/储值卡类目下"承诺退款时效"被打破的客诉场景。',
      },
      {
        id: 'case-2',
        title: '虚假宣传投诉案例',
        summary: '门店实际服务与团购页面承诺不符的处理参考，含证据收集要点与赔付上限。',
        status: '生效',
        creator: '顾清禾',
        updatedAt: '2026-04-20 14:25',
        tags: ['宣传', '投诉'],
        question: '判定虚假宣传的核心证据',
        answer: '需同时具备：① 团购详情页截图；② 用户实际消费凭证；③ 双方对承诺差异的书面/录音确认。',
      },
      {
        id: 'case-3',
        title: '骑手配送纠纷案例',
        summary: '配送途中商品损毁的责任判定与赔付流程示例。',
        status: '已停用',
        creator: '许言川',
        updatedAt: '2026-04-18 22:50',
        tags: ['配送', '纠纷'],
        question: '损毁责任判定原则',
        answer: '商品在骑手取件后、签收前损毁，原则上由骑手所属配送方承担，需 2 小时内完成首次响应。',
      },
    ],
  },
];

const KNOWLEDGE_TABS = RAW_KNOWLEDGE_TABS.map((tab, tabIndex) => ({
  ...tab,
  data: assignTeamCreators(tab.data, tabIndex * 4),
}));

export default function TabTopBarListPage({ onCreateQA }) {
  const [activeIndex, setActiveIndex] = useState(0);
  const activeTab = KNOWLEDGE_TABS[activeIndex];

  /* selectedCardId 同时承担"哪张选中"+"详情是否展开"两个语义：
   *   · null  → 详情收起；列表中没有任何卡片高亮
   *   · 'xxx' → 详情展开渲染对应数据；该卡片高亮 */
  const [selectedCardId, setSelectedCardId] = useState(activeTab.data[0].id);

  /* 切 Tab 时重置选中为新数据集的第一条（详情自然展开） */
  useEffect(() => {
    setSelectedCardId(activeTab.data[0].id);
  }, [activeTab.key, activeTab.data]);

  /* 详情数据：用 lastCardId 缓存"上一次打开过的卡片"，
   * 这样收起动画过程中（selectedCardId 已变 null）右侧仍能渲染原内容直到动画结束，
   * 避免内容突然消失的视觉跳变 */
  const [lastCardId, setLastCardId] = useState(activeTab.data[0].id);
  useEffect(() => {
    if (selectedCardId) setLastCardId(selectedCardId);
  }, [selectedCardId]);

  const detailCard = useMemo(
    () =>
      activeTab.data.find((item) => item.id === lastCardId) || activeTab.data[0],
    [activeTab.data, lastCardId],
  );

  const detailOpen = selectedCardId !== null;

  function handleSelectCard(id) {
    setSelectedCardId((prev) => (prev === id ? null : id));
  }

  return (
    <div className="tfds-page-tab-top-bar-list flex flex-1 min-h-0 min-w-0 flex-col overflow-hidden">
      {/* 顶部：胶囊 Tab 标题栏 */}
      <div
        className="flex min-w-0 shrink-0 items-center gap-2 overflow-x-auto"
        style={{ padding: '12px 16px 12px 0' }}
      >
        <Tabs
          variant="pill"
          size="md"
          activeIndex={activeIndex}
          onChange={(idx) => setActiveIndex(idx)}
          items={KNOWLEDGE_TABS.map((tab) => ({
            label: tab.label,
            icon: <Icon name={tab.iconName} />,
          }))}
        />

        <div className="flex flex-1 items-center justify-end gap-2 min-w-0">
          <Button
            variant="ghost-black"
            iconOnly
            icon={<Icon name="dots-horizontal-stroked" />}
            tooltip="更多操作"
            aria-label="更多操作"
          />
          <Button variant="outline-black">知识测试</Button>
          <Button variant="outline-black">任务管理</Button>
          <Button
            variant="primary"
            icon={<Icon name="plus-stroked" />}
            onClick={onCreateQA}
          >
            {activeTab.createLabel}
          </Button>
        </div>
      </div>

      {/* 白卡：筛选栏 + 横向（卡片列表 + 详情面板） */}
      <div
        className="flex flex-1 min-h-0 min-w-0 flex-col overflow-hidden"
        style={{
          margin: PAGE_FRAME_CONTENT_WITH_TOPBAR_MARGIN,
          ...WHITE_CARD_STYLE,
        }}
      >
        <div
          className="flex flex-1 min-h-0 min-w-0 flex-col"
          style={{ padding: '24px', gap: '16px' }}
        >
          <FilterBar filters={FILTERS} />

          {/* 注：这里不设 gap，详情面板自己用 marginLeft 控制 16px 间距，
              这样收起时间距也能跟着动画收拢，不会留出 16px 空白 */}
          <div className="flex flex-1 min-h-0 min-w-0 overflow-hidden">
            {/* 左：卡片列表（独立滚动） */}
            <div
              className="flex flex-1 min-h-0 min-w-0 flex-col overflow-y-auto"
              style={{ gap: '12px' }}
            >
              {activeTab.data.map((item) => (
                <KnowledgeInfoCard
                  key={item.id}
                  item={item}
                  typeLabel={activeTab.typeLabel}
                  selected={item.id === selectedCardId}
                  onClick={() => handleSelectCard(item.id)}
                />
              ))}
            </div>

            {/* 右：详情面板（width / opacity 过渡收起；点已选卡片 toggle 收起） */}
            <DetailPanel
              card={detailCard}
              typeLabel={activeTab.typeLabel}
              open={detailOpen}
            />
          </div>
        </div>
      </div>
    </div>
  );
}

/* ── 知识列表卡片 ──
 * 页面示例3的列表卡片必须引用 Card type="info3"。
 * 选中/未选中/hover 三态由 Card 信息卡片3统一承载，页面只负责业务数据映射。 */
function KnowledgeInfoCard({ item, typeLabel, selected, onClick }) {
  const creator = getTeamMemberByName(item.creator) || getTeamMemberByIndex(0);

  return (
    <Card
      type="info3"
      color="grey"
      title={item.question}
      description={item.answer}
      status={item.status}
      statusVariant={STATUS_TAG_VARIANT[item.status] || 'grey'}
      selected={selected}
      onAction={onClick}
      actionAriaLabel={`查看${item.question}详情`}
      metaItems={[
        { iconName: 'tag-01-stroked', value: typeLabel },
        { iconName: 'clock-stroked', value: item.updatedAt },
        {
          avatarSrc: creator?.avatarSrc,
          avatarAlt: `${item.creator}头像`,
          value: item.creator,
        },
      ]}
    />
  );
}

/* ── 右侧详情面板 ──
 * 外层 wrapper 用 width + opacity 一起过渡，实现"从右侧收起、列表平滑撑满"动效；
 * 内层固定 460px，避免内容随 width 一起被压缩出现错位。
 * 关闭：点击已选中卡片 toggle 收起（无独立 × 按钮）。 */
function DetailPanel({ card, typeLabel, open }) {
  const creator = getTeamMemberByName(card.creator) || getTeamMemberByIndex(0);
  return (
    <div
      className="shrink-0 overflow-hidden"
      style={{
        width: open ? DETAIL_WIDTH : '0px',
        marginLeft: open ? '16px' : '0px',
        opacity: open ? 1 : 0,
        transition:
          'width var(--motion-ui-slow), margin-left var(--motion-ui-slow), opacity var(--motion-ui-normal)',
      }}
      aria-hidden={!open}
    >
      <aside
        className="flex flex-col h-full overflow-hidden"
        style={{
          width: DETAIL_WIDTH,
          ...WHITE_CARD_STYLE,
          border: '1px solid var(--color-border-default, #E4E7EC)',
        }}
      >
        <div className="flex flex-col flex-1 min-h-0" style={{ padding: '20px', gap: '16px' }}>

          {/* Header：标题 + 状态 + 操作按钮组 */}
          <div className="flex items-center justify-between gap-2 shrink-0">
            <div className="flex items-center gap-2 min-w-0">
              <h3
                className="[font-weight:var(--font-semibold)] text-blueGrey-900 m-0 truncate"
                style={{ fontSize: '16px', lineHeight: '24px' }}
              >
                知识详情
              </h3>
              <Tag variant={STATUS_TAG_VARIANT[card.status] || 'grey'}>
                {card.status}
              </Tag>
            </div>
            <div className="flex items-center gap-1.5 shrink-0">
              <Button
                variant="ghost-black"
                iconOnly
                icon={<Icon name="dots-horizontal-stroked" />}
                tooltip="更多操作"
                aria-label="更多操作"
              />
              <Button
                variant="outline-black"
                icon={<Icon name="edit-03-stroked" />}
              >
                编辑
              </Button>
              <Button
                variant="outline-black"
                icon={<Icon name="plus-stroked" />}
              >
                规则答案
              </Button>
            </div>
          </div>

          {/* 元信息：行式布局（关联标签 / 知识类型 / 最近更新） */}
          <div className="flex flex-col shrink-0" style={{ gap: '10px' }}>
            <DetailMetaRow label="关联标签">
              <div className="flex flex-wrap" style={{ gap: '4px' }}>
                {(card.tags || []).map((t) => (
                  <Tag key={t} variant="grey">{t}</Tag>
                ))}
              </div>
            </DetailMetaRow>
            <DetailMetaRow label="知识类型">
              <span className="text-blueGrey-900" style={{ fontSize: '13px' }}>{typeLabel}</span>
            </DetailMetaRow>
            <DetailMetaRow label="最近更新">
              <span className="inline-flex items-center" style={{ gap: '6px', fontSize: '13px', color: 'var(--color-blueGrey-900)' }}>
                <Avatar size="mini" type="image" src={creator?.avatarSrc} alt={`${card.creator}头像`} />
                {card.updatedAt}
              </span>
            </DetailMetaRow>
          </div>

          <div
            className="shrink-0"
            style={{ height: '1px', background: 'var(--color-border-default, #E4E7EC)' }}
          />

          {/* 正文区：问题 + 回答 */}
          <div className="flex flex-col flex-1 min-h-0 overflow-y-auto" style={{ gap: '20px' }}>
            <div className="flex flex-col" style={{ gap: '12px' }}>
              <SectionBadge type="question">Questions / 问</SectionBadge>
              <p
                className="[font-weight:var(--font-semibold)] text-blueGrey-900 m-0"
                style={{ fontSize: '16px', lineHeight: '26px' }}
              >
                {card.question}
              </p>
            </div>
            <div className="flex flex-col" style={{ gap: '12px' }}>
              <SectionBadge type="answer">Answers / 答</SectionBadge>
              <p
                className="text-blueGrey-700 m-0"
                style={{ fontSize: '14px', lineHeight: '24px' }}
              >
                {card.answer}
              </p>
            </div>
          </div>

        </div>
      </aside>
    </div>
  );
}

/* 元信息行：固定宽度 label + 右侧 value 插槽 */
function DetailMetaRow({ label, children }) {
  return (
    <div className="flex items-center" style={{ gap: '16px' }}>
      <span
        className="text-blueGrey-500 shrink-0"
        style={{ fontSize: '13px', lineHeight: '20px', minWidth: '56px' }}
      >
        {label}
      </span>
      <div className="flex items-center min-w-0">{children}</div>
    </div>
  );
}

/* 问题/答案区的分区徽章
 * type="question" → 深色实底（blueGrey-900 底 + 白字）
 * type="answer"   → 品牌色描边（brand 文字 + brand 描边，白底） */
function SectionBadge({ type, children }) {
  const isQuestion = type === 'question';
  return (
    <span
      style={{
        display: 'flex',
        padding: '4px 12px',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        gap: '10px',
        borderRadius: '4px',
        fontSize: '12px',
        fontWeight: 'var(--font-semibold)',
        lineHeight: '18px',
        alignSelf: 'flex-start',
        ...(isQuestion
          ? {
              color: '#FFFFFF',
              background: 'var(--color-blueGrey-900, #182230)',
            }
          : {
              color: 'var(--color-brand-700, #18B49D)',
              background: 'var(--color-brand-50, #EAFAF6)',
            }),
      }}
    >
      {children}
    </span>
  );
}
