import { useEffect, useMemo, useRef, useState } from 'react'
import { Helmet } from 'react-helmet-async'
import { useNavigate, useParams, useSearchParams } from 'react-router-dom'

import PageTitle from '@/components/common/PageTitle'
import MainArea from '@/components/layout/MainArea'
import PostImportRowForm, { buildDraft } from '@/components/posts/import/PostImportRowForm'
import PostImportRowSummary from '@/components/posts/import/PostImportRowSummary'
import { Button } from '@/components/ui/button'
import { toast } from '@/components/ui/use-toast'
import { SITE_TITLE } from '@/config'
import { apiPost } from '@/lib/api'
import useDialogue from '@/lib/dialogues/useDialogue'
import { canEditContent } from '@/lib/users'
import { loadPostImportSession,
	 creatableImportRows,
	 initialisePreviewRows,
	 mergeImportResults,
	 mergeValidatedImportRows,
	 processableImportRows,
	 reviewSummaryCounts,
	 savePostImportSession } from '@/lib/postImportSession'
import Forbidden from '@/pages/Forbidden'

import type { FC } from 'react'

import type { PostImportRowDraft } from '@/components/posts/import/PostImportRowForm'
import type { PostImportResultRow,
	      PostImportRow,
	      PostImportSession } from '@/lib/postImportSession'
import type { User } from '@/types'

type Props = { user: User | null }


