import { useState } from 'react'
import { useTranslation } from 'react-i18next'
import { Badge, Button, Drawer, LoadingBlock, QueryErrorState } from '@/ui'
import { ArrowsLeftRightIcon, ArrowCounterClockwiseIcon, BracketsCurlyIcon, InfoIcon } from '@phosphor-icons/react'
import { useRecordHistory } from '@/api/queries'
import { RecordDependentsPanel } from '@/components/lineage/RecordDependentsPanel'
import { UserCell } from '@/lib/useUserDisplay'

type Props = {
  open: boolean
  onClose: () => void
  dictionaryName: string
  businessKey: string | undefined
  /** Optional — invoked when user clicks "Сравнить с текущим" на старой версии.
   * Parent открывает diff view (например ConflictDiffModal с server vs that
   * version'ом). Если не предоставлен, кнопка скрыта. */
  onCompare?: (versionData: unknown, displayVersion: number) => void
  /** Optional — invoked для "Откатить к v1.X.X". Parent submits update
   * mutation с этой версией как payload. Если undefined — кнопка скрыта. */
  onRevert?: (versionData: unknown, displayVersion: number) => void
}

export const RecordHistoryDrawer = ({
  open, onClose, dictionaryName, businessKey, onCompare, onRevert,
}: Props) => {
  const { t } = useTranslation()
  const { data, isLoading, error, refetch } = useRecordHistory(dictionaryName, open ? businessKey : undefined)
  // Per-row collapsible JSON viewer — выносим из <details> чтобы хранить
  // expanded state поверх renders.
  const [expanded, setExpanded] = useState<Set<string>>(new Set())

  return (
    <Drawer
      isOpen={open}
      onClose={onClose}
      title={businessKey ? `${t('history.title')}: ${businessKey}` : t('history.title')}
      side="right"
      widthClassName="w-full max-w-2xl"
    >
      <div className="space-y-4">
        {/* Phase 1 dict-relationships-v2: surface incoming references first.
            Component сам hide'ится при 0 dependents — для большинства записей
            этот блок не появится. */}
        {open && (
          <RecordDependentsPanel
            dictionaryName={dictionaryName}
            businessKey={businessKey}
          />
        )}

        {isLoading && <LoadingBlock size="md" label={t('loading')} />}
        {error && <QueryErrorState error={error} onRetry={() => refetch()} />}
        {data && data.length === 0 && (
          <p className="text-body text-mute">{t('history.empty')}</p>
        )}
        {data && data.length > 0 && (
          <ol className="relative border-l-2 border-line pl-5 space-y-4">
            {data.map((rec, idx) => {
              const isLatest = idx === 0
              const displayVersion = data.length - idx
              const now = new Date()
              const from = new Date(rec.validFrom)
              const to = new Date(rec.validTo)
              const farFuture = to.getFullYear() >= 9999
              // Статус по реальному времени:
              //   future  — validFrom ещё впереди (запланирована)
              //   active  — сейчас в её диапазоне
              //   expired — validTo уже прошла (закрыта)
              const status = from > now
                ? 'future'
                : !farFuture && to <= now
                  ? 'expired'
                  : 'active'
              return (
                <li key={rec.id} className="relative">
                  <span
                    className={`absolute -left-[27px] top-1 h-3 w-3 rounded-full border-2 ${
                      isLatest && status === 'active'
                        ? 'bg-accent border-accent'
                        : status === 'future'
                          ? 'bg-warn border-horizon'
                          : status === 'expired'
                            ? 'bg-surface border-ink/40'
                            : 'bg-aurora border-aurora'
                    }`}
                  />
                  <div className="flex items-center gap-2 mb-1">
                    <span className="text-body font-sans text-accent">v{displayVersion}</span>
                    {isLatest && status === 'active' && (
                      <Badge variant="primary">{t('history.current')}</Badge>
                    )}
                    {status === 'future' && <Badge variant="info">{t('history.scheduled')}</Badge>}
                    {status === 'expired' && <Badge variant="neutral">{t('history.closed')}</Badge>}
                    {status === 'active' && !isLatest && (
                      <Badge variant="success">{t('history.active')}</Badge>
                    )}
                  </div>
                  <div className="text-cell text-ink-2 space-y-0.5">
                    <div>
                      <span className="font-mono">{t('history.validFrom')}:</span>{' '}
                      {new Date(rec.validFrom).toLocaleString()}
                    </div>
                    {!farFuture && (
                      <div>
                        <span className="font-mono">{t('history.validTo')}:</span>{' '}
                        {new Date(rec.validTo).toLocaleString()}
                      </div>
                    )}
                    {rec.updatedBy && (
                      <div className="inline-flex items-center gap-1">
                        <span className="font-mono">{t('history.updatedBy')}:</span>{' '}
                        <UserCell uuid={rec.updatedBy} />
                      </div>
                    )}
                  </div>
                  {/* Per-version action row — Compare / Revert + JSON toggle.
                    * Compare показываем для не-current versions (нечего сравнивать
                    * с самим собой). Revert тоже только для старых (на текущей
                    * uno-op). Wrap чтобы планшетный portrait делал stack. */}
                  <div className="mt-2 flex flex-wrap items-center gap-2">
                    {/* JSON toggle: подаём как Button ghost вместо текстовой
                      * ссылки — иначе в single-version case строка выглядит
                      * как «нет действий вообще». */}
                    <Button
                      type="button"
                      variant="ghost"
                      size="sm"
                      onClick={() => setExpanded((prev) => {
                        const next = new Set(prev)
                        if (next.has(rec.id)) next.delete(rec.id)
                        else next.add(rec.id)
                        return next
                      })}
                      leftIcon={<BracketsCurlyIcon weight="regular" size={14} />}
                    >
                      {expanded.has(rec.id) ? t('history.hideData') : t('history.viewData')}
                    </Button>
                    {!isLatest && onCompare && (
                      <Button
                        type="button"
                        variant="ghost"
                        size="sm"
                        onClick={() => onCompare(rec.data, displayVersion)}
                        leftIcon={<ArrowsLeftRightIcon weight="regular" size={14} />}
                      >
                        {t('history.compare', { defaultValue: 'Сравнить с текущим' })}
                      </Button>
                    )}
                    {!isLatest && onRevert && (
                      <Button
                        type="button"
                        variant="ghost"
                        size="sm"
                        onClick={() => onRevert(rec.data, displayVersion)}
                        leftIcon={<ArrowCounterClockwiseIcon weight="regular" size={14} />}
                      >
                        {t('history.revert', { defaultValue: `Откатить к v${displayVersion}` })}
                      </Button>
                    )}
                  </div>
                  {/* Single-version hint: объясняем, почему Compare/Revert
                    * отсутствуют. Раньше пользователь видел только JSON-ссылку
                    * и спрашивал «где кнопки?». Показываем только когда есть
                    * вообще что показать (canMutate с обоими callback'ами),
                    * иначе read-only viewer и подсказка не нужна. */}
                  {isLatest && data.length === 1 && (onCompare || onRevert) && (
                    <div className="mt-2 flex items-start gap-1.5 text-cell text-mute">
                      <InfoIcon weight="regular" size={14} className="mt-[2px] shrink-0" />
                      <span>{t('history.singleVersionHint')}</span>
                    </div>
                  )}
                  {expanded.has(rec.id) && (
                    <pre className="text-mono mt-2 bg-line/30 rounded p-2 overflow-x-auto text-cell">
                      {JSON.stringify(rec.data, null, 2)}
                    </pre>
                  )}
                </li>
              )
            })}
          </ol>
        )}
      </div>
    </Drawer>
  )
}
