// components/sections/ProcessSteps.tsx
// Numbered step cards with icons in a responsive grid
// Supports 3 design themes: default, timeline, gradient
'use client';

import { resolveIcon } from '@/lib/puck/iconMap';

interface ProcessStep {
  number: string;
  icon: string;
  title: string;
  description: string;
}

type ThemeKey = 'default' | 'timeline' | 'gradient' | 'ocean' | 'forest';

interface ThemeStyles {
  card: string;
  cardHover: string;
  numberBadge: string;
  numberBadgeHover: string;
  iconColor: string;
  connector: boolean;
  connectorColor: string;
}

const THEMES: Record<ThemeKey, ThemeStyles> = {
  default: {
    card: 'bg-white rounded-xl border border-soft-gray-border/40 p-6',
    cardHover: 'hover:shadow-lg hover:border-crimson-red/30',
    numberBadge: 'bg-crimson-red/10 text-crimson-red',
    numberBadgeHover: 'group-hover:bg-crimson-red group-hover:text-white',
    iconColor: 'text-crimson-red',
    connector: false,
    connectorColor: '',
  },
  timeline: {
    card: 'bg-white rounded-xl border border-slate-200 p-6 shadow-sm',
    cardHover: 'hover:shadow-lg hover:border-indigo-300',
    numberBadge: 'bg-indigo-600 text-white ring-4 ring-indigo-100',
    numberBadgeHover: 'group-hover:ring-indigo-200 group-hover:bg-indigo-700',
    iconColor: 'text-indigo-500',
    connector: true,
    connectorColor: 'bg-indigo-200',
  },
  gradient: {
    card: 'bg-gradient-to-br from-white to-orange-50/40 rounded-xl border border-orange-200/60 p-6 shadow-sm',
    cardHover: 'hover:shadow-lg hover:border-orange-300 hover:from-white hover:to-orange-50/80',
    numberBadge: 'bg-gradient-to-br from-orange-500 to-red-500 text-white shadow-lg shadow-orange-500/20',
    numberBadgeHover: 'group-hover:shadow-xl group-hover:shadow-orange-500/30',
    iconColor: 'text-orange-500',
    connector: true,
    connectorColor: 'bg-gradient-to-b from-orange-300 to-red-300',
  },
  ocean: {
    card: 'bg-gradient-to-br from-white to-blue-50/40 rounded-xl border border-blue-200/60 p-6 shadow-sm',
    cardHover: 'hover:shadow-lg hover:border-blue-300 hover:from-white hover:to-blue-50/80',
    numberBadge: 'bg-gradient-to-br from-blue-600 to-indigo-600 text-white shadow-lg shadow-blue-600/20',
    numberBadgeHover: 'group-hover:shadow-xl group-hover:shadow-blue-600/30',
    iconColor: 'text-blue-500',
    connector: true,
    connectorColor: 'bg-gradient-to-b from-blue-300 to-indigo-300',
  },
  forest: {
    card: 'bg-gradient-to-br from-white to-emerald-50/40 rounded-xl border border-emerald-200/60 p-6 shadow-sm',
    cardHover: 'hover:shadow-lg hover:border-emerald-300 hover:from-white hover:to-emerald-50/80',
    numberBadge: 'bg-gradient-to-br from-emerald-600 to-teal-600 text-white shadow-lg shadow-emerald-600/20',
    numberBadgeHover: 'group-hover:shadow-xl group-hover:shadow-emerald-600/30',
    iconColor: 'text-emerald-500',
    connector: true,
    connectorColor: 'bg-gradient-to-b from-emerald-300 to-teal-300',
  },
};

interface ProcessStepsProps {
  sectionTitle: string;
  sectionSubtitle?: string;
  steps: ProcessStep[];
  columns?: 2 | 3 | 4;
  theme?: ThemeKey;
}

export function ProcessSteps({ sectionTitle, sectionSubtitle, steps, columns = 3, theme = 'default' }: ProcessStepsProps) {
  const gridCols = columns === 2 ? 'md:grid-cols-2' : columns === 4 ? 'md:grid-cols-2 lg:grid-cols-4' : 'md:grid-cols-2 lg:grid-cols-3';
  const safeSteps = steps && steps.length > 0 ? steps : [];
  const t = THEMES[theme] || THEMES.default;

  return (
    <section className="w-full py-12 md:py-16">
    <div className="container max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
      <div className="text-center mb-10">
        <h2 className="text-2xl md:text-3xl font-bold text-white">{sectionTitle}</h2>
        {sectionSubtitle && (
          <p className="mt-3 text-text-light-gray max-w-2xl mx-auto">{sectionSubtitle}</p>
        )}
      </div>

      {safeSteps.length === 0 ? (
        <div className="text-center py-8 text-text-light-gray italic">
          Add steps using the editor panel →
        </div>
      ) : (
        <div className={`grid grid-cols-1 ${gridCols} gap-6`}>
          {safeSteps.map((step, index) => {
            const IconComponent = resolveIcon(step.icon);
            return (
              <div
                key={index}
                className={`group relative ${t.card} ${t.cardHover} transition-all duration-300`}
              >
                {/* Connector line (timeline/gradient themes) */}
                {t.connector && index < safeSteps.length - 1 && (
                  <div className={`hidden lg:block absolute top-6 -right-3 w-6 h-0.5 ${t.connectorColor}`} />
                )}
                <div className="flex items-start gap-4">
                  <div className="flex-shrink-0">
                    <span className={`flex items-center justify-center w-12 h-12 rounded-xl font-bold text-lg transition-all duration-300 ${t.numberBadge} ${t.numberBadgeHover}`}>
                      {step.number || String(index + 1).padStart(2, '0')}
                    </span>
                  </div>
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center gap-2 mb-2">
                      <IconComponent className={`w-4 h-4 ${t.iconColor} flex-shrink-0`} />
                      <h3 className="font-bold text-white text-base">{step.title}</h3>
                    </div>
                    <p className="text-sm text-text-light-gray leading-relaxed">{step.description}</p>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      )}
    </div>
    </section>
  );
}
