'use client';

import { Sparkles, ArrowRight, Anchor, Send, ClipboardCheck, FileSignature } from 'lucide-react';

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import type { PipelineStage } from '@/lib/constants';

interface StageGuidanceCardProps {
  /** Current pipeline stage. Drives the per-stage copy + actions. */
  stage: PipelineStage;
  /** Callbacks for each shortcut action. Optional - if absent, the
   *  corresponding button is hidden. */
  onScrollToRecommender?: () => void;
  onOpenEoiGenerate?: () => void;
  onOpenQualification?: () => void;
  /** True when berth_interest milestone is satisfied (≥1 linked berth);
   *  used to hide the "Add a berth" prompt when the rep has already
   *  done it. */
  hasLinkedBerth?: boolean;
}

interface StageCopy {
  title: string;
  description: string;
  next: string;
  actionLabel?: string;
  actionIcon?: typeof Anchor;
  onAction?: 'recommender' | 'eoi' | 'qualification';
}

/**
 * §7.2 - Stage-aware "what to do next" prompt that sits on the Overview
 * tab in the spot the Payments section occupies post-reservation. Each
 * pre-deposit stage gets a one-card prompt + a shortcut button that
 * jumps the rep to the right surface.
 *
 * Replaces the previously-empty Payments slot on enquiry / qualified /
 * nurturing / eoi stages with an actionable hint.
 */
function copyFor(stage: PipelineStage, ctx: { hasLinkedBerth?: boolean }): StageCopy | null {
  switch (stage) {
    case 'enquiry':
      return {
        title: 'Next: qualify the interest',
        description: ctx.hasLinkedBerth
          ? 'Confirm vessel details, walk the rep through the qualification checklist, then move to Qualified.'
          : 'Link a berth (or capture desired dimensions) and run the qualification checklist before moving on.',
        next: 'qualified',
        actionLabel: ctx.hasLinkedBerth ? 'Open qualification checklist' : 'Recommend a berth',
        actionIcon: ctx.hasLinkedBerth ? ClipboardCheck : Anchor,
        onAction: ctx.hasLinkedBerth ? 'qualification' : 'recommender',
      };
    case 'qualified':
      return {
        title: 'Next: send the EOI',
        description:
          'Generate the Expression of Interest with all parties and send for signing. Auto-advances to EOI on send.',
        next: 'eoi',
        actionLabel: 'Generate EOI',
        actionIcon: Send,
        onAction: 'eoi',
      };
    case 'nurturing':
      return {
        title: 'Stay in touch',
        description:
          'Deal is in nurture - schedule a follow-up reminder or log a contact when the prospect re-engages, then move them back to Qualified.',
        next: 'qualified',
      };
    case 'eoi':
      return {
        title: 'Waiting on signatures',
        description:
          'All signers will get a notification once each completes; the deal auto-advances to Reservation when everyone signs.',
        next: 'reservation',
      };
    default:
      // Reservation onwards have their own dedicated sections (Payments,
      // Documents) so the guidance card doesn't render.
      return null;
  }
}

export function StageGuidanceCard({
  stage,
  onScrollToRecommender,
  onOpenEoiGenerate,
  onOpenQualification,
  hasLinkedBerth,
}: StageGuidanceCardProps) {
  const copy = copyFor(stage, { hasLinkedBerth });
  if (!copy) return null;

  const ActionIcon = copy.actionIcon ?? FileSignature;
  const action =
    copy.onAction === 'recommender' && onScrollToRecommender
      ? onScrollToRecommender
      : copy.onAction === 'eoi' && onOpenEoiGenerate
        ? onOpenEoiGenerate
        : copy.onAction === 'qualification' && onOpenQualification
          ? onOpenQualification
          : null;

  return (
    <Card>
      <CardHeader className="pb-2">
        <CardTitle className="flex items-center gap-2 text-sm font-semibold uppercase tracking-wide text-muted-foreground">
          <Sparkles className="h-3.5 w-3.5" aria-hidden />
          Next step
        </CardTitle>
      </CardHeader>
      <CardContent className="space-y-3">
        <div>
          <p className="text-sm font-medium text-foreground">{copy.title}</p>
          <p className="mt-1 text-xs text-muted-foreground">{copy.description}</p>
        </div>
        {copy.actionLabel && action ? (
          <Button size="sm" onClick={action} className="gap-1.5">
            <ActionIcon className="h-3.5 w-3.5" aria-hidden />
            {copy.actionLabel}
            <ArrowRight className="h-3 w-3" aria-hidden />
          </Button>
        ) : null}
      </CardContent>
    </Card>
  );
}
