import { useState, useEffect, useRef } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { KpiHero } from './KpiHero';
import { OracleBar } from './OracleBar';
import { AIPriorityCards } from './AIPriorityCards';
import { PipelinePulse } from './PipelinePulse';
import { useCommandData } from '../../shared/hooks/useCommandData';
import styles from './CommandPillar.module.css';

/**
 * CommandPillar — Pillar 1: The Morning Briefing
 * Merges: Dashboard + Oracle
 * Core question: "What matters today?"
 *
 * Layout (top to bottom):
 *   1. KpiHero        — 3 primary KPIs in confident typography
 *   2. OracleBar      — NL prompt (persistent, prominent)
 *   3. AIPriorityCards — 3 AI-surfaced priority signals
 *   4. PipelinePulse  — Journey River widget (scrollable)
 */
export default function CommandPillar() {
  const { data, isLoading } = useCommandData();
  const greeting = useGreeting();

  return (
    <div className={styles.root}>
      {/* Greeting header */}
      <motion.div
        className={styles.greeting}
        initial={{ opacity: 0, y: -12 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.4, ease: [0.4, 0, 0.2, 1] }}
      >
        <h1 className={styles.greetingText}>{greeting}</h1>
        <span className={styles.greetingDate}>
          {new Date().toLocaleDateString('en-IN', {
            weekday: 'long', month: 'long', day: 'numeric',
          })}
        </span>
      </motion.div>

      {/* KPI Hero — always visible, never loading skeleton */}
      <KpiHero
        kpis={data?.kpis}
        isLoading={isLoading}
      />

      {/* Oracle NL prompt bar — prominent, persistent */}
      <OracleBar />

      {/* AI Priority Cards — system-surfaced signals */}
      <AIPriorityCards
        cards={data?.priorityCards}
        isLoading={isLoading}
      />

      {/* Pipeline Pulse — Journey River widget */}
      <PipelinePulse
        stages={data?.pipelineStages}
        isLoading={isLoading}
      />
    </div>
  );
}

function useGreeting(): string {
  const hour = new Date().getHours();
  if (hour < 12) return 'Good morning.';
  if (hour < 17) return 'Good afternoon.';
  return 'Good evening.';
}
