import { motion, AnimatePresence } from 'framer-motion';
import { useNavigate } from 'react-router-dom';
import styles from './AIPriorityCards.module.css';

interface PriorityCard {
  id: string;
  type: 'qd_surge' | 'vault_engagement' | 'follow_up' | 'site_visit';
  headline: string;       // e.g. "Arjun's QD jumped 22 points — call now"
  sublabel?: string;      // e.g. "QD 84 · Site Visit Tomorrow"
  personId?: string;
  personName?: string;
  cta: string;            // e.g. "Call Now" | "View Profile" | "Send WhatsApp"
  urgency: 'high' | 'medium' | 'low';
}

interface AIPriorityCardsProps {
  cards?: PriorityCard[];
  isLoading: boolean;
}

const URGENCY_COLOR: Record<PriorityCard['urgency'], string> = {
  high:   'var(--color-amber)',
  medium: 'var(--color-violet-light)',
  low:    'var(--color-text-secondary)',
};

/**
 * AIPriorityCards
 * 3 AI-surfaced signals. System decides what matters; broker acts.
 * No configuration, no filter UI — pure intent-driven surface.
 * Stagger-reveals on mount. Urgency color-codes the left accent.
 */
export function AIPriorityCards({ cards, isLoading }: AIPriorityCardsProps) {
  const navigate = useNavigate();

  if (isLoading) {
    return (
      <div className={styles.section}>
        <h2 className={styles.sectionTitle}>Priority Signals</h2>
        <div className={styles.grid}>
          {[0, 1, 2].map(i => (
            <div key={i} className={`${styles.skeleton} glass shimmer`} />
          ))}
        </div>
      </div>
    );
  }

  if (!cards || cards.length === 0) {
    return (
      <div className={styles.section}>
        <h2 className={styles.sectionTitle}>Priority Signals</h2>
        <p className={styles.empty}>Pipeline is calm — no urgent signals right now.</p>
      </div>
    );
  }

  const handleCta = (card: PriorityCard) => {
    if (card.personId) navigate(`/pipeline/${card.personId}`);
  };

  return (
    <div className={styles.section}>
      <h2 className={styles.sectionTitle}>
        <span className={styles.aiStar}>✦</span> Priority Signals
      </h2>
      <div className={styles.grid}>
        {cards.slice(0, 3).map((card, i) => (
          <motion.div
            key={card.id}
            className={`${styles.card} glass-card`}
            initial={{ opacity: 0, y: 16 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: i * 0.1, duration: 0.35, ease: [0.4, 0, 0.2, 1] }}
            style={{
              borderLeft: `2px solid ${URGENCY_COLOR[card.urgency]}`,
            }}
          >
            {/* Urgency dot */}
            <span
              className={styles.urgencyDot}
              style={{ background: URGENCY_COLOR[card.urgency] }}
            />

            {/* Content */}
            <div className={styles.content}>
              <p className={styles.headline}>{card.headline}</p>
              {card.sublabel && (
                <p className={styles.sublabel}>{card.sublabel}</p>
              )}
            </div>

            {/* CTA */}
            <button
              className="btn-ghost"
              onClick={() => handleCta(card)}
              aria-label={`${card.cta} — ${card.personName ?? 'client'}`}
            >
              {card.cta} →
            </button>
          </motion.div>
        ))}
      </div>
    </div>
  );
}
