import React, { useState } from 'react';
import { AlertCircle, CheckCircle, Code, Folder, FileText } from 'lucide-react';

const LingChairAndroidPlan = () => {
  const [activeTab, setActiveTab] = useState('structure');

  const projectStructure = {
    name: 'LingChairApp',
    children: [
      {
        name: 'app/src/main',
        children: [
          {
            name: 'java/com/lingchair',
            children: [
              { name: 'MainActivity.kt', type: 'file', desc: '主活动入口' },
              { name: 'LingChairApp.kt', type: 'file', desc: 'Application类' },
              {
                name: 'network/',
                children: [
                  { name: 'SocketClient.kt', type: 'file', desc: 'Socket.IO客户端封装' },
                  { name: 'ApiService.kt', type: 'file', desc: 'RPC方法调用' },
                  { name: 'ApiCallback.kt', type: 'file', desc: '响应数据类' }
                ]
              },
              {
                name: 'data/',
                children: [
                  { name: 'model/', children: [
                    { name: 'User.kt', type: 'file' },
                    { name: 'Chat.kt', type: 'file' },
                    { name: 'Message.kt', type: 'file' },
                    { name: 'JoinRequest.kt', type: 'file' }
                  ]},
                  { name: 'repository/', children: [
                    { name: 'UserRepository.kt', type: 'file' },
                    { name: 'ChatRepository.kt', type: 'file' }
                  ]}
                ]
              },
              {
                name: 'ui/',
                children: [
                  { name: 'auth/', children: [
                    { name: 'LoginActivity.kt', type: 'file' },
                    { name: 'RegisterActivity.kt', type: 'file' }
                  ]},
                  { name: 'chat/', children: [
                    { name: 'ChatListActivity.kt', type: 'file' },
                    { name: 'ChatActivity.kt', type: 'file' },
                    { name: 'ChatAdapter.kt', type: 'file' }
                  ]},
                  { name: 'profile/', children: [
                    { name: 'ProfileActivity.kt', type: 'file' }
                  ]}
                ]
              },
              {
                name: 'viewmodel/',
                children: [
                  { name: 'AuthViewModel.kt', type: 'file' },
                  { name: 'ChatViewModel.kt', type: 'file' }
                ]
              },
              {
                name: 'util/',
                children: [
                  { name: 'PreferenceManager.kt', type: 'file', desc: 'SharedPreferences封装' },
                  { name: 'HashUtil.kt', type: 'file', desc: 'SHA256加密' }
                ]
              }
            ]
          },
          {
            name: 'res/',
            children: [
              { name: 'layout/', type: 'folder', desc: 'XML布局文件' },
              { name: 'values/', type: 'folder', desc: '字符串、颜色、主题' },
              { name: 'drawable/', type: 'folder', desc: '图标和图片资源' }
            ]
          }
        ]
      },
      { name: 'build.gradle.kts', type: 'file', desc: 'Gradle构建配置' }
    ]
  };

  const dependencies = [
    { name: 'Socket.IO Client', version: '2.1.0', purpose: 'WebSocket通信' },
    { name: 'Kotlin Coroutines', version: '1.7.3', purpose: '异步操作' },
    { name: 'Lifecycle ViewModel', version: '2.7.0', purpose: 'MVVM架构' },
    { name: 'RecyclerView', version: '1.3.2', purpose: '列表展示' },
    { name: 'Gson', version: '2.10.1', purpose: 'JSON解析' },
    { name: 'Material Components', version: '1.11.0', purpose: 'Material Design UI' },
    { name: 'Glide', version: '4.16.0', purpose: '图片加载' }
  ];

  const coreFeatures = [
    {
      title: '用户认证',
      items: ['注册（昵称、用户名、密码）', '登录（SHA256密码加密）', 'Token刷新机制', '自动重连']
    },
    {
      title: '聊天功能',
      items: ['获取最近聊天列表', '创建私聊/群聊', '发送/接收消息', '消息历史分页加载', '实时消息推送']
    },
    {
      title: '用户管理',
      items: ['个人资料编辑', '头像上传', '联系人管理', '好友列表']
    },
    {
      title: '群组管理',
      items: ['创建群组', '加入请求处理', '群设置修改', '群头像设置']
    }
  ];

  const implementationSteps = [
    { step: 1, title: '项目初始化', desc: '创建Android项目，配置依赖', status: 'pending' },
    { step: 2, title: '网络层', desc: '实现Socket.IO客户端和RPC封装', status: 'pending' },
    { step: 3, title: '数据模型', desc: '创建Bean类对应TypeScript接口', status: 'pending' },
    { step: 4, title: '认证模块', desc: '实现登录/注册界面和逻辑', status: 'pending' },
    { step: 5, title: '聊天列表', desc: '实现聊天列表UI和数据加载', status: 'pending' },
    { step: 6, title: '聊天界面', desc: '实现消息发送/接收和UI展示', status: 'pending' },
    { step: 7, title: '用户管理', desc: '实现个人资料和设置页面', status: 'pending' },
    { step: 8, title: '测试优化', desc: '功能测试、性能优化、错误处理', status: 'pending' }
  ];

  const FileTreeNode = ({ node, level = 0 }) => {
    const [expanded, setExpanded] = useState(level < 2);
    const hasChildren = node.children && node.children.length > 0;
    
    return (
      <div>
        <div 
          className="flex items-center py-1 hover:bg-gray-50 cursor-pointer"
          style={{ paddingLeft: `${level * 20 + 8}px` }}
          onClick={() => hasChildren && setExpanded(!expanded)}
        >
          {hasChildren ? (
            <span className="text-gray-400 mr-2">{expanded ? '▼' : '▶'}</span>
          ) : (
            <span className="mr-2 ml-3">
              {node.type === 'file' ? <FileText size={14} className="text-blue-500" /> : <Folder size={14} className="text-yellow-500" />}
            </span>
          )}
          <span className={`${hasChildren ? 'font-semibold text-gray-700' : 'text-gray-600'} text-sm`}>
            {node.name}
          </span>
          {node.desc && <span className="ml-2 text-xs text-gray-400">- {node.desc}</span>}
        </div>
        {expanded && hasChildren && (
          <div>
            {node.children.map((child, idx) => (
              <FileTreeNode key={idx} node={child} level={level + 1} />
            ))}
          </div>
        )}
      </div>
    );
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 p-8">
      <div className="max-w-6xl mx-auto">
        <div className="bg-white rounded-2xl shadow-2xl overflow-hidden">
          <div className="bg-gradient-to-r from-blue-600 to-indigo-600 p-8 text-white">
            <h1 className="text-4xl font-bold mb-2">LingChair Android App</h1>
            <p className="text-blue-100">基于 Socket.IO 的原生聊天应用开发方案</p>
          </div>

          <div className="border-b border-gray-200">
            <div className="flex">
              {['structure', 'features', 'steps', 'tech'].map((tab) => (
                <button
                  key={tab}
                  onClick={() => setActiveTab(tab)}
                  className={`px-6 py-4 font-semibold transition-colors ${
                    activeTab === tab
                      ? 'text-blue-600 border-b-2 border-blue-600'
                      : 'text-gray-500 hover:text-gray-700'
                  }`}
                >
                  {tab === 'structure' && '项目结构'}
                  {tab === 'features' && '核心功能'}
                  {tab === 'steps' && '实现步骤'}
                  {tab === 'tech' && '技术栈'}
                </button>
              ))}
            </div>
          </div>

          <div className="p-8">
            {activeTab === 'structure' && (
              <div>
                <h2 className="text-2xl font-bold text-gray-800 mb-4 flex items-center">
                  <Folder className="mr-2 text-blue-600" />
                  项目目录结构
                </h2>
                <div className="bg-gray-50 rounded-lg p-4 font-mono text-sm border border-gray-200">
                  <FileTreeNode node={projectStructure} />
                </div>
              </div>
            )}

            {activeTab === 'features' && (
              <div>
                <h2 className="text-2xl font-bold text-gray-800 mb-6">核心功能模块</h2>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  {coreFeatures.map((feature, idx) => (
                    <div key={idx} className="bg-gradient-to-br from-blue-50 to-indigo-50 rounded-xl p-6 border border-blue-200">
                      <h3 className="text-xl font-bold text-blue-900 mb-4 flex items-center">
                        <CheckCircle className="mr-2" size={20} />
                        {feature.title}
                      </h3>
                      <ul className="space-y-2">
                        {feature.items.map((item, i) => (
                          <li key={i} className="flex items-start">
                            <span className="text-blue-600 mr-2">•</span>
                            <span className="text-gray-700">{item}</span>
                          </li>
                        ))}
                      </ul>
                    </div>
                  ))}
                </div>
              </div>
            )}

            {activeTab === 'steps' && (
              <div>
                <h2 className="text-2xl font-bold text-gray-800 mb-6">开发实施步骤</h2>
                <div className="space-y-4">
                  {implementationSteps.map((step, idx) => (
                    <div key={idx} className="flex items-start bg-gray-50 rounded-lg p-4 border-l-4 border-blue-500">
                      <div className="flex-shrink-0 w-12 h-12 bg-blue-600 text-white rounded-full flex items-center justify-center font-bold text-lg mr-4">
                        {step.step}
                      </div>
                      <div className="flex-grow">
                        <h3 className="text-lg font-bold text-gray-800 mb-1">{step.title}</h3>
                        <p className="text-gray-600">{step.desc}</p>
                      </div>
                      <div className="flex-shrink-0 ml-4">
                        <span className="px-3 py-1 bg-yellow-100 text-yellow-800 rounded-full text-sm font-semibold">
                          待开发
                        </span>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            )}

            {activeTab === 'tech' && (
              <div>
                <h2 className="text-2xl font-bold text-gray-800 mb-6">技术栈与依赖</h2>
                <div className="bg-gray-50 rounded-xl p-6 border border-gray-200">
                  <div className="mb-6">
                    <h3 className="text-lg font-bold text-gray-800 mb-3 flex items-center">
                      <Code className="mr-2 text-blue-600" />
                      开发环境
                    </h3>
                    <div className="grid grid-cols-2 gap-4">
                      <div className="bg-white p-4 rounded-lg border">
                        <p className="text-sm text-gray-600">开发语言</p>
                        <p className="font-bold text-gray-800">Kotlin</p>
                      </div>
                      <div className="bg-white p-4 rounded-lg border">
                        <p className="text-sm text-gray-600">最低版本</p>
                        <p className="font-bold text-gray-800">Android 6.0 (API 23)</p>
                      </div>
                      <div className="bg-white p-4 rounded-lg border">
                        <p className="text-sm text-gray-600">架构模式</p>
                        <p className="font-bold text-gray-800">MVVM</p>
                      </div>
                      <div className="bg-white p-4 rounded-lg border">
                        <p className="text-sm text-gray-600">构建工具</p>
                        <p className="font-bold text-gray-800">Gradle (Kotlin DSL)</p>
                      </div>
                    </div>
                  </div>
                  
                  <h3 className="text-lg font-bold text-gray-800 mb-3">主要依赖库</h3>
                  <div className="space-y-2">
                    {dependencies.map((dep, idx) => (
                      <div key={idx} className="flex items-center justify-between bg-white p-4 rounded-lg border hover:border-blue-300 transition-colors">
                        <div className="flex-grow">
                          <p className="font-semibold text-gray-800">{dep.name}</p>
                          <p className="text-sm text-gray-600">{dep.purpose}</p>
                        </div>
                        <span className="text-sm font-mono text-blue-600 bg-blue-50 px-3 py-1 rounded">
                          v{dep.version}
                        </span>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            )}
          </div>
        </div>

        <div className="mt-8 bg-yellow-50 border-l-4 border-yellow-400 p-6 rounded-lg">
          <div className="flex items-start">
            <AlertCircle className="text-yellow-600 mr-3 flex-shrink-0 mt-1" />
            <div>
              <h3 className="font-bold text-yellow-900 mb-2">注意事项</h3>
              <ul className="text-yellow-800 space-y-1 text-sm">
                <li>• 登录时需要对密码进行 SHA256 加密，注册时直接传明文（需与服务端确认）</li>
                <li>• Socket.IO 事件通道固定为 "The_White_Silk"</li>
                <li>• 所有 RPC 调用需要处理 code != 200 的错误情况</li>
                <li>• 实现 Token 过期自动刷新机制</li>
                <li>• 需要处理 Socket 断线重连逻辑</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default LingChairAndroidPlan;