// Page 7: Library Home - 知识库首页
import { PlusIcon, SearchIcon, FolderIcon, ChevronRightIcon, MoreHorizontalIcon } from 'lucide-react';
import BottomTabBar from '../components/BottomTabBar';

const libraries = [
  {
    name: '机器学习',
    desc: 'ML基础 · 深度学习 · 实战项目',
    items: 47,
    mastery: 72,
    color: '#7C6EFA',
    emoji: '🤖',
    tags: ['算法', '数学', '实战'],
    lastStudied: '今天',
  },
  {
    name: '高等数学',
    desc: '微积分 · 线代 · 概率论',
    items: 93,
    mastery: 58,
    color: '#F97316',
    emoji: '📐',
    tags: ['公式', '定理', '习题'],
    lastStudied: '昨天',
  },
  {
    name: '英语词汇',
    desc: 'GRE · 托福 · 商务英语',
    items: 312,
    mastery: 84,
    color: '#2DD4BF',
    emoji: '📖',
    tags: ['词根', '语境', '拼写'],
    lastStudied: '3天前',
  },
  {
    name: '产品设计',
    desc: 'UX 方法论 · 用研 · 交互规范',
    items: 28,
    mastery: 43,
    color: '#F59E0B',
    emoji: '🎨',
    tags: ['方法论', '案例'],
    lastStudied: '1周前',
  },
];