const PostImportReviewPage: FC<Props> = ({ user }) => {
  const editable = canEditContent (user)
  const dialogue = useDialogue ()
  const navigate = useNavigate ()
  const { sessionId } = useParams ()
  const [searchParams, setSearchParams] = useSearchParams ()

  const [session, setSession] = useState<PostImportSession | null> (null)
  const [loading, setLoading] = useState (false)
  const [missing, setMissing] = useState (false)
  const [savingRow, setSavingRow] = useState<number | null> (null)
  const [dialogueMessageRow, setDialogueMessageRow] = useState<PostImportRow | null> (null)
  const [dialogueDraft, setDialogueDraft] = useState<PostImportRowDraft | null> (null)
  const [dialogueResetRequested, setDialogueResetRequested] = useState (false)
  const dialogueDraftRef = useRef<PostImportRowDraft | null> (null)
  const dialogueResetRequestedRef = useRef (false)

  useEffect (() => {
    if (sessionId == null)
      return

    const loaded = loadPostImportSession (sessionId, message =>
	toast ({ title: '取込状態を復元できませんでした', description: message }))
    setSession (loaded)
    setMissing (loaded == null)
  }, [sessionId])

  useEffect (() => {
    if (sessionId == null || session == null)
      return

    savePostImportSession (sessionId, session, message =>
	toast ({ title: '取込状態を保存できませんでした', description: message }))
  }, [session, sessionId])

  useEffect (() => {
    dialogueDraftRef.current = dialogueDraft
  }, [dialogueDraft])

  useEffect (() => {
    dialogueResetRequestedRef.current = dialogueResetRequested
  }, [dialogueResetRequested])

  const rows = session?.rows ?? []
  const editingSourceRow = Number (searchParams.get ('edit') ?? '')
  const editingRow =
      Number.isFinite (editingSourceRow)
      ? rows.find (_1 => _1.sourceRow === editingSourceRow) ?? null
      : null
  const counts = useMemo (() => reviewSummaryCounts (rows), [rows])
  const processable = useMemo (
      () => processableImportRows (rows),
      [rows])
  const creatable = useMemo (
      () => creatableImportRows (rows),
      [rows])
  const reviewRows =
      session?.repairMode === 'failed'
      ? (
	  [...rows].sort ((a, b) => {
	    const aFailed = a.importStatus === 'failed' ? 0 : 1
	    const bFailed = b.importStatus === 'failed' ? 0 : 1
	    return aFailed - bFailed || a.sourceRow - b.sourceRow
	  }))
      : rows

  useEffect (() => {
    if (editingRow == null || session?.repairMode !== 'failed')
      return

    const element = document.getElementById (`post-import-row-${ editingRow.sourceRow }`)
    element?.scrollIntoView ({ block: 'center', behavior: 'smooth' })
  }, [editingRow, session?.repairMode])

  useEffect (() => {
    if (editingRow == null)
      {
	setDialogueMessageRow (null)
	setDialogueDraft (null)
	setDialogueResetRequested (false)
	return
      }
    if (dialogueMessageRow?.sourceRow !== editingRow.sourceRow)
      setDialogueMessageRow (null)
    setDialogueDraft (current =>
	current != null ? current : buildDraft (editingRow))
    setDialogueResetRequested (false)
  }, [editingRow, dialogueMessageRow])

  const updateSessionRows = (nextRows: PostImportRow[]) =>
      setSession (current =>
	  current != null ? { ...current, rows: nextRows } : current)

  const saveDraft = async (
      { draft, resetRequested, resetSnapshot }: {
	  draft:            PostImportRowDraft
	  resetRequested:   boolean
	  resetSnapshot:    PostImportRow['resetSnapshot'] },
  ): Promise<{ saved: boolean
	       row:   PostImportRow | null }> => {
    if (session == null)
      return { saved: false, row: null }

    if (editingRow == null)
      return { saved: false, row: null }

    const baseRow =
	resetRequested
	? { ...editingRow,
	    url: resetSnapshot.url,
	    attributes: { ...resetSnapshot.attributes },
	    provenance: { ...resetSnapshot.provenance },
	    tagSources: { ...resetSnapshot.tagSources },
	    fieldWarnings: Object.fromEntries (
		Object.entries (resetSnapshot.fieldWarnings)
		    .map (([key, values]) => [key, [...values]])),
	    baseWarnings: [...resetSnapshot.baseWarnings],
	    metadataUrl: resetSnapshot.metadataUrl }
	: editingRow
    const urlChanged = draft.url !== baseRow.url
    const nextRow = buildNextEditedRow (baseRow, draft, urlChanged)

    setSavingRow (editingRow.sourceRow)
    const nextRows = session.rows.map (row =>
	row.sourceRow === editingRow.sourceRow
	? nextRow
	: row)
    try
    {
      const validated = await apiPost<{ rows: PostImportRow[] }> ('/posts/import/validate', {
	  rows:
	      nextRows
	      .filter (row => row.importStatus !== 'created')
	      .map (row => ({ sourceRow: row.sourceRow,
			      url: row.url,
			      attributes: row.attributes,
			      provenance: row.provenance,
			      tagSources: row.tagSources,
			      metadataUrl: row.metadataUrl })),
	  changed_row: urlChanged ? editingRow.sourceRow : -1 })
      const validatedRows = initialisePreviewRows (validated.rows)
      const target = validatedRows.find (row => row.sourceRow === editingRow.sourceRow)
      if (target != null && Object.keys (target.validationErrors).length > 0)
	{
	  setDialogueMessageRow (target)
	  return { saved: false, row: target }
	}
      updateSessionRows (mergeValidatedImportRows (nextRows, validatedRows))
      setDialogueMessageRow (null)
      setSearchParams ({ })
      return { saved: true, row: null }
    }
    catch
    {
      toast ({ title: '行の再検証に失敗しました' })
      return { saved: false, row: null }
    }
    finally
    {
      setSavingRow (null)
    }
  }

  const openEditingDialogue = async (row: PostImportRow) => {
    let currentRow = row

    while (true)
      {
	const initialDraft = buildDraft (currentRow)
	setDialogueDraft (current => current != null ? current : initialDraft)
	setDialogueResetRequested (false)

	const action = await dialogue.choice ({
	    title: '投稿を編輯',
	    description: <PostImportRowForm
		row={currentRow}
		messageRow={dialogueMessageRow?.sourceRow === currentRow.sourceRow
		    ? dialogueMessageRow
		    : null}
		saving={savingRow === currentRow.sourceRow}
		onDraftChange={setDialogueDraft}
		onResetRequestedChange={setDialogueResetRequested}/>,
	    cancelText: '取消',
	    choices: [{ value: 'save', label: '編輯内容を保存' }] as const })

	if (action !== 'save')
	  {
	    setSearchParams ({ })
	    return
	  }

	const draft = dialogueDraftRef.current ?? initialDraft
	const result = await saveDraft ({
	    draft,
	    resetRequested: dialogueResetRequestedRef.current,
	    resetSnapshot: currentRow.resetSnapshot })
	if (result.saved)
	  return

	currentRow = result.row ?? currentRow
      }
  }

  useEffect (() => {
    if (editingRow == null)
      return

    void openEditingDialogue (editingRow)
  }, [editingRow])

  const submit = async () => {
    if (sessionId == null || session == null || processable.length === 0)
      return

    setLoading (true)
    try
    {
      const validated = await apiPost<{ rows: PostImportRow[] }> ('/posts/import/validate', {
	  rows:
	      session.rows
	      .filter (row => row.importStatus !== 'created')
	      .map (row => ({ sourceRow: row.sourceRow,
			      url: row.url,
			      attributes: row.attributes,
			      provenance: row.provenance,
			      tagSources: row.tagSources,
			      metadataUrl: row.metadataUrl })),
	  changed_row: -1 })
      const validatedRows = initialisePreviewRows (validated.rows)
      const mergedRows = mergeValidatedImportRows (session.rows, validatedRows)
      const firstInvalid = mergedRows.find (row => Object.keys (row.validationErrors).length > 0)
      if (firstInvalid != null)
	{
	  setSession ({ ...session, rows: mergedRows })
	  setDialogueMessageRow (firstInvalid)
	  setSearchParams ({ edit: String (firstInvalid.sourceRow) })
	  return
	}

      const result = await apiPost<{
	  created: number
	  skipped: number
	  failed:  number
	  rows:    PostImportResultRow[] }> ('/posts/import', {
	      rows: processableImportRows (mergedRows).map (row => ({
		  sourceRow: row.sourceRow,
		  url: row.url,
		  attributes: row.attributes,
		  provenance: row.provenance,
		  tagSources: row.tagSources,
		  metadataUrl: row.metadataUrl })) })
      const mergedResults = mergeImportResults (mergedRows, result.rows)
      const recoverableRows = result.rows.filter (row =>
	  row.status === 'failed'
	  && row.recoverable
	  && Object.keys (row.errors ?? { }).length > 0)
      const nextRows = mergedResults.map (row => {
	const recoverable = recoverableRows.find (rr => rr.sourceRow === row.sourceRow)
	if (recoverable == null)
	  return row
	return {
	    ...row,
	    importStatus: 'pending',
	    validationErrors: recoverable.errors ?? { },
	    importErrors: undefined }
      })
      const firstRecoverable = nextRows.find (row =>
	  Object.keys (row.validationErrors).length > 0
	  && row.importStatus !== 'created')
      if (firstRecoverable != null)
	{
	  const repairSession = { ...session,
				  rows: nextRows,
				  repairMode: 'failed' as const }
	  setSession (repairSession)
	  setDialogueMessageRow (firstRecoverable)
	  const saved = savePostImportSession (sessionId, repairSession, message =>
	      toast ({ title: '取込状態を保存できませんでした', description: message }))
	  if (saved)
	    setSearchParams ({ edit: String (firstRecoverable.sourceRow) })
	  return
	}
      const nextSession = { ...session, rows: nextRows, repairMode: 'all' as const }
      setSession (nextSession)
      const saved = savePostImportSession (sessionId, nextSession, message =>
	  toast ({ title: '取込状態を保存できませんでした', description: message }))
      if (!(saved))
	return
      navigate (`/posts/import/${ sessionId }/result`)
    }
    catch
    {
      toast ({ title: '登録に失敗しました' })
    }
    finally
    {
      setLoading (false)
    }
  }

  if (!(editable))
    return <Forbidden/>

  if (missing || sessionId == null || session == null)
    {
      return (
	  <MainArea>
	    <div className="mx-auto max-w-4xl space-y-4 p-4">
	      <PageTitle>投稿インポート</PageTitle>
	      <div className="text-red-700 dark:text-red-300">取込状態が見つかりません．</div>
	      <Button type="button" onClick={() => navigate ('/posts/import')}>
		URL リスト入力へ戻る
	      </Button>
	    </div>
	  </MainArea>)
    }

  return (
      <>
	<Helmet>
	  <title>{`投稿インポート確認 | ${ SITE_TITLE }`}</title>
	</Helmet>

	<MainArea className="min-h-0">
	  <div className="mx-auto max-w-6xl space-y-4 p-4">
	    <PageTitle>投稿情報の確認・編輯</PageTitle>

	    <div className="space-y-3">
	      {reviewRows.map (row => (
		  <div key={row.sourceRow} id={`post-import-row-${ row.sourceRow }`}>
		    <PostImportRowSummary
			row={row}
			onEdit={() => {
			  setSearchParams ({ edit: String (row.sourceRow) })
			}}/>
		  </div>))}
	    </div>
	  </div>
	</MainArea>

	<PostImportFooter
	    loading={loading}
	    processableCount={processable.length}
	    creatableCount={creatable.length}
	    skipPlannedCount={counts.skipPlanned}
	    onBack={() => navigate ('/posts/import')}
	    onSubmit={submit}/>

      </>)
}

