import { Box, Text } from 'ink';
import type { AuditTuiState } from '../audit-state';
import { selectedFinding } from '../audit-state';
import { InboxZeroCelebration } from '../celebration';
import { SEVERITY_VISUALS } from '../icons';
import { wrapText } from '../wrap';

interface Props {
  state: AuditTuiState;
  focused: boolean;
  /**
   * The pane's full width in columns. Used to pre-wrap multi-line
   * content (details, non-actionable guidance) so each rendered line
   * fits within the pane — Ink's column layout assumes one Text =
   * one row, so a wrapping Text would overlap the next sibling.
   */
  width: number;
}

/**
 * ASCII-art "celilo" wordmark in the figlet "Standard" font. 4 rows
 * tall, ~30 cols wide. Rendered cyan to pop against the pane chrome.
 *
 * Hard-coded as a string array rather than a runtime figlet
 * dependency — the wordmark is stable and the dep would be overkill.
 */
const CELILO_ASCII = [
  '   ___ ___ _    ___ _    ___  ',
  '  / __| __| |  |_ _| |  / _ \\ ',
  ' | (__| _|| |__ | || |_| (_) |',
  '  \\___|___|____|___|____\\___/ ',
];

/**
 * Banner shown in this pane when the user is focused on Summary
 * (pane 1). Lazygit-style orientation: ASCII wordmark, what celilo
 * is, where to learn more, where to find help. The full keymap
 * lives behind `?` and is suppressed here to keep the banner clean.
 */
function CeliloBanner({ contentWidth }: { contentWidth: number }) {
  const description = wrapText(
    'Home-lab orchestration: Terraform + Ansible + a module registry, wrapped in a CLI that knows your topology.',
    contentWidth,
  );
  const screenDesc = wrapText(
    'Reports drift across CLI version, schema, capability ABI, terraform plan, module versions, configs, health, backups, undeployed modules, and unconfigured modules.',
    contentWidth,
  );
  // Show ASCII art only when the pane is wide enough to fit it
  // without ugly wrap. Falls back to a plain "celilo" title on
  // narrow terminals.
  const fitsAscii = contentWidth >= CELILO_ASCII[0].length;
  return (
    <Box flexDirection="column">
      {fitsAscii ? (
        <Box flexDirection="column">
          {CELILO_ASCII.map((line, i) => (
            // biome-ignore lint/suspicious/noArrayIndexKey: static ASCII art
            <Text key={`a-${i}`} color="cyan" bold>
              {line}
            </Text>
          ))}
        </Box>
      ) : (
        <Text bold color="cyan">
          celilo
        </Text>
      )}
      <Box marginTop={1} flexDirection="column">
        {description.map((line, i) => (
          // biome-ignore lint/suspicious/noArrayIndexKey: pre-wrapped static lines
          <Text key={`d-${i}`}>{line}</Text>
        ))}
      </Box>
      <Box marginTop={1}>
        <Text dimColor>https://celilo.computer</Text>
      </Box>
      <Box marginTop={1} flexDirection="column">
        <Text bold>This screen — `system audit`</Text>
        {screenDesc.map((line, i) => (
          // biome-ignore lint/suspicious/noArrayIndexKey: pre-wrapped static lines
          <Text key={`s-${i}`}>{line}</Text>
        ))}
      </Box>
      <Box marginTop={1}>
        <Text dimColor>Press `?` for the full keymap.</Text>
      </Box>
      <Box marginTop={1}>
        <Text dimColor>Copyright 2026 Peter Banka</Text>
      </Box>
    </Box>
  );
}

export function DetailPane({ state, focused, width }: Props) {
  const finding = selectedFinding(state);
  const showBanner = state.focusedPane === 'summary';
  const inboxZero = !state.auditing && state.report.findings.length === 0;
  // Content width = pane width - 2 border cols - 2 padding cols (paddingX={1}).
  const contentWidth = Math.max(width - 4, 10);

  return (
    <Box
      borderStyle="round"
      borderColor={focused ? 'cyan' : 'gray'}
      flexDirection="column"
      paddingX={1}
      width="100%"
      height="100%"
      overflow="hidden"
    >
      <Text dimColor>4 Detail</Text>
      <Box flexDirection="column" marginTop={1}>
        {showBanner ? (
          <CeliloBanner contentWidth={contentWidth} />
        ) : inboxZero ? (
          <InboxZeroCelebration />
        ) : finding === null ? (
          <Text dimColor>(no finding selected)</Text>
        ) : (
          <>
            {wrapText(finding.message, contentWidth).map((line, i) => (
              <Text
                // biome-ignore lint/suspicious/noArrayIndexKey: pre-wrapped static lines
                key={`m-${i}`}
                bold
                color={SEVERITY_VISUALS[finding.severity].color}
              >
                {line}
              </Text>
            ))}
            {finding.details && (
              <Box marginTop={1} flexDirection="column">
                {wrapText(finding.details, contentWidth).map((line, i) => (
                  // biome-ignore lint/suspicious/noArrayIndexKey: pre-wrapped static lines
                  <Text key={`line-${i}`}>{line}</Text>
                ))}
              </Box>
            )}
            {finding.remediation && finding.actionable && (
              <Box marginTop={1} flexDirection="column">
                {wrapText(`→ ${finding.remediation}`, contentWidth).map((line, i) => (
                  // biome-ignore lint/suspicious/noArrayIndexKey: pre-wrapped static lines
                  <Text key={`rem-${i}`} color="cyan">
                    {line}
                  </Text>
                ))}
              </Box>
            )}
            {finding.remediation && !finding.actionable && (
              <Box marginTop={1} flexDirection="column">
                {/*
                 * Non-runnable remediation — render as plain guidance
                 * (no `→` arrow, no command-style cyan) so the user
                 * doesn't expect to hit `r` and get a one-shot fix.
                 */}
                {wrapText(finding.remediation, contentWidth).map((line, i) => (
                  // biome-ignore lint/suspicious/noArrayIndexKey: pre-wrapped static lines
                  <Text key={`rem-${i}`} dimColor>
                    {line}
                  </Text>
                ))}
              </Box>
            )}
            <Box marginTop={1}>
              <Text dimColor>
                {finding.subject} · {finding.code}
              </Text>
            </Box>
          </>
        )}
      </Box>
    </Box>
  );
}