'use client';

import { useEffect, useState, useCallback } from 'react';
import Link from 'next/link';
import type { Banner } from '@/lib/types';
import { resolveUploadUrl, cn } from '@/lib/utils';

const INTERVAL = 5000;

export function BannerCarousel({ banners }: { banners: Banner[] }) {
  const [idx, setIdx] = useState(0);
  const total = banners.length;

  const next = useCallback(() => {
    setIdx((p) => (total === 0 ? 0 : (p + 1) % total));
  }, [total]);

  useEffect(() => {
    if (total <= 1) return;
    const t = setInterval(next, INTERVAL);
    return () => clearInterval(t);
  }, [next, total]);

  if (total === 0) {
    return <HeroPlaceholder />;
  }

  return (
    <div className="relative h-[420px] overflow-hidden bg-gray-100">
      {banners.map((b, i) => (
        <div
          key={b.id}
          className={cn(
            'absolute inset-0 transition-opacity duration-700',
            i === idx ? 'opacity-100' : 'opacity-0',
          )}
        >
          {b.link ? (
            <Link href={b.link} target="_blank" rel="noreferrer" className="block h-full w-full">
              <BG image={b.image} title={b.title} />
            </Link>
          ) : (
            <BG image={b.image} title={b.title} />
          )}
        </div>
      ))}
      {total > 1 && (
        <div className="absolute bottom-4 left-1/2 flex -translate-x-1/2 gap-2">
          {banners.map((_, i) => (
            <button
              key={i}
              aria-label={`第 ${i + 1} 张`}
              onClick={() => setIdx(i)}
              className={cn(
                'h-2 rounded-full transition-all',
                i === idx ? 'w-6 bg-white' : 'w-2 bg-white/50',
              )}
            />
          ))}
        </div>
      )}
    </div>
  );
}

function BG({ image, title }: { image: string; title: string }) {
  return (
    <div
      className="relative h-full w-full bg-cover bg-center"
      style={{ backgroundImage: `url(${resolveUploadUrl(image)})` }}
    >
      <div className="absolute inset-0 bg-black/40" />
      <div className="container-page flex h-full items-center">
        <h2 className="max-w-xl text-2xl font-bold leading-snug text-white sm:text-3xl md:text-4xl">
          {title}
        </h2>
      </div>
    </div>
  );
}

function HeroPlaceholder() {
  return (
    <div className="relative flex h-[480px] items-center overflow-hidden bg-gradient-to-br from-brand-700 via-brand-600 to-brand-800">
      <div
        className="absolute inset-0 opacity-30"
        style={{
          backgroundImage:
            'radial-gradient(circle at 20% 50%, rgba(255,255,255,0.15) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(255,255,255,0.1) 0%, transparent 40%)',
        }}
      />
      <div className="container-page relative">
        <span className="inline-block rounded-full bg-white/15 px-4 py-1.5 text-sm text-white backdrop-blur">
          物业管理系统 · 小程序 · SaaS
        </span>
        <h1 className="mt-6 max-w-2xl text-4xl font-bold leading-tight text-white sm:text-5xl md:text-6xl">
          让物业管理
          <br />
          像发微信一样简单
        </h1>
        <p className="mt-4 max-w-xl text-lg text-brand-100">
          懂物业，更懂&ldquo;省&rdquo;心。一站式物业管理平台，覆盖缴费、报修、公告、巡检全流程。
        </p>
        <div className="mt-8 flex flex-col gap-4 sm:flex-row">
          <Link
            href="/contact"
            className="rounded-lg bg-white px-7 py-3 text-sm font-semibold text-brand-700 shadow-lg transition-colors hover:bg-brand-50"
          >
            预约演示
          </Link>
          <Link
            href="/products"
            className="rounded-lg border border-white/40 px-7 py-3 text-sm font-medium text-white transition-colors hover:bg-white/10"
          >
            了解产品
          </Link>
        </div>
      </div>
    </div>
  );
}