import { motion } from 'framer-motion';
import { useData } from '../hooks/useData';
import { ArrowRight, AlertCircle, Info } from 'lucide-react';

interface Recommendation {
  priority: string;
  title: string;
  detail: string;
  estimated_savings_monthly?: number;
  effort?: string;
}

interface Overview {
  recommendations?: Recommendation[];
  total_savings_potential?: number;
}

const PRIORITY_STYLES: Record<string, { border: string; bg: string; badge: string; badgeBg: string }> = {
  critical: { border: 'border-rose/30', bg: 'bg-rose/5', badge: 'text-rose', badgeBg: 'bg-rose/15' },
  high: { border: 'border-rose/30', bg: 'bg-rose/5', badge: 'text-rose', badgeBg: 'bg-rose/15' },
  medium: { border: 'border-amber/30', bg: 'bg-amber/5', badge: 'text-amber', badgeBg: 'bg-amber/15' },
  low: { border: 'border-accent/20', bg: 'bg-accent/5', badge: 'text-accent', badgeBg: 'bg-accent/15' },
};

const EFFORT_LABELS: Record<string, string> = {
  low: 'Low effort',
  medium: 'Medium effort',
  high: 'High effort',
};

export default function Recommendations() {
  const { data, loading } = useData<Overview>('/data/overview.json', {});

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

  const recs = data.recommendations;

  return (
    <section className="px-8 max-w-7xl mx-auto py-16">
      <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">
          What to do next.
        </h2>
        <p className="text-text-2 mb-4 max-w-2xl">
          {recs.length} prioritized actions based on the data. Start with the critical items — they have the biggest cost impact.
        </p>
        {data.total_savings_potential != null && data.total_savings_potential > 0 && (
          <div className="mb-8 bg-emerald-500/10 border border-emerald-500/20 rounded-xl px-5 py-3 inline-flex items-center gap-3">
            <span className="text-2xl font-bold text-emerald-400">${data.total_savings_potential.toLocaleString()}</span>
            <span className="text-sm text-text-2">potential monthly savings if all recommendations are implemented</span>
          </div>
        )}
      </motion.div>

      <div className="space-y-3">
        {recs.map((rec, i) => {
          const style = PRIORITY_STYLES[rec.priority] || PRIORITY_STYLES.low;
          const Icon = rec.priority === 'high' ? AlertCircle : Info;
          return (
            <motion.div
              key={i}
              initial={{ opacity: 0, x: -20 }}
              whileInView={{ opacity: 1, x: 0 }}
              viewport={{ once: true }}
              transition={{ delay: i * 0.08, duration: 0.4 }}
              className={`border ${style.border} ${style.bg} rounded-xl p-5 flex items-start gap-4`}
            >
              <div className="shrink-0 mt-0.5">
                <Icon size={18} className={style.badge} />
              </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 px-2 py-0.5 rounded-full ${style.badge} ${style.badgeBg}`}>
                    {rec.priority}
                  </span>
                </div>
                <h3 className="text-base font-bold text-text-1 mb-1">{rec.title}</h3>
                <p className="text-sm text-text-2 leading-relaxed">{rec.detail}</p>
                {(rec.estimated_savings_monthly != null || rec.effort) && (
                  <div className="flex items-center gap-3 mt-2">
                    {rec.estimated_savings_monthly != null && rec.estimated_savings_monthly > 0 && (
                      <span className="text-xs font-semibold text-emerald-400 bg-emerald-500/10 px-2 py-0.5 rounded-full">
                        saves ${rec.estimated_savings_monthly.toLocaleString()}/mo
                      </span>
                    )}
                    {rec.effort && (
                      <span className="text-[10px] text-text-3 bg-surface-2 px-2 py-0.5 rounded-full">
                        {EFFORT_LABELS[rec.effort] || rec.effort}
                      </span>
                    )}
                  </div>
                )}
              </div>
              <ArrowRight size={16} className="text-text-3 shrink-0 mt-1" />
            </motion.div>
          );
        })}
      </div>
    </section>
  );
}
