import { useState } from 'react'
import { createFileRoute, useRouter } from '@tanstack/react-router'
import { useTranslation } from 'react-i18next'
import { Route as RootRoute } from './__root'
import { formatApiError, makeApi } from '../lib/api'
import { type CardStatus, STATUSES, prettyStatus, relativeTime } from '../lib/kanban'

export const Route = createFileRoute('/board')({
  component: BoardPage,
})

function BoardPage() {
  const { t } = useTranslation()
  const router = useRouter()
  const { cards, error } = RootRoute.useLoaderData()
  const [title, setTitle] = useState('')
  const [status, setStatus] = useState<CardStatus>('todo')
  const [pending, setPending] = useState(false)
  const [createError, setCreateError] = useState<string | null>(null)

  const columns = STATUSES.map((columnStatus) => ({
    key: columnStatus,
    title: prettyStatus(columnStatus),
    cards: cards.filter((card) => card.status === columnStatus),
  }))

  const handleSubmit = async (event: React.FormEvent) => {
    event.preventDefault()
    if (!title.trim()) return
    setPending(true)
    setCreateError(null)
    try {
      await makeApi().invoke('createCard', { title: title.trim(), status })
      setTitle('')
      await router.invalidate()
    } catch (err) {
      setCreateError(await formatApiError(err))
    } finally {
      setPending(false)
    }
  }

  return (
    <section className="page-grid">
      <div className="panel wide">
        <div className="section-heading">
          <h2>{t('board.heading')}</h2>
          <p>{t('board.sub')}</p>
        </div>
        {error ? (
          <div className="empty-state error-state">{t('board.loadFailed', { error })}</div>
        ) : (
          <div className="board-grid">
            {columns.map((column) => (
              <div key={column.key} className="column">
                <div className="column-header">
                  <h3>{column.title}</h3>
                  <span>{column.cards.length}</span>
                </div>
                <div className="column-cards">
                  {column.cards.length === 0 ? (
                    <div className="column-empty">{t('board.columnEmpty')}</div>
                  ) : (
                    column.cards.map((card) => (
                      <article key={card.cardId} className="task-card">
                        <div className="task-card-title">{card.title}</div>
                        <div className="task-card-meta">
                          <span>#{card.position}</span>
                          <span>{relativeTime(card.createdAt)}</span>
                        </div>
                      </article>
                    ))
                  )}
                </div>
              </div>
            ))}
          </div>
        )}
      </div>

      <div className="panel">
        <div className="section-heading">
          <h2>{t('board.createHeading')}</h2>
          <p>{t('board.createSub')}</p>
        </div>
        <form className="card-form" onSubmit={handleSubmit}>
          <label className="field">
            <span>{t('board.titleLabel')}</span>
            <input
              value={title}
              onChange={(event) => setTitle(event.target.value)}
              placeholder={t('board.titlePlaceholder')}
            />
          </label>

          <label className="field">
            <span>{t('board.columnLabel')}</span>
            <select
              value={status}
              onChange={(event) => setStatus(event.target.value as CardStatus)}
            >
              {STATUSES.map((value) => (
                <option key={value} value={value}>
                  {prettyStatus(value)}
                </option>
              ))}
            </select>
          </label>

          <button type="submit" className="primary-button" disabled={pending || !title.trim()}>
            {pending ? t('board.creating') : t('board.createCta')}
          </button>

          {createError && (
            <div className="inline-error">{t('board.createFailed', { error: createError })}</div>
          )}
        </form>
      </div>
    </section>
  )
}