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

/**
 * OracleResultCard
 * Renders the Oracle response. Each data row stagger-fades at 100ms intervals.
 * Always shows an AI summary line above the data.
 * NEVER shows: canvas ID, fork/merge controls, schema catalog, MCP tools,
 * revision history, query plan, execution stats, or raw SQL.
 */

interface OracleResult {
  summary: string;           // AI-generated plain-English summary
  visualization?: {
    type: 'bar' | 'list' | 'metric' | 'table';
    data: any[];
    xKey?: string;
    yKey?: string;
    columns?: string[];
  };
  actions?: {
    label: string;
    personId?: string;
    type: 'view_client' | 'generic';
  }[];
}

interface OracleResultCardProps {
  result: OracleResult;
  query: string;
}

export function OracleResultCard({ result, query }: OracleResultCardProps) {
  const navigate = useNavigate();
  const rows = result.visualization?.data ?? [];

  return (
    <motion.div
      className={`${styles.card} glass-card`}
      initial={{ opacity: 0, y: 12 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.3, ease: [0.4, 0, 0.2, 1] }}
    >
      {/* AI summary line — always first */}
      <motion.p
        className={styles.summary}
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ delay: 0.1 }}
      >
        <span className={styles.aiStar}>✦</span> {result.summary}
      </motion.p>

      {/* Data rows stagger-fade */}
      {result.visualization?.type === 'list' && (
        <div className={styles.list}>
          {rows.map((row: any, i: number) => (
            <motion.div
              key={i}
              className={styles.listRow}
              initial={{ opacity: 0, x: -8 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ delay: 0.15 + i * 0.1, duration: 0.25 }}
            >
              <span className={styles.rowLabel}>{row.label ?? row.name}</span>
              <span className={styles.rowValue}
                style={{ color: 'var(--color-violet-light)' }}>
                {row.value ?? row.score ?? row.count}
              </span>
            </motion.div>
          ))}
        </div>
      )}

      {result.visualization?.type === 'metric' && rows[0] && (
        <motion.div
          className={styles.metric}
          initial={{ opacity: 0, scale: 0.95 }}
          animate={{ opacity: 1, scale: 1 }}
          transition={{ delay: 0.2 }}
        >
          <span className={styles.metricValue}>{rows[0].value}</span>
          <span className={styles.metricLabel}>{rows[0].label}</span>
        </motion.div>
      )}

      {/* Contextual actions */}
      {result.actions && result.actions.length > 0 && (
        <motion.div
          className={styles.actionRow}
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 0.15 + rows.length * 0.1 }}
        >
          {result.actions.map((action, i) => (
            <button
              key={i}
              className="btn-ghost"
              onClick={() => {
                if (action.type === 'view_client' && action.personId) {
                  navigate(`/pipeline/${action.personId}`);
                }
              }}
            >
              {action.label}
            </button>
          ))}
        </motion.div>
      )}
    </motion.div>
  );
}
