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

import { useEffect, useMemo, useState } from 'react'
import { useNavigate, useSearchParams } from 'react-router-dom'
import { Briefcase, Plus, RotateCcw, Search } from 'lucide-react'
import { useLocale } from '@meshkee/dashboard-ui'
import { Breadcrumbs } from '../components/Breadcrumbs'
import { ListEmptyState } from '../components/EmptyState'
import { PageTitle } from '../components/PageTitle'
import { PortfolioCard } from '../components/PortfolioCard'
import { PortfolioCommentsModal } from '../components/PortfolioCommentsModal'
import { ConfirmDeleteModal } from '../components/ConfirmDeleteModal'
import { Pagination } from '../components/Pagination'
import { useToast } from '../context/ToastContext'
import { useT } from '../i18n/useT'
import { ApiError } from '../lib/api'
import {
  PORTFOLIOS_PER_PAGE,
  deletePortfolio,
  listPortfolios,
  updatePortfolio,
} from '../services/portfolioService'
import {
  listPortfolioCategories,
  mapPortfolioCategoryToUi,
} from '../services/portfolioCategoryService'
import type { FlatCategory } from '../types/category'
import type { Portfolio } from '../types/portfolio'
import { flattenCategories } from '../utils/categories'
import pageStyles from '../components/PageContent.module.css'
import filterStyles from '../components/ListFiltersPanel.module.css'
import styles from './BlogPage.module.css'

function readListQuery(searchParams: URLSearchParams) {
  const name = searchParams.get('q')?.trim() ?? ''
  const categoryId = searchParams.get('categoryId')?.trim() ?? ''
  const pageRaw = Number(searchParams.get('page'))
  const page = Number.isFinite(pageRaw) && pageRaw >= 1 ? Math.floor(pageRaw) : 1
  return { name, categoryId, page }
}

function categoryFilterLabel(category: FlatCategory, isFa: boolean) {
  const name = isFa
    ? category.nameFa || category.nameEn
    : category.nameEn || category.nameFa
  return category.depth > 0 ? `${'\u2014 '.repeat(category.depth)}${name}` : name
}

