'use client';

import React, { useEffect, useState } from 'react';
import api from '@/lib/api';
import { SocialIcon } from './SocialIcon';

export type SocialMediaLink = {
  id: number;
  platform: string;
  name: string;
  url: string;
  order?: number;
};

const FALLBACK_LINKS: SocialMediaLink[] = [
  {
    id: 0,
    platform: 'facebook',
    name: 'Facebook',
    url: 'https://www.facebook.com/share/1Bn8LSydU4/',
  },
];

function normalizeLinks(response: unknown): SocialMediaLink[] {
  if (Array.isArray(response)) {
    return response as SocialMediaLink[];
  }

  if (
    response &&
    typeof response === 'object' &&
    'data' in response &&
    Array.isArray((response as { data: unknown }).data)
  ) {
    return (response as { data: SocialMediaLink[] }).data;
  }

  return [];
}

export const FooterSocialLinks: React.FC = () => {
  const [links, setLinks] = useState<SocialMediaLink[]>(FALLBACK_LINKS);

  useEffect(() => {
    let cancelled = false;

    const load = async () => {
      try {
        const response = await api.getSocialMediaLinks({ status: 'active' });
        const next = normalizeLinks(response).filter((link) => link.url);

        if (!cancelled && next.length > 0) {
          setLinks(next);
        } else if (!cancelled) {
          setLinks(FALLBACK_LINKS);
        }
      } catch (error) {
        console.error('Error fetching social media links:', error);
        if (!cancelled) {
          setLinks(FALLBACK_LINKS);
        }
      }
    };

    load();

    return () => {
      cancelled = true;
    };
  }, []);

  if (links.length === 0) {
    return null;
  }

  return (
    <div className="mt-6 flex flex-wrap gap-2">
      {links.map((link) => (
        <a
          key={link.id || link.url}
          href={link.url}
          target="_blank"
          rel="noopener noreferrer"
          aria-label={link.name || link.platform}
          className="flex h-10 w-10 items-center justify-center rounded-full border border-white/15 text-white/70 transition-colors hover:border-primary-500 hover:bg-primary-500 hover:text-neutral-900"
        >
          <SocialIcon platform={link.platform} />
        </a>
      ))}
    </div>
  );
};