import React from 'react';
import { SiteSettings } from '../types';

interface BrandsPageProps {
  theme?: string;
  settings?: SiteSettings;
  onNavigate: (view: string, data?: any) => void;
}

const BrandsPage: React.FC<BrandsPageProps> = ({ theme = '01', settings, onNavigate }) => {
  let activeBrands: any[] = [];

  if (settings?.homePageJson) {
    try {
      const parsed = JSON.parse(settings.homePageJson);
      if (parsed.theme03?.brands?.length > 0) {
        activeBrands = parsed.theme03.brands;
      }
    } catch (e) {}
  }

  const isTheme03 = theme === '03';
  const primaryColor = isTheme03 ? '#E91E63' : undefined;

  return (
    <div className={`min-h-screen pb-24 animate-fade-in-up ${isTheme03 ? 'bg-slate-50' : 'bg-white dark:bg-slate-900'}`}>
      {/* Hero */}
      <div
        className="text-white py-10 md:py-16 mb-8 md:mb-12 shadow-sm text-center md:rounded-b-[40px]"
        style={primaryColor ? { background: primaryColor } : undefined}
      >
        <div className={!primaryColor ? 'bg-themePrimary' : ''} style={{ minHeight: 1 }} />
        <div
          className={`py-10 md:py-16 text-center ${!primaryColor ? 'bg-themePrimary text-white' : ''}`}
          style={primaryColor ? { background: primaryColor } : {}}
        >
          <div className="container mx-auto px-4">
            <h1 className={`text-2xl md:text-5xl font-black mb-2 tracking-tight ${isTheme03 ? 'font-serif' : 'font-bangla'}`}>
              Top Brands We Love
            </h1>
            <p className="text-white/90 text-sm md:text-lg hidden md:block max-w-xl mx-auto">
              Discover premium brands curated with love.
            </p>
          </div>
        </div>
      </div>

      {/* Brands grid — 2 col mobile, 5 col desktop */}
      <div className="container mx-auto px-3 md:px-4 max-w-6xl">
        {activeBrands.length > 0 ? (
          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-3 md:gap-6">
            {activeBrands.map((brand, idx) => (
              <div
                key={brand.id || idx}
                onClick={() => onNavigate('shop')}
                className={`rounded-2xl p-4 md:p-6 flex flex-col items-center justify-center shadow-sm hover:shadow-xl transition-all duration-300 border cursor-pointer group active:scale-95
                  ${isTheme03 ? 'bg-white border-pink-50' : 'bg-white dark:bg-slate-800 border-slate-100 dark:border-slate-700'}`}
              >
                {brand.logo ? (
                  <img
                    src={brand.logo}
                    alt={brand.name}
                    className="w-16 h-16 md:w-24 md:h-24 object-contain mix-blend-multiply mb-3 group-hover:scale-110 transition-transform duration-300"
                  />
                ) : (
                  <div className={`w-16 h-16 md:w-24 md:h-24 rounded-full flex items-center justify-center mb-3 ${isTheme03 ? 'bg-pink-50' : 'bg-slate-100'}`}>
                    <span className={`text-xl font-bold ${isTheme03 ? 'text-[#E91E63]' : 'text-slate-400'}`}>
                      {brand.name?.charAt(0)}
                    </span>
                  </div>
                )}
                <p className={`font-bold text-center text-xs md:text-sm uppercase tracking-wider
                  ${isTheme03 ? 'text-slate-800 group-hover:text-[#E91E63]' : 'text-slate-800 dark:text-white group-hover:text-themePrimary'}`}>
                  {brand.name}
                </p>
              </div>
            ))}
          </div>
        ) : (
          <div className="text-center py-16">
            <h3 className="text-lg font-bold text-slate-400">No brands have been added yet.</h3>
          </div>
        )}
      </div>
    </div>
  );
};

export default BrandsPage;
