"use client";
import { useState } from 'react';
import Link from 'next/link';
import Image from 'next/image';
import { products } from '@/data/products';

export default function ProductsPage() {
  const [currentPage, setCurrentPage] = useState(1);
  const productsPerPage = 12;

  // Calculate pagination
  const indexOfLastProduct = currentPage * productsPerPage;
  const indexOfFirstProduct = indexOfLastProduct - productsPerPage;
  const currentProducts = products.slice(indexOfFirstProduct, indexOfLastProduct);
  const totalPages = Math.ceil(products.length / productsPerPage);

  const paginate = (pageNumber: number) => setCurrentPage(pageNumber);

  return (
    <div style={{ minHeight: '100vh' }}>
      {/* Inner Banner */}
      <section className="hero" style={{ minHeight: '400px', display: 'flex', alignItems: 'center', paddingTop: '130px' }}>
        <div className="hero-pattern"></div>
        <div className="hero-left" style={{ padding: '0', width: '100%' }}>
          <div className="hero-eyebrow" style={{ marginLeft: '0px' }}>Full Inventory</div>
          <h1 className="hero-h1" style={{ marginBottom: '16px' }}>Our <em>Product</em> Catalog.</h1>
          <p className="hero-sub" style={{ maxWidth: '600px', marginBottom: '0' }}>
            Explore our complete range of professional-grade fence supply products. 
            High stocks and contractor pricing for same-day delivery across Ontario.
          </p>
        </div>
      </section>

      {/* Grid Content */}
      <section className="products-section">
        <div className="products-grid">
          {currentProducts.map((product) => (
            <div key={product.slug} className="product-card" style={{ display: 'flex', flexDirection: 'column', height: '100%', textDecoration: 'none' }}>
              <div style={{ position: 'relative', width: '100%', height: '240px', borderRadius: '8px', overflow: 'hidden', marginBottom: '20px', background: 'var(--gray-100)' }}>
                <Image
                  src="/placeholder.jpg"
                  alt={product.name}
                  fill
                  style={{ objectFit: 'cover' }}
                />
              </div>
              <div className="product-name">{product.name}</div>
              <div className="product-desc" style={{
                display: '-webkit-box',
                WebkitLineClamp: 3,
                WebkitBoxOrient: 'vertical',
                overflow: 'hidden',
                minHeight: '4.8em',
                marginBottom: '16px'
              }}>
                {product.description}
              </div>
              <div style={{ marginTop: 'auto' }}>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: '18px', fontWeight: 700, color: 'var(--orange)', marginBottom: '16px' }}>
                  {product.price}
                </div>
                <Link href={`/products/${product.slug}`} className="btn-primary" style={{ width: '100%', textAlign: 'center', appearance: 'none', display: 'block' }}>
                  View Product →
                </Link>
              </div>
            </div>
          ))}
        </div>

        {/* Pagination */}
        {totalPages > 1 && (
          <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '12px', marginTop: '64px', flexWrap: 'wrap' }}>
            <button
              onClick={() => setCurrentPage(prev => Math.max(prev - 1, 1))}
              disabled={currentPage === 1}
              className="btn-secondary"
              style={{ padding: '8px 20px', opacity: currentPage === 1 ? 0.3 : 1, color: 'var(--navy)', borderColor: 'var(--navy)' }}
            >
              Prev
            </button>

            <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap', justifyContent: 'center' }}>
              {Array.from({ length: totalPages }, (_, i) => i + 1).map((num) => (
                <button
                  key={num}
                  onClick={() => paginate(num)}
                  style={{
                    width: '40px',
                    height: '40px',
                    borderRadius: '4px',
                    border: '1px solid',
                    borderColor: currentPage === num ? 'var(--orange)' : 'var(--gray-200)',
                    background: currentPage === num ? 'var(--orange)' : 'transparent',
                    color: currentPage === num ? 'white' : 'var(--gray-600)',
                    cursor: 'pointer',
                    fontWeight: 600
                  }}
                >
                  {num}
                </button>
              ))}
            </div>

            <button
              onClick={() => setCurrentPage(prev => Math.min(prev + 1, totalPages))}
              disabled={currentPage === totalPages}
              className="btn-secondary"
              style={{ padding: '8px 20px', opacity: currentPage === totalPages ? 0.3 : 1, color: 'var(--navy)', borderColor: 'var(--navy)' }}
            >
              Next
            </button>
          </div>
        )}
      </section>
    </div>
  );
}
