frontend/src/components/admin/AIActionPlan.jsx

// frontend/src/components/admin/AIActionPlan.jsx
import React from "react";
import { CheckCircle2, Clock, Circle, Target } from "lucide-react";

const statusIcons = {
  completed: CheckCircle2,
  in_progress: Clock,
  pending: Circle,
};

const statusColors = {
  completed: "text-green-600 bg-green-50",
  in_progress: "text-blue-600 bg-blue-50",
  pending: "text-amber-600 bg-amber-50",
};

const categoryColors = {
  Retention: "bg-red-100 text-red-700",
  Engagement: "bg-blue-100 text-blue-700",
  Progress: "bg-green-100 text-green-700",
  Events: "bg-purple-100 text-purple-700",
  Operations: "bg-amber-100 text-amber-700",
};

export default function AIActionPlan({ actions }) {
  return (
    <div className="bg-white border border-stone-200 rounded-xl p-4 shadow-sm">
      <div className="flex items-center gap-2 mb-4">
        <Target className="w-5 h-5 text-purple-600" />
        <h3 className="font-semibold text-stone-900">AI Action Plan</h3>
      </div>
      <div className="space-y-3">
        {actions.map((action, idx) => {
          const StatusIcon = statusIcons[action.status] || Circle;
          return (
            <div
              key={idx}
              className="p-3 bg-stone-50 rounded-lg border border-stone-100"
            >
              <div className="flex items-start justify-between gap-2 mb-2">
                <div className="flex-1">
                  <div className="flex items-center gap-2 mb-1">
                    <StatusIcon
                      className={`w-4 h-4 ${
                        statusColors[action.status]?.split(" ")[0] || "text-stone-500"
                      }`}
                    />
                    <span className="font-medium text-sm text-stone-900">
                      {action.title}
                    </span>
                  </div>
                  <p className="text-xs text-stone-600">{action.description}</p>
                </div>
                <div className="flex flex-col items-end gap-1">
                  <span
                    className={`text-xs px-2 py-0.5 rounded-full ${
                      categoryColors[action.category] || "bg-stone-100 text-stone-700"
                    }`}
                  >
                    {action.category}
                  </span>
                  <div className="flex items-center gap-1">
                    {[...Array(5)].map((_, i) => (
                      <div
                        key={i}
                        className={`w-1.5 h-1.5 rounded-full ${
                          i < action.impact
                            ? "bg-purple-500"
                            : "bg-stone-200"
                        }`}
                      />
                    ))}
                  </div>
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}