import { useState, useEffect, useMemo } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { Card, CardContent } from '@/components/ui';
import { WizardProgress } from './WizardProgress';
import { WizardNavigation } from './WizardNavigation';
import { useWizard } from '@/hooks/useWizard';
import type { WizardStepDef } from '@/hooks/useWizard';
import { useQuote } from '@/hooks/useQuote';
import {
  StepWelcome,
  StepServiceDiscovery,
  Step2GPSMonitoring,
  Step3SupportPlan,
  Step4VoIP,
  Step5WebEmail,
  Step6Summary,
  Step7Contact,
} from './steps';
import {
  Sparkles,
  LayoutGrid,
  Monitor,
  Headphones,
  Phone,
  Globe,
  FileCheck,
  Send,
  TrendingUp,
  Hash,
  CircleCheck,
} from 'lucide-react';
import { formatCurrency } from '@/lib/utils';
import { createQuote, updateQuote, submitQuote } from '@/lib/api';
import type { QuoteSubmitRequest, QuoteItemCreateRequest } from '@/lib/api';
import {
  gpsTiers,
  equipmentMonitoring,
  supportPlans,
  blockTimeOptions,
  voipTiers,
  voipHardware,
  webHostingTiers,
  emailTiers,
} from '@/lib/pricing-data';
import type { ServiceInterests } from '@/types/quote';

/**
 * WizardContainer - Main container for the MSP Quote Wizard
 *
 * Dynamic flow:
 * 1. Welcome & Intake
 * 2. Service Discovery (toggle interests)
 * 3-N. Dynamic service configuration steps (based on selections)
 * N+1. Review Quote
 * N+2. Contact & Submit
 */

/** Map step IDs to icons */
const stepIconMap: Record<string, typeof Monitor> = {
  welcome: Sparkles,
  discovery: LayoutGrid,
  gps: Monitor,
  support: Headphones,
  voip: Phone,
  'web-email': Globe,
  review: FileCheck,
  submit: Send,
};

/** Fixed step definitions that always appear */
const FIXED_BEFORE: WizardStepDef[] = [
  { id: 'welcome', title: 'Welcome', description: 'Tell us about yourself' },
  { id: 'discovery', title: 'Services', description: 'Choose what interests you' },
];

const FIXED_AFTER: WizardStepDef[] = [
  { id: 'review', title: 'Review', description: 'Review your selections' },
  { id: 'submit', title: 'Submit', description: 'Get your quote' },
];

/** Service step definitions — included only when toggled on */
const SERVICE_STEPS: { key: keyof ServiceInterests; step: WizardStepDef }[] = [
  { key: 'gps', step: { id: 'gps', title: 'Monitoring', description: 'Configure your monitoring tier' } },
  { key: 'support', step: { id: 'support', title: 'Support', description: 'Choose your support level' } },
  { key: 'voip', step: { id: 'voip', title: 'VoIP', description: 'Business phone options' } },
  { key: 'webHosting', step: { id: 'web-email', title: 'Web & Email', description: 'Hosting and email services' } },
];

function buildDynamicSteps(interests: ServiceInterests): WizardStepDef[] {
  const dynamicMiddle: WizardStepDef[] = [];

  for (const { key, step } of SERVICE_STEPS) {
    // Special case: web-email step shows if either webHosting or email is selected
    if (key === 'webHosting') {
      if (interests.webHosting || interests.email) {
        dynamicMiddle.push(step);
      }
    } else if (interests[key]) {
      dynamicMiddle.push(step);
    }
  }

  return [...FIXED_BEFORE, ...dynamicMiddle, ...FIXED_AFTER];
}

