import { useState } from 'react'
import { useTranslation } from 'react-i18next'
import { Link } from '@tanstack/react-router'
import { ClipboardList, FileText, GitBranch } from 'lucide-react'
import type { DictionaryDetail, SchemaDraft, SchemaDraftStatus } from '@/api/client'
import { useDictActiveSchemaDraft } from '@/api/queries'
import { cn } from '@/lib/utils'
import { SchemaDraftDrawer } from '@/components/workflow/SchemaDraftDrawer'

/**
 * WorkflowBanner — status banner для editor (Screen 2 per handoff).
 *
 * <p>Backend не имеет explicit dict-level workflow state (draft → review →
 * live transition). Используем существующие поля как proxy:
 * <ul>
 *   <li><b>Live</b> (default) — approvalRequired=false → published immediately.
 *       Постоянный "Опубликовано" banner = noise (статус уже виден в InfoPanel
 *       version/updatedAt). Поэтому возвращаем null — banner показываем только
 *       когда есть actionable state.</li>
 *   <li><b>Review pending</b> — approvalRequired=true И есть pending drafts
 *       (pendingCount > 0). Warn-bg, link to /reviews.</li>
 *   <li><b>Approval enabled empty</b> — approvalRequired=true но нет drafts.
 *       Accent-bg, informational "changes require review".</li>
 * </ul>
 *
 * <p>Когда backend добавит explicit workflowState (draft/review/live transition
 * на dict-level) — расширим этот компонент. Сейчас фокус UI на approval flow.
 */

export type WorkflowBannerProps = {
  detail: DictionaryDetail
  /** Pending drafts count для this dict (из useDictPendingDrafts). */
  pendingCount?: number
}

export function WorkflowBanner({ detail, pendingCount = 0 }: WorkflowBannerProps) {
  const { t } = useTranslation()
  // Phase 1a: read-side active schema draft. Если на dict'е есть
  // non-terminal schema draft — surface'им его state выше record-approval
  // banner'а (schema draft = higher salience: меняет структуру всего dict'а,
  // record approval — per-row).
  const { data: schemaDraft } = useDictActiveSchemaDraft(detail.name)

  // === Case A: Active schema draft — highest priority ===
  if (schemaDraft) {
    return <SchemaDraftBanner draft={schemaDraft} detail={detail} />
  }

  // === Case 1: Live — no approval required (and no schema draft) ===
  // Постоянный "Опубликовано" banner = шум. Status уже виден в InfoPanel
  // (scope, version, updatedAt). Не показываем banner вообще.
  if (!detail.approvalRequired) {
    return null
  }

  // === Case 2: Review pending — approval required + drafts queued ===
  if (pendingCount > 0) {
    return (
      <Banner
        variant="review"
        icon={<ClipboardList size={16} strokeWidth={2} className="shrink-0" />}
        action={
          <Link
            to="/reviews"
            className="text-body font-medium text-accent hover:underline shrink-0"
          >
            {t('workflow.review.open', { defaultValue: 'Открыть /reviews' })} →
          </Link>
        }
      >
        <span className="font-medium">
          {t('workflow.review.title', {
            count: pendingCount,
            defaultValue: 'На ревью {{count}}',
          })}
        </span>
        <span className="text-cell opacity-70">
          {t('workflow.review.subtitle', {
            defaultValue: 'правки записей ждут approval',
          })}
        </span>
      </Banner>
    )
  }

  // === Case 3: Approval enabled, no pending ===
  return (
    <Banner
      variant="info"
      icon={<FileText size={16} strokeWidth={2} className="shrink-0" />}
    >
      <span className="font-medium">
        {t('workflow.approval.title', { defaultValue: 'Approval workflow' })}
      </span>
      <span className="text-cell opacity-70">
        {t('workflow.approval.subtitle', {
          defaultValue: 'правки записей требуют ревью',
        })}
      </span>
    </Banner>
  )
}

type BannerProps = {
  variant: 'live' | 'review' | 'info' | 'draft'
  icon: React.ReactNode
  action?: React.ReactNode
  children: React.ReactNode
}

