'use client'

import Link from 'next/link'
import { ChevronLeft, ChevronRight } from 'lucide-react'
import { useEffect, useState } from 'react'
import { ImagePlaceholder } from '@/components/shared/ImagePlaceholder'
import type { NewsArticle } from '@/types'

function formatDate(value: string) {
  const [year, month, day] = value.slice(0, 10).split('-')
  return `${year}.${month}.${day}`
}

export function FeaturedNewsCarousel({ articles }: { articles: NewsArticle[] }) {
  const [activeIndex, setActiveIndex] = useState(0)
  const active = articles[activeIndex] ?? articles[0]

  useEffect(() => {
    if (articles.length < 2) return
    const timer = window.setInterval(() => {
      setActiveIndex((current) => (current + 1) % articles.length)
    }, 5200)
    return () => window.clearInterval(timer)
  }, [articles.length])

  if (!active) return null

  function move(step: number) {
    setActiveIndex((current) => (current + step + articles.length) % articles.length)
  }

  return (
    <section className="bg-white pb-9 pt-7">
      <div className="mx-auto max-w-[1280px] px-6">
        <div className="overflow-hidden rounded-[4px] bg-bg">
          <div className="grid min-h-[370px] lg:grid-cols-[1.08fr_0.92fr]">
            {active.coverUrl ? <div className="h-64 w-full bg-cover bg-center lg:h-full" style={{ backgroundImage: `url(${active.coverUrl})` }} /> : <ImagePlaceholder label={`${active.title}重点资讯配图`} className="h-64 w-full lg:h-full" />}

            <div className="flex flex-col justify-between p-6 md:p-8">
              <div>
                <div className="flex items-center gap-3 text-xs font-extrabold text-brand">
                  <span>重点资讯</span>
                  <span className="h-px w-10 bg-brand/30" />
                  <span>{formatDate(active.publishedAt)}</span>
                </div>
                <Link href={`/news/${active.slug}`} className="group mt-4 block">
                  <h1 className="text-[28px] font-extrabold leading-tight text-ink transition-colors group-hover:text-brand md:text-[34px]">
                    {active.title}
                  </h1>
                  <p className="mt-4 text-sm leading-7 text-muted">{active.summary}</p>
                </Link>
              </div>

              <div className="mt-7">
                <div className="flex items-center justify-between gap-4">
                  <div className="flex gap-2">
                    {articles.map((item, index) => (
                      <button
                        key={item.id}
                        type="button"
                        onClick={() => setActiveIndex(index)}
                        className={`h-1.5 rounded-full transition-all ${index === activeIndex ? 'w-9 bg-brand' : 'w-4 bg-line-dark hover:bg-muted'}`}
                        aria-label={`切换到第 ${index + 1} 条重点资讯`}
                      />
                    ))}
                  </div>
                  <div className="flex gap-2">
                    <button
                      type="button"
                      onClick={() => move(-1)}
                      className="grid h-9 w-9 place-items-center rounded-[4px] border border-line bg-white text-muted hover:border-brand hover:text-brand"
                      aria-label="上一条重点资讯"
                    >
                      <ChevronLeft className="h-4 w-4" />
                    </button>
                    <button
                      type="button"
                      onClick={() => move(1)}
                      className="grid h-9 w-9 place-items-center rounded-[4px] border border-line bg-white text-muted hover:border-brand hover:text-brand"
                      aria-label="下一条重点资讯"
                    >
                      <ChevronRight className="h-4 w-4" />
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}
