import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import SvgIcon from '../../components/SvgIcon';

export default function NewChat() {
    const navigate = useNavigate();
    const [knowledgeBases, setKnowledgeBases] = useState([
        {
            id: '1',
            title: '产品开发知识库',
            description: '产品开发流程及规范说明文档',
            documents: 24,
            date: '2025-02-15',
            access: 'full',
        },
        {
            id: '2',
            title: '市场分析知识库',
            description: '2025年Q1市场分析总结',
            documents: 12,
            date: '2025-02-10',
            access: 'read',
        },
        {
            id: '3',
            title: '财务知识库',
            description: '月度财务分析报告',
            documents: 8,
            date: '2025-02-01',
            access: 'none',
        },
        {
            id: '4',
            title: '技术架构知识库',
            description: '系统架构设计文档',
            documents: 15,
            date: '2025-01-20',
            access: 'full',
        },
        {
            id: '5',
            title: '用户研究知识库',
            description: '用户调研和反馈分析',
            documents: 18,
            date: '2025-01-15',
            access: 'read',
        },
    ]);

    const handleSelectKnowledgeBase = (knowledgeBaseId) => {
        // In a real app, you would create a new chat and get its ID from the API
        navigate(`/chat/${knowledgeBaseId}`);
    };

    return (
        <div className='new-chat container py-4'>
            <div className='text-center mb-5'>
                <h2 className='mb-4'>选择知识库开始聊天</h2>
            </div>

            <div className='row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4 justify-content-center'>
                {knowledgeBases.map((kb) =>
                    kb.access === 'full' || kb.access === 'read' ? (
                        <div key={kb.id} className='col'>
                            <div
                                className='card h-100 shadow-sm border-0 cursor-pointer'
                                onClick={() => handleSelectKnowledgeBase(kb.id)}
                                style={{ cursor: 'pointer' }}
                            >
                                <div className='card-body'>
                                    <h5 className='card-title'>{kb.title}</h5>
                                    <p className='card-text text-muted'>{kb.description}</p>
                                    <div className='text-muted d-flex align-items-center gap-1'>
                                        <SvgIcon className='file' />
                                        {kb.documents} 文档
                                        <span className='ms-3 d-flex align-items-center gap-1'>
                                            <SvgIcon className='clock' />
                                            {kb.date}
                                        </span>
                                    </div>
                                    <div className='mt-3 d-flex justify-content-between align-items-end'>
                                        {kb.access === 'full' ? (
                                            <span className='badge bg-success-subtle text-success d-flex align-items-center gap-1'>
                                                <SvgIcon className='circle-yes' />
                                                完全访问
                                            </span>
                                        ) : (
                                            <span className='badge bg-warning-subtle text-warning d-flex align-items-center gap-1'>
                                                <SvgIcon className='eye' />
                                                只读访问
                                            </span>
                                        )}
                                    </div>
                                </div>
                            </div>
                        </div>
                    ) : null
                )}
            </div>
        </div>
    );
}