const PostImportFooter = (
    { loading,
      processableCount,
      creatableCount,
      skipPlannedCount,
      onBack,
      onSubmit }: { loading:            boolean
		    processableCount:   number
		    creatableCount:     number
		    skipPlannedCount:   number
		    onBack:             () => void
		    onSubmit:           () => void },
) => (
    <div
	className="shrink-0 border-t bg-white/95 p-4 backdrop-blur
		   dark:border-neutral-700 dark:bg-neutral-950/95">
      <div className="mx-auto flex max-w-6xl flex-col gap-3 md:flex-row
		      md:items-center md:justify-between">
	<div className="flex flex-wrap items-center gap-2 text-sm">
	  <span>処理対象 {processableCount}件</span>
	  <span>登録対象 {creatableCount}件</span>
	  <span>スキップ予定 {skipPlannedCount}件</span>
	</div>
	<div className="flex flex-col gap-2 sm:flex-row">
	  <Button type="button" variant="outline" onClick={onBack}>
	    URL リスト入力へ戻る
	  </Button>
	  <Button
	      type="button"
	      onClick={onSubmit}
	      disabled={loading || processableCount === 0}>
	    取込を実行
	  </Button>
	</div>
      </div>
    </div>)

const buildNextEditedRow = (
    editingRow:  PostImportRow,
    draft:       PostImportRowDraft,
    urlChanged:  boolean,
): PostImportRow => {
    const nextProvenance = { ...editingRow.provenance }
    const nextAttributes = { ...editingRow.attributes }
    const nextTagSources = {
	automatic: editingRow.tagSources?.automatic ?? '',
	manual: editingRow.tagSources?.manual ?? '' }
    const draftFields = [
	['title', draft.title],
	['thumbnailBase', draft.thumbnailBase],
	['originalCreatedFrom', draft.originalCreatedFrom],
	['originalCreatedBefore', draft.originalCreatedBefore],
	['duration', draft.duration],
	['parentPostIds', draft.parentPostIds]] as const
    draftFields.forEach (([field, value]) => {
	nextAttributes[field] = value
	nextProvenance[field] =
	    value !== String (editingRow.attributes[field] ?? '')
	    ? 'manual'
	    : (editingRow.provenance[field] ?? 'automatic')
    })
    nextAttributes.tags = draft.tags
    if (draft.tags !== String (editingRow.attributes.tags ?? ''))
      {
	nextProvenance.tags = 'manual'
	nextTagSources.manual = draft.tags
      }
    else
      {
	nextProvenance.tags = editingRow.provenance.tags ?? 'automatic'
	nextTagSources.manual = editingRow.tagSources?.manual ?? ''
      }

    return {
	...editingRow,
	url: draft.url,
	attributes: nextAttributes,
	provenance: {
	    ...nextProvenance,
	    url: urlChanged ? 'manual' : (editingRow.provenance.url ?? 'manual') },
	tagSources: nextTagSources,
	importStatus: editingRow.importStatus === 'created' ? 'created' : 'pending',
	importErrors: undefined }
}

export default PostImportReviewPage