'use client';

import { useRouter, useSearchParams } from 'next/navigation';
import { SECTION_ORDER } from '../sectionConfig';
import type { BenefitsPayload } from '../payloads';

interface BenefitsCardProps {
  payload: BenefitsPayload;
  slug: string;
}

const ICON_MAP: Record<string, string> = {
  moon: '\u263D',
  shield: '\u2714',
  flame: '\uD83D\uDD25',
  sparkles: '\u2728',
  book: '\uD83D\uDCD6',
};

const ICON_SVG: Record<string, React.ReactNode> = {
  moon: (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
    </svg>
  ),
  shield: (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
      <polyline points="9 12 11 14 15 10" />
    </svg>
  ),
  flame: (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z" />
    </svg>
  ),
  sparkles: (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" />
    </svg>
  ),
  book: (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" />
      <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" />
    </svg>
  ),
};

export default function BenefitsCard({ payload, slug }: BenefitsCardProps) {
  const router = useRouter();
  const searchParams = useSearchParams();
  const qs = searchParams.toString();
  const suffix = qs ? `?${qs}` : '';

  const handleContinue = () => {
    const idx = SECTION_ORDER.indexOf(slug);
    const next = SECTION_ORDER[idx + 1];
    if (next) router.push(`/onboarding/${next}${suffix}`);
  };

  return (
    <main className="benefits-page">
      <div className="benefits-content">
        <div className="benefits-image-wrap">
          <div className="benefits-image-bg" />
          <div className="benefits-image">
            <img src={payload.image} alt="" />
          </div>
        </div>

        <h1 className="benefits-title">{payload.title}</h1>

        <div className="benefits-list">
          {payload.benefits.map((b, i) => (
            <div key={i} className="benefit-item">
              <div className="benefit-icon">
                {ICON_SVG[b.icon] || <span>{ICON_MAP[b.icon] || '•'}</span>}
              </div>
              <span className="benefit-text">{b.text}</span>
            </div>
          ))}
        </div>
      </div>

      <div className="benefits-footer">
        <button type="button" className="cta-gold" onClick={handleContinue}>
          {payload.cta}
        </button>
      </div>
    </main>
  );
}
