import { motion } from 'framer-motion';
import styles from './PipelinePulse.module.css';

/**
 * PipelinePulse — Journey River widget for Command Pillar.
 * Shows lead count per pipeline stage as a horizontal flow.
 * Contextual, scrollable — never navigates away.
 */

interface PipelineStage {
  id: string;
  label: string;
  count: number;
  value?: string;
}

interface PipelinePulseProps {
  stages?: PipelineStage[];
  isLoading: boolean;
}

const STAGE_COLORS = [
  'var(--color-text-tertiary)',
  'var(--color-amber)',
  'var(--color-violet)',
  'var(--color-violet-light)',
  'var(--color-green)',
];

export function PipelinePulse({ stages, isLoading }: PipelinePulseProps) {
  if (isLoading || !stages || stages.length === 0) {
    return (
      <div className={styles.section}>
        <h2 className={styles.sectionTitle}>Pipeline Pulse</h2>
        <div className={styles.flow}>
          {[0, 1, 2, 3].map(i => (
            <div key={i} className={`${styles.stageSkeleton} shimmer`} />
          ))}
        </div>
      </div>
    );
  }

  const maxCount = Math.max(...stages.map(s => s.count), 1);

  return (
    <div className={styles.section}>
      <h2 className={styles.sectionTitle}>Pipeline Pulse</h2>
      <div className={styles.flow}>
        {stages.map((stage, i) => {
          const barHeight = Math.max((stage.count / maxCount) * 80, 4);
          const color = STAGE_COLORS[i % STAGE_COLORS.length];

          return (
            <motion.div
              key={stage.id}
              className={styles.stageCol}
              initial={{ opacity: 0, y: 12 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: i * 0.07, duration: 0.3 }}
            >
              {/* Bar */}
              <div className={styles.barTrack}>
                <motion.div
                  className={styles.bar}
                  style={{ background: color }}
                  initial={{ height: 0 }}
                  animate={{ height: barHeight }}
                  transition={{ delay: i * 0.07 + 0.2, duration: 0.5, ease: [0.4, 0, 0.2, 1] }}
                />
              </div>

              {/* Count */}
              <span className={styles.count} style={{ color }}>
                {stage.count}
              </span>

              {/* Label */}
              <span className={styles.label}>{stage.label}</span>

              {/* Value (revenue) */}
              {stage.value && (
                <span className={styles.value}>{stage.value}</span>
              )}
            </motion.div>
          );
        })}

        {/* Flow arrows between stages */}
        <div className={styles.arrows} aria-hidden>
          {stages.slice(0, -1).map((_, i) => (
            <span key={i} className={styles.arrow}>›</span>
          ))}
        </div>
      </div>
    </div>
  );
}
