import { AlertTriangle, Info } from "lucide-react";
import type { ReactNode } from "react";
import AdvancedOptionsPanel from "./AdvancedOptionsPanel";

export type ActionBlockerReason = {
  summary: ReactNode;
  details?: ReactNode;
  requiredAction?: ReactNode;
  actor?: ReactNode;
  target?: ReactNode;
  technicalDetails?: ReactNode;
};

type ActionBlockerHintProps = {
  reason: ActionBlockerReason;
  tone?: "info" | "warning" | "danger";
  className?: string;
};

function joinClasses(...classes: Array<string | undefined | false>) {
  return classes.filter(Boolean).join(" ");
}

export default function ActionBlockerHint({ reason, tone = "warning", className = "" }: ActionBlockerHintProps) {
  const Icon = tone === "info" ? Info : AlertTriangle;
  const hasActionRows = Boolean(reason.requiredAction || reason.actor || reason.target);

  return (
    <section className={joinClasses("action-blocker-hint", `tone-${tone}`, className)}>
      <Icon className="action-blocker-icon" size={18} aria-hidden="true" />
      <div className="action-blocker-copy">
        <strong>{reason.summary}</strong>
        {reason.details && <p>{reason.details}</p>}
        {hasActionRows && (
          <dl>
            {reason.requiredAction && (
              <>
                <dt>Required action</dt>
                <dd>{reason.requiredAction}</dd>
              </>
            )}
            {reason.actor && (
              <>
                <dt>Who can fix it</dt>
                <dd>{reason.actor}</dd>
              </>
            )}
            {reason.target && (
              <>
                <dt>Where to go</dt>
                <dd>{reason.target}</dd>
              </>
            )}
          </dl>
        )}
        {reason.technicalDetails && (
          <AdvancedOptionsPanel title="Technical details" className="action-blocker-technical">
            <div>{reason.technicalDetails}</div>
          </AdvancedOptionsPanel>
        )}
      </div>
    </section>
  );
}