const LibraryHomePage = () => {
  return (
    <div
      data-cmp="LibraryHomePage"
      className="absolute inset-0 flex flex-col"
      style={{
        background: '#0F0F1A',
        paddingTop: '44px',
      }}
    >
      {/* Header */}
      <div className="flex items-center justify-between px-5 pt-4 pb-3">
        <h1 style={{ fontSize: '22px', fontWeight: '800', color: '#F0F0FF', letterSpacing: '-0.5px' }}>知识库</h1>
        <div className="flex items-center gap-2">
          <div
            style={{
              width: '36px', height: '36px', borderRadius: '10px',
              background: 'rgba(255,255,255,0.05)',
              border: '1px solid rgba(255,255,255,0.08)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}
          >
            <SearchIcon size={16} style={{ color: 'rgba(240,240,255,0.6)' }} />
          </div>
          <div
            style={{
              width: '36px', height: '36px', borderRadius: '10px',
              background: 'linear-gradient(135deg, #7C6EFA, #9B8BFF)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              boxShadow: '0 4px 16px rgba(124,110,250,0.4)',
            }}
          >
            <PlusIcon size={18} style={{ color: 'white' }} />
          </div>
        </div>
      </div>

      {/* Search bar */}
      <div className="px-5 mb-4">
        <div
          className="flex items-center gap-3 px-4"
          style={{
            height: '44px',
            background: 'rgba(255,255,255,0.05)',
            border: '1px solid rgba(255,255,255,0.08)',
            borderRadius: '14px',
          }}
        >
          <SearchIcon size={16} style={{ color: 'rgba(240,240,255,0.3)' }} />
          <span style={{ fontSize: '14px', color: 'rgba(240,240,255,0.3)' }}>搜索知识库或知识点…</span>
        </div>
      </div>

      {/* Stats row */}
      <div className="flex gap-3 px-5 mb-5">
        {[
          { label: '知识库', value: '4', icon: '📚' },
          { label: '知识点', value: '480', icon: '📝' },
          { label: '待巩固', value: '23', icon: '🎯', highlight: true },
        ].map((s, i) => (
          <div
            key={i}
            className="flex-1 flex flex-col items-center justify-center"
            style={{
              height: '60px',
              background: s.highlight ? 'rgba(249,115,22,0.1)' : 'rgba(255,255,255,0.04)',
              border: `1px solid ${s.highlight ? 'rgba(249,115,22,0.25)' : 'rgba(255,255,255,0.07)'}`,
              borderRadius: '14px',
            }}
          >
            <p style={{ fontSize: '18px', fontWeight: '800', color: s.highlight ? '#F97316' : '#F0F0FF' }}>{s.value}</p>
            <p style={{ fontSize: '11px', color: 'rgba(240,240,255,0.4)', marginTop: '1px' }}>{s.icon} {s.label}</p>
          </div>
        ))}
      </div>

      {/* Library list */}
      <div className="flex-1 overflow-y-auto px-5 pb-24">
        <div className="flex items-center justify-between mb-3">
          <h2 style={{ fontSize: '15px', fontWeight: '700', color: '#F0F0FF' }}>我的知识库</h2>
          <span style={{ fontSize: '12px', color: 'rgba(240,240,255,0.4)' }}>按最近学习</span>
        </div>

        <div className="flex flex-col gap-4">
          {libraries.map((lib, i) => (
            <div
              key={i}
              style={{
                background: 'rgba(255,255,255,0.04)',
                border: '1px solid rgba(255,255,255,0.07)',
                borderRadius: '20px',
                overflow: 'hidden',
              }}
            >
              {/* Color strip */}
              <div style={{ height: '3px', background: `linear-gradient(90deg, ${lib.color}, transparent)` }} />

              <div className="p-4">
                {/* Title row */}
                <div className="flex items-center gap-3 mb-3">
                  <div
                    style={{
                      width: '44px', height: '44px', borderRadius: '13px',
                      background: `${lib.color}22`,
                      border: `1px solid ${lib.color}33`,
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      fontSize: '22px', flexShrink: 0,
                    }}
                  >
                    {lib.emoji}
                  </div>
                  <div className="flex-1">
                    <div className="flex items-center justify-between">
                      <h3 style={{ fontSize: '16px', fontWeight: '700', color: '#F0F0FF' }}>{lib.name}</h3>
                      <MoreHorizontalIcon size={16} style={{ color: 'rgba(240,240,255,0.3)' }} />
                    </div>
                    <p style={{ fontSize: '12px', color: 'rgba(240,240,255,0.4)', marginTop: '2px' }}>{lib.desc}</p>
                  </div>
                </div>

                {/* Mastery bar */}
                <div className="mb-3">
                  <div className="flex items-center justify-between mb-1.5">
                    <span style={{ fontSize: '11px', color: 'rgba(240,240,255,0.4)' }}>掌握度</span>
                    <span style={{ fontSize: '12px', fontWeight: '700', color: lib.color }}>{lib.mastery}%</span>
                  </div>
                  <div
                    style={{
                      height: '5px',
                      background: 'rgba(255,255,255,0.08)',
                      borderRadius: '3px',
                      overflow: 'hidden',
                    }}
                  >
                    <div
                      style={{
                        height: '100%',
                        width: `${lib.mastery}%`,
                        background: `linear-gradient(90deg, ${lib.color}, ${lib.color}aa)`,
                        borderRadius: '3px',
                      }}
                    />
                  </div>
                </div>

                {/* Meta row */}
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-3">
                    <span style={{ fontSize: '11px', color: 'rgba(240,240,255,0.4)' }}>
                      <FolderIcon size={11} style={{ display: 'inline', marginRight: '3px' }} />
                      {lib.items} 个知识点
                    </span>
                    <span style={{ fontSize: '11px', color: 'rgba(240,240,255,0.3)' }}>
                      {lib.lastStudied}学习
                    </span>
                  </div>
                  <div className="flex items-center gap-2">
                    {lib.tags.map((tag, j) => (
                      <span
                        key={j}
                        style={{
                          padding: '2px 7px',
                          background: 'rgba(255,255,255,0.06)',
                          borderRadius: '20px',
                          fontSize: '10px',
                          color: 'rgba(240,240,255,0.4)',
                          fontWeight: '500',
                        }}
                      >
                        {tag}
                      </span>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>

        {/* Add library button */}
        <button
          className="w-full mt-4 flex items-center justify-center gap-2"
          style={{
            height: '52px',
            background: 'rgba(124,110,250,0.06)',
            border: '1.5px dashed rgba(124,110,250,0.3)',
            borderRadius: '16px',
            fontSize: '14px',
            fontWeight: '600',
            color: 'rgba(124,110,250,0.7)',
          }}
        >
          <PlusIcon size={16} style={{ color: '#7C6EFA' }} />
          新建知识库
        </button>
      </div>

      <BottomTabBar active="library" />
    </div>
  );
};

export default LibraryHomePage;