import { useTranslation } from "react-i18next";
import { ArrowLeft, Download, Loader, X } from "lucide-react";

interface TemplateSamplePreviewPageProps {
  pdfUrl: string;
  onBack: () => void;
  onSaveSettings: () => void;
  isSavingSettings: boolean;
  canSaveSettings: boolean;
}

export const TemplateSamplePreviewPage = ({
  pdfUrl,
  onBack,
  onSaveSettings,
  isSavingSettings,
  canSaveSettings,
}: TemplateSamplePreviewPageProps) => {
  const { t } = useTranslation();

  const handleDownloadPDF = () => {
    if (!pdfUrl) return;

    const link = document.createElement("a");
    link.href = pdfUrl;
    link.download = `template-sample-${Date.now()}.pdf`;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };

  if (!pdfUrl) {
    return (
      <div className="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-8 text-center">
          <p className="text-gray-600 dark:text-gray-300 mb-4">
            {t("template.noPdfAvailable", "No PDF available")}
          </p>
          <button
            onClick={onBack}
            className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors"
          >
            {t("common.back", "Back")}
          </button>
        </div>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-3">
          <button
            onClick={onBack}
            className="p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors"
          >
            <ArrowLeft className="h-5 w-5 text-gray-600 dark:text-gray-400" />
          </button>
          <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
            {t("template.pdfPreview", "PDF Preview")}
          </h1>
        </div>
        <div className="flex items-center gap-2">
          <button
            onClick={onSaveSettings}
            disabled={isSavingSettings || !canSaveSettings}
            className="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 disabled:bg-gray-400 dark:disabled:bg-gray-600 transition-colors font-medium flex items-center gap-2"
          >
            {isSavingSettings ? (
              <>
                <Loader className="h-4 w-4 animate-spin" />
                {t("common.saving", "Saving...")}
              </>
            ) : (
              t("template.saveSettings", "Save Settings")
            )}
          </button>
          <button
            onClick={handleDownloadPDF}
            className="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors font-medium flex items-center gap-2"
          >
            <Download className="h-4 w-4" />
            {t("common.download", "Download")}
          </button>
          <button
            onClick={onBack}
            className="p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors"
          >
            <X className="h-5 w-5 text-gray-600 dark:text-gray-400" />
          </button>
        </div>
      </div>

      {/* PDF Viewer */}
      <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden shadow-lg">
        <div className="w-full h-[calc(100vh-200px)] bg-gray-50 dark:bg-gray-700">
          <iframe
            src={pdfUrl}
            className="w-full h-full border-0"
            title={t("template.pdfPreview", "PDF Preview")}
          />
        </div>
      </div>
    </div>
  );
};
