import { useTranslation } from 'react-i18next'
import { useState } from 'react'
import Layout from '../components/Layout'
import '../App.css'

interface FriendLink {
  id: number
  name: string
  description: string
  url: string
  avatar?: string
  category: string
}

function Friends() {
  const { t } = useTranslation()
  const [selectedCategory, setSelectedCategory] = useState<string>('All')

  // Mock friend links data
  const friendLinks: FriendLink[] = [
    {
      id: 1,
      name: "Steam Profile",
      description: "Follow my gaming journey, see what I'm playing, and connect with me on Steam",
      url: "https://steamcommunity.com/profiles/76561198281616762",
      category: "Admin"
    },
    {
      id: 2,
      name: "VRChat",
      description: "Join me in virtual reality! Explore worlds, hang out, and experience VR together",
      url: "https://vrchat.com/home/user/usr_621802be-d8eb-4e82-bea0-97463c0d1a57",
      category: "Admin"
    },
    {
      id: 3,
      name: "GitHub",
      description: "Check out my code repositories, open source projects, and development work",
      url: "https://github.com/moemoequte",
      category: "Admin"
    }
  ]

  const categories = [...new Set(friendLinks.map(link => link.category))]
  
  // Filter friends based on selected category
  const filteredFriends = selectedCategory === 'All' 
    ? friendLinks 
    : friendLinks.filter(link => link.category === selectedCategory)

  return (
    <Layout currentPage="friends">
      {/* Friends Page Content */}
      <section className="friends-section" style={{ padding: '120px 2rem 80px', maxWidth: '1200px', margin: '0 auto' }}>
        <div className="friends-header" style={{ textAlign: 'center', marginBottom: '3rem' }}>
          <h1 className="section-title" style={{ fontSize: '3rem', marginBottom: '1rem' }}>
            {t('friends.title')}
          </h1>
          <p style={{ fontSize: '1.2rem', color: 'var(--text-secondary)', maxWidth: '600px', margin: '0 auto' }}>
            {t('friends.subtitle')}
          </p>
        </div>

        {/* Category Filter */}
        <div className="friends-categories" style={{ display: 'flex', justifyContent: 'center', gap: '1rem', marginBottom: '3rem', flexWrap: 'wrap' }}>
          <button 
            className={`category-btn ${selectedCategory === 'All' ? 'active' : ''}`}
            onClick={() => setSelectedCategory('All')}
            style={{
              padding: '0.5rem 1rem',
              border: `1px solid ${selectedCategory === 'All' ? 'var(--accent-color)' : 'var(--border-color)'}`,
              background: selectedCategory === 'All' ? 'var(--accent-color)' : 'var(--bg-card)',
              color: selectedCategory === 'All' ? 'white' : 'var(--text-primary)',
              borderRadius: '20px',
              cursor: 'pointer',
              transition: 'all 0.3s ease'
            }}
          >
            {t('friends.allCategories')}
          </button>
          {categories.map(category => (
            <button 
              key={category} 
              className={`category-btn ${selectedCategory === category ? 'active' : ''}`}
              onClick={() => setSelectedCategory(category)}
              style={{
                padding: '0.5rem 1rem',
                border: `1px solid ${selectedCategory === category ? 'var(--accent-color)' : 'var(--border-color)'}`,
                background: selectedCategory === category ? 'var(--accent-color)' : 'var(--bg-card)',
                color: selectedCategory === category ? 'white' : 'var(--text-primary)',
                borderRadius: '20px',
                cursor: 'pointer',
                transition: 'all 0.3s ease'
              }}
            >
              {category}
            </button>
          ))}
        </div>

        {/* Friends Grid */}
        <div className="friends-grid" style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
          gap: '2rem'
        }}>
          {filteredFriends.map(friend => (
            <div key={friend.id} className="friend-card" style={{
              background: 'var(--bg-card)',
              border: '1px solid var(--border-color)',
              borderRadius: '12px',
              padding: '2rem',
              transition: 'all 0.3s ease',
              cursor: 'pointer'
            }}
            onMouseEnter={(e) => {
              e.currentTarget.style.transform = 'translateY(-5px)'
              e.currentTarget.style.boxShadow = '0 10px 30px var(--accent-shadow)'
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.transform = 'translateY(0)'
              e.currentTarget.style.boxShadow = 'none'
            }}
            >
              <div className="friend-header" style={{ display: 'flex', alignItems: 'center', marginBottom: '1rem' }}>
                <div className="friend-avatar" style={{
                  width: '50px',
                  height: '50px',
                  background: 'var(--accent-color)',
                  borderRadius: '50%',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  fontSize: '1.5rem',
                  marginRight: '1rem',
                  color: 'white'
                }}>
                  {friend.name.charAt(0)}
                </div>
                <div>
                  <h3 style={{ margin: '0 0 0.5rem 0', color: 'var(--text-primary)' }}>{friend.name}</h3>
                  <span style={{
                    background: 'var(--accent-color)',
                    color: 'white',
                    padding: '0.25rem 0.75rem',
                    borderRadius: '12px',
                    fontSize: '0.8rem',
                    fontWeight: 'bold'
                  }}>
                    {friend.category}
                  </span>
                </div>
              </div>
              <p style={{ color: 'var(--text-secondary)', marginBottom: '1.5rem', lineHeight: '1.6' }}>
                {friend.description}
              </p>
              <a
                href={friend.url}
                target="_blank"
                rel="noopener noreferrer"
                className="friend-link"
                style={{
                  display: 'inline-block',
                  background: 'transparent',
                  color: 'var(--accent-color)',
                  border: '2px solid var(--accent-color)',
                  padding: '0.75rem 1.5rem',
                  borderRadius: '6px',
                  textDecoration: 'none',
                  fontWeight: 'bold',
                  transition: 'all 0.3s ease',
                  width: '100%',
                  textAlign: 'center'
                }}
                onMouseEnter={(e) => {
                  e.currentTarget.style.background = 'var(--accent-color)'
                  e.currentTarget.style.color = 'white'
                }}
                onMouseLeave={(e) => {
                  e.currentTarget.style.background = 'transparent'
                  e.currentTarget.style.color = 'var(--accent-color)'
                }}
              >
                {t('friends.visitSite')}
              </a>
            </div>
          ))}
        </div>

        {/* Call to Action */}
        <div className="friends-cta" style={{
          textAlign: 'center',
          marginTop: '4rem',
          padding: '3rem',
          background: 'var(--bg-card)',
          borderRadius: '12px',
          border: '1px solid var(--border-color)'
        }}>
          <h2 style={{ color: 'var(--text-primary)', marginBottom: '1rem' }}>
            {t('friends.wantToJoin')}
          </h2>
          <p style={{ color: 'var(--text-secondary)', marginBottom: '2rem', maxWidth: '600px', margin: '0 auto 2rem' }}>
            {t('friends.joinDescription')}
          </p>
          <a
            href="mailto:admin@cialloo.com?subject=Friend Link Request"
            style={{
              display: 'inline-block',
              background: 'var(--accent-color)',
              color: 'white',
              padding: '1rem 2rem',
              borderRadius: '8px',
              textDecoration: 'none',
              fontWeight: 'bold',
              fontSize: '1.1rem',
              transition: 'transform 0.3s ease'
            }}
            onMouseEnter={(e) => {
              e.currentTarget.style.transform = 'translateY(-2px)'
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.transform = 'translateY(0)'
            }}
          >
            {t('friends.contactUs')}
          </a>
        </div>
      </section>
    </Layout>
  )
}

export default Friends