import { useEffect, useMemo, useState } from 'react'
import { Badge, Container } from 'react-bootstrap'
import { Link } from 'react-router-dom'
import { listAllForums, listThreads } from '../api/client'
import { useTranslation } from 'react-i18next'

export default function Home() {
  const [forums, setForums] = useState([])
  const [threads, setThreads] = useState([])
  const [error, setError] = useState('')
  const [loadingForums, setLoadingForums] = useState(true)
  const [loadingThreads, setLoadingThreads] = useState(true)
  const { t } = useTranslation()

  useEffect(() => {
    listAllForums()
      .then(setForums)
      .catch((err) => setError(err.message))
      .finally(() => setLoadingForums(false))
  }, [])

  useEffect(() => {
    listThreads()
      .then(setThreads)
      .catch((err) => setError(err.message))
      .finally(() => setLoadingThreads(false))
  }, [])

  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
  }, [forums])

  const forumMap = useMemo(() => {
    const map = new Map()
    forums.forEach((forum) => {
      map.set(String(forum.id), forum)
    })
    return map
  }, [forums])

  const recentThreads = useMemo(() => {
    return [...threads]
      .sort((a, b) => new Date(b.created_at) - new Date(a.created_at))
      .slice(0, 12)
  }, [threads])

  const resolveForumName = (thread) => {
    if (!thread?.forum) return t('portal.unknown_forum')
    const parts = thread.forum.split('/')
    const id = parts[parts.length - 1]
    return forumMap.get(String(id))?.name || t('portal.unknown_forum')
  }

  const resolveForumId = (thread) => {
    if (!thread?.forum) return null
    const parts = thread.forum.split('/')
    return parts[parts.length - 1] || null
  }

  const renderTree = (nodes, depth = 0) =>
    nodes.map((node) => (
      <div key={node.id}>
        <div
          className="bb-forum-row border rounded p-3 mb-2 d-flex align-items-center justify-content-between"
          style={{ marginLeft: depth * 16 }}
        >
          <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'}`} />
            </span>
            <div>
              <Link to={`/forum/${node.id}`} className="bb-forum-link fw-semibold">
                {node.name}
              </Link>
              <div className="bb-muted">{node.description || t('forum.no_description')}</div>
            </div>
          </div>
        </div>
        {node.children?.length > 0 && (
          <div className="mb-2">{renderTree(node.children, depth + 1)}</div>
        )}
      </div>
    ))

  return (
    <Container className="pb-4 bb-portal-shell">
      <div className="bb-portal-layout">
        <aside className="bb-portal-column bb-portal-column--left">
          <div className="bb-portal-card">
            <div className="bb-portal-card-title">{t('portal.menu')}</div>
            <ul className="bb-portal-list">
              <li>{t('portal.menu_news')}</li>
              <li>{t('portal.menu_gallery')}</li>
              <li>{t('portal.menu_calendar')}</li>
              <li>{t('portal.menu_rules')}</li>
            </ul>
          </div>
          <div className="bb-portal-card">
            <div className="bb-portal-card-title">{t('portal.stats')}</div>
            <div className="bb-portal-stat">
              <span>{t('portal.stat_threads')}</span>
              <strong>{threads.length}</strong>
            </div>
            <div className="bb-portal-stat">
              <span>{t('portal.stat_forums')}</span>
              <strong>{forums.length}</strong>
            </div>
          </div>
        </aside>

        <main className="bb-portal-column bb-portal-column--center">
          <div className="bb-portal-card">
            <div className="bb-portal-card-title">{t('portal.latest_posts')}</div>
            {loadingThreads && <p className="bb-muted">{t('home.loading')}</p>}
            {!loadingThreads && recentThreads.length === 0 && (
              <p className="bb-muted">{t('portal.empty_posts')}</p>
            )}
            {!loadingThreads && recentThreads.length > 0 && (
              <div className="bb-portal-topic-table">
                <div className="bb-portal-topic-header">
                  <span>{t('portal.topic')}</span>
                  <span>{t('thread.replies')}</span>
                  <span>{t('thread.views')}</span>
                  <span>{t('thread.last_post')}</span>
                </div>
                {recentThreads.map((thread) => (
                  <div className="bb-portal-topic-row" key={thread.id}>
                    <div className="bb-portal-topic-main">
                      <span className="bb-portal-topic-icon" aria-hidden="true">
                        <i className="bi bi-chat-left-text" />
                      </span>
                      <div>
                        <Link to={`/thread/${thread.id}`} className="bb-portal-topic-title">
                          {thread.title}
                        </Link>
                        <div className="bb-portal-topic-meta">
                          <span>{t('thread.by')}</span>
                          <Badge bg="secondary">
                            {thread.user_name || t('thread.anonymous')}
                          </Badge>
                          <span className="bb-portal-topic-forum">
                            {t('portal.forum_label')}{' '}
                            {resolveForumId(thread) ? (
                              <Link
                                to={`/forum/${resolveForumId(thread)}`}
                                className="bb-portal-topic-forum-link"
                              >
                                {resolveForumName(thread)}
                              </Link>
                            ) : (
                              resolveForumName(thread)
                            )}
                          </span>
                        </div>
                      </div>
                    </div>
                    <div className="bb-portal-topic-cell">0</div>
                    <div className="bb-portal-topic-cell">—</div>
                    <div className="bb-portal-topic-cell">
                      {thread.created_at?.slice(0, 10) || '—'}
                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>
        </main>

        <aside className="bb-portal-column bb-portal-column--right">
          <div className="bb-portal-card">
            <div className="bb-portal-card-title">{t('portal.user_menu')}</div>
            <div className="bb-portal-user-card">
              <div className="bb-portal-user-avatar" />
              <div className="bb-portal-user-name">tracer</div>
              <div className="bb-portal-user-role">Operator</div>
            </div>
            <ul className="bb-portal-list">
              <li>{t('portal.user_new_posts')}</li>
              <li>{t('portal.user_unread')}</li>
              <li>{t('portal.user_control_panel')}</li>
              <li>{t('portal.user_logout')}</li>
            </ul>
          </div>
          <div className="bb-portal-card bb-portal-card--ad">
            <div className="bb-portal-card-title">{t('portal.advertisement')}</div>
            <div className="bb-portal-ad-box">example.com</div>
          </div>
        </aside>
      </div>
      {error && <p className="text-danger mt-3">{error}</p>}
    </Container>
  )
}