dashboards/apps/business/src/pages/InstructionListPage.tsx

import { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { Play, Plus } from 'lucide-react'
import { Breadcrumbs } from '../components/Breadcrumbs'
import { ListEmptyState } from '../components/EmptyState'
import { PageTitle } from '../components/PageTitle'
import { InstructionCard } from '../components/InstructionCard'
import { InstructionCommentsModal } from '../components/InstructionCommentsModal'
import { ConfirmDeleteModal } from '../components/ConfirmDeleteModal'
import { Pagination } from '../components/Pagination'
import { useToast } from '../context/ToastContext'
import { useT } from '../i18n/useT'
import { useLocale } from '@meshkee/dashboard-ui'
import { ApiError } from '../lib/api'
import {
  INSTRUCTIONS_PER_PAGE,
  deleteInstruction,
  listInstructions,
  resolveInstructionTitle,
} from '../services/instructionService'
import type { Instruction } from '../types/instruction'
import pageStyles from '../components/PageContent.module.css'
import styles from './BlogPage.module.css'

export function InstructionListPage() {
  const navigate = useNavigate()
  const { showToast } = useToast()
  const t = useT()
  const { locale } = useLocale()
  const [videos, setInstructions] = useState<Instruction[]>([])
  const [totalInstructions, setTotalVideos] = useState(0)
  const [currentPage, setCurrentPage] = useState(1)
  const [isLoading, setIsLoading] = useState(true)
  const [isDeleting, setIsDeleting] = useState(false)
  const [error, setError] = useState('')
  const [commentCounts, setCommentCounts] = useState<Record<string, number>>({})
  const [deleteTarget, setDeleteTarget] = useState<{ id: string; title: string } | null>(null)
  const [commentsTarget, setCommentsTarget] = useState<{ id: string; title: string } | null>(null)

  const totalPages = Math.max(1, Math.ceil(totalInstructions / INSTRUCTIONS_PER_PAGE))

  useEffect(() => {
    const controller = new AbortController()
    void loadVideos(currentPage, controller.signal)
    return () => controller.abort()
  }, [currentPage])

  async function loadVideos(page: number, signal?: AbortSignal) {
    setIsLoading(true)
    setError('')

    try {
      const data = await listInstructions(page, INSTRUCTIONS_PER_PAGE, signal)
      setInstructions(data.items)
      setTotalVideos(data.total)
      setCommentCounts(
        Object.fromEntries(data.items.map((video) => [video.id, video.commentCount ?? 0])),
      )
    } catch (err) {
      if (err instanceof DOMException && err.name === 'AbortError') return
      if (err instanceof ApiError) {
        setError(err.message)
      } else {
        setError(t('instruction.list.errorLoad'))
      }
    } finally {
      setIsLoading(false)
    }
  }

  function handleEdit(id: string) {
    navigate(`/instructions/edit/${id}`)
  }

  function handleComments(id: string) {
    const video = videos.find((item) => item.id === id)
    if (video) {
      setCommentsTarget({
        id,
        title: resolveInstructionTitle(video, locale === 'fa' ? 'fa' : 'en'),
      })
    }
  }

  function handleRemoveRequest(id: string) {
    const video = videos.find((item) => item.id === id)
    if (video) {
      setDeleteTarget({
        id,
        title: resolveInstructionTitle(video, locale === 'fa' ? 'fa' : 'en'),
      })
    }
  }

  async function confirmDelete() {
    if (!deleteTarget) return

    setIsDeleting(true)
    setError('')

    try {
      await deleteInstruction(deleteTarget.id)
      showToast(t('instruction.list.toast.removed'), 'success')
      const nextTotal = totalInstructions - 1
      const nextTotalPages = Math.max(1, Math.ceil(nextTotal / INSTRUCTIONS_PER_PAGE))
      const nextPage = currentPage > nextTotalPages ? nextTotalPages : currentPage
      setDeleteTarget(null)
      setCurrentPage(nextPage)
      await loadVideos(nextPage)
    } catch (err) {
      if (err instanceof ApiError) {
        setError(err.message)
      } else {
        setError(t('instruction.list.errorDelete'))
      }
    } finally {
      setIsDeleting(false)
    }
  }

  function handlePageChange(page: number) {
    setCurrentPage(page)
    window.scrollTo({ top: 0, behavior: 'smooth' })
  }

  function handleCommentCountChange(count: number) {
    if (!commentsTarget) return
    setCommentCounts((prev) => ({
      ...prev,
      [commentsTarget.id]: count,
    }))
  }

  return (
    <main className={pageStyles.content}>
      <Breadcrumbs
        items={[
          { label: 'Dashboard', href: '/' },
          { label: 'Instructions', href: '/instructions' },
          { label: 'My Instructions' },
        ]}
      />

      <div className={pageStyles.pageHeader}>
        <div>
          <PageTitle en="MY INSTRUCTIONS">{t('title.myInstructions')}</PageTitle>
          <p className={pageStyles.pageSubtitle}>
            {t('instruction.list.subtitle', { count: totalInstructions })}
          </p>
        </div>
      </div>

      {error && (
        <div className={styles.error} role="alert">
          {error}
        </div>
      )}

      {isLoading ? (
        <p className={styles.empty}>{t('instruction.list.loading')}</p>
      ) : videos.length === 0 ? (
        <ListEmptyState
          entity="instruction"
          icon={Play}
          actionLabel={t('instruction.list.emptyCta')}
          actionTo="/instructions/new"
        />
      ) : (
        <>
          <div className={pageStyles.gridCols4}>
            {videos.map((video) => (
              <InstructionCard
                key={video.id}
                video={video}
                commentCount={commentCounts[video.id] ?? video.commentCount}
                onEdit={handleEdit}
                onComments={handleComments}
                onRemove={handleRemoveRequest}
              />
            ))}
          </div>

          <Pagination
            currentPage={currentPage}
            totalPages={totalPages}
            onPageChange={handlePageChange}
          />
        </>
      )}

      <button
        type="button"
        className={styles.addFab}
        onClick={() => navigate('/instructions/new')}
        aria-label={t('instruction.list.addNew')}
      >
        <Plus size={26} strokeWidth={2.5} />
      </button>

      <ConfirmDeleteModal
        open={!!deleteTarget}
        title={t('instruction.list.deleteTitle')}
        message={
          deleteTarget
            ? t('instruction.list.deleteMessage', { name: deleteTarget.title })
            : ''
        }
        onConfirm={confirmDelete}
        onCancel={() => !isDeleting && setDeleteTarget(null)}
      />

      {commentsTarget && (
        <InstructionCommentsModal
          open={!!commentsTarget}
          instructionId={commentsTarget.id}
          instructionTitle={commentsTarget.title}
          onClose={() => setCommentsTarget(null)}
          onCountChange={handleCommentCountChange}
        />
      )}
    </main>
  )
}