import { motion, AnimatePresence } from 'framer-motion';
import {
  Monitor,
  Headphones,
  Phone,
  Globe,
  Mail,
  ShieldCheck,
  ChevronRight,
} from 'lucide-react';
import type { ServiceInterests } from '@/types/quote';

export interface StepServiceDiscoveryProps {
  serviceInterests: ServiceInterests;
  onSetServiceInterest: (service: keyof ServiceInterests, enabled: boolean) => void;
}

interface ServiceCardDef {
  key: keyof ServiceInterests;
  icon: typeof Monitor;
  title: string;
  tagline: string;
  description: string;
  highlights: string[];
  core?: boolean;
}

const serviceCards: ServiceCardDef[] = [
  {
    key: 'gps',
    icon: Monitor,
    title: 'Managed IT & Monitoring',
    tagline: 'Core Service',
    description:
      "Our Guru Protection Suite provides 24/7 endpoint monitoring, automated patch management, antivirus, and proactive security — so issues get resolved before they impact your business.",
    highlights: [
      'Remote monitoring & management',
      'Patch management & antivirus',
      'Proactive security alerts',
    ],
    core: true,
  },
  {
    key: 'support',
    icon: Headphones,
    title: 'Help Desk & Support',
    tagline: 'Labor Packages',
    description:
      "From pay-as-you-go to unlimited plans, our help desk gives you access to real technicians who know your environment. Remote support, on-site visits, and pre-purchased block time available.",
    highlights: [
      'Help desk & remote support',
      'On-site technician visits',
      'Pre-purchased block time savings',
    ],
  },
  {
    key: 'voip',
    icon: Phone,
    title: 'VoIP Phone System',
    tagline: 'Business Communications',
    description:
      "Modern cloud phone system with HD voice, video conferencing, mobile apps, and advanced call management. Hardware options from desk phones to wireless headsets.",
    highlights: [
      'Cloud-based phone system',
      'Video conferencing & mobile app',
      'Hardware rental or purchase',
    ],
  },
  {
    key: 'webHosting',
    icon: Globe,
    title: 'Web Hosting',
    tagline: 'Managed Hosting',
    description:
      "Secure, fast web hosting with free SSL certificates, automated backups, and staging environments. From a single site to unlimited — we manage the infrastructure so you don't have to.",
    highlights: [
      'Managed hosting with SSL & backups',
      'Staging environments',
      'Performance optimization & CDN',
    ],
  },
  {
    key: 'email',
    icon: Mail,
    title: 'Email Services',
    tagline: 'Business Email & Security',
    description:
      "Business email powered by Microsoft 365 or our hosted platform. Add advanced spam filtering, phishing simulations, security awareness training, and email archiving.",
    highlights: [
      'Microsoft 365 or hosted email',
      'Advanced spam & phishing protection',
      'Security training & compliance',
    ],
  },
];

const stagger = {
  hidden: {},
  visible: { transition: { staggerChildren: 0.07 } },
};

const cardVariant = {
  hidden: { opacity: 0, y: 16 },
  visible: {
    opacity: 1,
    y: 0,
    transition: { duration: 0.4, ease: [0.25, 0.46, 0.45, 0.94] as const },
  },
};

