import React, { useState, useEffect } from 'react';
import './ProjectsSection.css';

function ProjectsSection({ projects }) {
  const [hoveredId, setHoveredId] = useState(null);
  const [isAdmin, setIsAdmin] = useState(false);

  useEffect(() => {
    // 检查 URL 参数
    const urlParams = new URLSearchParams(window.location.search);
    const token = urlParams.get('token');
    const pathname = window.location.pathname;
    
    // 检查是否为 /admin 路径且 token 正确
    if (pathname.includes('/admin') && token === 'shumengya520') {
      setIsAdmin(true);
    }
  }, []);

  const getFavicon = (url) => {
    try {
      const domain = new URL(url).origin;
      return `${domain}/favicon.ico`;
    } catch {
      return 'https://api.iconify.design/mdi:web.svg';
    }
  };

  // 过滤项目
  // 1. 如果 show 为 false,则不显示
  // 2. 如果 admin 为 true 且不是管理员模式,则不显示
  const filteredProjects = projects.filter(project => {
    // 首先检查 show 字段,如果为 false 则直接不显示
    if (project.show === false) {
      return false;
    }
    
    // 然后检查 admin 权限
    if (project.admin === true && !isAdmin) {
      return false; // 隐藏需要 admin 权限的项目
    }
    
    return true; // 显示其他所有项目
  });

  return (
    <section className="projects-section">
      <h2 className="section-title">
        <span className="title-icon">🎯</span>
        精选项目
      </h2>
      
      <div className="projects-grid">
        {filteredProjects.map(project => (
          <a
            key={project.id}
            href={project.link}
            target="_blank"
            rel="noopener noreferrer"
            className={`project-card ${hoveredId === project.id ? 'hovered' : ''}`}
            onMouseEnter={() => setHoveredId(project.id)}
            onMouseLeave={() => setHoveredId(null)}
          >
            {project.develop === true && (
              <div className="develop-badge" title="独立开发">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M13.7803 3.03039L20.4697 9.71982C21.0508 10.3009 21.0508 11.2451 20.4697 11.8262L11.8262 20.4697C11.2451 21.0508 10.3009 21.0508 9.71982 20.4697L3.03039 13.7803C2.44928 13.1992 2.44928 12.255 3.03039 11.6739L11.6739 3.03039C12.255 2.44928 13.1992 2.44928 13.7803 3.03039Z" fill="currentColor"/>
                  <path d="M5 20L9 16L13 20L9 24L5 20Z" fill="currentColor"/>
                </svg>
              </div>
            )}
            <div className="project-header">
              <div className="project-icon">
                <img 
                  src={project.icon || getFavicon(project.link)} 
                  alt={project.title}
                  onError={(e) => {
                    e.target.src = 'https://api.iconify.design/mdi:web.svg';
                  }}
                />
              </div>
              <h3 className="project-title">{project.title}</h3>
            </div>
            
            <p className="project-description">{project.description}</p>
            
            {project.tags && project.tags.length > 0 && (
              <div className="project-tags">
                {project.tags.map((tag, index) => (
                  <span key={index} className="project-tag">{tag}</span>
                ))}
              </div>
            )}
            
          </a>
        ))}
      </div>
    </section>
  );
}

export default ProjectsSection;
