import { useEffect, useMemo, useState } from 'react'
import { Button, ButtonGroup, Col, Container, Form, Row, Tab, Tabs } from 'react-bootstrap'
import { useTranslation } from 'react-i18next'
import { createForum, deleteForum, listAllForums, reorderForums, updateForum } from '../api/client'

export default function Acp({ isAdmin }) {
  const { t } = useTranslation()
  const [forums, setForums] = useState([])
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState('')
  const [selectedId, setSelectedId] = useState(null)
  const [draggingId, setDraggingId] = useState(null)
  const [overId, setOverId] = useState(null)
  const [showForm, setShowForm] = useState(false)
  const [createType, setCreateType] = useState(null)
  const [collapsed, setCollapsed] = useState(() => new Set())
  const [form, setForm] = useState({
    name: '',
    description: '',
    type: 'category',
    parentId: '',
  })

  const refreshForums = async () => {
    setLoading(true)
    setError('')
    try {
      const data = await listAllForums()
      setForums(data)
    } catch (err) {
      setError(err.message)
    } finally {
      setLoading(false)
    }
  }

  useEffect(() => {
    if (isAdmin) {
      refreshForums()
    }
  }, [isAdmin])

  const getParentId = (forum) => {
    if (!forum.parent) return null
    if (typeof forum.parent === 'string') {
      return forum.parent.split('/').pop()
    }
    return forum.parent.id ?? null
  }

  const forumTree = useMemo(() => {
    const map = new Map()
    const roots = []

    forums.forEach((forum) => {
      map.set(String(forum.id), { ...forum, children: [] })
    })

    forums.forEach((forum) => {
      const parentId = getParentId(forum)
      const node = map.get(String(forum.id))
      if (parentId && map.has(String(parentId))) {
        map.get(String(parentId)).children.push(node)
      } else {
        roots.push(node)
      }
    })

    const sortNodes = (nodes) => {
      nodes.sort((a, b) => {
        if (a.position !== b.position) return a.position - b.position
        return a.name.localeCompare(b.name)
      })
      nodes.forEach((node) => sortNodes(node.children))
    }

    sortNodes(roots)

    return { roots, map }
  }, [forums])

  const categoryOptions = useMemo(
    () => forums.filter((forum) => forum.type === 'category'),
    [forums]
  )

  const handleSelectForum = (forum) => {
    const parentId =
      typeof forum.parent === 'string'
        ? forum.parent.split('/').pop()
        : forum.parent?.id ?? ''
    setSelectedId(String(forum.id))
    setShowForm(true)
    setCreateType(null)
    setForm({
      name: forum.name || '',
      description: forum.description || '',
      type: forum.type || 'category',
      parentId: parentId ? String(parentId) : '',
    })
  }

  const handleReset = () => {
    setSelectedId(null)
    setShowForm(false)
    setCreateType(null)
    setForm({
      name: '',
      description: '',
      type: 'category',
      parentId: '',
    })
  }

  const isExpanded = (forumId) => {
    const key = String(forumId)
    return !collapsed.has(key)
  }

  const toggleExpanded = (forumId) => {
    const key = String(forumId)
    setCollapsed((prev) => {
      const next = new Set(prev)
      if (next.has(key)) {
        next.delete(key)
      } else {
        next.add(key)
      }
      return next
    })
  }

  const handleCollapseAll = () => {
    const ids = forums
      .filter((forum) => forum.type === 'category')
      .map((forum) => String(forum.id))
    setCollapsed(new Set(ids))
  }

  const handleExpandAll = () => {
    setCollapsed(new Set())
  }

  const handleStartCreate = (type) => {
    const current = selectedId
    setSelectedId(null)
    setShowForm(true)
    setCreateType(type)
    const parentFromSelection = current
      ? forums.find((forum) => String(forum.id) === String(current))
      : null
    const parentId =
      parentFromSelection?.type === 'category' ? String(parentFromSelection.id) : ''
    setForm({
      name: '',
      description: '',
      type,
      parentId,
    })
  }

  const handleSubmit = async (event) => {
    event.preventDefault()
    setError('')
    const trimmedName = form.name.trim()
    if (!trimmedName) {
      setError(t('acp.forums_name_required'))
      return
    }
    try {
      if (selectedId) {
        await updateForum(selectedId, {
          name: trimmedName,
          description: form.description,
          type: form.type,
          parentId: form.parentId || null,
        })
      } else {
        await createForum({
          name: trimmedName,
          description: form.description,
          type: form.type,
          parentId: form.parentId || null,
        })
      }
      handleReset()
      refreshForums()
    } catch (err) {
      setError(err.message)
    }
  }

  const handleDelete = async (forumId) => {
    setError('')
    if (!confirm(t('acp.forums_confirm_delete'))) {
      return
    }
    try {
      await deleteForum(forumId)
      if (selectedId === String(forumId)) {
        handleReset()
      }
      refreshForums()
    } catch (err) {
      setError(err.message)
    }
  }

  const handleDragStart = (event, forumId) => {
    event.dataTransfer.effectAllowed = 'move'
    event.dataTransfer.setData('text/plain', String(forumId))
    setDraggingId(String(forumId))
  }

  const handleDragEnd = () => {
    setDraggingId(null)
    setOverId(null)
  }

  const applyLocalOrder = (parentId, orderedIds) => {
    setForums((prev) =>
      prev.map((forum) => {
        const pid = getParentId(forum)
        if (String(pid ?? '') !== String(parentId ?? '')) {
          return forum
        }
        const newIndex = orderedIds.indexOf(String(forum.id))
        return newIndex === -1 ? forum : { ...forum, position: newIndex + 1 }
      })
    )
  }

  const handleDragOver = (event, targetId, parentId) => {
    event.preventDefault()
    event.dataTransfer.dropEffect = 'move'
    if (!draggingId || String(draggingId) === String(targetId)) {
      return
    }

    const draggedForum = forums.find((forum) => String(forum.id) === String(draggingId))
    if (!draggedForum) {
      return
    }

    const draggedParentId = getParentId(draggedForum)
    if (String(draggedParentId ?? '') !== String(parentId ?? '')) {
      return
    }

    const siblings = forums.filter((forum) => {
      const pid = getParentId(forum)
      return String(pid ?? '') === String(parentId ?? '')
    })

    const ordered = siblings
      .slice()
      .sort((a, b) => {
        if (a.position !== b.position) return a.position - b.position
        return a.name.localeCompare(b.name)
      })
      .map((forum) => String(forum.id))

    const fromIndex = ordered.indexOf(String(draggingId))
    const toIndex = ordered.indexOf(String(targetId))
    if (fromIndex === -1 || toIndex === -1 || fromIndex === toIndex) {
      return
    }

    ordered.splice(toIndex, 0, ordered.splice(fromIndex, 1)[0])
    setOverId(String(targetId))
    applyLocalOrder(parentId, ordered)
  }

  const handleDragEnter = (forumId) => {
    if (draggingId && String(forumId) !== String(draggingId)) {
      setOverId(String(forumId))
    }
  }

  const handleDragLeave = (event, forumId) => {
    if (event.currentTarget.contains(event.relatedTarget)) {
      return
    }
    if (overId === String(forumId)) {
      setOverId(null)
    }
  }

  const handleDrop = async (event, targetId, parentId) => {
    event.preventDefault()
    const draggedId = event.dataTransfer.getData('text/plain')
    if (!draggedId || String(draggedId) === String(targetId)) {
      setDraggingId(null)
      setOverId(null)
      return
    }

    const siblings = forums.filter((forum) => {
      const pid = getParentId(forum)
      return String(pid ?? '') === String(parentId ?? '')
    })

    const ordered = siblings
      .slice()
      .sort((a, b) => {
        if (a.position !== b.position) return a.position - b.position
        return a.name.localeCompare(b.name)
      })
      .map((forum) => String(forum.id))

    const fromIndex = ordered.indexOf(String(draggedId))
    const toIndex = ordered.indexOf(String(targetId))
    if (fromIndex === -1 || toIndex === -1) {
      return
    }

    ordered.splice(toIndex, 0, ordered.splice(fromIndex, 1)[0])

    try {
      await reorderForums(parentId, ordered)
      const updated = forums.map((forum) => {
        const pid = getParentId(forum)
        if (String(pid ?? '') !== String(parentId ?? '')) {
          return forum
        }
        const newIndex = ordered.indexOf(String(forum.id))
        return newIndex === -1 ? forum : { ...forum, position: newIndex + 1 }
      })
      setForums(updated)
    } catch (err) {
      setError(err.message)
    } finally {
      setDraggingId(null)
      setOverId(null)
    }
  }

  const renderTree = (nodes, depth = 0) =>
    nodes.map((node) => (
      <div key={node.id}>
        <div
          className={`bb-drag-item d-flex align-items-center justify-content-between border rounded p-2 mb-2 ${
            overId === String(node.id) ? 'bb-drop-target' : ''
          } ${draggingId === String(node.id) ? 'bb-dragging' : ''}`}
          style={{ marginLeft: depth * 16 }}
          draggable
          onDragStart={(event) => handleDragStart(event, node.id)}
          onDragEnd={handleDragEnd}
          onDragOver={(event) => handleDragOver(event, node.id, getParentId(node))}
          onDragEnter={() => handleDragEnter(node.id)}
          onDragLeave={(event) => handleDragLeave(event, node.id)}
          onDrop={(event) => handleDrop(event, node.id, getParentId(node))}
        >
          <div className="d-flex align-items-start gap-3">
            <span className={`bb-icon ${node.type === 'forum' ? 'bb-icon--forum' : ''}`}>
              <i className={`bi ${node.type === 'category' ? 'bi-folder2' : 'bi-chat-left-text'}`} />
              {node.type === 'category' && node.children?.length > 0 && (
                <button
                  type="button"
                  className="bb-collapse-toggle"
                  onClick={() => toggleExpanded(node.id)}
                  aria-label={isExpanded(node.id) ? t('acp.collapse') : t('acp.expand')}
                  title={isExpanded(node.id) ? t('acp.collapse') : t('acp.expand')}
                >
                  <i
                    className={`bi ${
                      isExpanded(node.id) ? 'bi-caret-down-fill' : 'bi-caret-right-fill'
                    }`}
                    aria-hidden="true"
                  />
                </button>
              )}
            </span>
            <div>
              <div className="fw-semibold d-flex align-items-center gap-2">
                <span>{node.name}</span>
              </div>
              <div className="bb-muted">{node.description || t('forum.no_description')}</div>
            </div>
          </div>
          <div className="d-flex align-items-center gap-2">
            <span
              className="bb-drag-handle text-muted"
              style={{ cursor: 'grab', display: 'inline-flex' }}
              title={t('acp.drag_handle')}
            >
              <i className="bi bi-arrow-down-up" aria-hidden="true" />
            </span>
            <ButtonGroup size="sm" className="bb-action-group">
              <Button variant="dark" onClick={() => handleSelectForum(node)} title={t('acp.edit')}>
                <i className="bi bi-pencil" aria-hidden="true" />
              </Button>
              <Button variant="dark" onClick={() => handleDelete(node.id)} title={t('acp.delete')}>
                <i className="bi bi-trash" aria-hidden="true" />
              </Button>
            </ButtonGroup>
          </div>
        </div>
        {node.children?.length > 0 &&
          (!node.type || node.type !== 'category' || isExpanded(node.id)) && (
            <div className="mb-2">{renderTree(node.children, depth + 1)}</div>
          )}
      </div>
    ))

  if (!isAdmin) {
    return (
      <Container className="py-5">
        <h2 className="mb-3">{t('acp.title')}</h2>
        <p className="bb-muted">{t('acp.no_access')}</p>
      </Container>
    )
  }

  return (
    <Container fluid className="bb-acp py-4">
      <h2 className="mb-4">{t('acp.title')}</h2>
      <Tabs defaultActiveKey="general" className="mb-3">
        <Tab eventKey="general" title={t('acp.general')}>
          <p className="bb-muted">{t('acp.general_hint')}</p>
        </Tab>
        <Tab eventKey="forums" title={t('acp.forums')}>
          <p className="bb-muted">{t('acp.forums_hint')}</p>
          {error && <p className="text-danger">{error}</p>}
          <Row className="g-4">
            <Col lg={7}>
              <div className="d-flex align-items-center justify-content-between mb-3 gap-3 flex-wrap">
                <div className="d-flex align-items-center gap-2">
                  <h5 className="mb-0">{t('acp.forums_tree')}</h5>
                  <Button size="sm" variant="outline-dark" onClick={handleExpandAll}>
                    <i className="bi bi-arrows-expand me-1" aria-hidden="true" />
                    {t('acp.expand_all')}
                  </Button>
                  <Button size="sm" variant="outline-dark" onClick={handleCollapseAll}>
                    <i className="bi bi-arrows-collapse me-1" aria-hidden="true" />
                    {t('acp.collapse_all')}
                  </Button>
                </div>
                <div className="d-flex gap-2">
                  <Button
                    size="sm"
                    variant={createType === 'category' ? 'dark' : 'outline-dark'}
                    onClick={() => handleStartCreate('category')}
                  >
                    <i className="bi bi-folder2 me-1" aria-hidden="true" />
                    {t('acp.new_category')}
                  </Button>
                  <Button
                    size="sm"
                    variant={createType === 'forum' ? 'dark' : 'outline-dark'}
                    onClick={() => handleStartCreate('forum')}
                  >
                    <i className="bi bi-chat-left-text me-1" aria-hidden="true" />
                    {t('acp.new_forum')}
                  </Button>
                </div>
              </div>
              {loading && <p className="bb-muted">{t('acp.loading')}</p>}
              {!loading && forumTree.roots.length === 0 && (
                <p className="bb-muted">{t('acp.forums_empty')}</p>
              )}
              {forumTree.roots.length > 0 && (
                <div className="mt-2">{renderTree(forumTree.roots)}</div>
              )}
            </Col>
            <Col lg={5}>
              {showForm ? (
                <div className="bb-form">
                  <h5 className="mb-3">
                    {selectedId ? t('acp.forums_edit_title') : t('acp.forums_create_title')}
                  </h5>
                  <p className="bb-muted">{t('acp.forums_form_hint')}</p>
                  <Form onSubmit={handleSubmit}>
                    <Form.Group className="mb-3">
                      <Form.Label>{t('form.title')}</Form.Label>
                      <Form.Control
                        type="text"
                        value={form.name}
                        onChange={(event) => setForm({ ...form, name: event.target.value })}
                        required
                      />
                    </Form.Group>
                    <Form.Group className="mb-3">
                      <Form.Label>{t('form.description')}</Form.Label>
                      <Form.Control
                        as="textarea"
                        rows={3}
                        value={form.description}
                        onChange={(event) => setForm({ ...form, description: event.target.value })}
                      />
                    </Form.Group>
                    <Form.Group className="mb-3">
                      <Form.Label>{t('acp.forums_type')}</Form.Label>
                      <Form.Select
                        value={form.type}
                        onChange={(event) => setForm({ ...form, type: event.target.value })}
                      >
                        <option value="category">{t('forum.type_category')}</option>
                        <option value="forum">{t('forum.type_forum')}</option>
                      </Form.Select>
                    </Form.Group>
                    <Form.Group className="mb-3">
                      <Form.Label>{t('acp.forums_parent')}</Form.Label>
                      <Form.Select
                        value={form.parentId}
                        onChange={(event) => setForm({ ...form, parentId: event.target.value })}
                      >
                        <option value="">{t('acp.forums_parent_root')}</option>
                        {categoryOptions
                          .filter((option) => String(option.id) !== String(selectedId))
                          .map((option) => (
                            <option key={option.id} value={option.id}>
                              {option.name}
                            </option>
                          ))}
                      </Form.Select>
                    </Form.Group>
                    <div className="d-flex gap-2 justify-content-between">
                      <Button type="button" variant="outline-secondary" onClick={handleReset}>
                        {t('acp.cancel')}
                      </Button>
                      <Button type="submit" variant="dark">
                        {selectedId ? t('acp.save') : t('acp.create')}
                      </Button>
                    </div>
                  </Form>
                </div>
              ) : (
                <div className="bb-form">
                  <h5 className="mb-2">{t('acp.forums_form_empty_title')}</h5>
                  <p className="bb-muted">{t('acp.forums_form_empty_hint')}</p>
                </div>
              )}
            </Col>
          </Row>
        </Tab>
        <Tab eventKey="users" title={t('acp.users')}>
          <p className="bb-muted">{t('acp.users_hint')}</p>
        </Tab>
      </Tabs>
    </Container>
  )
}