'use client'

import Image from 'next/image'
import { useMemo, useState } from 'react'
import { useTranslations } from 'next-intl'
import { ArrowRight, ArrowUpRight, Building2, Clock } from 'lucide-react'
import { PageHero } from '@/components/page-hero'
import { DataStates } from '@/components/api/data-states'
import { InfiniteScrollSentinel } from '@/components/api/infinite-scroll-sentinel'
import { Link } from '@/i18n/navigation'
import { useFetchData } from '@/hooks/api'
import type { CaseStudy } from '@/lib/api/entities'
import { resolveAssetPath } from '@/lib/asset-paths'
import { useSiteData } from '@/contexts/site-data-context'
import { cn } from '@/lib/utils'

function CaseStudyCard({ study }: { study: CaseStudy }) {
  const t = useTranslations('updates.caseStudies')
  const href = study.slug ? `/resources/case-studies/${study.slug}` : '/resources/case-studies'

  return (
    <Link
      href={href}
      className="group flex h-full flex-col overflow-hidden border border-border/80 bg-white transition duration-300 hover:border-secondary/40 hover:shadow-[0_16px_40px_rgba(15,23,42,0.06)]"
    >
      <div className="relative aspect-[4/3] w-full shrink-0 overflow-hidden bg-muted">
        {study.image ? (
          <Image
            src={resolveAssetPath(study.image)}
            alt={study.title}
            fill
            sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
            quality={85}
            className="object-cover object-center transition-transform duration-700 group-hover:scale-[1.03]"
            loading="lazy"
          />
        ) : (
          <div className="absolute inset-0 bg-primary/10" />
        )}
      </div>

      <div className="flex flex-1 flex-col p-6 sm:p-7">
        <p className="text-[11px] font-bold uppercase tracking-[0.16em] text-secondary">
          {study.industry || 'Case study'}
        </p>
        <h3 className="mt-2 font-heading text-xl leading-snug text-foreground transition-colors group-hover:text-primary sm:text-[1.35rem]">
          {study.title}
        </h3>

        <div className="mt-3 flex flex-wrap items-center gap-3 text-sm text-muted-foreground">
          <span className="inline-flex items-center gap-1.5">
            <Building2 className="h-3.5 w-3.5 text-accent" />
            {study.company}
          </span>
          {study.duration ? (
            <span className="inline-flex items-center gap-1.5">
              <Clock className="h-3.5 w-3.5 text-accent" />
              {study.duration}
            </span>
          ) : null}
        </div>

        {study.challenge ? (
          <p className="mt-4 flex-1 text-sm leading-6 text-muted-foreground line-clamp-3">
            {study.challenge}
          </p>
        ) : null}

        <span className="mt-6 inline-flex items-center gap-2 text-sm font-semibold text-primary transition-all group-hover:gap-3">
          {t('view')}
          <ArrowUpRight className="h-4 w-4" />
        </span>
      </div>
    </Link>
  )
}

