// components/sections/ReviewSection.tsx
// Full detailed review cards with 3 theme variants
'use client';

import { CheckCircle, XCircle, Lightbulb, ExternalLink } from 'lucide-react';
import Link from 'next/link';
import { getLinkAttributes, type LinkTarget, type LinkRel } from '@/lib/puck/linkHelpers';
import { parseLines, parseKeyValueLines } from '@/lib/puck/parseHelpers';

interface ReviewSpec {
  label: string;
  value: string;
  highlight?: boolean;
}

interface ReviewItem {
  rank: number;
  name: string;
  logo: string;
  tagline: string;
  description: string;
  specs: string | ReviewSpec[];
  pros: string | string[];
  cons: string | string[];
  editorialSummary: string;
  primaryCtaText: string;
  primaryCtaUrl: string;
  secondaryCtaText: string;
  secondaryCtaUrl: string;
}

type ThemeKey = 'default' | 'magazine' | 'compact' | 'ocean' | 'forest';

interface ThemeStyles {
  card: string;
  headerBg: string;
  headerText: string;
  rankColor: string;
  specTableBorder: string;
  specRowEven: string;
  specRowOdd: string;
  specLabelBg: string;
  specHighlight: string;
  prosHeader: string;
  prosBg: string;
  prosIcon: string;
  consHeader: string;
  consBg: string;
  consIcon: string;
  editorialBg: string;
  editorialBorder: string;
  editorialIcon: string;
  primaryCta: string;
  secondaryCta: string;
  logoFallbackBg: string;
  logoFallbackText: string;
}

