import { motion } from 'framer-motion';
import { useData } from '../hooks/useData';
import { AlertTriangle, Info, TrendingUp, RefreshCw, Zap, Clock, FileSearch, DollarSign, Timer } from 'lucide-react';

interface Insight {
  id: string;
  title: string;
  severity: string;
  metric: string;
  detail: string;
  recommendation: string;
}

interface RedFlag {
  id: string;
  headline: string;
  detail: string;
  severity: string;
  metric_value: string;
  metric_label: string;
}

interface InsightsData {
  insights: Insight[];
  red_flags?: RedFlag[];
}

const ICONS: Record<string, React.ElementType> = {
  exploration_dominance: FileSearch,
  zero_edit_sessions: AlertTriangle,
  tool_failure_hotspot: Zap,
  marathon_sessions: Clock,
  cache_efficiency: TrendingUp,
  cli_comparison: Info,
  repeated_reads: RefreshCw,
  single_interaction: Timer,
};

const SEVERITY_STYLES: Record<string, string> = {
  critical: 'border-rose/40 bg-rose/8',
  high: 'border-rose/30 bg-rose/5',
  medium: 'border-amber/30 bg-amber/5',
  info: 'border-accent/20 bg-accent/5',
};

const SEVERITY_BADGE: Record<string, string> = {
  critical: 'bg-rose/20 text-rose',
  high: 'bg-rose/20 text-rose',
  medium: 'bg-amber/20 text-amber',
  info: 'bg-accent/20 text-accent',
};

// Headlines derived from data — use insight.title from JSON directly

export default function Insights() {
  const { data, loading } = useData<InsightsData>('/data/insights.json', { insights: [], red_flags: [] });

  if (loading || !data.insights.length) return null;

  const redFlags = data.red_flags || [];

  const featured = data.insights.filter(i =>
    ['zero_edit_sessions', 'repeated_reads', 'single_interaction', 'exploration_dominance'].includes(i.id)
  );
  const rest = data.insights.filter(i => !featured.find(f => f.id === i.id));

  return (
    <section className="px-8 max-w-7xl mx-auto py-20">
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true }}
        transition={{ duration: 0.6 }}
      >
        <h2 className="text-3xl md:text-4xl font-bold mb-2">
          The numbers that should make you uncomfortable.
        </h2>
        <p className="text-text-2 mb-10 max-w-2xl">
          {data.insights.length + redFlags.length} findings from analyzing every tool call, every prompt, and every file touch
          across your engineering team's AI sessions.
        </p>
      </motion.div>

      {/* Red flag callouts from data */}
      {redFlags.map((flag, i) => (
        <motion.div
          key={flag.id}
          initial={{ opacity: 0, scale: 0.97 }}
          whileInView={{ opacity: 1, scale: 1 }}
          viewport={{ once: true }}
          transition={{ delay: i * 0.1, duration: 0.5 }}
          className="mb-4 bg-rose/5 border-2 border-rose/30 rounded-xl p-5 flex items-center gap-5"
        >
          <div className="shrink-0 w-12 h-12 rounded-full bg-rose/20 flex items-center justify-center">
            <AlertTriangle size={20} className="text-rose" />
          </div>
          <div className="flex-1 min-w-0">
            <div className="flex items-center gap-2 mb-1">
              <span className="text-[10px] font-semibold uppercase tracking-wider text-rose bg-rose/20 px-2 py-0.5 rounded-full">
                {flag.severity}
              </span>
              <span className="text-[10px] font-mono text-text-3">{flag.metric_label}</span>
            </div>
            <div className="text-lg font-bold text-text-1 mb-1">{flag.headline}</div>
            <div className="text-sm text-text-2 leading-relaxed">{flag.detail}</div>
          </div>
          <div className="shrink-0 hidden md:block text-right">
            <div className="text-2xl font-black text-rose">{flag.metric_value}</div>
          </div>
        </motion.div>
      ))}

      {/* Featured insights - large cards */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6 mt-6">
        {featured.map((insight, i) => {
          const Icon = ICONS[insight.id] || Info;
          return (
            <motion.div
              key={insight.id}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: i * 0.1, duration: 0.5 }}
              className={`border rounded-xl p-6 ${SEVERITY_STYLES[insight.severity] || SEVERITY_STYLES.info}`}
            >
              <div className="flex items-start gap-3 mb-3">
                <Icon size={20} className="text-text-2 mt-0.5 shrink-0" />
                <div>
                  <div className="flex items-center gap-2 mb-1">
                    <span className={`text-[10px] font-semibold uppercase px-2 py-0.5 rounded-full ${SEVERITY_BADGE[insight.severity] || SEVERITY_BADGE.info}`}>
                      {insight.severity}
                    </span>
                  </div>
                  <h3 className="text-lg font-bold text-text-1 mb-1">
                    {insight.title}
                  </h3>
                  <p className="text-sm text-text-2 leading-relaxed mb-3">{insight.detail}</p>
                  <div className="text-xs text-text-3 bg-surface-0/50 rounded-lg p-3 border border-border-dim">
                    <span className="font-semibold text-accent">Recommendation:</span> {insight.recommendation}
                  </div>
                </div>
              </div>
            </motion.div>
          );
        })}
      </div>

      {/* Remaining insights - smaller */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3">
        {rest.map((insight, i) => {
          const Icon = ICONS[insight.id] || Info;
          return (
            <motion.div
              key={insight.id}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: 0.4 + i * 0.08, duration: 0.5 }}
              className={`border rounded-xl p-4 ${SEVERITY_STYLES[insight.severity] || SEVERITY_STYLES.info}`}
            >
              <Icon size={16} className="text-text-3 mb-2" />
              <h3 className="text-sm font-bold text-text-1 mb-1">
                {insight.title}
              </h3>
              <p className="text-xs text-text-2 leading-relaxed">{insight.metric}</p>
            </motion.div>
          );
        })}
      </div>
    </section>
  );
}
