import { ArrowLeft, Download, RotateCcw } from "lucide-react";
import { navigate } from "../router";

export function readerErrorMessage(error: unknown, fallback: string): string {
  if (error instanceof Error && error.message.trim()) return error.message;
  if (typeof error === "string" && error.trim()) return error;
  return fallback;
}

export function ReaderError({
  title,
  detail,
  technicalDetail,
  downloadUrl,
  backHref,
  onRetry
}: {
  title: string;
  detail: string;
  technicalDetail?: string;
  downloadUrl?: string;
  backHref: string;
  onRetry: () => void;
}) {
  return (
    <div className="reader-error">
      <div>
        <h2>{title}</h2>
        <p>{detail}</p>
      </div>
      <div className="reader-error-actions">
        <button className="ghost-button" onClick={onRetry}>
          <RotateCcw size={16} />
          Réessayer
        </button>
        <button className="ghost-button" onClick={() => navigate(backHref)}>
          <ArrowLeft size={16} />
          Retour à la fiche
        </button>
        {downloadUrl && (
          <a className="ghost-button" href={downloadUrl} download>
            <Download size={16} />
            Télécharger
          </a>
        )}
      </div>
      {technicalDetail && (
        <details>
          <summary>Détail technique</summary>
          <pre>{technicalDetail}</pre>
        </details>
      )}
    </div>
  );
}