const THEMES: Record<ThemeKey, ThemeStyles> = {
  default: {
    card: 'bg-white rounded-2xl border border-soft-gray-border/40 shadow-sm',
    headerBg: 'px-6 py-4 border-b border-soft-gray-border/20 bg-deep-black/30',
    headerText: 'text-white',
    rankColor: 'text-crimson-red',
    specTableBorder: 'border-soft-gray-border/30',
    specRowEven: 'bg-white',
    specRowOdd: 'bg-deep-black/50',
    specLabelBg: 'bg-deep-black/60',
    specHighlight: 'font-bold text-crimson-red',
    prosHeader: 'bg-crimson-red text-white',
    prosBg: 'bg-crimson-red/5 border-crimson-red/20',
    prosIcon: 'text-crimson-red',
    consHeader: 'bg-hover-red text-white',
    consBg: 'bg-soft-dark/20 border-soft-gray-border/40',
    consIcon: 'text-text-light-gray',
    editorialBg: 'bg-deep-black border-soft-gray-border/40',
    editorialBorder: '',
    editorialIcon: 'text-crimson-red',
    primaryCta: 'bg-crimson-red text-white hover:bg-hover-red shadow-md',
    secondaryCta: 'bg-white text-crimson-red border-2 border-crimson-red hover:bg-deep-black',
    logoFallbackBg: 'bg-crimson-red/10',
    logoFallbackText: 'text-crimson-red',
  },
  magazine: {
    card: 'bg-white rounded-2xl border border-orange-200 shadow-sm hover:shadow-lg transition-shadow',
    headerBg: 'px-6 py-4 border-b border-orange-100 bg-gradient-to-r from-orange-50 to-red-50',
    headerText: 'text-slate-800',
    rankColor: 'text-orange-600',
    specTableBorder: 'border-orange-200',
    specRowEven: 'bg-white',
    specRowOdd: 'bg-orange-50/40',
    specLabelBg: 'bg-orange-50/80',
    specHighlight: 'font-bold text-orange-600',
    prosHeader: 'bg-gradient-to-r from-emerald-500 to-teal-500 text-white',
    prosBg: 'bg-emerald-50 border-emerald-200',
    prosIcon: 'text-emerald-500',
    consHeader: 'bg-gradient-to-r from-red-400 to-pink-400 text-white',
    consBg: 'bg-red-50 border-red-200',
    consIcon: 'text-red-400',
    editorialBg: 'bg-gradient-to-r from-amber-50 to-orange-50 border-orange-200',
    editorialBorder: '',
    editorialIcon: 'text-amber-500',
    primaryCta: 'bg-gradient-to-r from-orange-500 to-red-500 text-white hover:from-orange-600 hover:to-red-600 shadow-lg shadow-orange-500/20',
    secondaryCta: 'bg-white text-orange-600 border-2 border-orange-300 hover:bg-orange-50',
    logoFallbackBg: 'bg-orange-50',
    logoFallbackText: 'text-orange-600',
  },
  compact: {
    card: 'bg-white rounded-2xl border border-slate-200 shadow-sm ring-1 ring-slate-100',
    headerBg: 'px-6 py-4 border-b border-slate-200 bg-slate-50',
    headerText: 'text-slate-800',
    rankColor: 'text-slate-500',
    specTableBorder: 'border-slate-200',
    specRowEven: 'bg-white',
    specRowOdd: 'bg-slate-50',
    specLabelBg: 'bg-slate-50',
    specHighlight: 'font-bold text-emerald-600',
    prosHeader: 'bg-slate-800 text-white',
    prosBg: 'bg-emerald-50/50 border-emerald-200',
    prosIcon: 'text-emerald-500',
    consHeader: 'bg-slate-600 text-white',
    consBg: 'bg-red-50/50 border-red-200',
    consIcon: 'text-red-400',
    editorialBg: 'bg-slate-50 border-slate-200',
    editorialBorder: '',
    editorialIcon: 'text-slate-600',
    primaryCta: 'bg-emerald-600 text-white hover:bg-emerald-700 shadow-md shadow-emerald-600/20',
    secondaryCta: 'bg-white text-slate-700 border-2 border-slate-300 hover:bg-slate-50',
    logoFallbackBg: 'bg-slate-100',
    logoFallbackText: 'text-slate-600',
  },

  ocean: {
    card: 'bg-white rounded-2xl border border-blue-200 shadow-sm hover:shadow-lg transition-shadow',
    headerBg: 'px-6 py-4 border-b border-blue-100 bg-gradient-to-r from-blue-50 to-indigo-50',
    headerText: 'text-slate-800',
    rankColor: 'text-blue-600',
    specTableBorder: 'border-blue-200',
    specRowEven: 'bg-white',
    specRowOdd: 'bg-blue-50/40',
    specLabelBg: 'bg-blue-50/80',
    specHighlight: 'font-bold text-blue-600',
    prosHeader: 'bg-gradient-to-r from-blue-500 to-indigo-500 text-white',
    prosBg: 'bg-blue-50 border-blue-200',
    prosIcon: 'text-blue-500',
    consHeader: 'bg-gradient-to-r from-red-400 to-pink-400 text-white',
    consBg: 'bg-red-50 border-red-200',
    consIcon: 'text-red-400',
    editorialBg: 'bg-gradient-to-r from-blue-50 to-indigo-50 border-blue-200',
    editorialBorder: '',
    editorialIcon: 'text-blue-500',
    primaryCta: 'bg-gradient-to-r from-blue-600 to-indigo-600 text-white hover:from-blue-700 hover:to-indigo-700 shadow-lg shadow-blue-600/20',
    secondaryCta: 'bg-white text-blue-600 border-2 border-blue-300 hover:bg-blue-50',
    logoFallbackBg: 'bg-blue-50',
    logoFallbackText: 'text-blue-600',
  },

  forest: {
    card: 'bg-white rounded-2xl border border-emerald-200 shadow-sm hover:shadow-lg transition-shadow',
    headerBg: 'px-6 py-4 border-b border-emerald-100 bg-gradient-to-r from-emerald-50 to-teal-50',
    headerText: 'text-slate-800',
    rankColor: 'text-emerald-600',
    specTableBorder: 'border-emerald-200',
    specRowEven: 'bg-white',
    specRowOdd: 'bg-emerald-50/40',
    specLabelBg: 'bg-emerald-50/80',
    specHighlight: 'font-bold text-emerald-600',
    prosHeader: 'bg-gradient-to-r from-emerald-500 to-teal-500 text-white',
    prosBg: 'bg-emerald-50 border-emerald-200',
    prosIcon: 'text-emerald-500',
    consHeader: 'bg-gradient-to-r from-amber-500 to-orange-500 text-white',
    consBg: 'bg-amber-50 border-amber-200',
    consIcon: 'text-amber-500',
    editorialBg: 'bg-gradient-to-r from-emerald-50 to-teal-50 border-emerald-200',
    editorialBorder: '',
    editorialIcon: 'text-emerald-500',
    primaryCta: 'bg-gradient-to-r from-emerald-600 to-teal-600 text-white hover:from-emerald-700 hover:to-teal-700 shadow-lg shadow-emerald-600/20',
    secondaryCta: 'bg-white text-emerald-600 border-2 border-emerald-300 hover:bg-emerald-50',
    logoFallbackBg: 'bg-emerald-50',
    logoFallbackText: 'text-emerald-600',
  },
};

interface ReviewSectionProps {
  sectionTitle: string;
  sectionSubtitle?: string;
  items: ReviewItem[];
  theme?: ThemeKey;
  openInNewTab?: LinkTarget;
  relAttribute?: LinkRel;
  anchorId?: string;
}

