'use client';

import { useEffect, useState, type ReactElement } from 'react';
import Link from 'next/link';
import api from '@/lib/api';

const placeholderImages: Record<string, string> = {
  education: '/images/hero/slider-1.webp',
  'youth-support': '/images/hero/slider-2.webp',
  'food-security-agriculture': '/images/hero/slider-3.webp',
  default: '/images/hero/slider-1.webp',
};

interface Initiative {
  id: string;
  title: string;
  description: string;
  image: string;
  icon: ReactElement | null;
  stats: string;
  emoji: string;
}

function getPlaceholderImage(slug: string) {
  return placeholderImages[slug] || placeholderImages.default;
}

function stripHtml(text: string) {
  return text.replace(/<[^>]*>/g, '').trim();
}

/**
 * Our Initiatives — clean grid layout, API-driven
 */
export function WhatWeDo() {
  const [initiatives, setInitiatives] = useState<Initiative[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    fetchInitiatives();
  }, []);

  const fetchInitiatives = async () => {
    try {
      setLoading(true);
      setError(null);
      const response: unknown = await api.getThematicAreas();

      let areas: Record<string, unknown>[] = [];
      if (Array.isArray(response)) {
        areas = response;
      } else if (
        response &&
        typeof response === 'object' &&
        'data' in response &&
        Array.isArray((response as { data: unknown[] }).data)
      ) {
        areas = (response as { data: Record<string, unknown>[] }).data;
      }

      const mapped: Initiative[] = areas.map((area) => {
        let iconElement: ReactElement | null = null;
        if (area.icon && typeof area.icon === 'string') {
          iconElement = <div className="h-5 w-5" dangerouslySetInnerHTML={{ __html: area.icon }} />;
        }

        const slug = String(area.slug || area.id || '');
        const image =
          (area.image as string) ||
          (area.image_large as string) ||
          (area.image_medium as string) ||
          getPlaceholderImage(slug);

        return {
          id: slug,
          title: String(area.title || ''),
          description: stripHtml(String(area.description || '')),
          image,
          icon: iconElement,
          stats: String(area.stats || ''),
          emoji: String(area.emoji || ''),
        };
      });

      setInitiatives(mapped);
      if (mapped.length === 0) setError('No initiatives found.');
    } catch (err: unknown) {
      const message = err instanceof Error ? err.message : 'Failed to load initiatives';
      setError(message);
      setInitiatives([]);
    } finally {
      setLoading(false);
    }
  };

  return (
    <section id="what-we-do" className="bg-white">
      <div className="h-1.5 bg-primary-500" />

      <div className="mx-auto max-w-7xl px-4 py-16 sm:px-6 md:py-20 lg:px-8">
        {/* Header */}
        <div className="mb-10 max-w-2xl md:mb-12">
          <span className="inline-flex items-center rounded-full bg-navy-800 px-4 py-1.5 text-xs font-bold uppercase tracking-widest text-white">
            What We Do
          </span>
          <h2 className="mt-4 text-3xl font-black leading-tight text-neutral-900 sm:text-4xl">
            Our Initiatives
          </h2>
          <p className="mt-3 text-base leading-relaxed text-neutral-600">
            Integrated programmes in education, youth support, and agriculture and food security
            — reaching Afghanistan&apos;s most underserved communities.
          </p>
        </div>

        {/* Error */}
        {error && !loading && (
          <div className="mb-8 rounded-lg border border-red-200 bg-red-50 p-5 text-center">
            <p className="font-medium text-red-700">{error}</p>
            <button
              type="button"
              onClick={fetchInitiatives}
              className="mt-2 text-sm text-red-600 underline hover:text-red-800"
            >
              Try again
            </button>
          </div>
        )}

        {/* Loading */}
        {loading && (
          <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
            {Array.from({ length: 3 }).map((_, i) => (
              <div key={i} className="overflow-hidden rounded-lg border border-secondary-300 bg-white">
                <div className="h-48 animate-pulse bg-secondary-200" />
                <div className="space-y-3 p-5">
                  <div className="h-5 w-2/3 animate-pulse rounded bg-secondary-200" />
                  <div className="h-4 w-full animate-pulse rounded bg-secondary-200" />
                  <div className="h-4 w-4/5 animate-pulse rounded bg-secondary-200" />
                </div>
              </div>
            ))}
          </div>
        )}

        {/* Grid */}
        {!loading && initiatives.length > 0 && (
          <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
            {initiatives.map((item) => (
              <Link
                key={item.id}
                href={`/programs/${item.id}`}
                className="group flex flex-col overflow-hidden rounded-lg border border-secondary-300 bg-white transition-colors hover:border-primary-500"
              >
                <div className="relative h-48 overflow-hidden bg-secondary-200">
                  {/* eslint-disable-next-line @next/next/no-img-element */}
                  <img
                    src={item.image}
                    alt={item.title}
                    className="h-full w-full object-cover"
                  />
                </div>

                <div className="flex flex-1 flex-col p-5">
                  <div className="flex items-start justify-between gap-3">
                    <div className="flex items-center gap-2">
                      {(item.emoji || item.icon) && (
                        <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-secondary-200 text-base">
                          {item.emoji || item.icon}
                        </span>
                      )}
                      <h3 className="text-lg font-bold text-neutral-900 group-hover:text-primary-600">
                        {item.title}
                      </h3>
                    </div>
                  </div>

                  <p className="mt-2 flex-1 text-sm leading-relaxed text-neutral-600 line-clamp-3">
                    {item.description}
                  </p>

                  <div className="mt-4 flex items-center justify-between border-t border-secondary-200 pt-4">
                    {item.stats ? (
                      <span className="text-xs font-semibold text-primary-600">{item.stats}</span>
                    ) : (
                      <span />
                    )}
                    <span className="text-sm font-semibold text-navy-800 group-hover:text-primary-600">
                      Learn more →
                    </span>
                  </div>
                </div>
              </Link>
            ))}
          </div>
        )}

        {/* Empty */}
        {!loading && !error && initiatives.length === 0 && (
          <div className="rounded-lg border border-secondary-300 bg-secondary-100 py-12 text-center">
            <p className="text-neutral-500">No initiatives available.</p>
            <button
              type="button"
              onClick={fetchInitiatives}
              className="mt-3 text-sm text-primary-600 underline"
            >
              Refresh
            </button>
          </div>
        )}
      </div>
    </section>
  );
}