import { Mail } from "lucide-react";
import { renderTemplate, PREVIEW_VARS } from "@/lib/plans";
import { cn } from "@/lib/utils";

/**
 * Preview d'un email rendu avec des données fictives. Utilisée à l'étape
 * Récap du wizard et en aperçu live de l'étape Messages.
 *
 * On simule le chrome d'un client mail (de/à/objet) pour rendre l'aperçu
 * tangible. C'est cosmétique mais ça aide l'utilisateur à se projeter.
 */
export function EmailPreview({
  subject,
  body,
  fromName = PREVIEW_VARS.user.fullName,
  fromAddress = "rubis@arthurbarre.fr",
  className,
}: {
  subject: string;
  body: string;
  fromName?: string;
  fromAddress?: string;
  className?: string;
}) {
  const renderedSubject = renderTemplate(subject, PREVIEW_VARS);
  const renderedBody = renderTemplate(body, PREVIEW_VARS);

  return (
    <div
      className={cn(
        "rounded-card border border-line bg-white shadow-card overflow-hidden",
        className,
      )}
    >
      <header className="border-b border-line bg-cream-2/50 px-5 py-3 flex items-center gap-2">
        <Mail size={14} className="text-ink-3" />
        <span className="text-[11px] uppercase tracking-[0.1em] text-ink-3 font-semibold">
          Aperçu de l'email
        </span>
      </header>
      <div className="px-5 py-4 space-y-1 border-b border-line">
        <p className="text-[12px] text-ink-3">
          <span className="font-semibold text-ink-2">De :</span> {fromName}{" "}
          &lt;{fromAddress}&gt;
        </p>
        <p className="text-[12px] text-ink-3">
          <span className="font-semibold text-ink-2">À :</span>{" "}
          {PREVIEW_VARS.client.contactFirstName} {PREVIEW_VARS.client.contactLastName}
          {" — "}
          {PREVIEW_VARS.client.email}
        </p>
        <p className="text-[14px] font-display font-semibold text-ink mt-1.5 leading-tight">
          {renderedSubject || (
            <span className="italic text-ink-3 font-normal">(sans objet)</span>
          )}
        </p>
      </div>
      <div className="px-5 py-4">
        {renderedBody.trim() === "" ? (
          <p className="italic text-ink-3 text-[13px]">
            Le corps de l'email s'affichera ici dès que vous l'aurez rédigé.
          </p>
        ) : (
          <pre className="whitespace-pre-wrap font-sans text-[13.5px] leading-relaxed text-ink-2">
            {renderedBody}
          </pre>
        )}
      </div>
    </div>
  );
}