export function ReviewSection({ sectionTitle, sectionSubtitle, items, theme = 'default', openInNewTab = 'new', relAttribute = 'sponsored', anchorId }: ReviewSectionProps) {
  const safeItems = items && items.length > 0 ? items : [];
  const t = THEMES[theme] || THEMES.default;
  const linkAttrs = getLinkAttributes({ openInNewTab, relAttribute });

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

      {safeItems.length === 0 ? (
        <div className="text-center py-8 text-text-light-gray italic"></div>
      ) : (
      <div className="space-y-10">
        {safeItems.map((item) => {
          const parsedSpecs = parseKeyValueLines(item.specs);
          const parsedPros = parseLines(item.pros);
          const parsedCons = parseLines(item.cons);
          return (
          <article key={item.rank} className={`${t.card} overflow-hidden`}>
            {/* Header */}
            <div className={t.headerBg}>
              <h3 className={`text-lg font-bold ${t.headerText}`}>
                <span className={t.rankColor}></span>
                <Link href={item.primaryCtaUrl || '#'} {...linkAttrs} className="hover:underline">
                  {item.name || ''}
                </Link>
              </h3>
            </div>

            <div className="p-6">
              {/* Logo + Description */}
              <div className="flex flex-col md:flex-row gap-6 mb-8">
                <div className="flex-shrink-0">
                  {item.logo ? (
                    <Link href={item.primaryCtaUrl || '#'} {...linkAttrs} className="w-40 h-32 rounded-xl border border-slate-200 bg-white flex items-center justify-center overflow-hidden transition-transform hover:scale-105 hover:shadow-md">
                      <img src={item.logo} alt={item.name || ''} className="w-36 h-28 object-contain" />
                    </Link>
                  ) : (
                    <Link href={item.primaryCtaUrl || '#'} {...linkAttrs} className={`w-40 h-32 rounded-xl ${t.logoFallbackBg} flex items-center justify-center transition-transform hover:scale-105 hover:shadow-md`}>
                      <span className={`text-3xl font-bold ${t.logoFallbackText}`}>{(item.name || '??').slice(0, 2)}</span>
                    </Link>
                  )}
                </div>
                <div className="flex-1">
                  <h4 className="font-bold text-white text-lg mb-2">{item.tagline || ''}</h4>
                  <p className="text-sm text-text-light-gray leading-relaxed">{item.description || ''}</p>
                </div>
              </div>

              {/* Spec Table */}
              {parsedSpecs.length > 0 && (
                <div className={`overflow-hidden rounded-lg border ${t.specTableBorder} mb-8`}>
                  <table className="w-full text-sm">
                    <tbody>
                      {parsedSpecs.map((spec, i) => (
                        <tr key={i} className={`${i % 2 === 0 ? t.specRowEven : t.specRowOdd} border-b ${t.specTableBorder} last:border-0`}>
                          <td className={`px-5 py-3 font-semibold text-white ${t.specLabelBg} w-1/3 border-r ${t.specTableBorder} text-center`}>
                            {spec.label}
                          </td>
                          <td className={`px-5 py-3 ${spec.highlight ? t.specHighlight : 'text-white'}`}>
                            {spec.value}
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              )}

              {/* Pros & Cons */}
              <div className="grid md:grid-cols-2 gap-4 mb-8">
                {parsedPros.length > 0 && (
                  <div className={`rounded-xl overflow-hidden border ${t.prosBg}`}>
                    <div className={`${t.prosHeader} text-center py-2 text-sm font-bold`}></div>
                    <div className="p-4 space-y-2">
                      {parsedPros.map((pro, i) => (
                        <div key={i} className="flex items-start gap-2 text-sm text-white">
                          <CheckCircle className={`w-4 h-4 ${t.prosIcon} flex-shrink-0 mt-0.5`} />
                          {pro}
                        </div>
                      ))}
                    </div>
                  </div>
                )}

                {parsedCons.length > 0 && (
                  <div className={`rounded-xl overflow-hidden border ${t.consBg}`}>
                    <div className={`${t.consHeader} text-center py-2 text-sm font-bold`}></div>
                    <div className="p-4 space-y-2">
                      {parsedCons.map((con, i) => (
                        <div key={i} className="flex items-start gap-2 text-sm text-white">
                          <XCircle className={`w-4 h-4 ${t.consIcon} flex-shrink-0 mt-0.5`} />
                          {con}
                        </div>
                      ))}
                    </div>
                  </div>
                )}
              </div>

              {/* Editorial Summary */}
              {item.editorialSummary && (
                <div className={`${t.editorialBg} rounded-xl border p-5 mb-8`}>
                  <div className="flex items-start gap-2">
                    <Lightbulb className={`w-5 h-5 ${t.editorialIcon} flex-shrink-0 mt-0.5`} />
                    <div>
                      <h5 className="font-bold text-white mb-1"></h5>
                      <p className="text-sm text-text-light-gray leading-relaxed">{item.editorialSummary}</p>
                    </div>
                  </div>
                </div>
              )}

              {/* CTAs */}
              <div className="flex flex-col gap-3 max-w-md mx-auto">
                {item.primaryCtaText && (
                <Link
                  href={item.primaryCtaUrl || '#'}
          {...linkAttrs}
                  className={`flex items-center justify-center gap-2 w-full py-3.5 font-bold rounded-xl transition-all duration-200 text-sm ${t.primaryCta}`}
                >
                  {item.primaryCtaText}
                </Link>
                )}
                {item.secondaryCtaText && (
                <Link
                  href={item.secondaryCtaUrl || '#'}
          {...linkAttrs}
                  className={`flex items-center justify-center gap-2 w-full py-3.5 font-bold rounded-xl transition-all duration-200 text-sm ${t.secondaryCta}`}
                >
                  {item.secondaryCtaText}
                  <ExternalLink className="w-4 h-4" />
                </Link>
                )}
              </div>
            </div>
          </article>
          );
        })}
      </div>
      )}
    </div>
    </section>
  );
}
