import { useState } from 'react'
import { Link } from 'react-router-dom'
import { FOUR_VALUES as FALLBACK_FOUR, AMB_STATUS_META } from '@/data/mock'
import { useCMS, useCMSTexts, getCMSFourValues, getCMSAmb } from '@/services/cms'
import GlobalCTA from '@/components/Layout/GlobalCTA'

export default function Evolution() {
  const { data: FOUR_VALUES } = useCMS(getCMSFourValues, FALLBACK_FOUR)
  const { data: AMB_META } = useCMS(getCMSAmb, AMB_STATUS_META)
  const { data: texts } = useCMSTexts()
  const text = (key: string, fallback: string) => texts[key] || fallback
  const [foldValues, setFoldValues] = useState(false)
  const [foldAmb, setFoldAmb] = useState(false)

  return (
    <div>
      <div className="page-header">
        <div className="container">
          <div className="breadcrumb">
            <Link to="/" style={{ color: 'rgba(255,255,255,0.8)' }}>
              首页
            </Link>{' '}
            / 企业进化
          </div>
          <h1>{text('evolution.header_title', '企业进化')}</h1>
          <p>
            {text('evolution.header_description', '内部顺序强制：企业进化思想 → 四大价值坐标 → A/M/B 状态坐标，顺序不可调换。')}
          </p>
          <p style={{ fontSize: 12, color: 'rgba(255,255,255,0.6)', marginTop: 8 }}>
            {text('evolution.header_note', '从进化思想到价值坐标，再到状态坐标，逐层看清企业位置。')}
          </p>
        </div>
      </div>

      {/* 1. 企业进化思想 */}
      <section className="section" id="idea">
        <div className="container">
          <p className="eyebrow">{text('evolution.idea_eyebrow', '01 — 企业进化思想')}</p>
          <h2 className="h2">{text('evolution.idea_title', '进化是持续迭代，而非一次性变革')}</h2>
          <p className="desc">{text('evolution.idea_description', '企业进化强调在不确定环境中，通过机制与人的双重迭代，实现组织的自适应与自进化。拒绝规模决定论，强调价值维度独立观察。')}</p>
          <div className="card" style={{ marginTop: 16 }}>
            <h3>{text('evolution.idea_core_title', '核心主张')}</h3>
            <ul style={{ paddingLeft: 18, fontSize: 14, color: '#475569', lineHeight: 2 }}>
              <li>{text('evolution.idea_bullet_1', '经营即进化：战略、组织、机制、人的协同进化')}</li>
              <li>{text('evolution.idea_bullet_2', '坐标而非标签：用价值与状态观察，而非给企业贴标签')}</li>
              <li>{text('evolution.idea_bullet_3', '陪跑而非交付：共创机制，陪跑落地，复盘迭代')}</li>
              <li>{text('evolution.idea_bullet_4', '持续复盘迭代，让每一次行动都沉淀为组织能力')}</li>
            </ul>
          </div>
        </div>
      </section>

      {/* 2. 四大价值坐标 */}
      <section className="section section-muted" id="values">
        <div className="container">
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 12 }}>
            <div>
              <p className="eyebrow">{text('evolution.values_eyebrow', '02 — 四大价值坐标')}</p>
              <h2 className="h2">{text('evolution.values_title', '观察坐标，非售卖产品')}</h2>
              <p className="desc">{text('evolution.values_description', '四大价值定位为观察坐标，用于看清企业在各维度的真实位置。')}</p>
            </div>
            <button className="foldable-trigger" onClick={() => setFoldValues(!foldValues)} style={{ width: 'auto' }}>
              {foldValues ? '收起' : '展开'}价值详情 <span>{foldValues ? '−' : '+'}</span>
            </button>
          </div>

          <div className={`foldable-content ${foldValues ? 'expanded' : 'collapsed'}`} style={{ display: foldValues ? 'block' : undefined }}>
            <div className="grid-2" style={{ marginTop: 20 }}>
              {FOUR_VALUES.map(v => (
                <div key={v.id} className="card">
                  <h3>{v.name}</h3>
                  <p style={{ fontSize: 13, color: '#64748b' }}>{v.summary}</p>
                  <div style={{ marginTop: 10, display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                    {v.observationDimensions.map(d => (
                      <span key={d} style={{ fontSize: 11, background: '#f1f5f9', padding: '4px 8px', borderRadius: 999 }}>
                        {d}
                      </span>
                    ))}
                  </div>
                  <div className="placeholder" style={{ marginTop: 12, fontSize: 12 }}>
                    {v.description}
                  </div>
                  <Link to={`/evolution/values/${v.key}`} className="btn btn-ghost" style={{ marginTop: 12, width: '100%' }}>
                    进入详情 →
                  </Link>
                </div>
              ))}
            </div>
            {/* 始终显示在桌面端 */}
            <div className="grid-2" style={{ marginTop: 20 }} data-desktop-only>
              {/* 兼容：桌面端始终展开，移动端由折叠控制 */}
            </div>
          </div>

          {/* 桌面端强制展开 */}
          <div className="grid-2" style={{ marginTop: 20 }}>
            {FOUR_VALUES.map(v => (
              <div key={v.id} className="card" data-desktop-card>
                <h3>{v.name}</h3>
                <p style={{ fontSize: 13, color: '#64748b' }}>{v.summary}</p>
                <div style={{ marginTop: 10, display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                  {v.observationDimensions.map(d => (
                    <span key={d} style={{ fontSize: 11, background: '#f1f5f9', padding: '4px 8px', borderRadius: 999 }}>
                      {d}
                    </span>
                  ))}
                </div>
                <Link to={`/evolution/values/${v.key}`} className="btn btn-ghost" style={{ marginTop: 12, width: '100%' }}>
                  进入详情 →
                </Link>
              </div>
            ))}
          </div>
          <style>{`@media(max-width:768px){ [data-desktop-card]{display:none} } @media(min-width:769px){ .foldable-trigger{display:none} .foldable-content{display:none!important} }`}</style>
        </div>
      </section>

      {/* 3. A/M/B 状态坐标 */}
      <section className="section" id="amb">
        <div className="container">
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 12 }}>
            <div>
              <p className="eyebrow">{text('evolution.amb_eyebrow', '03 — A/M/B 状态坐标')}</p>
              <h2 className="h2">{text('evolution.amb_title', 'A / M / B 不绑定规模')}</h2>
              <p className="desc">{text('evolution.amb_description', '支持同一企业不同价值维度处于不同状态，拒绝规模决定状态的包装。')}</p>
            </div>
            <button className="foldable-trigger" onClick={() => setFoldAmb(!foldAmb)} style={{ width: 'auto' }}>
              {foldAmb ? '收起' : '展开'}状态详情 <span>{foldAmb ? '−' : '+'}</span>
            </button>
          </div>

          <div className="grid-3" style={{ marginTop: 20 }}>
            {Object.values(AMB_META).map(m => (
              <div key={m.status} className="card">
                <h3>{m.label}</h3>
                <p style={{ fontSize: 13 }}>{m.description}</p>
                <ul style={{ fontSize: 13, color: '#475569', paddingLeft: 18, marginTop: 8 }}>
                  {m.traits.map(t => (
                    <li key={t}>{t}</li>
                  ))}
                </ul>
                <Link to={`/evolution/amb/${m.status}`} className="btn btn-secondary" style={{ marginTop: 12, width: '100%' }}>
                  查看 {m.status} 详情
                </Link>
              </div>
            ))}
          </div>

          <div className="card" style={{ marginTop: 20, background: '#f8fafc' }}>
            <h3>{text('evolution.amb_example_title', '跨维度状态示例')}</h3>
            <p style={{ fontSize: 13, color: '#64748b' }}>{text('evolution.amb_example_description', '示例：某企业 · 战略价值 A / 组织价值 M / 经营价值 B / 人的价值 M。说明同一企业可在不同坐标处不同状态，需分维度干预。')}</p>
          </div>

          <div style={{ marginTop: 16, display: 'flex', gap: 10, flexWrap: 'wrap' }}>
            <Link to="/self-check" className="btn btn-primary">
              看看你的企业（轻量对照）
            </Link>
            <Link to="/contact" className="btn btn-ghost">
              咨询获取方案
            </Link>
          </div>
        </div>
      </section>

      <GlobalCTA title="看清坐标，再谈行动" desc="先完成轻量对照，定位你的价值×状态矩阵，再选择陪跑路径。" />
    </div>
  )
}