'use client';

import { AlertCircle } from 'lucide-react';

import { PIPELINE_STAGES, type PipelineStage } from '@/lib/constants';

interface SkipAheadInterest {
  pipelineStage: string;
  dateEoiSent?: string | null;
  dateEoiSigned?: string | null;
  dateReservationSigned?: string | null;
  dateDepositReceived?: string | null;
  dateContractSent?: string | null;
  dateContractSigned?: string | null;
  eoiDocStatus?: string | null;
  reservationDocStatus?: string | null;
  contractDocStatus?: string | null;
}

/**
 * Soft banner that fires when a rep skip-advanced a deal past earlier
 * milestones without backfilling the matching dates / doc-status badges.
 *
 * Why we care: the funnel/conversion analytics rely on these timestamps to
 * compute how long deals sit in each stage. A deal that jumped straight to
 * deposit_paid with no dateEoiSent looks like a 0-day-EOI in the report,
 * which skews the cohort.
 *
 * The banner is informational only — no enforcement. Reps still have the
 * override path; we just nudge them to fill in the gaps.
 */
export function SkipAheadBanner({ interest }: { interest: SkipAheadInterest }) {
  const stageIdx = PIPELINE_STAGES.indexOf(interest.pipelineStage as PipelineStage);
  if (stageIdx < 0) return null;
  const eoiIdx = PIPELINE_STAGES.indexOf('eoi');
  const reservationIdx = PIPELINE_STAGES.indexOf('reservation');
  const depositIdx = PIPELINE_STAGES.indexOf('deposit_paid');

  const gaps: string[] = [];
  // Past EOI but never stamped sent → likely a skip.
  if (stageIdx > eoiIdx && !interest.dateEoiSent) gaps.push('EOI sent date');
  if (stageIdx > eoiIdx && interest.eoiDocStatus !== 'signed' && !interest.dateEoiSigned) {
    gaps.push('EOI signed date');
  }
  if (
    stageIdx > reservationIdx &&
    interest.reservationDocStatus !== 'signed' &&
    !interest.dateReservationSigned
  ) {
    gaps.push('Reservation signed date');
  }
  if (stageIdx > depositIdx && !interest.dateDepositReceived) {
    gaps.push('Deposit received date');
  }

  if (gaps.length === 0) return null;

  return (
    <div
      role="status"
      className="flex items-start gap-2 rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-900"
    >
      <AlertCircle className="size-3.5 mt-0.5 shrink-0" aria-hidden />
      <div>
        <p className="font-medium">
          {gaps.length === 1
            ? 'A past milestone is missing its date.'
            : `${gaps.length} past milestones are missing their dates.`}
        </p>
        <p className="mt-0.5 text-amber-800">
          Backfill {gaps.join(' · ')} below so reports show accurate cycle times.
        </p>
      </div>
    </div>
  );
}