import { Box, Text, useStdout } from '@hermes/ink'
import { useEffect, useState } from 'react'
import unicodeSpinners from 'unicode-animations'

import { artWidth, caduceus, CADUCEUS_WIDTH, logo, LOGO_WIDTH } from '../banner.js'
import { mix } from '../lib/color.js'
import { flat } from '../lib/text.js'
import type { Theme } from '../theme.js'
import type { PanelSection, SessionInfo } from '../types.js'

import { Accordion } from './accordion.js'
import { ShimmerRows } from './loaders.js'
import { WidgetGrid } from './widgetGrid.js'

const LOADER_TICK_MS = 120

function InlineLoader({ label, t }: { label: string; t: Theme }) {
  const [tick, setTick] = useState(0)
  const spinner = unicodeSpinners.braille
  const frame = spinner.frames[tick % spinner.frames.length] ?? '⠋'

  useEffect(() => {
    const id = setInterval(() => setTick(n => n + 1), Math.max(LOADER_TICK_MS, spinner.interval))

    return () => clearInterval(id)
  }, [spinner.interval])

  return (
    <Text color={t.color.muted} wrap="truncate">
      <Text color={t.color.accent}>{frame}</Text> {label}
    </Text>
  )
}

export function ArtLines({ lines }: { lines: [string, string][] }) {
  // No `opaque`: the banner is top-level content with nothing behind it, so
  // it never needs the opaque space-fill (that's for absolute overlays). On a
  // transparent terminal (terminal.background #00000000) the fill's "default
  // background" spaces composite to black bars instead of the intended
  // see-through — the reported ugly banner. Glyphs paint fine on their own.
  return (
    <Box flexDirection="column" height={lines.length} width={artWidth(lines)}>
      {lines.map(([c, text], i) => (
        <Text color={c} key={i} wrap="truncate-end">
          {text}
        </Text>
      ))}
    </Box>
  )
}

// Responsive Banner: full art → compact rule → text → hidden.
//
// Terminals can't scale glyphs, so "responsive" means picking a layout that
// fits the available columns. Thresholds are picked so each tier reads
// comfortably without forcing wrap or truncation drift on box-drawing edges.
const TAG_FULL = 'Nous Research · Messenger of the Digital Gods'
const TAG_MID = 'Messenger of the Digital Gods'
const TAG_TINY = 'Nous Research'
const HIDE_BELOW = 34
const COMPACT_FROM = 58

const clip = (s: string, w: number) => (w <= 0 ? '' : s.length > w ? `${s.slice(0, Math.max(0, w - 1))}…` : s)

const centerIn = (s: string, w: number) => {
  const f = clip(s, w)
  const slack = Math.max(0, w - f.length)
  const left = slack >> 1

  return `${' '.repeat(left)}${f}${' '.repeat(slack - left)}`
}

const ruleIn = (label: string, w: number) => {
  const f = clip(label, Math.max(1, w - 4))
  const slack = Math.max(0, w - f.length - 2)
  const left = slack >> 1

  return `${'─'.repeat(left)} ${f} ${'─'.repeat(slack - left)}`
}

function CompactBanner({ cols, t }: { cols: number; t: Theme }) {
  // -4 keeps a margin so exact-edge rows don't trip terminal pending-wrap.
  const w = Math.max(28, cols - 4)

  // No `opaque` (see ArtLines): the dashed rules are glyphs and the tagline's
  // centering spaces carry the text's own fg style, so every cell paints with
  // a real see-through background. The opaque fill was writing default-bg
  // spaces that a transparent terminal renders as black bars.
  // NOT bold: on Cursor's transparent-background terminal, a full-width run
  // of BOLD box-drawing dashes renders with an opaque black cell background
  // (the plain-dash rule right below renders clean — pixel-diffed live; the
  // only stylistic delta was bold). Bold on short label runs is fine; bold on
  // full-width box-drawing rows is what triggers the slab.
  return (
    <Box flexDirection="column" height={3} marginBottom={1} width={w}>
      <Text color={t.color.primary}>{ruleIn(t.brand.name, w)}</Text>
      <Text color={t.color.muted}>{centerIn(TAG_FULL, w)}</Text>
      <Text color={t.color.primary}>{'─'.repeat(w)}</Text>
    </Box>
  )
}

