import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useNavigate, useParams } from 'react-router-dom';
import { FaArrowLeft, FaCheck, FaCheckCircle, FaChevronLeft, FaClipboardList, FaHeadset } from 'react-icons/fa';
import { toast, ToastContainer, Bounce } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import { troubleshootStepImageUrl, type TroubleshootCategory } from '../data/troubleshootStepImages';
import { useWorkOrderDetails, useWorkOrderMutations } from '../hooks/useWorkOrder';
import workOrderService from '../services/workOrderService';
import {
  TROUBLESHOOT_GUIDE_COMPLETED_MARKER,
  TROUBLESHOOT_TREE_COULD_NOT_COMPLETE_MARKER,
} from '../utils/troubleshootGuideMarkers';
import UltrasoundFlowchart from '../components/UltrasoundFlowchart';

const BTN_PRIMARY =
  'w-full min-h-[52px] sm:min-h-[48px] flex items-center justify-center gap-2 py-3.5 px-4 rounded-2xl text-white text-sm font-semibold shadow-lg transition-all bg-gradient-to-r from-violet-600 via-purple-600 to-fuchsia-600 hover:from-violet-700 hover:via-purple-700 hover:to-fuchsia-700 active:scale-[0.99] focus:outline-none focus-visible:ring-2 focus-visible:ring-violet-400 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-gray-900 disabled:opacity-60 disabled:pointer-events-none';

const BTN_SECONDARY =
  'w-full min-h-[52px] sm:min-h-[48px] flex items-center justify-center gap-2 py-3.5 px-4 rounded-2xl text-sm font-semibold border-2 border-violet-300/90 dark:border-violet-600/80 text-violet-800 dark:text-violet-200 bg-white/90 dark:bg-gray-800/90 hover:bg-violet-50/90 dark:hover:bg-violet-950/50 active:scale-[0.99] focus:outline-none focus-visible:ring-2 focus-visible:ring-violet-400 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-gray-900';

const SHELL_CLASS =
  'min-h-full w-full max-w-lg mx-auto px-4 sm:px-5 py-4 sm:py-6 pb-28 sm:pb-24 bg-gradient-to-br from-violet-100/90 via-white to-fuchsia-100/80 dark:from-gray-950 dark:via-gray-900 dark:to-violet-950/50';

type Cat = TroubleshootCategory;
type Step = { heroCaption: string; title: string; bullets: string[] };

// ── All available categories ──────────────────────────────────────────────────
const ALL_CATS: Cat[] = ['air_conditioning', 'power', 'building_systems', 'applications_account'];
const ULTRASOUND_CAT: Cat = 'ultrasound';

function useSteps(cat: Cat): Step[] {
  const { t } = useTranslation();
  const raw = t(`workOrders.troubleshootTree.steps.${cat}`, { returnObjects: true });
  return Array.isArray(raw) ? (raw as Step[]) : [];
}

/**
 * Detect if the linked asset is an ultrasound asset.
 * Checks custom_modality on the asset record linked to the work order.
 */
function isUltrasoundWorkOrder(workOrder: any): boolean {
  if (!workOrder) return false;
  const modality = (workOrder.custom_modality || '').toLowerCase();
  const assetName = (workOrder.asset_name || '').toLowerCase();
  // Check modality field first (most reliable)
  if (modality.includes('ultrasound') || modality.includes('us')) return true;
  // Fallback: check asset name contains ultrasound
  if (assetName.includes('ultrasound') || assetName.includes('ultra sound')) return true;
  return false;
}

