import { motion } from 'framer-motion';
import { useData } from '../hooks/useData';
import { AlertTriangle } from 'lucide-react';

interface StruggleSignal {
  session_id: string;
  file_path: string;
  edit_count: number;
}

interface ToolAnalysis {
  struggle_signals: StruggleSignal[];
  top_edited_files: Record<string, number>;
  top_read_files: Record<string, number>;
}

function fileName(fp: string): string {
  const parts = fp.split('/');
  return parts[parts.length - 1] || fp;
}

function shortPath(fp: string): string {
  const parts = fp.split('/');
  if (parts.length <= 4) return fp;
  return `.../${parts.slice(-3).join('/')}`;
}

export default function StruggleSignals() {
  const { data, loading } = useData<ToolAnalysis>('/data/tool_analysis.json', {
    struggle_signals: [],
    top_edited_files: {},
    top_read_files: {},
  });

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

  const top15 = data.struggle_signals.slice(0, 15);
  const maxEdits = top15[0]?.edit_count || 1;

  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 AI edited one file <span className="text-amber">87 times</span> in a single session.
        </h2>
        <p className="text-text-2 mb-10 max-w-2xl">
          When the AI edits the same file over and over, it's struggling — trying different approaches,
          fixing its own bugs, or fighting with the codebase. These are sessions where a human probably
          should have intervened earlier.
        </p>
      </motion.div>

      <motion.div
        initial={{ opacity: 0, y: 20 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true }}
        transition={{ delay: 0.1, duration: 0.5 }}
        className="bg-surface-1 border border-border-dim rounded-xl p-5"
      >
        <h3 className="text-sm font-medium text-text-3 uppercase tracking-wider mb-6">
          Struggle Signals — Files Edited 25+ Times in One Session
        </h3>

        <div className="space-y-2">
          {top15.map((s, i) => {
            const pct = (s.edit_count / maxEdits) * 100;
            const severity = s.edit_count >= 50 ? 'rose' : s.edit_count >= 30 ? 'amber' : 'accent';
            const colorVar = severity === 'rose' ? '#fb7185' : severity === 'amber' ? '#fbbf24' : '#818cf8';

            return (
              <motion.div
                key={`${s.session_id}-${s.file_path}`}
                initial={{ opacity: 0, x: -10 }}
                whileInView={{ opacity: 1, x: 0 }}
                viewport={{ once: true }}
                transition={{ delay: i * 0.03, duration: 0.3 }}
                className="flex items-center gap-3 group"
              >
                <div className="w-12 text-right text-sm font-bold shrink-0" style={{ color: colorVar }}>
                  {s.edit_count}
                </div>
                <div className="flex-1 min-w-0">
                  <div className="relative h-7 bg-surface-2 rounded-md overflow-hidden">
                    <motion.div
                      initial={{ width: 0 }}
                      whileInView={{ width: `${pct}%` }}
                      viewport={{ once: true }}
                      transition={{ delay: 0.2 + i * 0.03, duration: 0.6 }}
                      className="absolute inset-y-0 left-0 rounded-md"
                      style={{ background: `${colorVar}33` }}
                    />
                    <div className="relative h-full flex items-center px-3">
                      <span className="text-xs font-medium text-text-1 truncate">
                        {fileName(s.file_path)}
                      </span>
                    </div>
                  </div>
                </div>
                <div className="hidden lg:block text-[10px] text-text-3 truncate max-w-[240px]">
                  {shortPath(s.file_path)}
                </div>
              </motion.div>
            );
          })}
        </div>

        <div className="mt-6 flex items-start gap-2 bg-amber/5 border border-amber/20 rounded-lg p-3">
          <AlertTriangle size={14} className="text-amber shrink-0 mt-0.5" />
          <div className="text-xs text-text-2">
            <span className="font-semibold text-amber">Takeaway:</span>{' '}
            If the AI edits a file more than ~20 times, it's likely stuck. Consider breaking the task
            into smaller pieces or providing more specific instructions upfront.
          </div>
        </div>
      </motion.div>
    </section>
  );
}
