frontend/components/rule-explanation.tsx

"use client";

type RuleExplanationProps = {
  explanation?: string;
  examples?: string[];
  missingPatterns?: string[];
  edgeCases?: string[];
  improvements?: string[];
  severity?: string;
};

export function RuleExplanation({
  explanation,
  examples = [],
  missingPatterns = [],
  edgeCases = [],
  improvements = [],
  severity,
}: RuleExplanationProps) {
  if (!explanation && examples.length === 0 && missingPatterns.length === 0) {
    return null;
  }

  const severityColors = {
    low: "bg-blue-500/20 border-blue-500/50 text-blue-200",
    medium: "bg-yellow-500/20 border-yellow-500/50 text-yellow-200",
    high: "bg-orange-500/20 border-orange-500/50 text-orange-200",
    critical: "bg-red-500/20 border-red-500/50 text-red-200",
  };

  const severityColor = severityColors[severity as keyof typeof severityColors] || severityColors.medium;

  return (
    <div className="mt-4 space-y-4 rounded-2xl border border-white/10 bg-slate-950/60 p-6">
      {/* Explanation */}
      {explanation && (
        <div>
          <h4 className="mb-2 flex items-center gap-2 text-sm font-semibold uppercase tracking-wider text-cyan-300">
            <span>💡</span> Explanation
          </h4>
          <p className="text-sm leading-relaxed text-slate-200">{explanation}</p>
        </div>
      )}

      {/* Examples */}
      {examples.length > 0 && (
        <div>
          <h4 className="mb-3 flex items-center gap-2 text-sm font-semibold uppercase tracking-wider text-emerald-300">
            <span>📋</span> Examples This Rule Would Catch
          </h4>
          <div className="space-y-2">
            {examples.map((example, idx) => (
              <div
                key={idx}
                className="rounded-lg border border-emerald-500/30 bg-emerald-500/10 px-4 py-2.5 text-sm text-slate-100"
              >
                <span className="font-mono text-emerald-300">"{example}"</span>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Missing Patterns */}
      {missingPatterns.length > 0 && (
        <div>
          <h4 className="mb-3 flex items-center gap-2 text-sm font-semibold uppercase tracking-wider text-amber-300">
            <span>🔍</span> Suggested Missing Patterns
          </h4>
          <div className="space-y-2">
            {missingPatterns.map((pattern, idx) => (
              <div
                key={idx}
                className="rounded-lg border border-amber-500/30 bg-amber-500/10 px-4 py-2.5 text-sm text-slate-100"
              >
                <span className="font-mono text-amber-300">{pattern}</span>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Edge Cases */}
      {edgeCases.length > 0 && (
        <div>
          <h4 className="mb-3 flex items-center gap-2 text-sm font-semibold uppercase tracking-wider text-purple-300">
            <span>⚠️</span> Edge Cases Identified
          </h4>
          <ul className="space-y-1.5">
            {edgeCases.map((edgeCase, idx) => (
              <li key={idx} className="text-sm text-slate-300">
                • {edgeCase}
              </li>
            ))}
          </ul>
        </div>
      )}

      {/* Improvements */}
      {improvements.length > 0 && (
        <div>
          <h4 className="mb-3 flex items-center gap-2 text-sm font-semibold uppercase tracking-wider text-cyan-300">
            <span>✨</span> Improvements Applied
          </h4>
          <ul className="space-y-1.5">
            {improvements.map((improvement, idx) => (
              <li key={idx} className="text-sm text-slate-300">
                • {improvement}
              </li>
            ))}
          </ul>
        </div>
      )}

      {/* Severity Badge */}
      {severity && (
        <div className="pt-2">
          <span
            className={`inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-semibold uppercase tracking-wider ${severityColor}`}
          >
            <span>🛡️</span>
            Severity: {severity}
          </span>
        </div>
      )}
    </div>
  );
}