/** Self-service troubleshooting tree: work order route shows WO id; /support/troubleshoot keeps back link to support. */
const SupportTroubleshoot: React.FC = () => {
  const { t } = useTranslation();
  const { workOrderName } = useParams<{ workOrderName?: string }>();
  const navigate = useNavigate();

  const { workOrder, loading: woLoading, refetch: refetchWorkOrder } = useWorkOrderDetails(workOrderName ?? null);
  const { updateWorkOrder, loading: saveLoading } = useWorkOrderMutations();

  // ── Determine if this is an ultrasound WO and build the category list ────────
  const isUltrasound = useMemo(() => isUltrasoundWorkOrder(workOrder), [workOrder]);

  const CATS: Cat[] = useMemo(
    () => (isUltrasound ? [ULTRASOUND_CAT] : ALL_CATS),
    [isUltrasound],
  );

  // Default to ultrasound category when it's an ultrasound WO
  const [category, setCategory] = useState<Cat>('power');
  const [stepIndex, setStepIndex] = useState(0);
  const [showReasonInput, setShowReasonInput] = useState(false);
  const [skipReason, setSkipReason] = useState('');
  const [flowCompleted, setFlowCompleted] = useState(false);
  const [completingGuide, setCompletingGuide] = useState(false);

  // Once work order loads and we know it's ultrasound, switch default category
  const hasSetDefaultCat = useRef(false);
  useEffect(() => {
    if (!woLoading && workOrder && !hasSetDefaultCat.current) {
      hasSetDefaultCat.current = true;
      if (isUltrasoundWorkOrder(workOrder)) {
        setCategory(ULTRASOUND_CAT);
      }
    }
  }, [woLoading, workOrder]);

  const redirectedForStateRef = useRef(false);

  useEffect(() => {
    redirectedForStateRef.current = false;
  }, [workOrderName]);

  useEffect(() => {
    if (!workOrderName || woLoading || !workOrder) return;
    if (workOrder.workflow_state === 'Repair InProgress') return;
    if (redirectedForStateRef.current) return;
    redirectedForStateRef.current = true;
    toast.info(t('workOrders.troubleshootTree.notAvailableUntilRepairInProgress'), {
      position: 'top-right',
      autoClose: 5000,
    });
    navigate(`/work-orders/${encodeURIComponent(workOrderName)}`, { replace: true });
  }, [workOrderName, woLoading, workOrder, navigate, t]);

  const steps = useSteps(category);
  const n = steps.length;
  const cur = n ? steps[Math.min(stepIndex, n - 1)] : null;
  const stepImageUrl = troubleshootStepImageUrl(category, stepIndex);

  const progressDots = useMemo(
    () =>
      Array.from({ length: Math.max(n, 1) }, (_, i) => (
        <div
          key={i}
          className={
            flowCompleted || i === stepIndex
              ? 'h-2 w-10 sm:w-12 rounded-full bg-gradient-to-r from-violet-600 to-fuchsia-500 transition-all shadow-sm'
              : 'h-2 w-2 rounded-full bg-gray-300/90 dark:bg-gray-600 transition-all'
          }
          aria-hidden
        />
      )),
    [n, stepIndex, flowCompleted],
  );

  const reset = useCallback((c: Cat) => {
    setCategory(c);
    setStepIndex(0);
    setShowReasonInput(false);
    setSkipReason('');
    setFlowCompleted(false);
  }, []);

  const next = () => {
    setShowReasonInput(false);
    setSkipReason('');
    if (stepIndex + 1 < n) setStepIndex((i) => i + 1);
    else setFlowCompleted(true);
  };

  const prev = () => {
    setShowReasonInput(false);
    setSkipReason('');
    if (stepIndex > 0) setStepIndex((i) => i - 1);
  };

  const restartCategoryFromBeginning = () => {
    setFlowCompleted(false);
    setStepIndex(0);
    setShowReasonInput(false);
    setSkipReason('');
  };

  const back = () => {
    if (workOrderName) navigate(`/work-orders/${encodeURIComponent(workOrderName)}`);
    else navigate('/support');
  };

  const openReasonPanel = useCallback(() => {
    setShowReasonInput(true);
    setSkipReason('');
  }, []);

  const cancelReasonPanel = useCallback(() => {
    setShowReasonInput(false);
    setSkipReason('');
  }, []);

  const submitSkipReason = useCallback(async () => {
    const trimmed = skipReason.trim();
    if (!trimmed) {
      toast.error(t('workOrders.troubleshootTree.reasonRequiredToast'), {
        position: 'top-right',
        autoClose: 4000,
      });
      return;
    }

    if (workOrderName) {
      if (woLoading) {
        toast.error(t('workOrders.troubleshootTree.workOrderStillLoading'), {
          position: 'top-right',
          autoClose: 4000,
        });
        return;
      }
      if (!workOrder) {
        toast.error(t('workOrders.troubleshootTree.saveExplanationFailed'), {
          position: 'top-right',
          autoClose: 4000,
        });
        return;
      }
      const categoryLabel = t(`workOrders.troubleshootTree.categories.${category}`);
      const stepTitle = cur?.title ?? '';
      const block = `\n\n${TROUBLESHOOT_TREE_COULD_NOT_COMPLETE_MARKER}\nWork order: ${workOrderName}\nCategory: ${categoryLabel}\nStep ${stepIndex + 1} of ${n}: ${stepTitle}\nReason: ${trimmed}\n`;
      const previousReport = (workOrder.actions_performed || '').trimEnd();
      const newReport = previousReport ? `${previousReport}${block}` : block.trim();
      try {
        await updateWorkOrder(workOrderName, { actions_performed: newReport });
        refetchWorkOrder();
        setShowReasonInput(false);
        setSkipReason('');
        toast.success(t('workOrders.troubleshootTree.explanationSavedStayOnGuide'), {
          position: 'top-right',
          autoClose: 4000,
        });
      } catch {
        toast.error(t('workOrders.troubleshootTree.saveExplanationFailed'), {
          position: 'top-right',
          autoClose: 4000,
        });
      }
      return;
    }

    navigate('/support/new', {
      replace: true,
      state: {
        newIssuePrecheckDone: true,
        precheckCantCompleteReason: trimmed,
      },
    });
  }, [
    skipReason,
    t,
    workOrderName,
    woLoading,
    workOrder,
    category,
    stepIndex,
    n,
    cur?.title,
    updateWorkOrder,
    navigate,
    refetchWorkOrder,
  ]);

  const completeGuideAndReturn = useCallback(async () => {
    if (!workOrderName) {
      navigate('/support');
      return;
    }
    try {
      setCompletingGuide(true);
      const fresh = await workOrderService.getWorkOrderDetails(workOrderName);
      const previousReport = (fresh.actions_performed || '').trimEnd();
      const categoryLabel = t(`workOrders.troubleshootTree.categories.${category}`);
      const completionBlock = `\n\n${TROUBLESHOOT_GUIDE_COMPLETED_MARKER}\nWork order: ${workOrderName}\nCategory completed: ${categoryLabel}\nCompleted at: ${new Date().toISOString()}\n`;
      const newReport = previousReport ? `${previousReport}${completionBlock}` : completionBlock.trim();
      await updateWorkOrder(workOrderName, { actions_performed: newReport });
      navigate(`/work-orders/${encodeURIComponent(workOrderName)}`, {
        state: { troubleshootGuideJustCompleted: true },
      });
    } catch {
      toast.error(t('workOrders.troubleshootTree.saveExplanationFailed'), {
        position: 'top-right',
        autoClose: 4000,
      });
    } finally {
      setCompletingGuide(false);
    }
  }, [workOrderName, updateWorkOrder, navigate, t, category]);

  // ── Gradient per category ────────────────────────────────────────────────────
  const grad =
    category === 'air_conditioning'
      ? 'from-sky-400/90 to-cyan-700'
      : category === 'power'
        ? 'from-violet-500/90 to-purple-900'
        : category === 'building_systems'
          ? 'from-amber-400/90 to-stone-700'
          : category === 'ultrasound'
            ? 'from-blue-500/90 to-teal-700'
            : 'from-indigo-400/90 to-slate-700';

  // ── Page title: add ultrasound badge when relevant ───────────────────────────
  const pageSubtitle = useMemo(() => {
    if (!workOrderName) return t('workOrders.troubleshootTree.selfServiceTitle');
    if (isUltrasound) return `${t('workOrders.troubleshootTree.workOrderBadge', { id: workOrderName })} · ${t('workOrders.troubleshootTree.ultrasoundBadge', { defaultValue: 'Ultrasound diagnostic' })}`;
    return t('workOrders.troubleshootTree.workOrderBadge', { id: workOrderName });
  }, [workOrderName, isUltrasound, t]);

  return (
    <>
      <ToastContainer
        position="top-right"
        autoClose={4000}
        hideProgressBar={false}
        newestOnTop
        closeOnClick
        rtl={false}
        pauseOnFocusLoss
        draggable
        pauseOnHover
        theme="colored"
        transition={Bounce}
      />
      <div className={SHELL_CLASS}>
        {/* ── Header ── */}
        <div className="flex items-center gap-3 mb-6 sm:mb-8">
          <button
            type="button"
            onClick={back}
            className="text-violet-700/70 dark:text-violet-300/80 hover:text-violet-900 dark:hover:text-white p-2 -ml-2 rounded-xl min-h-[44px] min-w-[44px] flex items-center justify-center shrink-0"
            aria-label={t('workOrders.troubleshootTree.backToWorkOrder')}
          >
            <FaArrowLeft className="text-lg" />
          </button>
          <div className={`w-10 h-10 rounded-xl flex items-center justify-center shrink-0 shadow-md ${isUltrasound ? 'bg-gradient-to-br from-blue-500 to-teal-600' : 'bg-gradient-to-br from-violet-600 to-fuchsia-600'}`}>
            <FaClipboardList className="text-white text-lg" aria-hidden />
          </div>
          <div className="min-w-0 flex-1">
            <h1 className="text-lg sm:text-xl font-semibold text-gray-900 dark:text-white truncate">
              {isUltrasound
                ? t('workOrders.troubleshootTree.ultrasoundBadge', { defaultValue: 'Ultrasound Diagnostic Guide' })
                : t('workOrders.troubleshootTree.pageTitle')}
            </h1>
            <p className="text-xs text-violet-700/80 dark:text-violet-300/90 truncate">
              {pageSubtitle}
            </p>
          </div>
        </div>

        {/* ── Ultrasound info banner ── */}
        {isUltrasound && (
          <div className="mb-5 p-3 rounded-xl bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 flex items-start gap-2">
            <span className="text-blue-500 text-base shrink-0 mt-0.5">ℹ️</span>
            <p className="text-xs text-blue-800 dark:text-blue-300 leading-relaxed">
              This guide follows the official <strong>GE Voluson 730 Service Manual, Section 7-7</strong> troubleshooting trees. Start with the <strong>GE Voluson 730</strong> category for asset-specific steps.
            </p>
          </div>
        )}

        {/* ── Category tabs ── */}
        <p className="text-[10px] sm:text-[11px] font-semibold tracking-wide text-gray-500 dark:text-gray-400 uppercase mb-3">
          {t('workOrders.troubleshootTree.problemTypeTitle')}
        </p>
        <div className="flex flex-wrap gap-2 mb-6 sm:mb-8">
          {CATS.map((id) => {
            const isUltrasoundTab = id === ULTRASOUND_CAT;
            const isActive = category === id;
            return (
              <button
                key={id}
                type="button"
                onClick={() => reset(id)}
                className={`px-3.5 sm:px-4 py-2.5 rounded-2xl text-xs sm:text-sm font-medium transition-all min-h-[44px] ${
                  isActive
                    ? isUltrasoundTab
                      ? 'text-white shadow-md bg-gradient-to-r from-blue-500 to-teal-600 ring-2 ring-blue-400/40'
                      : 'text-white shadow-md bg-gradient-to-r from-violet-600 to-fuchsia-600 ring-2 ring-violet-400/40'
                    : 'bg-white/80 dark:bg-gray-800/90 text-gray-700 dark:text-gray-200 border border-gray-200/80 dark:border-gray-600 hover:border-violet-300 dark:hover:border-violet-500'
                }`}
              >
                {isUltrasoundTab && '🔬 '}
                {t(`workOrders.troubleshootTree.categories.${id}`)}
              </button>
            );
          })}
        </div>

        {/* ── Step counter / flowchart ── */}
        {isUltrasound ? (
          <UltrasoundFlowchart />
        ) : (
          <>
            {/* ── Step counter ── */}
            <div className="flex items-center justify-between gap-3 mb-3">
              <p className="text-[10px] sm:text-[11px] font-semibold tracking-wide text-gray-500 dark:text-gray-400 uppercase">
                {t('workOrders.troubleshootTree.selfServiceTitle')}
              </p>
              {n > 0 ? (
                <p className={`text-sm font-semibold bg-clip-text text-transparent shrink-0 ${category === ULTRASOUND_CAT ? 'bg-gradient-to-r from-blue-500 to-teal-600' : 'bg-gradient-to-r from-violet-600 to-fuchsia-600'}`}>
                  {flowCompleted
                    ? t('workOrders.troubleshootTree.guideCompleteBadge')
                    : t('workOrders.troubleshootTree.stepOf', { current: stepIndex + 1, total: n })}
                </p>
              ) : null}
            </div>
            <div className="flex justify-center gap-2 mb-5 sm:mb-6">{progressDots}</div>

            {/* ── Step card ── */}
            <div className="rounded-2xl border border-violet-200/60 dark:border-gray-700 bg-white/95 dark:bg-gray-800/95 shadow-lg shadow-violet-500/5 overflow-hidden backdrop-blur-sm">
              {flowCompleted && n > 0 ? (
                <div className="p-6 sm:p-8 space-y-5 text-center">
                  <div className={`mx-auto flex h-16 w-16 items-center justify-center rounded-full shadow-lg ${category === ULTRASOUND_CAT ? 'bg-gradient-to-br from-blue-500 to-teal-600 shadow-blue-500/30' : 'bg-gradient-to-br from-violet-600 to-fuchsia-600 shadow-violet-500/30'}`}>
                    <FaCheckCircle className="text-3xl text-white" aria-hidden />
                  </div>
                  <h2 className="text-lg sm:text-xl font-bold text-gray-900 dark:text-white leading-snug">
                    {t('workOrders.troubleshootTree.allStepsCompleteTitle')}
                  </h2>
                  <p className="text-sm text-gray-600 dark:text-gray-300 leading-relaxed max-w-md mx-auto">
                    {workOrderName
                      ? t('workOrders.troubleshootTree.allStepsCompleteBodyWo')
                      : t('workOrders.troubleshootTree.allStepsCompleteBodyStandalone')}
                  </p>
                  <div className="flex flex-col gap-3 pt-2 max-w-md mx-auto w-full">
                    <button
                      type="button"
                      onClick={() => {
                        if (workOrderName) void completeGuideAndReturn();
                        else navigate('/support');
                      }}
                      className={BTN_PRIMARY}
                      disabled={Boolean(workOrderName && completingGuide)}
                    >
                      {workOrderName
                        ? completingGuide
                          ? t('common.saving')
                          : t('workOrders.troubleshootTree.continueToResolveComplaint')
                        : t('workOrders.troubleshootTree.backToSupportFromGuide')}
                    </button>
                    <button type="button" onClick={restartCategoryFromBeginning} className={BTN_SECONDARY}>
                      {t('workOrders.troubleshootTree.reviewCategoryAgain')}
                    </button>
                  </div>
                </div>
              ) : cur ? (
                <>
                  {stepImageUrl ? (
                    <div className="bg-gray-50 dark:bg-gray-900/50">
                      <img
                        src={stepImageUrl}
                        alt={cur.heroCaption}
                        className="w-full max-h-48 sm:max-h-56 object-cover"
                        loading="lazy"
                        decoding="async"
                        referrerPolicy="no-referrer"
                        onError={(e) => {
                          e.currentTarget.style.display = 'none';
                        }}
                      />
                      <p className="text-center text-xs text-gray-500 dark:text-gray-400 py-2 px-4">{cur.heroCaption}</p>
                    </div>
                  ) : (
                    <>
                      <div className={`aspect-[16/10] max-h-52 sm:max-h-60 flex items-end p-4 bg-gradient-to-br ${grad}`}>
                        <span className="text-white/90 text-xs font-medium max-w-[85%]">{cur.heroCaption}</span>
                      </div>
                      <p className="text-center text-xs text-gray-500 dark:text-gray-400 py-2 px-4">{cur.heroCaption}</p>
                    </>
                  )}

                  <div className="p-5 sm:p-6 space-y-4">
                    <h2 className="text-lg sm:text-xl font-bold text-gray-900 dark:text-white leading-snug">{cur.title}</h2>
                    <p className="text-sm text-gray-600 dark:text-gray-300">{t('workOrders.troubleshootTree.introHint')}</p>

                    <div className="rounded-xl bg-violet-50/80 dark:bg-gray-900/60 divide-y divide-violet-100 dark:divide-gray-700 border border-violet-100/80 dark:border-gray-700">
                      {cur.bullets.map((b, i) => (
                        <p key={i} className="text-sm text-gray-700 dark:text-gray-300 p-4 leading-relaxed">
                          {b}
                        </p>
                      ))}
                    </div>

                    <div className="flex flex-col gap-3">
                      {stepIndex > 0 && !showReasonInput && (
                        <button type="button" onClick={prev} className={BTN_SECONDARY}>
                          <FaChevronLeft className="text-sm shrink-0" aria-hidden />
                          {t('workOrders.troubleshootTree.previousStep')}
                        </button>
                      )}
                      <button type="button" onClick={next} className={BTN_PRIMARY}>
                        <span className="flex h-7 w-7 items-center justify-center rounded-full border-2 border-white/90 shrink-0">
                          <FaCheck className="text-xs" />
                        </span>
                        {t('workOrders.troubleshootTree.confirmTried')}
                      </button>
                    </div>

                    {showReasonInput ? (
                      <div
                        className="rounded-xl border border-violet-200/90 dark:border-violet-700/60 bg-gradient-to-br from-violet-50/95 via-fuchsia-50/50 to-violet-100/70 dark:from-violet-950/45 dark:via-fuchsia-950/25 dark:to-violet-900/35 p-4 sm:p-5 space-y-3 shadow-md shadow-violet-500/10"
                        role="region"
                        aria-label={t('workOrders.troubleshootTree.cantCompleteStepPrompt')}
                      >
                        <p className="text-sm font-bold text-gray-900 dark:text-violet-50 leading-snug">
                          {t('workOrders.troubleshootTree.cantCompleteStepPrompt')}
                        </p>
                        <textarea
                          value={skipReason}
                          onChange={(e) => setSkipReason(e.target.value)}
                          rows={4}
                          placeholder={t('workOrders.troubleshootTree.cantCompletePlaceholder')}
                          className="w-full rounded-lg border border-violet-200/90 dark:border-violet-700/70 bg-white dark:bg-gray-900 text-gray-900 dark:text-white text-sm p-3 min-h-[100px] resize-y focus:ring-2 focus:ring-violet-500 focus:border-violet-500 outline-none placeholder:text-gray-400 dark:placeholder:text-gray-500"
                        />
                        <button type="button" onClick={() => void submitSkipReason()} className={BTN_PRIMARY} disabled={saveLoading}>
                          {t('workOrders.troubleshootTree.saveExplanationContinue')}
                        </button>
                        <button
                          type="button"
                          onClick={cancelReasonPanel}
                          className="w-full min-h-[48px] text-center text-sm font-medium text-violet-700 dark:text-violet-300 underline underline-offset-2 hover:text-violet-900 dark:hover:text-violet-200"
                        >
                          {t('workOrders.troubleshootTree.backToChecks')}
                        </button>
                      </div>
                    ) : (
                      <button
                        type="button"
                        onClick={openReasonPanel}
                        className="w-full min-h-[48px] text-center text-sm font-medium text-violet-700 dark:text-violet-300 underline underline-offset-2 hover:text-violet-900 dark:hover:text-violet-200"
                      >
                        {t('workOrders.troubleshootTree.cantComplete')}
                      </button>
                    )}
                  </div>
                </>
              ) : (
                <div className="p-8 text-center text-sm text-gray-500 dark:text-gray-400">{t('workOrders.troubleshootTree.noSteps')}</div>
              )}
            </div>
          </>
        )}

        {/* ── Footer ── */}
        <div className="mt-8 rounded-2xl bg-white/70 dark:bg-gray-800/60 border border-violet-200/50 dark:border-gray-700 p-5 flex gap-3 shadow-sm">
          <FaHeadset className="text-violet-600 dark:text-violet-400 text-xl shrink-0 mt-0.5" />
          <div>
            <p className="font-semibold text-gray-900 dark:text-white text-sm">{t('workOrders.troubleshootTree.footerTitle')}</p>
            <p className="text-sm text-gray-600 dark:text-gray-300 mt-1 leading-relaxed">
              {isUltrasound
                ? 'If none of the steps above resolve the issue, escalate to GE Healthcare / SAMAMA with the error codes and findings documented in your Technical Report.'
                : t('workOrders.troubleshootTree.footerHint')}
            </p>
          </div>
        </div>
      </div>
    </>
  );
};

export default SupportTroubleshoot;