export function PortfolioListPage() {
  const navigate = useNavigate()
  const [searchParams, setSearchParams] = useSearchParams()
  const { showToast } = useToast()
  const t = useT()
  const { locale } = useLocale()
  const isFa = locale === 'fa'
  const {
    name: appliedName,
    categoryId: appliedCategoryId,
    page: currentPage,
  } = readListQuery(searchParams)

  const [portfolios, setPortfolios] = useState<Portfolio[]>([])
  const [totalPortfolios, setTotalPortfolios] = useState(0)
  const [isLoading, setIsLoading] = useState(true)
  const [isDeleting, setIsDeleting] = useState(false)
  const [movingUpId, setMovingUpId] = useState<string | null>(null)
  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 [draftName, setDraftName] = useState(appliedName)
  const [draftCategoryId, setDraftCategoryId] = useState(appliedCategoryId)
  const [categoryOptions, setCategoryOptions] = useState<FlatCategory[]>([])

  const totalPages = Math.max(1, Math.ceil(totalPortfolios / PORTFOLIOS_PER_PAGE))
  const hasFilters = Boolean(appliedName || appliedCategoryId)
  const categorySelectOptions = useMemo(
    () =>
      categoryOptions.map((category) => ({
        id: category.id,
        label: categoryFilterLabel(category, isFa),
      })),
    [categoryOptions, isFa],
  )

  useEffect(() => {
    setDraftName(appliedName)
    setDraftCategoryId(appliedCategoryId)
  }, [appliedName, appliedCategoryId])

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

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

  function writeListQuery(name: string, categoryId: string, page: number) {
    const next = new URLSearchParams()
    if (name) next.set('q', name)
    if (categoryId) next.set('categoryId', categoryId)
    if (page > 1) next.set('page', String(page))
    setSearchParams(next, { replace: true })
  }

  async function loadCategories(signal?: AbortSignal) {
    try {
      const items = await listPortfolioCategories(signal)
      setCategoryOptions(flattenCategories(items.map(mapPortfolioCategoryToUi)))
    } catch (err) {
      if (err instanceof DOMException && err.name === 'AbortError') return
    }
  }

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

    try {
      const data = await listPortfolios(page, PORTFOLIOS_PER_PAGE, signal, {
        ...(appliedName ? { title: appliedName } : {}),
        ...(appliedCategoryId ? { categoryId: appliedCategoryId } : {}),
      })
      setPortfolios(data.items)
      setTotalPortfolios(data.total)
      setCommentCounts(
        Object.fromEntries(data.items.map((item) => [item.id, item.commentCount ?? 0])),
      )
    } catch (err) {
      if (err instanceof DOMException && err.name === 'AbortError') return
      if (err instanceof ApiError) {
        setError(err.message)
      } else {
        setError(t('portfolio.list.errorLoad'))
      }
    } finally {
      setIsLoading(false)
    }
  }

  function applyFilters() {
    writeListQuery(draftName.trim(), draftCategoryId, 1)
  }

  function clearFilters() {
    setDraftName('')
    setDraftCategoryId('')
    writeListQuery('', '', 1)
  }

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

  function handleComments(id: string) {
    const portfolio = portfolios.find((item) => item.id === id)
    if (portfolio) {
      setCommentsTarget({ id, title: portfolio.title })
    }
  }

  function handleRemoveRequest(id: string) {
    const portfolio = portfolios.find((item) => item.id === id)
    if (portfolio) {
      setDeleteTarget({ id, title: portfolio.title })
    }
  }

  async function handleMoveUp(id: string) {
    const index = portfolios.findIndex((item) => item.id === id)
    if (index < 0) return
    if (index === 0 && currentPage === 1) return

    setMovingUpId(id)
    setError('')

    try {
      await updatePortfolio(id, { moveToTop: true })
      showToast(t('portfolio.list.toast.movedUp'), 'success')
      await loadPortfolios(currentPage)
    } catch (err) {
      if (err instanceof ApiError) {
        setError(err.message)
      } else {
        setError(t('portfolio.list.errorMove'))
      }
    } finally {
      setMovingUpId(null)
    }
  }

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

    setIsDeleting(true)
    setError('')

    try {
      await deletePortfolio(deleteTarget.id)
      showToast(t('portfolio.list.toast.removed'), 'success')
      const nextTotal = totalPortfolios - 1
      const nextTotalPages = Math.max(1, Math.ceil(nextTotal / PORTFOLIOS_PER_PAGE))
      const nextPage = currentPage > nextTotalPages ? nextTotalPages : currentPage
      setDeleteTarget(null)
      writeListQuery(appliedName, appliedCategoryId, nextPage)
      await loadPortfolios(nextPage)
    } catch (err) {
      if (err instanceof ApiError) {
        setError(err.message)
      } else {
        setError(t('portfolio.list.errorDelete'))
      }
    } finally {
      setIsDeleting(false)
    }
  }

  function handlePageChange(page: number) {
    writeListQuery(appliedName, appliedCategoryId, 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: 'Portfolios', href: '/portfolios' },
          { label: 'My Portfolios' },
        ]}
      />

      <div className={pageStyles.pageHeader}>
        <div>
          <PageTitle en="PORTFOLIOS">{t('title.myPortfolios')}</PageTitle>
          <p className={pageStyles.pageSubtitle}>
            {t('portfolio.list.subtitle', { count: totalPortfolios })}
          </p>
        </div>
      </div>

      <div className={filterStyles.filtersPanel}>
        <div className={filterStyles.filtersTitle}>{t('portfolio.list.filters')}</div>
        <form
          className={filterStyles.filtersGrid}
          onSubmit={(e) => {
            e.preventDefault()
            applyFilters()
          }}
        >
          <div className={filterStyles.filtersInputs}>
            <div className={`${filterStyles.field} ${filterStyles.fieldCol4}`}>
              <input
                id="filter-portfolio-name"
                value={draftName}
                onChange={(e) => setDraftName(e.target.value)}
                placeholder={t('portfolio.list.filterNamePlaceholder')}
                aria-label={t('portfolio.list.filterName')}
                disabled={isLoading}
              />
            </div>
            <div className={`${filterStyles.field} ${filterStyles.fieldCol3}`}>
              <select
                id="filter-portfolio-category"
                value={draftCategoryId}
                onChange={(e) => setDraftCategoryId(e.target.value)}
                aria-label={t('portfolio.list.filterCategory')}
                disabled={isLoading}
              >
                <option value="">{t('portfolio.list.filterCategoryAll')}</option>
                {categorySelectOptions.map((option) => (
                  <option key={option.id} value={option.id}>
                    {option.label}
                  </option>
                ))}
              </select>
            </div>
          </div>
          <div className={filterStyles.filterActions}>
            <button
              type="submit"
              className={`${filterStyles.iconActionBtn} ${filterStyles.iconActionBtnPrimary}`}
              disabled={isLoading}
              aria-label={t('portfolio.list.search')}
              title={t('portfolio.list.search')}
            >
              <Search size={18} />
            </button>
            <button
              type="button"
              className={`${filterStyles.iconActionBtn} ${filterStyles.iconActionBtnGhost}`}
              onClick={clearFilters}
              disabled={isLoading}
              aria-label={t('portfolio.list.clearFilters')}
              title={t('portfolio.list.clearFilters')}
            >
              <RotateCcw size={18} />
            </button>
          </div>
        </form>
      </div>

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

      {isLoading ? (
        <p className={styles.empty}>{t('portfolio.list.loading')}</p>
      ) : portfolios.length === 0 ? (
        hasFilters ? (
          <p className={styles.empty}>{t('portfolio.list.emptyFiltered')}</p>
        ) : (
          <ListEmptyState
            entity="portfolio"
            icon={Briefcase}
            actionLabel={t('portfolio.list.emptyCta')}
            actionTo="/portfolios/new"
          />
        )
      ) : (
        <>
          <div className={pageStyles.gridCols4}>
            {portfolios.map((portfolio, index) => (
              <PortfolioCard
                key={portfolio.id}
                portfolio={portfolio}
                commentCount={commentCounts[portfolio.id] ?? portfolio.commentCount}
                canMoveUp={!(index === 0 && currentPage === 1)}
                isMovingUp={movingUpId === portfolio.id}
                onMoveUp={handleMoveUp}
                onEdit={handleEdit}
                onComments={handleComments}
                onRemove={handleRemoveRequest}
              />
            ))}
          </div>

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

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

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

      {commentsTarget && (
        <PortfolioCommentsModal
          open={!!commentsTarget}
          portfolioId={commentsTarget.id}
          portfolioTitle={commentsTarget.title}
          onClose={() => setCommentsTarget(null)}
          onCountChange={handleCommentCountChange}
        />
      )}
    </main>
  )
}