plebdevs/src/components/content/combined/CombinedDetails.js

import React, { useEffect, useState, useRef } from 'react';
import axios from 'axios';
import { useToast } from '@/hooks/useToast';
import { Tag } from 'primereact/tag';
import Image from 'next/image';
import { useRouter } from 'next/router';
import ResourcePaymentButton from '@/components/bitcoinConnect/ResourcePaymentButton';
import ZapDisplay from '@/components/zaps/ZapDisplay';
import GenericButton from '@/components/buttons/GenericButton';
import { useImageProxy } from '@/hooks/useImageProxy';
import { useZapsSubscription } from '@/hooks/nostrQueries/zaps/useZapsSubscription';
import { getTotalFromZaps } from '@/utils/lightning';
import { useSession } from 'next-auth/react';
import useWindowWidth from '@/hooks/useWindowWidth';
import dynamic from 'next/dynamic';
import { Toast } from 'primereact/toast';
import MoreOptionsMenu from '@/components/ui/MoreOptionsMenu';

const MDDisplay = dynamic(() => import('@uiw/react-markdown-preview'), { ssr: false });

const CombinedDetails = ({
  processedEvent,
  topics,
  title,
  summary,
  image,
  price,
  author,
  paidResource,
  decryptedContent,
  nAddress,
  handlePaymentSuccess,
  handlePaymentError,
  authorView,
  isLesson,
}) => {
  const [zapAmount, setZapAmount] = useState(0);
  const [course, setCourse] = useState(null);
  const router = useRouter();
  const { returnImageProxy } = useImageProxy();
  const { zaps, zapsLoading } = useZapsSubscription({ event: processedEvent });
  const { data: session } = useSession();
  const { showToast } = useToast();
  const windowWidth = useWindowWidth();
  const isMobileView = windowWidth <= 768;
  const menuRef = useRef(null);
  const toastRef = useRef(null);

  const handleDelete = async () => {
    try {
      const response = await axios.delete(`/api/resources/${processedEvent.d}`);
      if (response.status === 204) {
        showToast('success', 'Success', 'Resource deleted successfully.');
        router.push('/');
      }
    } catch (error) {
      if (error.response?.data?.error?.includes('Invalid `prisma.resource.delete()`')) {
        showToast(
          'error',
          'Error',
          'Resource cannot be deleted because it is part of a course, delete the course first.'
        );
      } else {
        showToast('error', 'Error', 'Failed to delete resource. Please try again.');
      }
    }
  };

  const authorMenuItems = [
    {
      label: 'Edit',
      icon: 'pi pi-pencil',
      command: () => router.push(`/details/${processedEvent.id}/edit`),
    },
    {
      label: 'Delete',
      icon: 'pi pi-trash',
      command: handleDelete,
    },
    {
      label: 'View Nostr note',
      icon: 'pi pi-globe',
      command: () => {
        window.open(`https://habla.news/a/${nAddress}`, '_blank');
      },
    },
  ];

  const userMenuItems = [
    {
      label: 'View Nostr note',
      icon: 'pi pi-globe',
      command: () => {
        window.open(`https://habla.news/a/${nAddress}`, '_blank');
      },
    },
  ];

  if (course) {
    userMenuItems.unshift({
      label: isMobileView ? 'Course' : 'Open Course',
      icon: 'pi pi-external-link',
      command: () => window.open(`/course/${course}`, '_blank'),
    });
  }

  useEffect(() => {
    if (isLesson) {
      axios
        .get(`/api/resources/${processedEvent.d}`)
        .then(res => {
          if (res.data && res.data.lessons[0]?.courseId) {
            setCourse(res.data.lessons[0]?.courseId);
          }
        })
        .catch(err => {
          console.error('err', err);
        });
    }
  }, [processedEvent.d, isLesson]);

  useEffect(() => {
    if (zaps.length > 0) {
      const total = getTotalFromZaps(zaps, processedEvent);
      setZapAmount(total);
    }
  }, [zaps, processedEvent]);

  const renderPaymentMessage = () => {
    if (session?.user?.role?.subscribed && decryptedContent) {
      return (
        <GenericButton
          tooltipOptions={{ position: 'top' }}
          tooltip="You are subscribed so you can access all paid content"
          icon="pi pi-check"
          label="Subscribed"
          severity="success"
          outlined
          size="small"
          className="cursor-default hover:opacity-100 hover:bg-transparent focus:ring-0"
        />
      );
    }

    if (
      isLesson &&
      course &&
      session?.user?.purchased?.some(purchase => purchase.courseId === course)
    ) {
      const coursePurchase = session?.user?.purchased?.find(
        purchase => purchase.courseId === course
      );
      return (
        <GenericButton
          tooltipOptions={{ position: 'top' }}
          tooltip={`You have this lesson through purchasing the course it belongs to. You paid ${coursePurchase?.course?.price} sats for the course.`}
          icon="pi pi-check"
          label={`Paid ${coursePurchase?.course?.price} sats`}
          severity="success"
          outlined
          size="small"
          className="cursor-default hover:opacity-100 hover:bg-transparent focus:ring-0"
        />
      );
    }

    if (
      paidResource &&
      decryptedContent &&
      author &&
      processedEvent?.pubkey !== session?.user?.pubkey &&
      !session?.user?.role?.subscribed
    ) {
      return (
        <GenericButton
          icon="pi pi-check"
          label={`Paid ${processedEvent.price} sats`}
          severity="success"
          outlined
          size="small"
          className="cursor-default hover:opacity-100 hover:bg-transparent focus:ring-0"
        />
      );
    }

    if (paidResource && author && processedEvent?.pubkey === session?.user?.pubkey) {
      return (
        <GenericButton
          tooltipOptions={{ position: 'top' }}
          tooltip={`You created this paid content, users must pay ${processedEvent.price} sats to access it`}
          icon="pi pi-check"
          label={`Price ${processedEvent.price} sats`}
          severity="success"
          outlined
          size="small"
          className="cursor-default hover:opacity-100 hover:bg-transparent focus:ring-0"
        />
      );
    }

    return null;
  };

  const renderContent = () => {
    if (decryptedContent) {
      return <MDDisplay className="p-2 rounded-lg w-full" source={decryptedContent} />;
    }

    if (paidResource && !decryptedContent) {
      return (
        <div className="w-full px-4">
          <div className="w-full p-8 rounded-lg flex flex-col items-center justify-center bg-gray-800">
            <div className="mx-auto py-auto">
              <i className="pi pi-lock text-[60px] text-red-500"></i>
            </div>
            <p className="text-center text-xl text-red-500 mt-4">
              This content is paid and needs to be purchased before viewing.
            </p>
            <div className="flex flex-row items-center justify-center w-full mt-4">
              <ResourcePaymentButton
                lnAddress={author?.lud16}
                amount={price}
                onSuccess={handlePaymentSuccess}
                onError={handlePaymentError}
                resourceId={processedEvent.d}
              />
            </div>
          </div>
        </div>
      );
    }

    if (processedEvent?.content) {
      return <MDDisplay className="p-4 rounded-lg w-full" source={processedEvent.content} />;
    }

    return null;
  };

  return (
    <div className="w-full">
      <Toast ref={toastRef} />
      <div className="relative w-full h-[400px] mb-8">
        <Image alt="background image" src={returnImageProxy(image)} fill className="object-cover" />
        <div className="absolute inset-0 bg-black bg-opacity-20"></div>
      </div>
      <div className="w-full mx-auto px-4 py-8 -mt-32 relative z-10 max-mob:px-0 max-tab:px-0">
        <div className="mb-8 bg-gray-800/70 rounded-lg p-4 max-mob:rounded-t-none max-tab:rounded-t-none">
          <div className="flex flex-row items-center justify-between w-full">
            <h1 className="text-4xl font-bold text-white">{title}</h1>
            <ZapDisplay
              zapAmount={zapAmount}
              event={processedEvent}
              zapsLoading={zapsLoading && zapAmount === 0}
            />
          </div>
          <div className="flex flex-wrap gap-2 mt-2 mb-4">
            {topics?.map((topic, index) => (
              <Tag className="text-[#f8f8ff]" key={index} value={topic} />
            ))}
            {isLesson && <Tag size="small" className="text-[#f8f8ff]" value="lesson" />}
          </div>
          {summary?.split('\n').map((line, index) => (
            <p key={index}>{line}</p>
          ))}
          <div className="flex items-center justify-between mt-8">
            <div className="flex items-center">
              <Image
                alt="avatar image"
                src={returnImageProxy(author?.avatar, author?.username)}
                width={50}
                height={50}
                className="rounded-full mr-4"
              />
              <p className="text-lg text-white">
                By{' '}
                <a
                  rel="noreferrer noopener"
                  target="_blank"
                  className="text-blue-300 hover:underline"
                >
                  {author?.username}
                </a>
              </p>
            </div>
            <div className="flex justify-end">
              <MoreOptionsMenu
                menuItems={authorView ? authorMenuItems : userMenuItems}
                additionalLinks={processedEvent?.additionalLinks || []}
                isMobileView={isMobileView}
              />
            </div>
          </div>
          <div className="w-full mt-4">{renderPaymentMessage()}</div>
        </div>
        {renderContent()}
      </div>
    </div>
  );
};

export default CombinedDetails;