export function Banner({ maxWidth, t }: { maxWidth?: number; t: Theme }) {
  const term = useStdout().stdout?.columns ?? 80
  const cols = Math.max(1, Math.min(term, maxWidth ?? term))

  if (cols < HIDE_BELOW) {
    return null
  }

  const logoLines = logo(t.color, t.bannerLogo || undefined)
  const logoW = t.bannerLogo ? artWidth(logoLines) : LOGO_WIDTH

  // Each tier renders its rows through a single-column WidgetGrid sized to
  // the available columns — same visual output as the old plain flex column
  // (cells clip where truncate-end used to), but the banner is now a
  // layout-engine surface.
  if (cols >= logoW + 2) {
    return (
      <Box flexDirection="column" marginBottom={1}>
        <WidgetGrid
          cols={cols}
          columns={1}
          gap={0}
          paddingX={0}
          paddingY={0}
          rowGap={0}
          widgets={[
            { children: <ArtLines lines={logoLines} />, id: 'banner-art' },
            {
              children: (
                <Text color={t.color.muted} wrap="truncate-end">
                  {t.brand.icon} {TAG_FULL}
                </Text>
              ),
              id: 'banner-tagline'
            }
          ]}
        />
      </Box>
    )
  }

  if (cols >= COMPACT_FROM) {
    return (
      <WidgetGrid
        cols={cols}
        columns={1}
        gap={0}
        paddingX={0}
        paddingY={0}
        rowGap={0}
        widgets={[{ children: <CompactBanner cols={cols} t={t} />, id: 'banner-compact' }]}
      />
    )
  }

  const name = cols >= 52 ? t.brand.name : (t.brand.name.split(' ')[0] ?? t.brand.name)
  const tag = cols >= 64 ? TAG_FULL : cols >= 46 ? TAG_MID : TAG_TINY

  return (
    <Box flexDirection="column" marginBottom={1}>
      <WidgetGrid
        cols={cols}
        columns={1}
        gap={0}
        paddingX={0}
        paddingY={0}
        rowGap={0}
        widgets={[
          {
            children: (
              <Text bold color={t.color.primary} wrap="truncate-end">
                {t.brand.icon} {name}
              </Text>
            ),
            id: 'banner-name'
          },
          {
            children: (
              <Text color={t.color.muted} wrap="truncate-end">
                {t.brand.icon} {tag}
              </Text>
            ),
            id: 'banner-tag'
          }
        ]}
      />
    </Box>
  )
}

// ── Skeleton ─────────────────────────────────────────────────────────
//
// Lazy sections render shimmer rows shaped like the real content (label
// block + value run) instead of a blank gap that pops when data lands.
// Row widths mirror the typical toolsets listing.
const SKELETON_ROWS: readonly (readonly [number, number])[] = [
  [7, 30],
  [7, 9],
  [14, 12],
  [12, 12],
  [7, 7],
  [10, 13]
]

// ── SessionPanel ─────────────────────────────────────────────────────

const SKILLS_MAX = 8
const TOOLSETS_MAX = 8