export function WizardContainer() {
  const quote = useQuote();

  // Build dynamic step list based on service interests
  const stepDefs = useMemo(
    () => buildDynamicSteps(quote.quoteData.serviceInterests),
    [quote.quoteData.serviceInterests]
  );

  const wizard = useWizard(stepDefs);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [submitSuccess, setSubmitSuccess] = useState(false);
  const [submitError, setSubmitError] = useState<string | null>(null);
  const [accessToken, setAccessToken] = useState<string | null>(() => {
    try {
      const stored = localStorage.getItem('quote-wizard-draft');
      if (stored) {
        const parsed = JSON.parse(stored);
        return parsed.accessToken || null;
      }
    } catch {
      // Ignore parse errors
    }
    return null;
  });

  const currentStepId = wizard.currentStepId;
  const StepIcon = stepIconMap[currentStepId] || Sparkles;
  const currentStepData = wizard.steps[wizard.currentStep];

  // Create a draft quote when leaving the discovery step
  useEffect(() => {
    if (currentStepId !== 'welcome' && currentStepId !== 'discovery' && !accessToken) {
      createDraftQuote();
    }
  }, [currentStepId]); // eslint-disable-line react-hooks/exhaustive-deps

  async function createDraftQuote(): Promise<string | null> {
    try {
      const response = await createQuote({
        employee_count: quote.quoteData.company.endpointCount || undefined,
        notes: quote.quoteData.company.notes || undefined,
      });
      setAccessToken(response.access_token);

      try {
        const existing = localStorage.getItem('quote-wizard-draft');
        const draft = existing ? JSON.parse(existing) : {};
        draft.accessToken = response.access_token;
        localStorage.setItem('quote-wizard-draft', JSON.stringify(draft));
      } catch {
        // localStorage write failures are non-critical
      }

      return response.access_token;
    } catch (error) {
      console.error('Failed to create quote draft:', error);
      return null;
    }
  }

  /** Build quote line items from wizard selections */
  function buildQuoteItems(): QuoteItemCreateRequest[] {
    const items: QuoteItemCreateRequest[] = [];
    const data = quote.quoteData;
    const interests = data.serviceInterests;

    // GPS Monitoring (if interested)
    if (interests.gps) {
      const gpsTier = gpsTiers.find((t) => t.id === data.gps.tierId);
      if (gpsTier) {
        items.push({
          product_code: `gps-${gpsTier.id}`,
          product_name: `GPS ${gpsTier.name} Monitoring`,
          description: gpsTier.description,
          category: 'gps_monitoring',
          billing_frequency: 'monthly',
          unit_price: gpsTier.pricePerEndpoint.toFixed(2),
          quantity: data.gps.endpointCount,
          tier: gpsTier.id,
        });
      }

      if (data.gps.includeEquipment && data.gps.equipmentDeviceCount > 0) {
        const additionalDevices = Math.max(0, data.gps.equipmentDeviceCount - equipmentMonitoring.baseDevices);
        const eqTotal = equipmentMonitoring.basePrice + (additionalDevices * equipmentMonitoring.additionalDevicePrice);
        items.push({
          product_code: 'equip-pack',
          product_name: 'Equipment Pack Monitoring',
          description: `${data.gps.equipmentDeviceCount} devices`,
          category: 'gps_monitoring',
          billing_frequency: 'monthly',
          unit_price: eqTotal.toFixed(2),
          quantity: 1,
        });
      }
    }

    // Support plan (if interested)
    if (interests.support && data.support.planId !== 'none') {
      const plan = supportPlans.find((p) => p.id === data.support.planId);
      if (plan) {
        items.push({
          product_code: `support-${plan.id}`,
          product_name: `${plan.name} Support Plan`,
          description: `${plan.includedHours} hours/month included`,
          category: 'support_plan',
          billing_frequency: 'monthly',
          unit_price: plan.monthlyPrice.toFixed(2),
          quantity: 1,
          tier: plan.id,
        });
      }
    }

    // Block time (one-time)
    if (interests.support && data.support.useBlockTime && data.support.blockTimeId) {
      const block = blockTimeOptions.find((b) => b.id === data.support.blockTimeId);
      if (block) {
        items.push({
          product_code: `block-${block.id}`,
          product_name: `Block Time (${block.hours} hours)`,
          description: `Pre-purchased support hours at ${formatCurrency(block.effectiveHourlyRate)}/hr`,
          category: 'support_plan',
          billing_frequency: 'one_time',
          unit_price: block.price.toFixed(2),
          quantity: 1,
        });
      }
    }

    // VoIP (if interested)
    if (interests.voip && data.voip.enabled) {
      const vTier = voipTiers.find((t) => t.id === data.voip.tierId);
      if (vTier && data.voip.userCount > 0) {
        items.push({
          product_code: `voip-${vTier.id}`,
          product_name: `VoIP ${vTier.name} Plan`,
          description: vTier.description,
          category: 'voip',
          billing_frequency: 'monthly',
          unit_price: vTier.pricePerUser.toFixed(2),
          quantity: data.voip.userCount,
          tier: vTier.id,
        });
      }

      data.voip.hardware.forEach((hw) => {
        const hwDef = voipHardware.find((h) => h.id === hw.hardwareId);
        if (hwDef && hw.quantity > 0) {
          if (hw.isRental) {
            items.push({
              product_code: `voip-hw-${hwDef.id}-rental`,
              product_name: `${hwDef.name} (Rental)`,
              description: hwDef.description,
              category: 'voip',
              billing_frequency: 'monthly',
              unit_price: hwDef.monthlyRental.toFixed(2),
              quantity: hw.quantity,
            });
          } else {
            items.push({
              product_code: `voip-hw-${hwDef.id}-purchase`,
              product_name: `${hwDef.name} (Purchase)`,
              description: hwDef.description,
              category: 'voip',
              billing_frequency: 'one_time',
              unit_price: hwDef.oneTimePrice.toFixed(2),
              quantity: hw.quantity,
            });
          }
        }
      });
    }

    // Web hosting (if interested)
    if (interests.webHosting && data.webHosting.enabled) {
      const wTier = webHostingTiers.find((t) => t.id === data.webHosting.tierId);
      if (wTier) {
        items.push({
          product_code: `web-${wTier.id}`,
          product_name: `${wTier.name} Web Hosting`,
          description: `${wTier.storage}, ${wTier.sites === -1 ? 'unlimited' : wTier.sites} sites`,
          category: 'web_hosting',
          billing_frequency: 'monthly',
          unit_price: wTier.monthlyPrice.toFixed(2),
          quantity: 1,
          tier: wTier.id,
        });
      }
    }

    // Email (if interested)
    if (interests.email && data.email.enabled && data.email.mailboxCount > 0) {
      const eTier = emailTiers.find((t) => t.id === data.email.tierId);
      if (eTier) {
        items.push({
          product_code: `email-${eTier.id}`,
          product_name: eTier.name,
          description: `${eTier.storage} storage per mailbox`,
          category: 'email',
          billing_frequency: 'monthly',
          unit_price: eTier.pricePerMailbox.toFixed(2),
          quantity: data.email.mailboxCount,
          tier: eTier.id,
        });
      }
    }

    return items;
  }

  const handleNext = () => {
    setSubmitError(null);
    // Calculate quote before entering review
    if (wizard.steps[wizard.currentStep + 1]?.id === 'review') {
      quote.calculateQuote();
    }
    wizard.nextStep();
  };

  const handlePrev = () => {
    setSubmitError(null);
    wizard.prevStep();
  };

  const handleSubmit = async () => {
    setIsSubmitting(true);
    setSubmitError(null);

    quote.calculateQuote();

    try {
      let token = accessToken;
      const items = buildQuoteItems();

      if (!token) {
        const response = await createQuote({
          employee_count: quote.quoteData.company.endpointCount || undefined,
          notes: quote.quoteData.company.notes || undefined,
          items,
        });
        token = response.access_token;
        setAccessToken(token);
      } else {
        const companyData = quote.quoteData.company;
        await updateQuote(token, {
          company_name: companyData.name || undefined,
          employee_count: companyData.endpointCount || undefined,
          notes: companyData.notes || undefined,
          items,
        });
      }

      const contactData = quote.quoteData.contact;
      const companyData = quote.quoteData.company;

      const submitData: QuoteSubmitRequest = {
        company_name: contactData.companyName || companyData.name || contactData.name,
        contact_name: contactData.name,
        contact_email: contactData.email,
        contact_phone: contactData.phone || undefined,
        notes: contactData.currentITSituation || companyData.notes || undefined,
      };

      await submitQuote(token, submitData);
      localStorage.removeItem('quote-wizard-draft');
      setSubmitSuccess(true);
    } catch (error: unknown) {
      console.error('Submission error:', error);

      let message = 'An unexpected error occurred. Please try again.';
      if (error instanceof Error) {
        message = error.message;
      }
      if (
        typeof error === 'object' &&
        error !== null &&
        'response' in error
      ) {
        const axiosError = error as { response?: { data?: { detail?: string }; status?: number } };
        if (axiosError.response?.data?.detail) {
          message = axiosError.response.data.detail;
        } else if (axiosError.response?.status === 400) {
          message = 'Quote cannot be submitted. Please review your selections and try again.';
        } else if (axiosError.response?.status === 404) {
          message = 'Quote session expired. Please start a new quote.';
        }
      }

      setSubmitError(message);
    } finally {
      setIsSubmitting(false);
    }
  };

  const handleGoToStep = (step: number) => {
    wizard.goToStep(step);
  };

  const isNextDisabled = (): boolean => {
    switch (currentStepId) {
      case 'welcome':
        return (
          !quote.quoteData.contact.name.trim() ||
          !quote.quoteData.contact.email.trim() ||
          quote.quoteData.company.endpointCount < 1
        );
      case 'submit':
        return !quote.quoteData.contact.agreedToTerms;
      default:
        return false;
    }
  };

  const renderStepContent = () => {
    switch (currentStepId) {
      case 'welcome':
        return (
          <StepWelcome
            clientType={quote.quoteData.clientType}
            companyInfo={quote.quoteData.company}
            contactInfo={quote.quoteData.contact}
            onSetClientType={quote.setClientType}
            onUpdateCompany={quote.updateCompany}
            onUpdateContact={quote.updateContact}
            onSetEndpointCount={quote.setEndpointCount}
            onSetIndustry={quote.setIndustry}
          />
        );
      case 'discovery':
        return (
          <StepServiceDiscovery
            serviceInterests={quote.quoteData.serviceInterests}
            onSetServiceInterest={quote.setServiceInterest}
          />
        );
      case 'gps':
        return (
          <Step2GPSMonitoring
            gpsSelection={quote.quoteData.gps}
            onSetGPSTier={quote.setGPSTier}
            onSetEquipmentEnabled={quote.setEquipmentEnabled}
            onSetEquipmentCount={quote.setEquipmentCount}
            getGPSMonthly={quote.getGPSMonthly}
          />
        );
      case 'support':
        return (
          <Step3SupportPlan
            supportSelection={quote.quoteData.support}
            endpointCount={quote.quoteData.company.endpointCount}
            onSetSupportPlan={quote.setSupportPlan}
            onSetBlockTimeEnabled={quote.setBlockTimeEnabled}
            onSetBlockTime={quote.setBlockTime}
            getSupportMonthly={quote.getSupportMonthly}
            getSupportBlockTimeOneTime={quote.getSupportBlockTimeOneTime}
          />
        );
      case 'voip':
        return (
          <Step4VoIP
            voipSelection={quote.quoteData.voip}
            onSetVoIPEnabled={quote.setVoIPEnabled}
            onSetVoIPTier={quote.setVoIPTier}
            onSetVoIPUserCount={quote.setVoIPUserCount}
            onAddHardware={quote.addHardware}
            onRemoveHardware={quote.removeHardware}
            onUpdateHardwareQuantity={quote.updateHardwareQuantity}
            getVoIPMonthly={quote.getVoIPMonthly}
            getVoIPOneTime={quote.getVoIPOneTime}
          />
        );
      case 'web-email':
        return (
          <Step5WebEmail
            webHostingSelection={quote.quoteData.webHosting}
            emailSelection={quote.quoteData.email}
            onSetWebHostingEnabled={quote.setWebHostingEnabled}
            onSetWebHostingTier={quote.setWebHostingTier}
            onSetEmailEnabled={quote.setEmailEnabled}
            onSetEmailProvider={quote.setEmailProvider}
            onSetEmailTier={quote.setEmailTier}
            onSetMailboxCount={quote.setMailboxCount}
            getWebHostingMonthly={quote.getWebHostingMonthly}
            getEmailMonthly={quote.getEmailMonthly}
          />
        );
      case 'review':
        return (
          <Step6Summary
            quoteData={quote.quoteData}
            quoteResult={quote.quoteResult}
            onGoToStep={handleGoToStep}
            onCalculateQuote={quote.calculateQuote}
          />
        );
      case 'submit':
        return (
          <Step7Contact
            contactInfo={quote.quoteData.contact}
            companyNameFromStep1={quote.quoteData.company.name}
            quoteResult={quote.quoteResult}
            onUpdateContact={quote.updateContact}
            onSetContactPreference={quote.setContactPreference}
            onSetAgreedToTerms={quote.setAgreedToTerms}
            onSubmit={handleSubmit}
            isSubmitting={isSubmitting}
          />
        );
      default:
        return null;
    }
  };

  // Running total calculation (only include interested services)
  const interests = quote.quoteData.serviceInterests;
  const runningMonthly =
    (interests.gps ? quote.getGPSMonthly() : 0) +
    (interests.support ? quote.getSupportMonthly() : 0) +
    (interests.voip ? quote.getVoIPMonthly() : 0) +
    (interests.webHosting ? quote.getWebHostingMonthly() : 0) +
    (interests.email ? quote.getEmailMonthly() : 0);

  // Success state
  if (submitSuccess) {
    return (
      <div className="max-w-6xl mx-auto px-4 sm:px-6">
        <Card variant="elevated" padding="lg">
          <CardContent>
            <motion.div
              initial={{ opacity: 0, scale: 0.95 }}
              animate={{ opacity: 1, scale: 1 }}
              transition={{ duration: 0.5, ease: [0.25, 0.46, 0.45, 0.94] }}
              className="text-center py-12 sm:py-16"
            >
              <motion.div
                initial={{ scale: 0 }}
                animate={{ scale: 1 }}
                transition={{ type: 'spring', stiffness: 200, damping: 15, delay: 0.2 }}
                className="w-20 h-20 bg-[#ecfdf5] rounded-full flex items-center justify-center mx-auto mb-8"
              >
                <CircleCheck className="w-10 h-10 text-[#059669]" />
              </motion.div>

              <h2 className="text-3xl font-bold text-[#333d49] mb-3">
                Quote Request Submitted
              </h2>
              <p className="text-gray-500 mb-10 max-w-md mx-auto leading-relaxed">
                Thank you for your interest. Our team will review your custom quote and
                contact you within one business day.
              </p>

              {quote.quoteResult && (
                <motion.div
                  initial={{ opacity: 0, y: 10 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ delay: 0.4 }}
                  className="bg-[#f8f9fb] rounded-2xl p-8 max-w-sm mx-auto mb-10"
                >
                  <p className="text-sm text-gray-400 mb-1 uppercase tracking-wide font-medium"
                     style={{ fontFamily: "'Plus Jakarta Sans', sans-serif", fontSize: '11px', letterSpacing: '0.08em' }}>
                    Your Estimated Monthly Investment
                  </p>
                  <p className="text-4xl font-bold text-[#fe7400]" style={{ fontFamily: "'Plus Jakarta Sans', sans-serif" }}>
                    {formatCurrency(quote.quoteResult.monthlyTotal)}
                    <span className="text-base font-medium text-gray-400 ml-1">/mo</span>
                  </p>
                </motion.div>
              )}

              <button
                onClick={() => {
                  quote.resetQuote();
                  wizard.resetWizard();
                  setSubmitSuccess(false);
                  setAccessToken(null);
                  setSubmitError(null);
                }}
                className="text-[#fe7400] hover:text-[#e56800] font-semibold transition-colors"
                style={{ fontFamily: "'Plus Jakarta Sans', sans-serif" }}
              >
                Start a New Quote
              </button>
            </motion.div>
          </CardContent>
        </Card>
      </div>
    );
  }

  return (
    <div className="max-w-6xl mx-auto px-4 sm:px-6">
      {/* Progress indicator */}
      <div className="mb-8 sm:mb-10 print-hide">
        <WizardProgress
          steps={wizard.steps}
          currentStep={wizard.currentStep}
          onStepClick={wizard.goToStep}
        />
      </div>

      {/* Main wizard card */}
      <Card variant="elevated" padding="none" className="overflow-hidden">
        <CardContent>
          {/* Step header */}
          <div className="px-4 sm:px-6 md:px-8 pt-5 sm:pt-6 md:pt-8 pb-5 sm:pb-6 border-b border-gray-100 bg-white print-hide">
            <div className="flex items-center gap-3 sm:gap-4">
              <div className="flex items-center justify-center w-9 h-9 sm:w-11 sm:h-11 rounded-xl bg-[#fe7400]/8 flex-shrink-0">
                <StepIcon className="w-4 h-4 sm:w-5 sm:h-5 text-[#fe7400]" />
              </div>
              <div className="min-w-0">
                <h2 className="text-lg sm:text-xl md:text-2xl font-bold text-[#333d49] truncate">
                  {currentStepData?.title}
                </h2>
                <p className="text-xs sm:text-sm text-gray-400 mt-0.5 truncate">{currentStepData?.description}</p>
              </div>
            </div>
          </div>

          {/* Error banner */}
          {submitError && (
            <div className="mx-4 sm:mx-6 md:mx-8 mt-4 sm:mt-6 p-3 sm:p-4 bg-red-50 border border-red-100 rounded-xl">
              <p className="text-red-600 text-sm font-medium">{submitError}</p>
            </div>
          )}

          {/* Step content with animation */}
          <div className="px-4 sm:px-6 md:px-8 py-5 sm:py-6 md:py-8">
            <AnimatePresence mode="wait">
              <motion.div
                key={currentStepId}
                initial={{ opacity: 0, x: 16 }}
                animate={{ opacity: 1, x: 0 }}
                exit={{ opacity: 0, x: -16 }}
                transition={{ duration: 0.25, ease: [0.25, 0.46, 0.45, 0.94] }}
                className="min-h-[400px]"
              >
                {renderStepContent()}
              </motion.div>
            </AnimatePresence>

            {/* Navigation — hidden on submit step (has its own submit button) */}
            {currentStepId !== 'submit' && (
              <WizardNavigation
                onNext={handleNext}
                onPrev={handlePrev}
                onSubmit={handleSubmit}
                isFirstStep={wizard.isFirstStep}
                isLastStep={wizard.isLastStep}
                isNextDisabled={isNextDisabled()}
                isSubmitting={isSubmitting}
              />
            )}
          </div>
        </CardContent>
      </Card>

      {/* Running totals bar */}
      <div className="mt-5 grid grid-cols-3 gap-2 sm:gap-3">
        <div className="bg-white rounded-xl border border-gray-200/80 shadow-sm p-2.5 sm:p-4 text-center">
          <div className="flex items-center justify-center gap-1 sm:gap-1.5 mb-1">
            <Hash className="w-3 h-3 sm:w-3.5 sm:h-3.5 text-gray-400" />
            <p className="text-[10px] sm:text-[11px] font-medium text-gray-400 uppercase tracking-wider"
               style={{ fontFamily: "'Plus Jakarta Sans', sans-serif" }}>
              Endpoints
            </p>
          </div>
          <p className="text-lg sm:text-2xl font-bold text-[#333d49]" style={{ fontFamily: "'Plus Jakarta Sans', sans-serif" }}>
            {quote.quoteData.company.endpointCount}
          </p>
        </div>
        <div className="bg-white rounded-xl border border-gray-200/80 shadow-sm p-2.5 sm:p-4 text-center">
          <div className="flex items-center justify-center gap-1 sm:gap-1.5 mb-1">
            <TrendingUp className="w-3 h-3 sm:w-3.5 sm:h-3.5 text-[#fe7400]" />
            <p className="text-[10px] sm:text-[11px] font-medium text-gray-400 uppercase tracking-wider"
               style={{ fontFamily: "'Plus Jakarta Sans', sans-serif" }}>
              Monthly
            </p>
          </div>
          <p className="text-lg sm:text-2xl font-bold text-[#fe7400]" style={{ fontFamily: "'Plus Jakarta Sans', sans-serif" }}>
            {formatCurrency(runningMonthly)}
          </p>
        </div>
        <div className="bg-white rounded-xl border border-gray-200/80 shadow-sm p-2.5 sm:p-4 text-center">
          <div className="flex items-center justify-center gap-1 sm:gap-1.5 mb-1">
            <CircleCheck className="w-3 h-3 sm:w-3.5 sm:h-3.5 text-gray-400" />
            <p className="text-[10px] sm:text-[11px] font-medium text-gray-400 uppercase tracking-wider"
               style={{ fontFamily: "'Plus Jakarta Sans', sans-serif" }}>
              Progress
            </p>
          </div>
          <p className="text-lg sm:text-2xl font-bold text-[#333d49]" style={{ fontFamily: "'Plus Jakarta Sans', sans-serif" }}>
            {wizard.progress}%
          </p>
        </div>
      </div>
    </div>
  );
}
