// frontend/src/components/admin/AIRetentionStrategy.jsx
import React from "react";
import { Mail, Gift, Phone, TrendingUp, AlertCircle, Users } from "lucide-react";

const typeIcons = {
  retention: AlertCircle,
  acquisition: Users,
  payment: TrendingUp,
};

const typeColors = {
  retention: "bg-red-50 border-red-200",
  acquisition: "bg-green-50 border-green-200",
  payment: "bg-amber-50 border-amber-200",
};

const actionIcons = {
  email: Mail,
  offer: Gift,
  call: Phone,
  schedule: Phone,
};

export default function AIRetentionStrategy({ strategy }) {
  const TypeIcon = typeIcons[strategy.type] || AlertCircle;

  return (
    <div
      className={`bg-white border rounded-xl p-4 shadow-sm ${typeColors[strategy.type] || "border-stone-200"}`}
    >
      <div className="flex items-start gap-3 mb-3">
        <div className={`p-2 rounded-lg ${typeColors[strategy.type]?.replace("50", "100") || "bg-stone-100"}`}>
          <TypeIcon className="w-5 h-5 text-stone-700" />
        </div>
        <div className="flex-1">
          <h3 className="font-semibold text-stone-900 mb-1">{strategy.title}</h3>
          <p className="text-xs text-stone-600 mb-2">{strategy.subtitle}</p>
        </div>
      </div>
      <p className="text-sm text-stone-700 mb-3">{strategy.description}</p>
      <div className="mb-3">
        <div className="text-xs font-medium text-stone-600 mb-1">Members:</div>
        <div className="flex flex-wrap gap-1">
          {strategy.members.map((member, idx) => (
            <span
              key={idx}
              className="text-xs px-2 py-0.5 bg-white rounded border border-stone-200 text-stone-700"
            >
              {member}
            </span>
          ))}
        </div>
      </div>
      <div className="mb-3">
        <div className="text-xs font-medium text-stone-600 mb-2">Suggested Actions:</div>
        <div className="flex flex-wrap gap-2">
          {strategy.suggestedActions.map((action, idx) => {
            const ActionIcon = actionIcons[action.type] || Mail;
            return (
              <button
                key={idx}
                type="button"
                className="inline-flex items-center gap-1 text-xs px-2 py-1 bg-white border border-stone-200 rounded hover:bg-stone-50 text-stone-700"
              >
                <ActionIcon className="w-3 h-3" />
                {action.label}
              </button>
            );
          })}
        </div>
      </div>
      <div className="pt-2 border-t border-stone-200">
        <div className="text-xs font-medium text-green-700">
          Potential Impact: {strategy.potentialImpact}
        </div>
      </div>
    </div>
  );
}