import React from 'react';
import type { SpecialEvent } from '../../types';

interface SpecialEventsBannerProps {
  specialEvents: SpecialEvent[];
}

const SpecialEventsBanner: React.FC<SpecialEventsBannerProps> = ({ specialEvents }) => {
  const hasEvents = specialEvents && specialEvents.length > 0;

  const handleRedirect = (link: string) => {
    if (link) window.open(link, '_blank', 'noopener,noreferrer');
  };

  if (!hasEvents) return null;

  const minItems = 10;
  const repeats = Math.max(1, Math.ceil(minItems / Math.max(1, specialEvents.length)));
  const repeatedSegment = Array(repeats).fill(specialEvents).flat();
  const loopEvents = [...repeatedSegment, ...repeatedSegment];

  const isLooping = specialEvents.length > 4;
  const displayEvents = isLooping ? loopEvents : specialEvents;

  const getCardWidth = () => {
    if (isLooping) return '330px';
    const count = specialEvents.length;
    if (count === 1) return '510px';
    if (count === 2) return '430px';
    if (count === 3) return '370px';
    return '310px'; // 4 events
  };
  const cardWidth = getCardWidth();

  const marqueeText =
    Array(12).fill('⚡ SPECIAL EVENT ALERT ⚡ REGISTRATION LIVE ⚡').join('  ///  ') + '  ///  ';

  const defaultImage =
    'https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?auto=format&fit=crop&q=80&w=2070';

  return (
    <section
      className="-mx-6 md:-mx-12 lg:-mx-24 mt-16 mb-0 pb-20"
      style={{ overflow: 'hidden' }}
    >
      <style>{`
        @keyframes seb-ltr {
          0%   { transform: translateX(0); }
          100% { transform: translateX(-50%); }
        }
        @keyframes seb-rtl {
          0%   { transform: translateX(-50%); }
          100% { transform: translateX(0); }
        }
        .seb-ticker-ltr { display:flex; width:max-content; animation: seb-ltr 35s linear infinite; }
        .seb-ticker-rtl { display:flex; width:max-content; animation: seb-rtl 35s linear infinite; }

        @keyframes seb-slide {
          0%   { transform: translateX(0); }
          100% { transform: translateX(-50%); }
        }
        .seb-track {
          display: flex; width: max-content;
          animation: seb-slide 50s linear infinite;
          will-change: transform;
        }
        .seb-track:hover { animation-play-state: paused; }

        .seb-slider-container {
          overflow-x: auto;
          scrollbar-width: none;
        }
        .seb-slider-container::-webkit-scrollbar {
          display: none;
        }

        .seb-static-track {
          display: flex;
          width: 100%;
          justify-content: center;
        }
        @media (max-width: 1024px) {
          .seb-static-track {
            justify-content: flex-start;
            padding-left: 32px;
            padding-right: 32px;
            width: max-content;
          }
        }

        .seb-hazard {
          background: repeating-linear-gradient(
            -45deg,
            #000 0px, #000 8px,
            #facc15 8px, #facc15 16px
          );
          height: 6px;
          width: 100%;
        }

        .seb-tape {
          background: #facc15;
          height: 38px;
          overflow: hidden;
          display: flex;
          align-items: center;
          border-top: 3px solid #000;
          border-bottom: 3px solid #000;
          user-select: none;
        }

        .seb-card-img {
          transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        .seb-card:hover .seb-card-img {
          transform: skewX(5deg) skewY(3deg) scale(1.35) !important;
        }
        .seb-card:hover {
          box-shadow: 0 0 50px 6px rgba(250,204,21,0.20);
        }
        .seb-card-content-inner {
          transform: translateY(24px);
          transition: transform 0.45s cubic-bezier(0.25,0.46,0.45,0.94);
        }
        .seb-card:hover .seb-card-content-inner {
          transform: translateY(0);
        }
        .seb-card-desc {
          opacity: 0;
          transition: opacity 0.35s ease 0.1s;
        }
        .seb-card:hover .seb-card-desc {
          opacity: 1;
        }
        .seb-card-accent {
          opacity: 0;
          transition: opacity 0.3s ease;
          position: absolute; top: 0; left: 0; right: 0; height: 3px;
          background: #facc15;
        }
        .seb-card:hover .seb-card-accent { opacity: 1; }
      `}</style>

      {/* ── HEADER (Outside the skewed section, styled for light bg) ── */}
      <div className="text-center mb-16 px-6">
        <div
          className="inline-flex items-center gap-2 rounded-full border border-amber-500/20 text-amber-700 bg-amber-50 mb-5"
          style={{ padding: '6px 18px', fontSize: '9px', fontWeight: 900, letterSpacing: '0.18em', textTransform: 'uppercase' }}
        >
          <span className="rounded-full bg-amber-500 animate-pulse" style={{ width: 6, height: 6, display: 'inline-block' }} />
          Registry Live
        </div>

        <h2
          className="text-slate-900 leading-none mb-4"
          style={{ fontSize: 'clamp(2rem,5vw,4rem)', fontWeight: 900, letterSpacing: '-0.02em' }}
        >
          Special Events Registry
        </h2>

        <div className="mx-auto mb-5 rounded-full bg-amber-500" style={{ width: 72, height: 3 }} />

        <p className="text-slate-600 max-w-xl mx-auto font-medium" style={{ fontSize: '0.88rem', lineHeight: 1.6 }}>
          Explore premium workshops, hackathons, and institutional programs selected for
          Rajalakshmi Institute of Technology.
        </p>
      </div>

      {/*
       * ─────────────────────────────────────────────────────────
       *  SINGLE skewed wrapper: skewY(-3deg) makes the whole
       *  block lean diagonally. The outer <section> overflow:hidden
       *  and pb-20 prevents bottom-right clipping.
       * ─────────────────────────────────────────────────────────
       */}
      <div
        style={{
          transform: 'skewY(-3deg)',
          transformOrigin: 'center center',
          background: 'linear-gradient(135deg,#0d0d0d 0%,#1c1c1c 55%,#0d0d0d 100%)',
          padding: 0,
        }}
      >
        {/* ── TOP CAUTION TAPE ── */}
        <div>
          <div className="seb-hazard" />
          <div className="seb-tape">
            <div className="seb-ticker-ltr whitespace-nowrap">
              <span className="text-[10px] font-black uppercase tracking-[0.13em] text-black px-6">
                {marqueeText}
              </span>
              <span className="text-[10px] font-black uppercase tracking-[0.13em] text-black px-6">
                {marqueeText}
              </span>
            </div>
          </div>
          <div className="seb-hazard" />
        </div>

        {/* ── CARD SLIDER (Slanted, inherits skewY(-3deg) from parent) ── */}
        <div 
          className="seb-slider-container"
          style={{ padding: '40px 0 40px' }}
        >
          <div className={isLooping ? "seb-track" : "seb-static-track"}>
            {displayEvents.map((event, idx) => (
              <div
                key={event.id + '-' + idx}
                onClick={() => handleRedirect(event.link)}
                className="seb-card group relative cursor-pointer flex-shrink-0 overflow-hidden"
                style={{
                  width: cardWidth,
                  maxWidth: '85vw',
                  height: '440px',
                  marginRight: idx === displayEvents.length - 1 ? '0px' : '-28px',
                  clipPath: 'polygon(9% 0%,100% 0%,91% 100%,0% 100%)',
                  transform: `skewX(-5deg) translateY(${idx % 2 === 0 ? '20px' : '-20px'})`,
                  position: 'relative',
                }}
              >
                {/* BG image — counter-skew (skewX(5deg) skewY(3deg)) to look upright */}
                <div
                  className="seb-card-img absolute inset-0 bg-cover bg-center"
                  style={{
                    backgroundImage: 'url(' + (event.image || defaultImage) + ')',
                    transform: 'skewX(5deg) skewY(3deg) scale(1.22)',
                  }}
                />

                {/* Gradient overlay */}
                <div
                  className="absolute inset-0"
                  style={{ background: 'linear-gradient(to top,rgba(0,0,0,0.95) 0%,rgba(0,0,0,0.45) 55%,rgba(0,0,0,0.05) 100%)' }}
                />

                {/* Yellow top accent */}
                <div className="seb-card-accent" />

                {/* Content — counter-skew (skewX(5deg) skewY(3deg)) to look upright */}
                <div
                  className="absolute inset-0 flex flex-col justify-end"
                  style={{ padding: '26px 34px', transform: 'skewX(5deg) skewY(3deg)' }}
                >
                  <div className="seb-card-content-inner">
                    <span
                      className="block font-black text-[#facc15] uppercase mb-2"
                      style={{ fontSize: '9px', letterSpacing: '0.22em' }}
                    >
                      Featured Event
                    </span>
                    <h3
                      className="font-black text-white uppercase leading-tight mb-3"
                      style={{ fontSize: 'clamp(1rem,1.8vw,1.35rem)', letterSpacing: '0.04em' }}
                    >
                      {event.title}
                    </h3>
                    <p
                      className="seb-card-desc text-gray-300 font-medium leading-relaxed mb-5"
                      style={{ fontSize: '11px', display: '-webkit-box', WebkitLineClamp: 3, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}
                    >
                      {event.description}
                    </p>
                    <div className="flex items-center gap-2 pb-1" style={{ borderBottom: '2px solid rgba(255,255,255,0.55)', width: 'fit-content' }}>
                      <span className="font-black text-white uppercase" style={{ fontSize: '10px', letterSpacing: '0.25em' }}>Explore</span>
                      <span className="text-white text-xs">→</span>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* ── BOTTOM CAUTION TAPE ── */}
        <div>
          <div className="seb-hazard" />
          <div className="seb-tape">
            <div className="seb-ticker-rtl whitespace-nowrap">
              <span className="text-[10px] font-black uppercase tracking-[0.13em] text-black px-6">
                {marqueeText}
              </span>
              <span className="text-[10px] font-black uppercase tracking-[0.13em] text-black px-6">
                {marqueeText}
              </span>
            </div>
          </div>
          <div className="seb-hazard" />
        </div>
      </div>
    </section>
  );
};

export default SpecialEventsBanner;

