import { useState, useEffect } from 'react';
import Navbar from '../Navbar';

export default function Home() {
  const [posts, setPosts] = useState([]);
  const [filter, setFilter] = useState('');
  const [isMobile, setIsMobile] = useState(false);

  useEffect(() => {
    // Carga de posts
    fetch('http://localhost:9002/posts')
      .then(res => res.json())
      .then(data => setPosts(Array.isArray(data) ? data : []))
      .catch(err => console.error("Error:", err));

    // Manejo de responsive
    const handleResize = () => setIsMobile(window.innerWidth <= 768);
    handleResize();
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  const handleRead = async (id) => {
    try { await fetch(`http://localhost:9002/posts/view/${id}`, { method: 'POST' }); } catch (e) {}
  };

  const filtered = posts.filter(p => 
    p.title.toLowerCase().includes(filter.toLowerCase()) || 
    p.tags?.toLowerCase().includes(filter.toLowerCase())
  );

  return (
    <div style={{ 
      fontFamily: "'Plus Jakarta Sans', sans-serif", 
      backgroundColor: '#f8fafc', 
      minHeight: '100vh', 
      color: '#1e293b' 
    }}>
      <Navbar />
      
      <div style={{ 
        maxWidth: '1200px', 
        margin: '0 auto', 
        padding: isMobile ? '30px 15px' : '60px 24px' 
      }}>
        
        <header style={{ textAlign: 'center', marginBottom: isMobile ? '30px' : '50px' }}>
          <h1 style={{ 
            fontSize: isMobile ? '1.8rem' : '2.8rem', 
            fontWeight: '800', 
            marginBottom: '20px', 
            color: '#0f172a',
            letterSpacing: '-0.025em'
          }}>
            Bienvenido al Blog
          </h1>
          <input 
            placeholder="🔍 Buscar por título o tag..." 
            value={filter} 
            onChange={e => setFilter(e.target.value)} 
            style={{
              width: '100%', 
              maxWidth: '600px', 
              padding: isMobile ? '12px 20px' : '16px 25px',
              borderRadius: '30px', 
              border: '2px solid #e2e8f0',
              fontSize: '1rem', 
              outline: 'none',
              boxShadow: '0 2px 4px rgba(0,0,0,0.02)',
              boxSizing: 'border-box'
            }}
          />
        </header>

        <main style={{
          display: 'grid',
          gap: isMobile ? '20px' : '30px'
        }}>
          {filtered.map(post => (
            <article key={post.id} style={{
              backgroundColor: 'white', 
              padding: isMobile ? '25px' : '40px', 
              borderRadius: '20px',
              border: '1px solid #e2e8f0', 
              boxShadow: '0 4px 6px -1px rgba(0,0,0,0.05)',
              transition: 'transform 0.2s ease'
            }}>
              <div style={{ 
                display: 'flex', 
                justifyContent: 'space-between', 
                alignItems: 'center', 
                marginBottom: '15px' 
              }}>
                <span style={{ 
                  color: '#2563eb', 
                  fontWeight: '800', 
                  fontSize: '0.75rem', 
                  textTransform: 'uppercase', 
                  backgroundColor: '#eff6ff',
                  padding: '4px 12px',
                  borderRadius: '20px'
                }}>
                  #{post.tags || 'General'}
                </span>
                <span style={{ fontSize: '0.8rem', color: '#94a3b8' }}>
                  {post.views || 0} visitas
                </span>
              </div>
              
              <h2 style={{ 
                margin: '0 0 15px 0', 
                fontSize: isMobile ? '1.4rem' : '1.8rem', 
                color: '#0f172a',
                lineHeight: '1.2'
              }}>
                {post.title}
              </h2>
              
              <div 
                dangerouslySetInnerHTML={{ __html: post.content?.substring(0, 180) + '...' }} 
                style={{ 
                  lineHeight: '1.6', 
                  color: '#475569',
                  fontSize: isMobile ? '0.95rem' : '1rem'
                }} 
              />
              
              <button 
                onClick={() => handleRead(post.id)} 
                style={{
                  marginTop: '25px', 
                  color: 'white', 
                  backgroundColor: '#0f172a',
                  border: 'none',
                  padding: '10px 20px',
                  borderRadius: '10px',
                  fontWeight: '600', 
                  cursor: 'pointer', 
                  fontSize: '0.9rem',
                  display: 'inline-flex',
                  alignItems: 'center'
                }}
              >
                Leer más
                <span style={{ marginLeft: '8px' }}>→</span>
              </button>
            </article>
          ))}
          
          {filtered.length === 0 && (
            <div style={{ textAlign: 'center', padding: '40px' }}>
              <p style={{ color: '#64748b', fontSize: '1.1rem' }}>No se encontraron artículos que coincidan con tu búsqueda.</p>
            </div>
          )}
        </main>
      </div>
    </div>
  );
}