'use client';

import React, { useState, useEffect } from 'react';
import StoreLayout from '@/components/layout/StoreLayout';
import { useLanguage } from '@/context/LanguageContext';
import { products } from '@/lib/data/products';
import ProductCard from '@/components/ui/ProductCard';
import styles from './deals.module.css';

export default function DealsPage() {
  const { t, language } = useLanguage();
  const dealProducts = products.filter(p => p.discount && p.discount > 0);
  
  // Simple countdown timer
  const [timeLeft, setTimeLeft] = useState({ h: 23, m: 59, s: 59 });
  useEffect(() => {
    const timer = setInterval(() => {
      setTimeLeft(prev => {
        let { h, m, s } = prev;
        if (s > 0) s--;
        else {
          s = 59;
          if (m > 0) m--;
          else { m = 59; if (h > 0) h--; else { h = 23; } }
        }
        return { h, m, s };
      });
    }, 1000);
    return () => clearInterval(timer);
  }, []);

  return (
    <StoreLayout>
      <div className={styles.page}>
        <div className="container">
          <div className={styles.hero}>
            <div className={styles.heroContent}>
              <h1 className={styles.title}>{t.deals.title}</h1>
              <p className={styles.subtitle}>{language === 'ar' ? 'أفضل العروض والخصومات لفترة محدودة!' : 'Best offers and discounts for a limited time!'}</p>
              
              <div className={styles.timerWrap}>
                <span className={styles.timerLabel}>{language === 'ar' ? 'ينتهي العرض خلال:' : 'Offer ends in:'}</span>
                <div className={styles.timer}>
                  <div className={styles.timeBlock}>
                    <span className={styles.timeValue}>{timeLeft.h.toString().padStart(2, '0')}</span>
                    <span className={styles.timeText}>{language === 'ar' ? 'ساعة' : 'Hours'}</span>
                  </div>
                  <span className={styles.colon}>:</span>
                  <div className={styles.timeBlock}>
                    <span className={styles.timeValue}>{timeLeft.m.toString().padStart(2, '0')}</span>
                    <span className={styles.timeText}>{language === 'ar' ? 'دقيقة' : 'Mins'}</span>
                  </div>
                  <span className={styles.colon}>:</span>
                  <div className={styles.timeBlock}>
                    <span className={styles.timeValue}>{timeLeft.s.toString().padStart(2, '0')}</span>
                    <span className={styles.timeText}>{language === 'ar' ? 'ثانية' : 'Secs'}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div className="products-grid">
            {dealProducts.map(product => (
              <ProductCard key={product.id} product={product} />
            ))}
          </div>
        </div>
      </div>
    </StoreLayout>
  );
}
