// components/sections/CategoryGrid.tsx
// Category grid with icons and links – 5 themes
import React from 'react';
import Link from 'next/link';
import { getLinkAttributes, type LinkTarget, type LinkRel } from '@/lib/puck/linkHelpers';
import { resolveIcon } from '@/lib/puck/iconMap';

type ThemeKey = 'default' | 'warm' | 'professional' | 'ocean' | 'forest';

interface ThemeStyles {
  sectionBg: string;
  heading: string;
  subtitle: string;
  cardBg: string;
  cardHover: string;
  iconColor: string;
  iconBg: string;
  label: string;
}

const THEMES: Record<ThemeKey, ThemeStyles> = {
  default: {
    sectionBg: 'bg-white',
    heading: 'text-white',
    subtitle: 'text-text-light-gray',
    cardBg: 'bg-white border border-slate-200 shadow-sm',
    cardHover: 'hover:shadow-md hover:border-crimson-red/30 hover:-translate-y-1',
    iconColor: 'text-crimson-red',
    iconBg: 'bg-crimson-red/10',
    label: 'text-white',
  },
  warm: {
    sectionBg: 'bg-white',
    heading: 'text-slate-800',
    subtitle: 'text-slate-500',
    cardBg: 'bg-white border border-orange-200 shadow-sm',
    cardHover: 'hover:shadow-md hover:border-orange-300 hover:-translate-y-1',
    iconColor: 'text-orange-500',
    iconBg: 'bg-orange-100',
    label: 'text-slate-700',
  },
  professional: {
    sectionBg: 'bg-slate-50',
    heading: 'text-slate-800',
    subtitle: 'text-slate-500',
    cardBg: 'bg-white border border-slate-200 shadow-sm',
    cardHover: 'hover:shadow-md hover:border-slate-300 hover:-translate-y-1',
    iconColor: 'text-slate-600',
    iconBg: 'bg-slate-100',
    label: 'text-slate-700',
  },
  ocean: {
    sectionBg: 'bg-white',
    heading: 'text-slate-800',
    subtitle: 'text-slate-500',
    cardBg: 'bg-white border border-blue-200 shadow-sm',
    cardHover: 'hover:shadow-md hover:border-blue-300 hover:-translate-y-1',
    iconColor: 'text-blue-500',
    iconBg: 'bg-blue-100',
    label: 'text-slate-700',
  },
  forest: {
    sectionBg: 'bg-white',
    heading: 'text-slate-800',
    subtitle: 'text-slate-500',
    cardBg: 'bg-white border border-emerald-200 shadow-sm',
    cardHover: 'hover:shadow-md hover:border-emerald-300 hover:-translate-y-1',
    iconColor: 'text-emerald-500',
    iconBg: 'bg-emerald-100',
    label: 'text-slate-700',
  },
};

interface CategoryItem {
  label: string;
  href: string;
  iconName: string;
}

interface CategoryGridProps {
  title?: string;
  subtitle?: string;
  items?: CategoryItem[];
  buttonText?: string;
  buttonUrl?: string;
  buttonStyle?: string;
  theme?: ThemeKey;
  openInNewTab?: LinkTarget;
  relAttribute?: LinkRel;
}

export function CategoryGrid({
  title = '提供する金融教育カテゴリー',
  subtitle = 'あなたのライフステージと興味に合わせた情報を見つけてください。',
  items = [],
  buttonText = '',
  buttonUrl = '',
  buttonStyle = 'filled',
  theme = 'default',
  openInNewTab = 'same',
  relAttribute = 'follow',
}: CategoryGridProps) {
  const t = THEMES[theme] || THEMES.default;
  const linkAttrs = getLinkAttributes({ openInNewTab, relAttribute });
  const safeItems = items && items.length > 0 ? items : [];

  return (
    <section className={`w-full py-16 ${t.sectionBg}`}>
      <div className="container max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {title && (
          <h2 className={`text-2xl md:text-3xl font-bold text-center mb-3 ${t.heading}`}>{title}</h2>
        )}
        {subtitle && (
          <p className={`text-sm md:text-base text-center mb-10 ${t.subtitle}`}>{subtitle}</p>
        )}
        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
          {safeItems.map((item, i) => {
            const Icon = resolveIcon(item.iconName);
            return (
              <Link
                key={i}
                href={item.href || '#'}
                {...linkAttrs}
                className={`rounded-xl p-5 flex flex-col items-center gap-3 text-center transition-all duration-300 ${t.cardBg} ${t.cardHover}`}
              >
                <div className={`w-12 h-12 rounded-xl flex items-center justify-center ${t.iconBg}`}>
                  <Icon className={`w-6 h-6 ${t.iconColor}`} strokeWidth={1.5} />
                </div>
                <span className={`text-sm font-bold ${t.label}`}>{item.label}</span>
              </Link>
            );
          })}
        </div>

        {/* CTA Button */}
        {buttonText && (
          <div className="text-center mt-10">
            <Link
              href={buttonUrl || '#'}
              {...linkAttrs}
              className={`inline-flex items-center gap-2 px-8 py-3.5 rounded-xl font-semibold text-sm transition-all duration-200 ${
                buttonStyle === 'outlined' ? `border-2 ${t.iconColor} border-current hover:opacity-80`
                : buttonStyle === 'ghost' ? `${t.iconColor} hover:opacity-70 underline underline-offset-4`
                : `bg-crimson-red text-white hover:bg-crimson-red/90 shadow-md`
              }`}
            >
              {buttonText}
            </Link>
          </div>
        )}
      </div>
    </section>
  );
}
