'use client'

import { useState, useEffect } from 'react'
import { useTranslations, useLocale } from 'next-intl'
import { Building2, ExternalLink } from 'lucide-react'
import api from '@/lib/api'
import { PartnersData, Locale, t } from '@/types'

export default function PartnersPage() {
  const tl = useTranslations('partners')
  const locale = useLocale() as Locale
  const [data, setData] = useState<PartnersData | null>(null)
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    api
      .getPartners()
      .then(setData)
      .catch(() => {})
      .finally(() => setLoading(false))
  }, [])

  const resolveImage = (src?: string) => {
    if (!src) return undefined
    if (src.startsWith('http')) return src
    const base = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:5000/api'
    return `${base.replace('/api', '')}${src}`
  }

  const heroTitle = data ? t(data.heroTitle, locale) : tl('title')
  const heroSubtitle = data ? t(data.heroSubtitle, locale) : tl('description')
  const heroImage = resolveImage(data?.heroImage)
  const partners = data?.partners ?? []

  return (
    <div>
      <section
        className="relative min-h-[calc(100dvh-4rem)] lg:min-h-[calc(100dvh-100px)] flex items-end bg-secondary-950 overflow-hidden"
        style={heroImage ? { backgroundImage: `url(${heroImage})`, backgroundSize: 'cover', backgroundPosition: 'center' } : undefined}
      >
        {heroImage && <div className="absolute inset-0 bg-secondary-950/60" />}
        <div className="relative z-10 max-w-7xl mx-auto container-padding pb-16 md:pb-24 pt-32 w-full text-center">
          <span className="section-label !text-white/70">
            {tl('sectionLabel')}
          </span>
          <h1 className="text-4xl md:text-5xl font-bold mt-3 mb-6 tracking-tight text-white">
            {heroTitle}
          </h1>
          {heroSubtitle && (
            <p className="text-xl max-w-3xl mx-auto text-white/70">
              {heroSubtitle}
            </p>
          )}
        </div>
      </section>

      <section className="py-20 md:py-28">
        <div className="max-w-7xl mx-auto container-padding">
          {loading ? (
            <div className="min-h-[60vh] flex items-center justify-center">
              <div className="w-8 h-8 border-4 border-primary-200 border-t-primary-600 rounded-full animate-spin" />
            </div>
          ) : partners.length === 0 ? (
            <p className="text-center text-secondary-500 py-16">{tl('noPartners')}</p>
          ) : (
            <>
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                {partners.map((partner, idx) => {
                  const name = t(partner.name, locale)
                  const description = t(partner.description, locale)
                  const logo = resolveImage(partner.logo)

                  const cardContent = (
                    <>
                      <div className="aspect-video bg-primary-50 flex items-center justify-center overflow-hidden">
                        {logo ? (
                          // eslint-disable-next-line @next/next/no-img-element
                          <img
                            src={logo}
                            alt={name}
                            className="w-full h-full object-cover"
                          />
                        ) : (
                          <Building2 className="w-16 h-16 text-primary-200" />
                        )}
                      </div>
                      <div className="p-6">
                        <div className="flex items-start justify-between gap-2 mb-2">
                          <h3 className="text-lg font-bold text-secondary-900 group-hover:text-primary-600 transition-colors">{name}</h3>
                          {partner.website && <ExternalLink className="w-4 h-4 text-secondary-400 group-hover:text-primary-600 transition-colors flex-shrink-0 mt-1" />}
                        </div>
                        <p className="text-secondary-600 text-sm leading-relaxed">{description}</p>
                      </div>
                    </>
                  )

                  return partner.website ? (
                    <a
                      key={idx}
                      href={partner.website}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="card group"
                    >
                      {cardContent}
                    </a>
                  ) : (
                    <div key={idx} className="card group">
                      {cardContent}
                    </div>
                  )
                })}
              </div>
            </>
          )}
        </div>
      </section>
    </div>
  )
}