const VARIANT_CLASS: Record<BannerProps['variant'], string> = {
  live: 'bg-green-bg border-l-green text-ink',
  review: 'bg-warn-bg border-l-warn text-ink',
  info: 'bg-accent-bg border-l-accent text-ink',
  draft: 'bg-warn-bg border-l-warn text-ink',
}

/**
 * Schema-level draft banner — surface'им active non-terminal draft каждому
 * пользователю который заходит в editor словаря. Tone зависит от status'а:
 *
 * <ul>
 *   <li>draft / changes_requested — warn (maker должен дойти и submit'нуть).</li>
 *   <li>review_pending — info (approvers watching, maker waits).</li>
 *   <li>approved — review (готов к publish, кто-то с publish_role нажмёт).</li>
 * </ul>
 *
 * <p>Phase 1a: read-only banner. Кнопки «Отправить», «Approve», «Publish»
 * проводным появятся в Phase 1b (модалки + RBAC role check). Сейчас просто
 * link на draft detail (когда такая страница появится — placeholder).
 */
function SchemaDraftBanner({
  draft,
  detail,
}: {
  draft: SchemaDraft
  detail: DictionaryDetail
}) {
  const { t } = useTranslation()
  const [drawerOpen, setDrawerOpen] = useState(false)
  const variant = schemaDraftVariant(draft.status)
  const labelKey = `workflow.schemaDraft.${draft.status}`
  const fallbackLabel: Record<SchemaDraftStatus, string> = {
    draft: 'Черновик схемы создан',
    review_pending: 'Черновик схемы на ревью',
    approved: 'Черновик схемы одобрен',
    changes_requested: 'По черновику запрошены правки',
    rejected: 'Черновик схемы отклонён',
    published: 'Черновик опубликован',
    withdrawn: 'Черновик отозван',
  }
  return (
    <>
      <Banner
        variant={variant}
        icon={<GitBranch size={16} strokeWidth={2} className="shrink-0" />}
        action={
          <button
            type="button"
            onClick={() => setDrawerOpen(true)}
            className="text-body font-medium text-accent hover:underline shrink-0 cursor-pointer"
          >
            {t('workflow.schemaDraft.open', { defaultValue: 'Открыть черновик' })} →
          </button>
        }
      >
        <span className="font-medium">
          {t(labelKey, { defaultValue: fallbackLabel[draft.status] })}
        </span>
        <span className="text-cell opacity-70">
          {t('workflow.schemaDraft.subtitle', {
            fromVersion: draft.branchedFromVersion,
            defaultValue: `от v${draft.branchedFromVersion}`,
          })}
        </span>
      </Banner>
      <SchemaDraftDrawer
        open={drawerOpen}
        onClose={() => setDrawerOpen(false)}
        dictionaryName={detail.name}
        currentHeadVersion={detail.schemaVersion}
        detail={detail}
      />
    </>
  )
}

function schemaDraftVariant(status: SchemaDraftStatus): BannerProps['variant'] {
  switch (status) {
    case 'draft':
    case 'changes_requested':
      return 'draft'
    case 'review_pending':
      return 'review'
    case 'approved':
      return 'live'
    case 'rejected':
    case 'withdrawn':
    case 'published':
      // Terminal states обычно не должны попасть сюда (useDictActiveSchemaDraft
      // фильтрует non-terminal), но если backend пометил draft active'ом —
      // показываем neutral info.
      return 'info'
  }
}

function Banner({ variant, icon, action, children }: BannerProps) {
  return (
    <div
      role="status"
      className={cn(
        // Compact layout — banner живёт в InfoPanel (narrow 220px column),
        // нужен vertical-ish stack а не широкий horizontal banner.
        'flex flex-col gap-1.5 px-3 py-2 rounded-md border-l-4 text-body',
        VARIANT_CLASS[variant],
      )}
    >
      <div className="flex items-center gap-2 min-w-0">
        {icon}
        <div className="flex items-center gap-2 flex-wrap min-w-0 flex-1">
          {children}
        </div>
      </div>
      {action && <div className="pl-6">{action}</div>}
    </div>
  )
}
