import { motion } from 'framer-motion';
import { Check, Clock, DollarSign, Zap, Ban } from 'lucide-react';
import { Card, Button } from '@/components/ui';
import { ExpandableInfo } from '@/components/pricing/ExpandableInfo';
import { supportPlans, blockTimeOptions } from '@/lib/pricing-data';
import { formatCurrency } from '@/lib/utils';
import type { SupportSelection, SupportPlanId, BlockTimeId } from '@/types/quote';

export interface Step3SupportPlanProps {
  supportSelection: SupportSelection;
  endpointCount: number;
  onSetSupportPlan: (planId: SupportPlanId) => void;
  onSetBlockTimeEnabled: (enabled: boolean) => void;
  onSetBlockTime: (blockTimeId: BlockTimeId) => void;
  getSupportMonthly: () => number;
  getSupportBlockTimeOneTime: () => number;
}

export function Step3SupportPlan({
  supportSelection,
  endpointCount,
  onSetSupportPlan,
  onSetBlockTimeEnabled,
  onSetBlockTime,
  getSupportMonthly,
  getSupportBlockTimeOneTime,
}: Step3SupportPlanProps) {
  const getRecommendedPlan = (): SupportPlanId => {
    if (endpointCount <= 10) return 'essential';
    if (endpointCount <= 25) return 'standard';
    if (endpointCount <= 50) return 'premium';
    return 'priority';
  };

  const recommendedPlanId = getRecommendedPlan();
  const isNoPlan = supportSelection.planId === 'none';

  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.3 }}
      className="space-y-6"
    >
      {/* Service Explainer */}
      <div className="space-y-2">
        <p className="text-sm sm:text-base text-gray-500 leading-relaxed">
          <strong className="text-[#333d49]">Support plans</strong> give your team direct access
          to our IT engineers for troubleshooting, questions, and project work. Each plan includes
          a set number of monthly support hours covering help desk calls, remote assistance,
          and on-site visits (Premium and Priority tiers).
        </p>
        <p className="text-sm text-gray-400 leading-relaxed">
          Hours are used as-needed throughout the month &mdash; whether it's a quick password reset, a
          printer issue, or a more involved project like setting up a new workstation.
          If you don't need a monthly plan, you can skip it entirely and use block time
          for occasional projects, or simply pay as you go at our standard hourly rate.
        </p>
      </div>

      {/* Plan Selection Cards - No Plan + 4 plans = 5 columns on large screens */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-3 sm:gap-4">
        {/* No Plan / Pay-as-you-go Card */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0 }}
          whileHover={{ y: -3 }}
        >
          <Card
            variant={isNoPlan ? 'highlighted' : 'default'}
            padding="none"
            className="relative overflow-hidden cursor-pointer h-full"
            onClick={() => onSetSupportPlan('none')}
          >
            <div className="p-4">
              {/* Header */}
              <h3 className="text-base font-bold text-[#333d49] mb-1"
                  style={{ fontFamily: "'Plus Jakarta Sans', sans-serif" }}>
                No Plan
              </h3>
              <p className="text-xs text-gray-400 mb-3">Pay-as-you-go or block time only</p>

              {/* Pricing */}
              <div className="mb-3">
                <div className="flex items-baseline gap-1">
                  <span className="text-2xl font-bold text-[#333d49]"
                        style={{ fontFamily: "'Plus Jakarta Sans', sans-serif" }}>
                    $0
                  </span>
                  <span className="text-gray-400 text-xs">/mo</span>
                </div>
              </div>

              {/* No included hours */}
              <div className="flex items-center gap-2 mb-3 p-2.5 bg-[#f8f9fb] rounded-lg">
                <Ban className="w-4 h-4 text-gray-400" />
                <span className="text-sm font-semibold text-gray-400"
                      style={{ fontFamily: "'Plus Jakarta Sans', sans-serif" }}>
                  No monthly hours
                </span>
              </div>

              {/* Standard rate note */}
              <div className="flex items-center gap-2 mb-4 text-sm text-gray-400">
                <DollarSign className="w-4 h-4" />
                <span>
                  $175/hr standard rate
                </span>
              </div>

              {/* Select Button */}
              <Button
                variant={isNoPlan ? 'primary' : 'outline'}
                className="w-full"
                size="sm"
              >
                {isNoPlan ? 'Selected' : 'Select'}
              </Button>
            </div>
          </Card>
        </motion.div>

        {/* Monthly Plan Cards */}
        {supportPlans.map((plan, index) => {
          const isSelected = supportSelection.planId === plan.id;
          const isRecommended = plan.id === recommendedPlanId;

          return (
            <motion.div
              key={plan.id}
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: (index + 1) * 0.1 }}
              whileHover={{ y: -3 }}
            >
              <Card
                variant={isSelected ? 'highlighted' : 'default'}
                padding="none"
                className={`relative overflow-hidden cursor-pointer h-full ${
                  isRecommended && !isSelected ? 'ring-2 ring-[#fe7400]/30' : ''
                }`}
                onClick={() => onSetSupportPlan(plan.id)}
              >
                {/* Recommended Badge */}
                {isRecommended && (
                  <div className="bg-gradient-accent text-white text-[11px] font-bold px-3 py-1.5 text-center uppercase tracking-wider"
                       style={{ fontFamily: "'Plus Jakarta Sans', sans-serif" }}>
                    Recommended for You
                  </div>
                )}

                <div className="p-4">
                  {/* Header */}
                  <h3 className="text-base font-bold text-[#333d49] mb-1"
                      style={{ fontFamily: "'Plus Jakarta Sans', sans-serif" }}>
                    {plan.name}
                  </h3>
                  <p className="text-xs text-gray-400 mb-3">{plan.description}</p>

                  {/* Pricing */}
                  <div className="mb-3">
                    <div className="flex items-baseline gap-1">
                      <span className="text-2xl font-bold text-[#333d49]"
                            style={{ fontFamily: "'Plus Jakarta Sans', sans-serif" }}>
                        {formatCurrency(plan.monthlyPrice)}
                      </span>
                      <span className="text-gray-400 text-xs">/mo</span>
                    </div>
                  </div>

                  {/* Hours Included */}
                  <div className="flex items-center gap-2 mb-3 p-2.5 bg-[#f8f9fb] rounded-lg">
                    <Clock className="w-4 h-4 text-[#fe7400]" />
                    <span className="text-sm font-semibold text-[#333d49]"
                          style={{ fontFamily: "'Plus Jakarta Sans', sans-serif" }}>
                      {plan.includedHours} hrs included
                    </span>
                  </div>

                  {/* Effective Rate */}
                  <div className="flex items-center gap-2 mb-4 text-sm text-gray-400">
                    <DollarSign className="w-4 h-4" />
                    <span>
                      {formatCurrency(plan.effectiveHourlyRate)}/hr effective
                    </span>
                  </div>

                  {/* Select Button */}
                  <Button
                    variant={isSelected ? 'primary' : 'outline'}
                    className="w-full"
                    size="sm"
                  >
                    {isSelected ? 'Selected' : 'Select'}
                  </Button>
                </div>
              </Card>
            </motion.div>
          );
        })}
      </div>

      {/* Pay-as-you-go info when No Plan is selected */}
      {isNoPlan && !supportSelection.useBlockTime && (
        <motion.div
          initial={{ opacity: 0, height: 0 }}
          animate={{ opacity: 1, height: 'auto' }}
          transition={{ duration: 0.2 }}
          className="bg-[#f8f9fb] rounded-xl p-4 text-sm text-gray-500"
        >
          <p>
            Without a support plan, any support work will be billed at our standard hourly rate of
            <strong className="text-[#333d49]"> $175/hr</strong>. You can add block time below
            to pre-purchase hours at a discounted rate, or proceed without any support commitment.
          </p>
        </motion.div>
      )}

      {/* Block Time Option */}
      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ delay: 0.3 }}
        className="border border-gray-200/80 rounded-xl p-5 bg-white shadow-card"
      >
        <div className="flex items-start justify-between gap-3 mb-4">
          <div className="flex items-center gap-3 min-w-0">
            <div className="w-9 h-9 rounded-lg bg-[#fe7400]/8 flex items-center justify-center flex-shrink-0">
              <Zap className="w-4.5 h-4.5 text-[#fe7400]" />
            </div>
            <div className="min-w-0">
              <h4 className="font-semibold text-[#333d49] text-sm sm:text-base"
                  style={{ fontFamily: "'Plus Jakarta Sans', sans-serif" }}>
                {isNoPlan ? 'Add Block Time' : 'Add Extra Block Time'}
              </h4>
              <p className="text-xs sm:text-sm text-gray-400">
                {isNoPlan
                  ? 'Pre-purchase support hours at a discounted rate instead of pay-as-you-go'
                  : 'Pre-purchase additional support hours at a discounted rate'
                }
              </p>
            </div>
          </div>
          <label className="relative inline-flex items-center cursor-pointer flex-shrink-0">
            <input
              type="checkbox"
              checked={supportSelection.useBlockTime}
              onChange={(e) => onSetBlockTimeEnabled(e.target.checked)}
              className="sr-only peer"
            />
            <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-[#fe7400]/10 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#fe7400]"></div>
          </label>
        </div>

        {supportSelection.useBlockTime && (
          <motion.div
            initial={{ height: 0, opacity: 0 }}
            animate={{ height: 'auto', opacity: 1 }}
            transition={{ duration: 0.2 }}
            className="space-y-3 pt-4 border-t border-gray-100"
          >
            <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
              {blockTimeOptions.map((option) => {
                const isSelected = supportSelection.blockTimeId === option.id;
                return (
                  <div
                    key={option.id}
                    onClick={() => onSetBlockTime(option.id)}
                    className={`p-4 rounded-xl border-2 cursor-pointer transition-all duration-200 ${
                      isSelected
                        ? 'border-[#fe7400] bg-[#fe7400]/5 shadow-sm'
                        : 'border-gray-200 hover:border-gray-300'
                    }`}
                  >
                    <div className="text-base font-bold text-[#333d49]"
                         style={{ fontFamily: "'Plus Jakarta Sans', sans-serif" }}>
                      {option.hours} Hours
                    </div>
                    <div className="text-xl font-bold text-[#fe7400]"
                         style={{ fontFamily: "'Plus Jakarta Sans', sans-serif" }}>
                      {formatCurrency(option.price)}
                    </div>
                    <div className="text-sm text-gray-400">
                      {formatCurrency(option.effectiveHourlyRate)}/hr
                    </div>
                    {option.hours === 30 && (
                      <div className="mt-2 text-[11px] font-bold text-[#059669] bg-[#ecfdf5] px-2 py-1 rounded-md inline-block uppercase tracking-wider"
                           style={{ fontFamily: "'Plus Jakarta Sans', sans-serif" }}>
                        Best Value
                      </div>
                    )}
                  </div>
                );
              })}
            </div>
          </motion.div>
        )}
      </motion.div>

      {/* Expandable Info */}
      <ExpandableInfo title="How does support work?">
        <div className="space-y-3">
          <p>
            Monthly support plans include a set number of hours for help desk assistance,
            remote troubleshooting, and project work. Hours roll over for 30 days if unused.
            If you prefer not to commit to a monthly plan, you can use block time for planned
            projects or pay our standard hourly rate as needed.
          </p>
          <ul className="space-y-2.5">
            <li className="flex items-start gap-2.5">
              <div className="w-4 h-4 rounded-full bg-[#fe7400]/10 flex items-center justify-center flex-shrink-0 mt-0.5">
                <Check className="w-2.5 h-2.5 text-[#fe7400]" strokeWidth={3} />
              </div>
              <span><strong>Help Desk:</strong> Phone, email, and chat support for daily IT questions</span>
            </li>
            <li className="flex items-start gap-2.5">
              <div className="w-4 h-4 rounded-full bg-[#fe7400]/10 flex items-center justify-center flex-shrink-0 mt-0.5">
                <Check className="w-2.5 h-2.5 text-[#fe7400]" strokeWidth={3} />
              </div>
              <span><strong>Remote Support:</strong> Screen sharing and remote control for quick fixes</span>
            </li>
            <li className="flex items-start gap-2.5">
              <div className="w-4 h-4 rounded-full bg-[#fe7400]/10 flex items-center justify-center flex-shrink-0 mt-0.5">
                <Check className="w-2.5 h-2.5 text-[#fe7400]" strokeWidth={3} />
              </div>
              <span><strong>On-Site Support:</strong> Available for Premium and Priority plans</span>
            </li>
            <li className="flex items-start gap-2.5">
              <div className="w-4 h-4 rounded-full bg-[#fe7400]/10 flex items-center justify-center flex-shrink-0 mt-0.5">
                <Check className="w-2.5 h-2.5 text-[#fe7400]" strokeWidth={3} />
              </div>
              <span><strong>Block Time:</strong> Pre-purchase hours at a discount for planned projects</span>
            </li>
            <li className="flex items-start gap-2.5">
              <div className="w-4 h-4 rounded-full bg-[#fe7400]/10 flex items-center justify-center flex-shrink-0 mt-0.5">
                <Check className="w-2.5 h-2.5 text-[#fe7400]" strokeWidth={3} />
              </div>
              <span><strong>Pay-as-you-go:</strong> No commitment &mdash; billed at $175/hr standard rate</span>
            </li>
          </ul>
        </div>
      </ExpandableInfo>

      {/* Monthly Total */}
      <div className="bg-gradient-dark text-white rounded-xl p-4 sm:p-5">
        <div className="flex items-center justify-between gap-3">
          <div className="min-w-0">
            <span className="text-sm sm:text-base font-medium opacity-90">Support Monthly Cost</span>
            {isNoPlan && (
              <p className="text-xs sm:text-sm opacity-50">
                Pay-as-you-go at $175/hr
              </p>
            )}
          </div>
          <span className="text-2xl sm:text-3xl font-bold whitespace-nowrap" style={{ fontFamily: "'Plus Jakarta Sans', sans-serif" }}>
            {formatCurrency(getSupportMonthly())}
            <span className="text-xs sm:text-sm font-medium opacity-60 ml-1">/mo</span>
          </span>
        </div>
        {supportSelection.useBlockTime && supportSelection.blockTimeId && (
          <div className="flex items-center justify-between gap-3 mt-3 pt-3 border-t border-white/15">
            <div className="min-w-0">
              <span className="text-sm sm:text-base font-medium opacity-90">Block Time</span>
              <p className="text-xs sm:text-sm opacity-50">
                {blockTimeOptions.find((b) => b.id === supportSelection.blockTimeId)?.hours} hours — one-time purchase
              </p>
            </div>
            <span className="text-xl sm:text-2xl font-bold whitespace-nowrap" style={{ fontFamily: "'Plus Jakarta Sans', sans-serif" }}>
              {formatCurrency(getSupportBlockTimeOneTime())}
            </span>
          </div>
        )}
      </div>
    </motion.div>
  );
}