export function StepServiceDiscovery({
  serviceInterests,
  onSetServiceInterest,
}: StepServiceDiscoveryProps) {
  const selectedCount = Object.values(serviceInterests).filter(Boolean).length;

  return (
    <motion.div
      variants={stagger}
      initial="hidden"
      animate="visible"
      className="space-y-8"
    >
      {/* Header */}
      <motion.div variants={cardVariant} className="text-center max-w-2xl mx-auto">
        <h2
          className="text-2xl sm:text-3xl font-bold text-[#333d49] mb-2"
          style={{ fontFamily: "'Plus Jakarta Sans', sans-serif" }}
        >
          What services interest you?
        </h2>
        <p className="text-gray-400 text-sm sm:text-base leading-relaxed">
          Toggle the services you&rsquo;d like to explore. We&rsquo;ll customize the rest of
          your experience based on your selections.
        </p>
      </motion.div>

      {/* Service cards */}
      <motion.div variants={stagger} className="space-y-3">
        {serviceCards.map((card) => {
          const isActive = serviceInterests[card.key];

          return (
            <motion.div
              key={card.key}
              variants={cardVariant}
              layout
              className={`
                relative rounded-2xl border-2 transition-all duration-300 overflow-hidden
                ${isActive
                  ? 'border-[#fe7400]/30 bg-white shadow-[0_2px_12px_rgba(254,116,0,0.08)]'
                  : 'border-gray-200/60 bg-white/60 hover:border-gray-300'
                }
              `}
            >
              {/* Card header — always visible, acts as toggle */}
              <button
                type="button"
                onClick={() => {
                  if (!card.core) {
                    onSetServiceInterest(card.key, !isActive);
                  }
                }}
                className={`
                  w-full flex items-center gap-4 px-5 py-4 sm:px-6 sm:py-5 text-left
                  ${card.core ? 'cursor-default' : 'cursor-pointer'}
                `}
              >
                {/* Icon */}
                <div
                  className={`
                    flex items-center justify-center w-10 h-10 sm:w-11 sm:h-11 rounded-xl flex-shrink-0
                    transition-colors duration-300
                    ${isActive ? 'bg-[#fe7400]/10' : 'bg-gray-100'}
                  `}
                >
                  <card.icon
                    className={`
                      w-5 h-5 transition-colors duration-300
                      ${isActive ? 'text-[#fe7400]' : 'text-gray-400'}
                    `}
                  />
                </div>

                {/* Title & tagline */}
                <div className="flex-1 min-w-0">
                  <div className="flex items-center gap-2">
                    <h3
                      className={`
                        text-base sm:text-lg font-bold transition-colors duration-300
                        ${isActive ? 'text-[#333d49]' : 'text-gray-400'}
                      `}
                      style={{ fontFamily: "'Plus Jakarta Sans', sans-serif" }}
                    >
                      {card.title}
                    </h3>
                    {card.core && (
                      <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-[#fe7400]/10 text-[#fe7400] text-[10px] font-bold uppercase tracking-wide">
                        <ShieldCheck className="w-3 h-3" />
                        Core
                      </span>
                    )}
                  </div>
                  <p className="text-xs text-gray-400 mt-0.5">{card.tagline}</p>
                </div>

                {/* Toggle switch */}
                <div className="flex-shrink-0">
                  {card.core ? (
                    <div className="flex items-center gap-1.5 text-xs font-medium text-[#059669]">
                      <ShieldCheck className="w-3.5 h-3.5" />
                      Included
                    </div>
                  ) : (
                    <div
                      className={`
                        relative w-12 h-7 rounded-full transition-colors duration-300
                        ${isActive ? 'bg-[#fe7400]' : 'bg-gray-200'}
                      `}
                    >
                      <motion.div
                        className="absolute top-0.5 w-6 h-6 rounded-full bg-white shadow-sm"
                        animate={{ left: isActive ? '22px' : '2px' }}
                        transition={{ type: 'spring', stiffness: 500, damping: 30 }}
                      />
                    </div>
                  )}
                </div>
              </button>

              {/* Expanded detail — shows when active */}
              <AnimatePresence>
                {isActive && (
                  <motion.div
                    initial={{ height: 0, opacity: 0 }}
                    animate={{ height: 'auto', opacity: 1 }}
                    exit={{ height: 0, opacity: 0 }}
                    transition={{ duration: 0.3, ease: [0.25, 0.46, 0.45, 0.94] }}
                    className="overflow-hidden"
                  >
                    <div className="px-5 pb-5 sm:px-6 sm:pb-6 pt-0">
                      <div className="pl-14 sm:pl-[60px]">
                        {/* Subtle separator */}
                        <div className="w-12 h-[2px] bg-[#fe7400]/20 rounded-full mb-3" />

                        <p className="text-sm text-gray-500 leading-relaxed mb-3">
                          {card.description}
                        </p>

                        <ul className="space-y-1.5">
                          {card.highlights.map((h) => (
                            <li key={h} className="flex items-center gap-2 text-sm text-gray-500">
                              <ChevronRight className="w-3 h-3 text-[#fe7400] flex-shrink-0" />
                              {h}
                            </li>
                          ))}
                        </ul>
                      </div>
                    </div>
                  </motion.div>
                )}
              </AnimatePresence>
            </motion.div>
          );
        })}
      </motion.div>

      {/* Selection summary */}
      <motion.div
        variants={cardVariant}
        className="text-center pt-2"
      >
        <p className="text-sm text-gray-400">
          <span className="font-semibold text-[#fe7400]">{selectedCount}</span>
          {selectedCount === 1 ? ' service' : ' services'} selected
          {selectedCount > 0 && (
            <span className="text-gray-300 mx-1.5">&middot;</span>
          )}
          {selectedCount > 0 && (
            <span>Click Continue to configure each one</span>
          )}
        </p>
      </motion.div>
    </motion.div>
  );
}
