'use client';

import React, { useState, useEffect } from 'react';
import { LucideIcon } from 'lucide-react';

interface MediaItem {
  imageSrc: string;
  imageAlt: string;
}

interface Feature {
  title: string;
  description: string;
  icon: LucideIcon;
  mediaItems: MediaItem[];
}

interface FeatureCardTwentyProps {
  title: string;
  description: string;
  animationType?: 'slide-up' | 'fade-in' | 'slide-left';
  textboxLayout?: 'default' | 'centered' | 'compact';
  useInvertedBackground?: boolean;
  features: Feature[];
}

export function FeatureCardTwenty({
  title,
  description,
  animationType = 'slide-up',
  textboxLayout = 'default',
  useInvertedBackground = false,
  features,
}: FeatureCardTwentyProps) {
  const [activeFeatureIndex, setActiveFeatureIndex] = useState(0);
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    setIsVisible(true);
  }, []);

  const getAnimationClass = () => {
    if (!isVisible) {
      switch (animationType) {
        case 'slide-up':
          return 'opacity-0 translate-y-8';
        case 'slide-left':
          return 'opacity-0 -translate-x-8';
        case 'fade-in':
        default:
          return 'opacity-0';
      }
    }

    switch (animationType) {
      case 'slide-up':
        return 'opacity-100 translate-y-0 transition-all duration-700 ease-out';
      case 'slide-left':
        return 'opacity-100 translate-x-0 transition-all duration-700 ease-out';
      case 'fade-in':
      default:
        return 'opacity-100 transition-opacity duration-700 ease-out';
    }
  };

  const getTextboxLayoutClass = () => {
    switch (textboxLayout) {
      case 'centered':
        return 'text-center';
      case 'compact':
        return 'text-left max-w-2xl';
      case 'default':
      default:
        return 'text-left';
    }
  };

  const bgClass = useInvertedBackground ? 'bg-slate-900 text-white' : 'bg-white text-slate-900';
  const activeFeature = features[activeFeatureIndex];
  const IconComponent = activeFeature.icon;

  return (
    <section className={`${bgClass} py-16 md:py-24 px-4 md:px-8 transition-colors duration-300`}>
      <div className="max-w-7xl mx-auto">
        {/* Header Section */}
        <div className={`mb-12 md:mb-16 ${getTextboxLayoutClass()} ${getAnimationClass()}`}>
          <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-4 leading-tight">
            {title}
          </h2>
          <p className={`text-lg md:text-xl ${useInvertedBackground ? 'text-slate-300' : 'text-slate-600'} max-w-3xl`}>
            {description}
          </p>
        </div>

        {/* Features Grid and Detail View */}
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 md:gap-12">
          {/* Feature Cards */}
          <div className="lg:col-span-1 space-y-4">
            {features.map((feature, index) => {
              const CardIcon = feature.icon;
              const isActive = index === activeFeatureIndex;

              return (
                <button
                  key={index}
                  onClick={() => setActiveFeatureIndex(index)}
                  className={`w-full p-4 md:p-6 rounded-lg transition-all duration-300 text-left ${
                    isActive
                      ? useInvertedBackground
                        ? 'bg-blue-600 text-white shadow-lg'
                        : 'bg-blue-50 border-2 border-blue-600 text-slate-900'
                      : useInvertedBackground
                      ? 'bg-slate-800 text-slate-300 hover:bg-slate-700'
                      : 'bg-slate-50 text-slate-700 hover:bg-slate-100 border-2 border-transparent'
                  }`}
                >
                  <div className="flex items-start gap-3">
                    <CardIcon className="w-6 h-6 flex-shrink-0 mt-1" />
                    <div className="flex-1">
                      <h3 className="font-semibold text-base md:text-lg mb-1">
                        {feature.title}
                      </h3>
                      <p className={`text-sm ${isActive ? '' : useInvertedBackground ? 'text-slate-400' : 'text-slate-600'}`}>
                        {feature.description}
                      </p>
                    </div>
                  </div>
                </button>
              );
            })}
          </div>

          {/* Active Feature Detail */}
          <div className="lg:col-span-2">
            <div className={`rounded-lg overflow-hidden ${useInvertedBackground ? 'bg-slate-800' : 'bg-slate-50'} p-6 md:p-8 transition-all duration-500`}>
              {/* Feature Header */}
              <div className="flex items-center gap-4 mb-6">
                <div className={`p-3 rounded-lg ${useInvertedBackground ? 'bg-blue-600' : 'bg-blue-100'}`}>
                  <IconComponent className={`w-8 h-8 ${useInvertedBackground ? 'text-white' : 'text-blue-600'}`} />
                </div>
                <div>
                  <h3 className="text-2xl md:text-3xl font-bold">
                    {activeFeature.title}
                  </h3>
                  <p className={`text-base ${useInvertedBackground ? 'text-slate-400' : 'text-slate-600'} mt-1`}>
                    {activeFeature.description}
                  </p>
                </div>
              </div>

              {/* Media Gallery */}
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                {activeFeature.mediaItems.map((media, index) => (
                  <div
                    key={index}
                    className="relative overflow-hidden rounded-lg aspect-video bg-slate-200 animate-fade-in"
                  >
                    <img
                      src={media.imageSrc}
                      alt={media.imageAlt}
                      className="w-full h-full object-cover hover:scale-105 transition-transform duration-300"
                    />
                  </div>
                ))}
              </div>

              {/* Indicator Dots */}
              <div className="flex justify-center gap-2 mt-6">
                {features.map((_, index) => (
                  <button
                    key={index}
                    onClick={() => setActiveFeatureIndex(index)}
                    className={`w-2 h-2 rounded-full transition-all duration-300 ${
                      index === activeFeatureIndex
                        ? useInvertedBackground
                          ? 'bg-blue-400 w-8'
                          : 'bg-blue-600 w-8'
                        : useInvertedBackground
                        ? 'bg-slate-600'
                        : 'bg-slate-300'
                    }`}
                    aria-label={`Go to feature ${index + 1}`}
                  />
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>

      <style jsx>{`
        @keyframes fadeIn {
          from {
            opacity: 0;
          }
          to {
            opacity: 1;
          }
        }

        .animate-fade-in {
          animation: fadeIn 0.5s ease-out;
        }
      `}</style>
    </section>
  );
}