import React, { useEffect, useRef, useState } from "react";
import { useNavigate } from "react-router-dom";

import { Alert, Box, Button, IconButton, LinearProgress, Typography } from "@mui/material";
import CheckCircleIcon from "@mui/icons-material/CheckCircle";
import CloseIcon from "@mui/icons-material/Close";
import RadioButtonUncheckedIcon from "@mui/icons-material/RadioButtonUnchecked";

import { api, getApiErrorMessage } from "../api";
import { useI18n } from "../i18n/I18nProvider";
import { getUserKeyFromToken } from "../themePrefs";
import { PageSection } from "../layout/PageLayout";

type MeResponse = {
  email?: string | null;
  firstName?: string | null;
  lastName?: string | null;
  displayName?: string | null;
};
type CareerProfileResponse = {
  cvText?: string | null;
  profile?: {
    summary?: string[];
    jobs?: unknown[];
    education?: unknown[];
    projects?: unknown[];
    certifications?: unknown[];
    languages?: unknown[];
    otherSections?: unknown[];
    skills?: string[];
    interests?: string[];
  };
};
type ConnectionStatus = { connected?: boolean };

export default function OnboardingChecklist({ hasJobs }: { hasJobs: boolean | null }) {
  const navigate = useNavigate();
  const { t } = useI18n();
  // The session boundary disposes this owner before another account is adopted.
  const [dismissalKey] = useState(() => `onboardingDismissed:${getUserKeyFromToken()}`);
  const [dismissed, setDismissed] = useState(() => {
    try { return window.localStorage.getItem(dismissalKey) === "true"; }
    catch { return false; }
  });
  const skippedKey = dismissalKey.replace('onboardingDismissed:', 'onboardingSkipped:');
  const [skipped, setSkipped] = useState<string[]>(() => {
    try {
      const value: unknown = JSON.parse(localStorage.getItem(skippedKey) ?? '[]');
      return Array.isArray(value) ? ['/profile', '/career', '/settings/connected-accounts', '/jobs'].filter(path => value.includes(path)) : [];
    } catch { return []; }
  });
  const [guideStep, setGuideStep] = useState<number | null>(null);
  const guideTitle = useRef<HTMLHeadingElement>(null);
  const guideEntry = useRef<HTMLButtonElement>(null);
  const resumeEntry = useRef<HTMLButtonElement>(null);
  const returnToEntry = useRef(false);
  const stepActions = useRef<Record<string, HTMLButtonElement | null>>({});
  const pendingStepFocus = useRef<string | null>(null);
  const [status, setStatus] = useState<{ profile: boolean; cv: boolean; email: boolean } | null>(null);
  const [loading, setLoading] = useState(true);
  const [loadError, setLoadError] = useState<{ cause: unknown } | null>(null);
  const [readAttempt, setReadAttempt] = useState(0);
  const dismissRef = useRef<HTMLButtonElement>(null);

  useEffect(() => {
    if (guideStep !== null) guideTitle.current?.focus();
    else if (returnToEntry.current) {
      returnToEntry.current = false;
      (resumeEntry.current ?? guideEntry.current)?.focus();
    }
  }, [guideStep, dismissed]);

  useEffect(() => {
    if (!pendingStepFocus.current) return;
    (stepActions.current[pendingStepFocus.current] ?? guideEntry.current)?.focus();
    pendingStepFocus.current = null;
  }, [skipped]);

  const resume = (walkthrough: boolean) => {
    try { localStorage.setItem(dismissalKey, 'false'); } catch { /* Session-only continuation remains available. */ }
    if (!walkthrough) returnToEntry.current = true;
    setDismissed(false); setGuideStep(walkthrough ? 0 : null);
  };
  const skip = (path: string, value: boolean) => {
    const next = skipped.filter(item => item !== path);
    if (value) next.push(path);
    try { localStorage.setItem(skippedKey, JSON.stringify(next)); } catch { /* Keep this session's choice. */ }
    pendingStepFocus.current = path;
    setSkipped(next);
  };
  const closeGuide = () => { returnToEntry.current = true; setGuideStep(null); };

  useEffect(() => {
    if (dismissed) return;
    let active = true;
    setLoading(true);
    setLoadError(null);
    setStatus(null);
    Promise.all([
      api.get<MeResponse>("/auth/me"),
      api.get<CareerProfileResponse>("/career/profile"),
      Promise.all(["/gmail/status", "/microsoft-graph/status", "/imap/status"].map((url) =>
        api.get<ConnectionStatus>(url).then((r) => Boolean(r.data?.connected)),
      )),
    ]).then(([me, career, connections]) => {
      if (!active) return;
      const profile = career.data?.profile;
      const structuredCount = [
        ...(profile?.summary ?? []),
        ...(profile?.jobs ?? []),
        ...(profile?.education ?? []),
        ...(profile?.projects ?? []),
        ...(profile?.certifications ?? []),
        ...(profile?.languages ?? []),
        ...(profile?.otherSections ?? []),
        ...(profile?.skills ?? []),
        ...(profile?.interests ?? []),
      ].length;
      setStatus({
        profile: Boolean(me.data?.displayName?.trim() || me.data?.firstName?.trim() || me.data?.lastName?.trim()),
        cv: structuredCount > 0 || Boolean(career.data?.cvText?.trim()),
        email: connections.some(Boolean),
      });
    }).catch((cause: unknown) => {
      if (active) setLoadError({ cause });
    }).finally(() => {
      if (active) setLoading(false);
    });
    return () => { active = false; };
  }, [dismissed, readAttempt]);

  // These four recorded steps are guidance, not a completeness score or proof of
  // verified email, an imported CV, a rendered PDF, or a live mailbox grant.
  const steps = [
    { done: status?.profile ?? null, label: t("onboardingStepProfile"), path: "/profile", actionLabel: t("onboardingStepProfileAction") },
    { done: status?.cv ?? null, label: t("onboardingStepCv"), path: "/career", actionLabel: t("onboardingStepCvAction") },
    { done: status?.email ?? null, label: t("onboardingStepEmail"), path: "/settings/connected-accounts", actionLabel: t("onboardingStepEmailAction") },
    { done: hasJobs, label: t("onboardingStepJob"), path: "/jobs", actionLabel: t("onboardingStepJobAction") },
  ];
  const completed = steps.filter((step) => step.done === true).length;
  const allDone = Boolean(status && hasJobs !== null && completed === steps.length);
  if (dismissed || (allDone && guideStep === null)) return <Box component="section" aria-label={t('onboardingResumeTitle')}
    sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 2, borderTop: '1px solid', borderColor: 'divider', pt: 2 }}>
    <Box sx={{ minWidth: 0 }}><Typography sx={{ fontWeight: 700 }}>{t('onboardingResumeTitle')}</Typography>
      <Typography variant="body2" color="text.secondary">{t('onboardingResumeBody')}</Typography></Box>
    <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
      {!allDone ? <Button ref={resumeEntry} onClick={() => resume(false)}>{t('onboardingResume')}</Button> : null}
      <Button ref={guideEntry} onClick={() => resume(true)}>{t('onboardingWalkthrough')}</Button>
    </Box>
  </Box>;
  const guideHelp = [t('onboardingGuideProfile'), t('onboardingGuideCareer'), t('onboardingGuideEmail'), t('onboardingGuideJob')];

  return (
    <PageSection surface title={t("onboardingTitle")} description={t("onboardingBody")} actions={
        <IconButton
          ref={dismissRef}
          size="small"
          aria-label={t("onboardingDismiss")}
          onClick={() => {
            try { window.localStorage.setItem(dismissalKey, "true"); }
            catch { /* This dismissal still applies while the page remains open. */ }
            returnToEntry.current = true;
            setGuideStep(null); setDismissed(true);
          }}
        >
          <CloseIcon fontSize="small" />
        </IconButton>
    }>
      <Button ref={guideEntry} onClick={() => setGuideStep(0)} sx={{ mb: 1 }}>{t('onboardingWalkthrough')}</Button>
      {loading ? <>
        <Typography role="status" variant="body2" color="text.secondary">{t("loading")}</Typography>
        <LinearProgress aria-label={t("loading")} sx={{ mt: 1.5 }} />
      </> : loadError ? (
        <Alert severity="error" sx={{ overflowWrap: "anywhere" }} action={
          <Button color="inherit" onClick={() => {
            // Retry is replaced by loading feedback; keep focus inside this setup section.
            dismissRef.current?.focus();
            setReadAttempt((attempt) => attempt + 1);
          }}>{t("retry")}</Button>
        }>{getApiErrorMessage(loadError.cause, t("onboardingLoadFailed"))}</Alert>
      ) : status ? <>
      {hasJobs === null ? (
        <Typography role="status" variant="body2" color="text.secondary">{t("onboardingJobStatusUnknown")}</Typography>
      ) : <Typography variant="caption" color="text.secondary">{completed} / {steps.length}</Typography>}
      <LinearProgress
        variant={hasJobs === null ? "indeterminate" : "determinate"}
        value={hasJobs === null ? undefined : (completed / steps.length) * 100}
        aria-label={hasJobs === null ? t("onboardingJobStatusUnknown") : t("checklistProgress", { completed, total: steps.length })}
        sx={{ my: 1.5 }}
      />
      <Box component="ul" sx={{ display: "grid", gap: 1, listStyle: "none", m: 0, p: 0, minWidth: 0 }}>
        {steps.map((step) => (
          <Box component="li" key={step.path} sx={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 1.5, flexWrap: "wrap", minWidth: 0 }}>
            <Box sx={{ display: "flex", alignItems: "center", gap: 1, minWidth: 0, flex: "1 1 12rem" }}>
              {step.done === null ? null : step.done ? <CheckCircleIcon fontSize="small" color="success" titleAccess={t("checklistProgress", { completed: 1, total: 1 })} sx={{ flexShrink: 0 }} /> : <RadioButtonUncheckedIcon fontSize="small" titleAccess={t("checklistProgress", { completed: 0, total: 1 })} sx={{ color: "text.secondary", flexShrink: 0 }} />}
              <Typography variant="body2" sx={{ fontWeight: step.done ? 400 : 700, color: step.done ? "text.secondary" : "text.primary", textDecoration: step.done ? "line-through" : "none", overflowWrap: "anywhere" }}>
                {step.label}
              </Typography>
            </Box>
            {step.done === false ? <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
              {skipped.includes(step.path) ? <>
                <Typography variant="caption" sx={{ alignSelf: 'center' }}>{t('onboardingSkipped')}</Typography>
                <Button ref={node => { stepActions.current[step.path] = node; }} aria-label={t('onboardingResumeStep', { name: step.label })} onClick={() => skip(step.path, false)}>{t('onboardingResumeStepAction')}</Button>
              </> : <>
                <Button ref={node => { stepActions.current[step.path] = node; }} size="small" variant="text" sx={{ maxWidth: "100%", whiteSpace: "normal", overflowWrap: "anywhere" }} onClick={() => navigate(step.path)}>{step.actionLabel}</Button>
                <Button aria-label={t('onboardingSkipStep', { name: step.label })} onClick={() => skip(step.path, true)}>{t('onboardingSkipAction')}</Button>
              </>}
            </Box> : null}
          </Box>
        ))}
      </Box>
      {skipped.length ? <Typography variant="caption" sx={{ display: 'block', mt: 1 }}>{t('onboardingSkipHelp')}</Typography> : null}
      </> : null}
      {guideStep !== null ? <Box sx={{ mt: 3, pt: 2, borderTop: '1px solid', borderColor: 'divider' }}>
        <PageSection title={steps[guideStep].label} titleRef={guideTitle} level="h3" description={guideHelp[guideStep]}>
          <Typography role="status" variant="body2">{t('onboardingGuideCount', { current: guideStep + 1, total: steps.length })}</Typography>
          <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1, mt: 1 }}>
            <Button onClick={() => navigate(steps[guideStep].path)}>{steps[guideStep].actionLabel}</Button>
            <Button disabled={guideStep === 0} onClick={() => setGuideStep(guideStep - 1)}>{t('onboardingGuidePrevious')}</Button>
            <Button onClick={() => guideStep === steps.length - 1 ? closeGuide() : setGuideStep(guideStep + 1)}>{guideStep === steps.length - 1 ? t('onboardingGuideFinish') : t('onboardingGuideNext')}</Button>
            <Button onClick={closeGuide}>{t('onboardingGuideClose')}</Button>
          </Box>
        </PageSection>
      </Box> : null}
    </PageSection>
  );
}