import 'package:flutter/material.dart';
import 'package:yx_only_office_flutter/yx_only_office_flutter.dart';

/// 使用真实 OnlyOffice 服务的简单示例
///
/// 配置信息：
/// - OnlyOffice 服务: https://document.23544.com/
/// - JWT Secret: 6Yr6DGoVV3ACS6GtVgdH453mXxLftd6Q
/// - 示例文件: https://quanxue-oa.oss-cn-chengdu.aliyuncs.com/20250815/1755244744547.pptx
void main() {
  runApp(const SimpleExampleApp());
}

class SimpleExampleApp extends StatelessWidget {
  const SimpleExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'OnlyOffice 简单示例',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorSchemeSeed: Colors.blue,
        useMaterial3: true,
      ),
      home: const SimpleExamplePage(),
    );
  }
}

class SimpleExamplePage extends StatefulWidget {
  const SimpleExamplePage({super.key});

  @override
  State<SimpleExamplePage> createState() => _SimpleExamplePageState();
}

class _SimpleExamplePageState extends State<SimpleExamplePage> {
  // OnlyOffice 配置
  static const String onlyOfficeServerUrl = 'https://document.23544.com/';
  static const String jwtSecret = '6Yr6DGoVV3ACS6GtVgdH453mXxLftd6Q';

  // 文档列表
  final List<DocumentInfo> documents = [
    const DocumentInfo(
      name: 'PowerPoint 演示文稿',
      // url: 'https://quanxue-oa.oss-cn-chengdu.aliyuncs.com/20250905/1757052622899.xlsx',
      // url: 'https://quanxue-oa.oss-cn-chengdu.aliyuncs.com/20250815/1755244744547.pptx',
      url: 'https://quanxue-oa.oss-cn-chengdu.aliyuncs.com/20250905/1757052622898.docx',
      icon: Icons.slideshow,
      color: Colors.orange,
    ),
    // 可以添加更多文档
  ];

  int currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    final currentDoc = documents[currentIndex];

    return Scaffold(
      appBar: AppBar(
        title: Row(
          children: [
            Icon(currentDoc.icon, size: 24),
            const SizedBox(width: 8),
            Expanded(
              child: Text(
                currentDoc.name,
                overflow: TextOverflow.ellipsis,
              ),
            ),
          ],
        ),
        actions: [
          if (documents.length > 1)
            PopupMenuButton<int>(
              icon: const Icon(Icons.description),
              tooltip: '切换文档',
              onSelected: (index) {
                setState(() {
                  currentIndex = index;
                });
              },
              itemBuilder: (context) {
                return documents.asMap().entries.map((entry) {
                  return PopupMenuItem<int>(
                    value: entry.key,
                    child: Row(
                      children: [
                        Icon(
                          entry.value.icon,
                          color: entry.value.color,
                          size: 20,
                        ),
                        const SizedBox(width: 8),
                        Text(entry.value.name),
                        if (entry.key == currentIndex) ...[
                          const SizedBox(width: 8),
                          const Icon(Icons.check, size: 16),
                        ],
                      ],
                    ),
                  );
                }).toList();
              },
            ),
          IconButton(
            icon: const Icon(Icons.info_outline),
            tooltip: '关于',
            onPressed: () => _showAboutDialog(context),
          ),
        ],
      ),
      body: OnlyOfficeViewer(
        jwtSecret: jwtSecret,
        title: currentDoc.name,
        fileUrl: currentDoc.url,
        key: ValueKey(currentDoc.url), // 切换文档时重建
        /// 1. ppt(幻灯片) 使用 mobile 模式
        type: 'mobile',

        /// xlsx(表格) 使用 embedded 模式
        // type: 'embedded',

        onlyOfficeServerUrl: onlyOfficeServerUrl,
      ),
      bottomNavigationBar: documents.length > 1
          ? BottomNavigationBar(
              currentIndex: currentIndex,
              onTap: (index) {
                setState(() {
                  currentIndex = index;
                });
              },
              items: documents.map((doc) {
                return BottomNavigationBarItem(
                  icon: Icon(doc.icon),
                  label: doc.name,
                );
              }).toList(),
            )
          : null,
    );
  }

  void _showAboutDialog(BuildContext context) {
    showDialog(
      context: context,
      builder: (context) => AlertDialog(
        title: const Text('关于'),
        content: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Text(
              'OnlyOffice Flutter 插件示例',
              style: TextStyle(fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 16),
            _buildInfoRow('服务器', onlyOfficeServerUrl),
            _buildInfoRow('当前文档', documents[currentIndex].name),
            const SizedBox(height: 16),
            const Text(
              '功能特性：',
              style: TextStyle(fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 8),
            _buildFeatureItem('📄 支持多种文档格式'),
            _buildFeatureItem('🔒 JWT 身份验证'),
            _buildFeatureItem('📱 跨平台支持'),
            _buildFeatureItem('⚡ 快速加载'),
          ],
        ),
        actions: [
          TextButton(
            onPressed: () => Navigator.pop(context),
            child: const Text('关闭'),
          ),
        ],
      ),
    );
  }

  Widget _buildInfoRow(String label, String value) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 4),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            '$label: ',
            style: const TextStyle(fontWeight: FontWeight.w500),
          ),
          Expanded(
            child: Text(
              value,
              style: TextStyle(color: Colors.grey[600]),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildFeatureItem(String text) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 2),
      child: Text(text),
    );
  }
}

/// 文档信息类
class DocumentInfo {
  final String name;
  final String url;
  final IconData icon;
  final Color color;

  const DocumentInfo({
    required this.name,
    required this.url,
    required this.icon,
    required this.color,
  });
}