"use client";

import { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { CalendarPlus, Sparkles, TrendingUp, Target } from "lucide-react";
import { SUGGESTED_TOPICS } from "@/lib/mock-data";

const DAYS_LABELS = ["lundi 28", "mardi 29", "mercredi 30", "jeudi 1er mai", "vendredi 2 mai"];

const DIFFICULTY_COLOR = (d: number) => {
  if (d < 35) return "text-emerald-400";
  if (d < 55) return "text-amber-400";
  return "text-rose-400";
};

const INTENT_LABEL: Record<string, string> = {
  informational: "Info",
  commercial: "Commercial",
  transactional: "Achat",
};

export function PlanSidebar() {
  const [toast, setToast] = useState(false);

  function handleFill() {
    setToast(true);
    setTimeout(() => setToast(false), 2800);
  }

  return (
    <div className="flex flex-col gap-4 h-full">
      <div className="flex-1 bg-bg-card border border-border rounded-xl overflow-hidden flex flex-col">
        <div className="px-4 py-3 border-b border-border">
          <h3 className="text-[12.5px] font-semibold text-text">Suggestions IA</h3>
          <p className="text-[11px] text-text-dim mt-0.5">Semaine prochaine</p>
        </div>

        <div className="flex-1 overflow-y-auto p-3 flex flex-col gap-2">
          {SUGGESTED_TOPICS.map((topic, i) => (
            <motion.div
              key={i}
              initial={{ opacity: 0, x: 12 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ delay: i * 0.08 }}
              className="p-3 rounded-lg border border-border bg-bg hover:border-border-bright transition-colors group"
            >
              <div className="text-[12px] text-text font-medium leading-snug mb-2">
                {topic.title}
              </div>
              <div className="text-[10px] text-text-dimmer mb-2">
                Proposé pour {DAYS_LABELS[i % DAYS_LABELS.length]}
              </div>

              <div className="grid grid-cols-3 gap-2 mb-3">
                <div>
                  <div className="text-[9px] text-text-dimmer uppercase tracking-wider mb-0.5 flex items-center gap-1">
                    <TrendingUp className="w-2.5 h-2.5" />
                    Volume
                  </div>
                  <div className="text-[11px] font-mono text-text-dim">
                    {(topic.volume / 1000).toFixed(1)}k
                  </div>
                </div>
                <div>
                  <div className="text-[9px] text-text-dimmer uppercase tracking-wider mb-0.5 flex items-center gap-1">
                    <Target className="w-2.5 h-2.5" />
                    Diff.
                  </div>
                  <div className={`text-[11px] font-mono font-medium ${DIFFICULTY_COLOR(topic.difficulty)}`}>
                    {topic.difficulty}/100
                  </div>
                </div>
                <div>
                  <div className="text-[9px] text-text-dimmer uppercase tracking-wider mb-0.5">
                    Intent.
                  </div>
                  <div className="text-[11px] text-text-dim">
                    {INTENT_LABEL[topic.intent]}
                  </div>
                </div>
              </div>

              <button className="w-full flex items-center justify-center gap-1.5 px-3 py-1.5 rounded-lg text-[11px] font-medium text-accent-light border border-accent/25 bg-accent/10 hover:bg-accent/15 transition-colors">
                <CalendarPlus className="w-3 h-3" />
                Planifier
              </button>
            </motion.div>
          ))}
        </div>

        <div className="p-3 border-t border-border">
          <button
            onClick={handleFill}
            className="w-full flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg text-[12px] font-semibold text-white bg-gradient-to-r from-accent to-cyan-500 hover:opacity-90 transition-opacity"
          >
            <Sparkles className="w-3.5 h-3.5" />
            Remplir automatiquement la semaine
          </button>
        </div>
      </div>

      {/* Toast */}
      <AnimatePresence>
        {toast && (
          <motion.div
            initial={{ opacity: 0, y: 16, scale: 0.95 }}
            animate={{ opacity: 1, y: 0, scale: 1 }}
            exit={{ opacity: 0, y: 8, scale: 0.95 }}
            className="fixed bottom-24 right-6 lg:right-8 z-50 flex items-center gap-2.5 px-4 py-3 rounded-xl border border-accent/30 bg-bg-card shadow-xl"
          >
            <div className="w-2 h-2 rounded-full bg-emerald-400" />
            <span className="text-[13px] text-text font-medium">Semaine remplie par l&apos;IA</span>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}