'use client';

import { useEffect, useState } from 'react';
import Link from 'next/link';
import { LAST_RESULT_KEY, RESULT_SAVED_EVENT, safeStorage } from '@/lib/storage';

export const RETAKE_LABEL = 'Retake your assessment';

/** True once this device has completed the assessment at least once. */
export function useHasCompleted(): boolean {
  const [completed, setCompleted] = useState(false);
  useEffect(() => {
    const check = () => {
      try {
        setCompleted(Boolean(safeStorage()?.getItem(LAST_RESULT_KEY)));
      } catch {}
    };
    check();
    window.addEventListener(RESULT_SAVED_EVENT, check);
    window.addEventListener('storage', check);
    return () => {
      window.removeEventListener(RESULT_SAVED_EVENT, check);
      window.removeEventListener('storage', check);
    };
  }, []);
  return completed;
}

/** A link to the assessment that reads "Retake your assessment" for people who have already finished it. */
export function AssessmentLink({
  label,
  shortLabel,
  shortRetakeLabel = 'Retake',
  className,
  children,
}: {
  label: string;
  /** Optional shorter label for very narrow screens. */
  shortLabel?: string;
  shortRetakeLabel?: string;
  className?: string;
  /** Rendered after the label, e.g. an icon. */
  children?: React.ReactNode;
}) {
  const completed = useHasCompleted();
  const full = completed ? RETAKE_LABEL : label;
  return (
    <Link href="/assessment" className={className}>
      {shortLabel ? (
        <>
          <span className="hide-xs">{full}</span>
          <span className="show-xs">{completed ? shortRetakeLabel : shortLabel}</span>
        </>
      ) : (
        full
      )}
      {children}
    </Link>
  );
}