import React from 'react';

import type { PageContentType } from '../../service/visibility/visibility.interface';

import { contentTypeLabel, contentTypeTone, toneToBadgeClass } from './helpers';
import Modal from './Modal';

/** Props for {@link PageTemplateDetailModal}. */
interface PageTemplateDetailModalProps {
  open: boolean;
  onClose: () => void;
  name: string;
  description: string;
  /** Who authored the brief: "Recomaze" for presets, the merchant otherwise. */
  creator: string;
  /** When true, render the Recomaze logo next to the creator name. */
  creatorIsRecomaze: boolean;
  /** Free-text category shown next to the creator. */
  category: string;
  contentType: PageContentType;
  /** Presets have no delete; merchant templates do. */
  canDelete: boolean;
  onRun: () => void;
  onModify: () => void;
  onDelete: () => void;
}

/**
 * Detail card opened when a gallery template is clicked. Mirrors the Profound
 * template modal: a banner, the name + description, the creator and category,
 * and Run / Modify actions (plus Delete for merchant-owned templates).
 *
 * @param {PageTemplateDetailModalProps} props - Modal props.
 * @returns {JSX.Element} The modal.
 */
const PageTemplateDetailModal = ({
  open,
  onClose,
  name,
  description,
  creator,
  creatorIsRecomaze,
  category,
  contentType,
  canDelete,
  onRun,
  onModify,
  onDelete,
}: PageTemplateDetailModalProps): JSX.Element | null => {
  return (
    <Modal
      open={open}
      onClose={onClose}
      title="Page template"
      footer={
        <>
          {canDelete && (
            <button
              type="button"
              onClick={onDelete}
              className="mr-auto rounded-md px-3 py-1.5 text-sm font-medium text-gray-500 hover:bg-red-50 hover:text-red-700"
            >
              Delete
            </button>
          )}
          <button
            type="button"
            onClick={onModify}
            className="rounded-md border border-gray-300 bg-white px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-50"
          >
            Modify template
          </button>
          <button
            type="button"
            onClick={onRun}
            className="rounded-md bg-pink-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-pink-700"
          >
            Run template
          </button>
        </>
      }
    >
      <div className="-mx-5 -mt-4 mb-5 flex h-24 items-center justify-center bg-gradient-to-br from-pink-100 via-white to-white">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="32"
          height="32"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="2"
          strokeLinecap="round"
          strokeLinejoin="round"
          className="text-pink-600/70"
          aria-hidden="true"
        >
          <rect width="18" height="7" x="3" y="3" rx="1" />
          <rect width="9" height="7" x="3" y="14" rx="1" />
          <rect width="5" height="7" x="16" y="14" rx="1" />
        </svg>
      </div>

      <div className="flex flex-col gap-5">
        <div className="flex flex-col gap-2">
          <div className="flex items-center gap-2">
            <h3 className="text-lg font-semibold text-gray-900">{name}</h3>
            <span
              className={`rounded-full px-2 py-0.5 text-xs font-medium ${toneToBadgeClass(
                contentTypeTone(contentType)
              )}`}
            >
              {contentTypeLabel(contentType)}
            </span>
          </div>
          {description ? (
            <p className="text-sm text-gray-500">{description}</p>
          ) : null}
        </div>

        <div className="grid grid-cols-2 gap-4">
          <div className="flex flex-col gap-1">
            <span className="text-xs text-gray-500">Creator</span>
            <div className="flex items-center gap-2">
              {creatorIsRecomaze ? (
                <span className="flex h-5 w-5 items-center justify-center rounded bg-white">
                  <img
                    src="/recomaze.png"
                    alt="Recomaze"
                    className="h-3.5 w-3.5 object-contain"
                  />
                </span>
              ) : null}
              <p className="text-sm font-medium text-gray-900">{creator}</p>
            </div>
          </div>
          <div className="flex flex-col gap-1">
            <span className="text-xs text-gray-500">Category</span>
            <p className="text-sm font-medium text-gray-900">{category}</p>
          </div>
        </div>
      </div>
    </Modal>
  );
};

export default PageTemplateDetailModal;