export function SessionPanel({ info, maxWidth, sid, t }: SessionPanelProps) {
  const term = useStdout().stdout?.columns ?? 100
  const cols = Math.max(20, Math.min(term, maxWidth ?? term))
  const heroLines = caduceus(t.color, t.bannerHero || undefined)
  const leftW = Math.min((artWidth(heroLines) || CADUCEUS_WIDTH) + 4, Math.floor(cols * 0.4))
  const wide = cols >= 90 && leftW + 40 < cols
  const w = Math.max(20, wide ? cols - leftW - 14 : cols - 12)
  const lineBudget = Math.max(12, w - 2)
  const strip = (s: string) => (s.endsWith('_tools') ? s.slice(0, -6) : s)

  // Hierarchy: labels lead in the label tone; member lists recede in the
  // muted/text midpoint. Anchoring on MUTED (mid-luminance by construction)
  // keeps the fade readable on both poles even when polarity detection is
  // wrong — surface-relative blends go invisible when text is already pale.
  const listFade = mix(t.color.muted, t.color.text, 0.5)

  // ── Local collapse state for each section ──
  const [toolsOpen, setToolsOpen] = useState(true)
  const [skillsOpen, setSkillsOpen] = useState(false)
  const [systemOpen, setSystemOpen] = useState(false)
  const [mcpOpen, setMcpOpen] = useState(false)

  const truncLine = (pfx: string, items: string[]) => {
    let line = ''
    let shown = 0

    for (const item of [...items].sort()) {
      const next = line ? `${line}, ${item}` : item

      if (pfx.length + next.length > lineBudget) {
        return line ? `${line}, …+${items.length - shown}` : `${item}, …`
      }

      line = next
      shown++
    }

    return line
  }

  // ── Collapsible skills section ──
  const skillEntries = Object.entries(info.skills).sort()
  const skillsTotal = flat(info.skills).length
  const skillsCatCount = skillEntries.length

  const skillsBody = () => {
    if (info.lazy && skillEntries.length === 0) {
      return <InlineLoader label="scanning skills" t={t} />
    }

    const shown = skillEntries.slice(0, SKILLS_MAX)
    const overflow = skillEntries.length - SKILLS_MAX

    return (
      <>
        {shown.map(([k, vs]) => (
          <Text key={k} wrap="truncate">
            <Text color={t.color.label}>{strip(k)}: </Text>
            <Text color={listFade}>{truncLine(strip(k) + ': ', vs)}</Text>
          </Text>
        ))}
        {overflow > 0 && <Text color={t.color.muted}>(and {overflow} more categories…)</Text>}
      </>
    )
  }

  // ── Collapsible tools section ──
  const toolEntries = Object.entries(info.tools).sort()
  const toolsTotal = flat(info.tools).length

  // MCP headline counts *connected* servers, not configured-but-disabled ones,
  // so it matches the classic CLI banner (`sum(s.connected)` in
  // hermes_cli/banner.py) and the "connected" label on the collapse toggle.
  const mcpServers = info.mcp_servers ?? []
  const mcpConnected = mcpServers.filter(s => s.connected).length

  const toolsBody = () => {
    if (info.lazy && toolEntries.length === 0) {
      return <ShimmerRows color={listFade} highlight={t.color.label} rows={SKELETON_ROWS} />
    }

    const shown = toolEntries.slice(0, TOOLSETS_MAX)
    const overflow = toolEntries.length - TOOLSETS_MAX

    return (
      <>
        {shown.map(([k, vs]) => (
          <Text key={k} wrap="truncate">
            <Text color={t.color.label}>{strip(k)}: </Text>
            <Text color={listFade}>{truncLine(strip(k) + ': ', vs)}</Text>
          </Text>
        ))}
        {overflow > 0 && <Text color={t.color.muted}>(and {overflow} more toolsets…)</Text>}
      </>
    )
  }

  // ── Collapsible MCP section ──
  const mcpBody = () => (
    <>
      {(info.mcp_servers ?? []).map(s => (
        <Text key={s.name} wrap="truncate">
          <Text color={t.color.muted}>{`  ${s.name} `}</Text>
          <Text color={t.color.muted}>{`[${s.transport}]`}</Text>
          <Text color={t.color.muted}>: </Text>
          {s.connected ? (
            <Text color={t.color.text}>
              {s.tools} tool{s.tools === 1 ? '' : 's'}
            </Text>
          ) : s.disabled || s.status === 'disabled' ? (
            <Text color={t.color.muted}>disabled</Text>
          ) : s.status === 'connecting' ? (
            <Text color={t.color.warn}>connecting</Text>
          ) : s.status === 'configured' ? (
            <Text color={t.color.muted}>configured</Text>
          ) : (
            <Text color={t.color.error}>failed</Text>
          )}
        </Text>
      ))}
    </>
  )

  // ── System prompt body ──
  const sysPromptLen = (info.system_prompt ?? '').length

  const systemBody = () => {
    if (sysPromptLen === 0) {
      return <Text color={t.color.muted}>No system prompt loaded.</Text>
    }

    return <Text color={t.color.muted}>{info.system_prompt}</Text>
  }

  // The wide layout is a real two-column grid: a fixed-width hero track and a
  // flexible info track (grid-template-columns: <leftW> 1fr, gap 2) — the
  // terminal equivalent of the desktop pane shell's fixed-vs-flex tracks.
  // Narrow drops to a single flexible track. Track math reproduces the old
  // hand-rolled widths exactly: usable = (leftW + 2 + w) - gap = leftW + w.
  const heroColumn = wide ? (
    <Box flexDirection="column" width="100%">
      <ArtLines lines={heroLines} />
      <Text />

      <Text color={t.color.accent}>
        {info.model.split('/').pop()}
        <Text color={t.color.muted}> · Nous Research</Text>
      </Text>

      <Text color={t.color.muted} wrap="truncate-end">
        {info.cwd || process.cwd()}
      </Text>

      {sid && (
        <Text>
          <Text color={t.color.sessionLabel}>Session: </Text>
          <Text color={t.color.sessionBorder}>{sid}</Text>
        </Text>
      )}
    </Box>
  ) : null

  const infoColumn = (
    <Box flexDirection="column" width="100%">
      {wide ? (
        <Box justifyContent="center" marginBottom={1}>
          <Text bold color={t.color.primary}>
            {t.brand.name}
            {info.version ? ` v${info.version}` : ''}
            {info.release_date ? ` (${info.release_date})` : ''}
          </Text>
        </Box>
      ) : (
        // Narrow layout hides the hero column; surface model/cwd/session
        // here so they aren't lost.
        <Box flexDirection="column" marginBottom={1}>
          <Text color={t.color.accent} wrap="truncate-end">
            {info.model.split('/').pop()}
            <Text color={t.color.muted}> · Nous Research</Text>
          </Text>
          <Text color={t.color.muted} wrap="truncate-end">
            {info.cwd || process.cwd()}
          </Text>
          {sid && (
            <Text wrap="truncate-end">
              <Text color={t.color.sessionLabel}>Session: </Text>
              <Text color={t.color.sessionBorder}>{sid}</Text>
            </Text>
          )}
        </Box>
      )}

      {/* ── Tools (expanded by default) ── */}
      <Box flexDirection="column" marginTop={1}>
        <Accordion onToggle={() => setToolsOpen(v => !v)} open={toolsOpen} t={t} title="Available Tools">
          {toolsBody()}
        </Accordion>
      </Box>

      {/* ── Skills (collapsed by default) ── */}
      <Box flexDirection="column" marginTop={1}>
        <Accordion
          count={skillsTotal}
          onToggle={() => setSkillsOpen(v => !v)}
          open={skillsOpen}
          suffix={skillsCatCount > 0 ? `in ${skillsCatCount} categor${skillsCatCount === 1 ? 'y' : 'ies'}` : undefined}
          t={t}
          title="Available Skills"
        >
          {skillsBody()}
        </Accordion>
      </Box>

      {/* ── System Prompt (collapsed by default) ── */}
      {sysPromptLen > 0 && (
        <Box flexDirection="column" marginTop={1}>
          <Accordion
            onToggle={() => setSystemOpen(v => !v)}
            open={systemOpen}
            suffix={`— ${sysPromptLen.toLocaleString()} chars`}
            t={t}
            title="System Prompt"
          >
            {systemBody()}
          </Accordion>
        </Box>
      )}

      {/* ── MCP Servers (collapsed by default) ── */}
      {mcpServers.length > 0 && (
        <Box flexDirection="column" marginTop={1}>
          <Accordion
            count={mcpConnected}
            onToggle={() => setMcpOpen(v => !v)}
            open={mcpOpen}
            suffix="connected"
            t={t}
            title="MCP Servers"
          >
            {mcpBody()}
          </Accordion>
        </Box>
      )}

      <Text />

      <Text color={t.color.text}>
        {/* Lazy boot: never print "0 tools · 0 skills" while counts load. */}
        {info.lazy && !toolsTotal ? '… ' : `${toolsTotal} `}tools{' · '}
        {info.lazy && !skillsTotal ? '… ' : `${skillsTotal} `}skills
        {mcpConnected ? ` · ${mcpConnected} MCP` : ''}
        {' · '}
        <Text color={t.color.muted}>/help for commands</Text>
      </Text>

      {typeof info.update_behind === 'number' && info.update_behind > 0 && (
        <Text bold color={t.color.warn}>
          ! {info.update_behind} {info.update_behind === 1 ? 'commit' : 'commits'} behind
          <Text bold={false} color={t.color.warn} dimColor>
            {' '}
            - run{' '}
          </Text>
          <Text bold color={t.color.warn}>
            {info.update_command || 'hermes update'}
          </Text>
          <Text bold={false} color={t.color.warn} dimColor>
            {' '}
            to update
          </Text>
        </Text>
      )}

      {info.install_warning && (
        <Text bold color={t.color.warn} wrap="wrap">
          ! {info.install_warning}
        </Text>
      )}
    </Box>
  )

  return (
    <Box borderColor={t.color.border} borderStyle="round" marginBottom={1} paddingX={2} paddingY={1}>
      <WidgetGrid
        cols={wide ? leftW + 2 + w : w}
        columns={wide ? [leftW, { fr: 1 }] : 1}
        gap={2}
        paddingX={0}
        paddingY={0}
        rowGap={0}
        widgets={
          wide
            ? [
                { children: heroColumn, id: 'session-hero' },
                { children: infoColumn, id: 'session-info' }
              ]
            : [{ children: infoColumn, id: 'session-info' }]
        }
      />
    </Box>
  )
}

