'use client';

import React, {useEffect, useState} from 'react';
import Image from 'next/image';
import {useTranslations} from 'next-intl';
import {getEpciLogo} from '@/services/epciService';

interface EpciLogoDisplayProps {
  suaId: number;
  suaNom: string;
  suaPhrasePartenaire?: string;
  suaUrl?: string;
  /** Article du Mag sur les territoires partenaires, cible du lien « en savoir plus ». */
  suaArticlePartenaire?: string;
}

const EpciLogoDisplay: React.FC<EpciLogoDisplayProps> = ({
  suaId,
  suaNom,
  suaPhrasePartenaire,
  suaUrl,
  suaArticlePartenaire
}) => {
  const t = useTranslations('Common');
  const [logoUrl, setLogoUrl] = useState<string | null>(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const fetchLogo = async () => {
      try {
        const url = await getEpciLogo(suaId);
        setLogoUrl(url);
      } catch {
        setLogoUrl(null);
      } finally {
        setIsLoading(false);
      }
    };

    fetchLogo();
  }, [suaId]);

  if (isLoading) {
    return null;
  }

  if (!logoUrl) {
    return null;
  }

  const content = (
    <div className="epci-logo-display">
      <div className="epci-logo-container">
        <Image
          src={logoUrl}
          alt={`Logo ${suaNom}`}
          width={150}
          height={80}
          style={{objectFit: 'contain'}}
        />
      </div>
      {suaPhrasePartenaire && (
        <p className="epci-phrase">{suaPhrasePartenaire}</p>
      )}

      <style jsx>{`
        .epci-logo-display {
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: var(--tk-space-4);
          background: var(--tk-gray-50);
          border-radius: var(--tk-radius-lg);
          border: 1px solid var(--tk-gray-200);
        }

        .epci-logo-container {
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .epci-phrase {
          margin-top: var(--tk-space-3);
          text-align: center;
          font-size: var(--tk-font-size-sm);
          color: var(--tk-gray-600);
          line-height: var(--tk-line-height-relaxed);
        }
      `}</style>
    </div>
  );

  const logoBlock = suaUrl ? (
    <a
      href={suaUrl}
      target="_blank"
      rel="noopener noreferrer"
      className="epci-link"
    >
      {content}
      <style jsx>{`
        .epci-link {
          display: block;
          transition: transform var(--tk-transition-fast);
        }
        .epci-link:hover {
          transform: scale(1.02);
        }
      `}</style>
    </a>
  ) : (
    content
  );

  // Le lien vers l'article reste hors du lien vers le site de l'EPCI : deux cibles, deux liens.
  return (
    <div className="epci-block">
      {logoBlock}
      {suaArticlePartenaire && (
        <a href={suaArticlePartenaire} className="epci-more-link">
          {t('epci_more_link')}
        </a>
      )}
      <style jsx>{`
        .epci-block {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: var(--tk-space-2);
        }
        .epci-more-link {
          font-size: var(--tk-font-size-sm);
        }
      `}</style>
    </div>
  );
};

export default EpciLogoDisplay;