'use client'

import { useState, useEffect } from 'react';
import { FilamentTableV2 } from '../src/components/FilamentTableV2';
import { SaleCountdown } from '../src/components/SaleCountdown';
import ColorRequestModal from '../src/components/ColorRequestModal';
import { Filament } from '../src/types/filament';
import { filamentService } from '../src/services/api';
import { trackEvent } from '../src/components/MatomoAnalytics';

export default function Home() {
  const [filaments, setFilaments] = useState<Filament[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [darkMode, setDarkMode] = useState(false);
  const [mounted, setMounted] = useState(false);
  const [resetKey, setResetKey] = useState(0);
  const [showColorRequestModal, setShowColorRequestModal] = useState(false);
  // Removed V1/V2 toggle - now only using V2

  // Initialize dark mode from localStorage after mounting
  useEffect(() => {
    setMounted(true);
    const saved = localStorage.getItem('darkMode');
    if (saved) {
      setDarkMode(JSON.parse(saved));
    }
  }, []);

  // Update dark mode
  useEffect(() => {
    if (!mounted) return;
    
    localStorage.setItem('darkMode', JSON.stringify(darkMode));
    if (darkMode) {
      document.documentElement.classList.add('dark');
    } else {
      document.documentElement.classList.remove('dark');
    }
  }, [darkMode, mounted]);

  const fetchFilaments = async () => {
    try {
      setLoading(true);
      setError(null);
      
      const filamentsData = await filamentService.getAll();
      setFilaments(filamentsData);
    } catch (err: any) {
      console.error('API Error:', err);
      
      // More descriptive error messages
      if (err.code === 'ERR_NETWORK') {
        setError('Network Error - Unable to connect to API');
      } else if (err.response) {
        setError(`Server error: ${err.response.status} - ${err.response.statusText}`);
      } else if (err.request) {
        setError('No response from server - check if API is running');
      } else {
        setError(err.message || 'Greška pri učitavanju filamenata');
      }
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchFilaments();
    
    // Auto-refresh data every 30 seconds to stay in sync
    const interval = setInterval(() => {
      fetchFilaments();
    }, 30000);
    
    // Also refresh when window regains focus
    const handleFocus = () => {
      fetchFilaments();
    };
    window.addEventListener('focus', handleFocus);
    
    return () => {
      clearInterval(interval);
      window.removeEventListener('focus', handleFocus);
    };
  }, []);

  const handleLogoClick = () => {
    setResetKey(prev => prev + 1);
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  return (
    <div className="min-h-screen bg-gray-50 dark:bg-gray-900 transition-colors">
      <header className="bg-gradient-to-r from-blue-50 to-orange-50 dark:from-gray-800 dark:to-gray-900 shadow-lg transition-all duration-300">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3 sm:py-4">
          <div className="flex flex-col sm:flex-row items-center justify-between gap-3 sm:gap-0">
            <div className="flex-1 flex flex-col sm:flex-row justify-center items-center gap-1 sm:gap-3 text-sm sm:text-lg">
              <span className="text-blue-700 dark:text-blue-300 font-medium animate-pulse text-center">
                Kupovina po gramu dostupna
              </span>
              <span className="hidden sm:inline text-gray-400 dark:text-gray-600">•</span>
              <span className="text-orange-700 dark:text-orange-300 font-medium animate-pulse text-center">
                Popust za 5+ komada
              </span>
            </div>
            
            <div className="flex-shrink-0">
              {mounted ? (
                <button
                  onClick={() => {
                    setDarkMode(!darkMode);
                    trackEvent('UI', 'Dark Mode Toggle', darkMode ? 'Light' : 'Dark');
                  }}
                  className="p-2 bg-white/50 dark:bg-gray-700/50 backdrop-blur text-gray-800 dark:text-gray-200 rounded-full hover:bg-white/80 dark:hover:bg-gray-600/80 transition-all duration-200 shadow-md"
                  title={darkMode ? 'Svetla tema' : 'Tamna tema'}
                >
                  {darkMode ? '☀️' : '🌙'}
                </button>
              ) : (
                <div className="w-10 h-10" />
              )}
            </div>
          </div>
        </div>
      </header>
      
      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {/* Logo centered above content */}
        <div className="flex justify-center mb-8">
          <button
            onClick={handleLogoClick}
            className="group transition-transform duration-200"
            title="Klikni za reset"
          >
            {/* Using next/image would cause preload, so we use regular img with loading="lazy" */}
            <img 
              src="/logo.png" 
              alt="Filamenteka" 
              loading="lazy"
              decoding="async"
              className="h-36 sm:h-44 md:h-52 w-auto drop-shadow-lg group-hover:drop-shadow-2xl transition-all duration-200"
              onError={(e) => {
                const target = e.currentTarget as HTMLImageElement;
                target.style.display = 'none';
              }}
            />
          </button>
        </div>
        
        {/* Action Buttons */}
        <div className="flex flex-col sm:flex-row justify-center items-center gap-4 mb-8">
          <a 
            href="https://www.kupujemprodajem.com/kompjuteri-desktop/3d-stampaci-i-oprema/originalni-bambu-lab-filamenti-na-stanju/oglas/182256246"
            target="_blank"
            rel="noopener noreferrer"
            onClick={() => trackEvent('External Link', 'Kupujem Prodajem', 'Homepage')}
            className="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-green-500 to-green-600 hover:from-green-600 hover:to-green-700 text-white font-semibold rounded-lg shadow-lg hover:shadow-xl transition-all duration-200 transform hover:scale-105"
          >
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            Kupi na Kupujem Prodajem
            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
            </svg>
          </a>
          
          <a 
            href="tel:+381677102845"
            onClick={() => trackEvent('Contact', 'Phone Call', 'Homepage')}
            className="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white font-semibold rounded-lg shadow-lg hover:shadow-xl transition-all duration-200 transform hover:scale-105"
          >
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
            </svg>
            Pozovi +381 67 710 2845
          </a>
          
          <button
            onClick={() => {
              setShowColorRequestModal(true);
              trackEvent('Navigation', 'Request Color', 'Homepage');
            }}
            className="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-purple-500 to-purple-600 hover:from-purple-600 hover:to-purple-700 text-white font-semibold rounded-lg shadow-lg hover:shadow-xl transition-all duration-200 transform hover:scale-105"
          >
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
            </svg>
            Zatraži Novu Boju
          </button>
        </div>
        
        <SaleCountdown 
          hasActiveSale={filaments.some(f => f.sale_active === true)}
          maxSalePercentage={Math.max(...filaments.filter(f => f.sale_active === true).map(f => f.sale_percentage || 0), 0)}
          saleEndDate={(() => {
            const activeSales = filaments.filter(f => f.sale_active === true && f.sale_end_date);
            if (activeSales.length === 0) return null;
            const latestSale = activeSales.reduce((latest, current) => {
              if (!latest.sale_end_date) return current;
              if (!current.sale_end_date) return latest;
              return new Date(current.sale_end_date) > new Date(latest.sale_end_date) ? current : latest;
            }).sale_end_date;
            return latestSale;
          })()}
        />
        
        <FilamentTableV2 
          key={resetKey}
          filaments={filaments} 
        />
      </main>
      
      <footer className="bg-gray-100 dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 mt-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
          <div className="flex flex-col sm:flex-row justify-center items-center gap-6">
            <div className="text-center sm:text-left">
              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">Kontakt</h3>
              <a 
                href="tel:+381677102845"
                className="inline-flex items-center gap-2 text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors"
                onClick={() => trackEvent('Contact', 'Phone Call', 'Footer')}
              >
                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                </svg>
                +381 67 710 2845
              </a>
            </div>
          </div>
        </div>
      </footer>
      
      {/* Color Request Modal */}
      <ColorRequestModal 
        isOpen={showColorRequestModal}
        onClose={() => setShowColorRequestModal(false)}
      />
    </div>
  );
}