'use client';

import { useState, useEffect } from 'react';
import { HeroSection } from '@/components/home/HeroSection';
import { FeaturesSection } from '@/components/home/FeaturesSection';
import { TopProfessionals } from '@/components/home/TopProfessionals';
import { TestimonialsSection } from '@/components/home/TestimonialsSection';
import { cmsService, resolveImageUrl } from '@/services/cms.service';
import type { HeroContent, FeaturesContent, TopProfessionalsContent, TestimonialsContent } from '@/types/cms';

// Shared landing/dashboard content rendered by both /home and /user/dashboard.
export function HomeDashboard() {
  const [cmsData, setCmsData] = useState<Record<string, unknown>>({});
  const [cmsLoaded, setCmsLoaded] = useState(false);

  useEffect(() => {
    const fetchCms = async () => {
      try {
        const sections = await cmsService.getPageContent('landing');
        const data: Record<string, unknown> = {};
        for (const s of sections) {
          const content = s.content as Record<string, unknown>;
          // Resolve S3 keys in image fields
          if (s.sectionKey === 'features' && Array.isArray(content.features)) {
            for (const feat of content.features as { iconPath?: string }[]) {
              if (feat.iconPath) feat.iconPath = await resolveImageUrl(feat.iconPath);
            }
          }
          if (s.sectionKey === 'testimonials' && Array.isArray(content.stats)) {
            for (const stat of content.stats as { iconPath?: string }[]) {
              if (stat.iconPath) stat.iconPath = await resolveImageUrl(stat.iconPath);
            }
          }
          data[s.sectionKey] = content;
        }
        setCmsData(data);
      } catch {
        // Use default content on error
      } finally {
        setCmsLoaded(true);
      }
    };
    fetchCms();
  }, []);

  return (
    <div>
      <HeroSection content={cmsData.hero as HeroContent | undefined} />
      {cmsLoaded && <FeaturesSection content={cmsData.features as FeaturesContent | undefined} />}
      <TopProfessionals content={cmsData.topProfessionals as TopProfessionalsContent | undefined} />
      <TestimonialsSection content={cmsData.testimonials as TestimonialsContent | undefined} />
    </div>
  );
}