// components/sections/IconNavGrid.tsx
// Quick-access icon navigation grid with 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 {
  iconBox: string;
  iconBoxHover: string;
  iconColor: string;
  iconColorHover: string;
  labelColor: string;
  labelHover: string;
}

const THEMES: Record<ThemeKey, ThemeStyles> = {
  default: {
    iconBox: 'bg-crimson-red/10 shadow-sm',
    iconBoxHover: 'group-hover:bg-crimson-red group-hover:shadow-lg group-hover:shadow-brand-primary/20',
    iconColor: 'text-crimson-red',
    iconColorHover: 'group-hover:text-white',
    labelColor: 'text-text-light-gray',
    labelHover: 'group-hover:text-crimson-red',
  },
  warm: {
    iconBox: 'bg-orange-100 shadow-sm',
    iconBoxHover: 'group-hover:bg-gradient-to-br group-hover:from-orange-500 group-hover:to-red-500 group-hover:shadow-lg group-hover:shadow-orange-500/20',
    iconColor: 'text-orange-500',
    iconColorHover: 'group-hover:text-white',
    labelColor: 'text-slate-600',
    labelHover: 'group-hover:text-orange-600',
  },
  professional: {
    iconBox: 'bg-slate-100 shadow-sm',
    iconBoxHover: 'group-hover:bg-slate-800 group-hover:shadow-lg',
    iconColor: 'text-slate-600',
    iconColorHover: 'group-hover:text-amber-400',
    labelColor: 'text-slate-500',
    labelHover: 'group-hover:text-slate-800',
  },
  ocean: {
    iconBox: 'bg-blue-100 shadow-sm',
    iconBoxHover: 'group-hover:bg-gradient-to-br group-hover:from-blue-600 group-hover:to-indigo-600 group-hover:shadow-lg group-hover:shadow-blue-500/20',
    iconColor: 'text-blue-500',
    iconColorHover: 'group-hover:text-white',
    labelColor: 'text-slate-600',
    labelHover: 'group-hover:text-blue-600',
  },
  forest: {
    iconBox: 'bg-emerald-100 shadow-sm',
    iconBoxHover: 'group-hover:bg-gradient-to-br group-hover:from-emerald-600 group-hover:to-teal-600 group-hover:shadow-lg group-hover:shadow-emerald-500/20',
    iconColor: 'text-emerald-500',
    iconColorHover: 'group-hover:text-white',
    labelColor: 'text-slate-600',
    labelHover: 'group-hover:text-emerald-600',
  },
};

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

interface IconNavGridProps {
  items?: NavItem[];
  theme?: ThemeKey;
  openInNewTab?: LinkTarget;
  relAttribute?: LinkRel;
}

const DEFAULT_ITEMS: NavItem[] = [
  { label: '入金不要ボーナス', href: '/category/入金不要ボーナス', iconName: 'gift' },
  { label: 'ボーナス活用術', href: '/category/ボーナス活用術', iconName: 'lightbulb' },
  { label: '最新記事', href: '/category/最新記事', iconName: 'newspaper' },
  { label: '著者プロフィール', href: '/author/編集部', iconName: 'users' },
  { label: 'お問い合わせ', href: '/contact', iconName: 'mail' },
];

export function IconNavGrid({ items = DEFAULT_ITEMS, theme = 'default', openInNewTab = 'same', relAttribute = 'follow' }: IconNavGridProps) {
  const t = THEMES[theme] || THEMES.default;
  const linkAttrs = getLinkAttributes({ openInNewTab, relAttribute });

  return (
    <div className="container mx-auto -mt-8 md:-mt-12 relative z-40 mb-16 max-w-7xl">
      <div className="flex flex-wrap justify-center gap-4 sm:gap-8 md:gap-16">
        {items.map((item, i) => {
          const Icon = resolveIcon(item.iconName);
          return (
            <Link href={item.href || '#'} key={i} {...linkAttrs} className="flex flex-col items-center gap-3 cursor-pointer group p-2 transition-all duration-300">
              <div className={`w-14 h-14 md:w-16 md:h-16 rounded-2xl flex items-center justify-center transition-all duration-300 ${t.iconBox} ${t.iconBoxHover}`}>
                <Icon className={`w-6 h-6 md:w-7 md:h-7 transition-colors duration-300 ${t.iconColor} ${t.iconColorHover}`} strokeWidth={1.5} />
              </div>
              <span className={`text-[10px] md:text-sm font-bold text-center transition-colors ${t.labelColor} ${t.labelHover}`}>{item.label}</span>
            </Link>
          );
        })}
      </div>
    </div>
  );
}
