/**
 * @name 需求说明
 * 自 ONE-OS web端/需求说明 归档
 */
import React, { useMemo, useState } from 'react';
import { Card, Col, Input, List, Row, Typography } from 'antd';

const DOC_MAP = import.meta.glob('../../resources/oneos-web-legacy/需求说明/**/*', {
  query: '?raw',
  import: 'default',
  eager: true,
});

const FILES = Object.keys(DOC_MAP)
  .map((key) => key.replace('../../resources/oneos-web-legacy/需求说明/', ''))
  .filter(Boolean)
  .sort((a, b) => a.localeCompare(b, 'zh-CN'))
  .map((rel) => ({ rel, title: rel }));

export default function OneosWebRequirementsPage() {
  const [query, setQuery] = useState('');
  const [active, setActive] = useState(FILES[0]?.rel ?? '');

  const filtered = useMemo(() => {
    const q = query.trim();
    if (!q) return FILES;
    return FILES.filter((item) => item.title.includes(q));
  }, [query]);

  const content = useMemo(() => {
    if (!active) return '';
    const key = `../../resources/oneos-web-legacy/需求说明/${active}`;
    return String(DOC_MAP[key] ?? '无法加载文档');
  }, [active]);

  return (
    <Row gutter={16} style={{ padding: 16, minHeight: '100vh', background: '#f5f7fa' }}>
      <Col span={7}>
        <Card title="需求说明" extra={<Input.Search allowClear placeholder="搜索文档" onSearch={setQuery} onChange={(e) => setQuery(e.target.value)} style={{ width: 160 }} />}>
          <List
            size="small"
            dataSource={filtered}
            renderItem={(item) => (
              <List.Item style={{ cursor: 'pointer', background: item.rel === active ? '#e8f3ff' : undefined }} onClick={() => setActive(item.rel)}>
                {item.title}
              </List.Item>
            )}
          />
        </Card>
      </Col>
      <Col span={17}>
        <Card>
          <Typography.Paragraph style={{ whiteSpace: 'pre-wrap', marginBottom: 0 }}>{content}</Typography.Paragraph>
        </Card>
      </Col>
    </Row>
  );
}