export function Panel({ sections, t, title }: PanelProps) {
  return (
    <Box borderColor={t.color.border} borderStyle="round" flexDirection="column" paddingX={2} paddingY={1}>
      <Box justifyContent="center" marginBottom={1}>
        <Text bold color={t.color.primary}>
          {title}
        </Text>
      </Box>

      {sections.map((sec, si) => (
        <Box flexDirection="column" key={si} marginTop={si > 0 ? 1 : 0}>
          {sec.title && (
            <Text bold color={t.color.accent}>
              {sec.title}
            </Text>
          )}

          {sec.rows?.map(([k, v], ri) => (
            <Text key={ri} wrap="truncate">
              <Text color={t.color.muted}>{k.padEnd(20)}</Text>
              <Text color={t.color.text}>{v}</Text>
            </Text>
          ))}

          {sec.items?.map((item, ii) => (
            <Text color={t.color.text} key={ii} wrap="truncate">
              {item}
            </Text>
          ))}

          {sec.text && <Text color={t.color.muted}>{sec.text}</Text>}
        </Box>
      ))}
    </Box>
  )
}

interface PanelProps {
  sections: PanelSection[]
  t: Theme
  title: string
}

interface SessionPanelProps {
  info: SessionInfo
  maxWidth?: number
  sid?: string | null
  t: Theme
}