export default function CaseStudiesPage() {
  const { site } = useSiteData()
  const t = useTranslations('updates.caseStudies')
  const [activeIndustry, setActiveIndustry] = useState('All')

  const {
    items,
    isLoading,
    isError,
    isEmpty,
    error,
    refetch,
    loadMore,
    hasMore,
    isLoadingMore,
    pagination,
  } = useFetchData<CaseStudy>({
    endpoint: 'case-studies',
    infinite: true,
    initialPageSize: 9,
  })

  const caseStudies = items ?? []

  const industries = useMemo(() => {
    const unique = Array.from(new Set(caseStudies.map((study) => study.industry).filter(Boolean)))
    return unique
  }, [caseStudies])

  const visibleStudies = useMemo(() => {
    if (activeIndustry === 'All') return caseStudies
    return caseStudies.filter((study) => study.industry === activeIndustry)
  }, [activeIndustry, caseStudies])

  const studyCount = pagination?.count ?? caseStudies.length

  return (
    <main>
      <PageHero
        eyebrow={t('hero.eyebrow')}
        title={t('hero.title')}
        description={t('hero.description', { name: site.shortName })}
      />

      <section className="border-b border-border/70 bg-white py-16 sm:py-20 md:py-24">
        <div className="container-wide">
          <DataStates
            isLoading={isLoading}
            isError={isError}
            isEmpty={isEmpty}
            error={error}
            loadingMessage={t('loading')}
            emptyMessage={t('empty')}
            onRetry={refetch}
          >
            <div className="mb-10 grid gap-3 sm:grid-cols-3">
              {[
                { label: t('stats.published'), value: `${studyCount}+` },
                { label: t('stats.industries'), value: String(industries.length) },
                { label: t('stats.repeat'), value: '90%' },
              ].map(({ label, value }) => (
                <div
                  key={label}
                  className="border border-border/80 bg-[oklch(0.985_0.008_343)] px-6 py-5 text-center sm:text-left"
                >
                  <p className="font-heading text-3xl text-primary">{value}</p>
                  <p className="mt-1.5 text-sm font-medium text-muted-foreground">{label}</p>
                </div>
              ))}
            </div>

            {industries.length > 1 ? (
              <div className="mb-12 border-b border-border/70 pb-10">
                <p className="mb-4 text-[11px] font-bold uppercase tracking-[0.22em] text-secondary">
                  {t('filter')}
                </p>
                <div className="flex flex-wrap gap-2">
                  <button
                    type="button"
                    onClick={() => setActiveIndustry('All')}
                    className={cn(
                      'inline-flex h-10 items-center border px-4 text-sm font-semibold transition',
                      activeIndustry === 'All'
                        ? 'border-primary bg-primary text-primary-foreground'
                        : 'border-border bg-white text-foreground hover:border-primary hover:text-primary',
                    )}
                  >
                    {t('allIndustries')}
                  </button>
                  {industries.map((industry) => (
                    <button
                      key={industry}
                      type="button"
                      onClick={() => setActiveIndustry(industry)}
                      className={cn(
                        'inline-flex h-10 items-center border px-4 text-sm font-semibold transition',
                        activeIndustry === industry
                          ? 'border-primary bg-primary text-primary-foreground'
                          : 'border-border bg-white text-foreground hover:border-primary hover:text-primary',
                      )}
                    >
                      {industry}
                    </button>
                  ))}
                </div>
              </div>
            ) : null}

            {visibleStudies.length === 0 ? (
              <div className="border border-border/80 bg-[oklch(0.985_0.008_343)] px-6 py-12 text-center text-muted-foreground">
                {t('emptyIndustry')}
              </div>
            ) : (
              <div className="grid gap-5 md:grid-cols-2 xl:grid-cols-3">
                {visibleStudies.map((study) => (
                  <CaseStudyCard key={study.id} study={study} />
                ))}
              </div>
            )}

            <InfiniteScrollSentinel
              hasMore={hasMore}
              isLoadingMore={isLoadingMore}
              onLoadMore={loadMore}
            />
          </DataStates>
        </div>
      </section>

      <section className="relative overflow-hidden bg-[oklch(0.22_0.07_343)] py-16 text-white sm:py-20">
        <div
          className="pointer-events-none absolute inset-0"
          style={{
            backgroundImage:
              'radial-gradient(ellipse 50% 45% at 20% 30%, oklch(0.50 0.09 179 / 0.3), transparent)',
          }}
          aria-hidden
        />
        <div className="container-wide relative">
          <div className="grid gap-8 lg:grid-cols-[1.2fr_auto] lg:items-center lg:gap-12">
            <div>
              <p className="text-[11px] font-bold uppercase tracking-[0.22em] text-accent">
                {t('cta.eyebrow')}
              </p>
              <span className="mt-3 block h-0.5 w-10 bg-accent" aria-hidden />
              <h2 className="mt-4 font-heading text-3xl sm:text-4xl">
                {t('cta.title')}
              </h2>
              <p className="mt-4 max-w-2xl text-base leading-7 text-white/75">
                {t('cta.description')}
              </p>
            </div>
            <div className="flex flex-col gap-3 sm:flex-row">
              <Link
                href="/contact"
                className="inline-flex h-12 items-center justify-center gap-2 bg-accent px-7 text-sm font-semibold text-accent-foreground transition hover:bg-accent/90"
              >
                {t('cta.start')}
                <ArrowRight className="h-4 w-4" />
              </Link>
              <Link
                href="/services/bespoke-training"
                className="inline-flex h-12 items-center justify-center border border-white/25 px-7 text-sm font-semibold transition hover:border-accent hover:text-accent"
              >
                {t('cta.bespoke')}
              </Link>
            </div>
          </div>
        </div>
      </section>
    </main>
  )
}