import React from "react";
import { View } from "react-native";
import Svg, { Path } from "react-native-svg";
import { useColorScheme } from "nativewind";
import { Text } from "./text";
import { DISABLE_BRANDING } from "../flags";
import { EntropyMarkAnimated } from "./entropy-mark-animated";
import {
  ENTROPY_MARK_VIEWBOX,
  ENTROPY_MARK_ASPECT,
  ENTROPY_MARK_PATH,
  ENTROPY_MARK_STEP,
} from "./entropy-mark-geometry";

// Entropy Softworks company mark: Geist Mono `>_` broken apart (diagonal shear
// on the `>` top arm, CRT scanline slip on the lower arm, clean break in the
// `_`), trailed by three grey time-echoes drifting up-left and an optional
// faint cyan/red chroma fringe. This is the COMPANY brand — distinct from each
// product's own logo (registered via AppConfig.Logo / BrandHeader). Use it
// sparingly on corporate surfaces (legal pages, boot splash).
//
// Single traced path, reused with per-echo offsets. Geometry lives in
// ./entropy-mark-geometry (shared with EntropyMarkAnimated to avoid a require
// cycle); re-exported here so existing import paths keep working.
export {
  ENTROPY_MARK_VIEWBOX,
  ENTROPY_MARK_ASPECT,
  ENTROPY_MARK_PATH,
  ENTROPY_MARK_STEP,
} from "./entropy-mark-geometry";

const PALETTE = {
  light: {
    src: "#000000",
    echo: ["#f5f5f5", "#e2e2e2", "#cbcbcb"],
    cyan: "#0096aa",
    red: "#c82837",
  },
  dark: {
    src: "#ffffff",
    echo: ["#373737", "#5f5f5f", "#8c8c8c"],
    cyan: "#268ca0",
    red: "#a53440",
  },
};

export interface EntropyMarkProps {
  /** Rendered height in px. Width follows the ~1.63:1 aspect. */
  size?: number;
  /** "mono" = grey echoes only; "chroma" = adds the faint cyan/red fringe. */
  variant?: "mono" | "chroma";
  /** Override the theme; defaults to the active color scheme. */
  scheme?: "light" | "dark";
  /** Multiply the echo drift distance (boot animation drives this 0→1). */
  driftScale?: number;
}

/** Bare company `>_` mark (no wordmark). */
export function EntropyMark({
  size = 28,
  variant = "mono",
  scheme,
  driftScale = 1,
}: EntropyMarkProps) {
  const { colorScheme } = useColorScheme();
  const p = PALETTE[scheme ?? (colorScheme === "dark" ? "dark" : "light")];
  const width = Math.round(size * ENTROPY_MARK_ASPECT);
  const echoes = [3, 2, 1] as const; // far (dim) -> near
  return (
    <Svg width={width} height={size} viewBox={ENTROPY_MARK_VIEWBOX}>
      {echoes.map((i) => (
        <Path
          key={i}
          d={ENTROPY_MARK_PATH}
          fillRule="evenodd"
          fill={p.echo[3 - i]}
          transform={`translate(${ENTROPY_MARK_STEP.x * i * driftScale} ${ENTROPY_MARK_STEP.y * i * driftScale})`}
        />
      ))}
      {variant === "chroma" ? (
        <>
          <Path
            d={ENTROPY_MARK_PATH}
            fillRule="evenodd"
            fill={p.cyan}
            opacity={0.5}
            transform="translate(10 8)"
          />
          <Path
            d={ENTROPY_MARK_PATH}
            fillRule="evenodd"
            fill={p.red}
            opacity={0.45}
            transform="translate(-10 -8)"
          />
        </>
      ) : null}
      <Path d={ENTROPY_MARK_PATH} fillRule="evenodd" fill={p.src} />
    </Svg>
  );
}

export interface EntropyBylineProps {
  /** Mark height in px (wordmark scales relative). */
  size?: number;
  variant?: "mono" | "chroma";
  scheme?: "light" | "dark";
  /** Byline copy. Defaults to "Entropy Softworks, Inc.". */
  label?: string;
}

/**
 * Subtle corporate byline: the company `>_` mark beside small muted text.
 * Drop at the bottom of legal / about pages so each product carries quiet
 * company recognition without competing with its own brand.
 */
export function EntropyByline({
  size = 18,
  variant = "mono",
  scheme,
  label = "Entropy Softworks, Inc.",
}: EntropyBylineProps) {
  // Self-host branding opt-out: strip the Entropy byline entirely.
  if (DISABLE_BRANDING) {
    return null;
  }
  return (
    <View className="flex-row items-center justify-center" style={{ gap: 8, opacity: 0.7 }}>
      {/* Flat at rest; press reveals the echo-cascade (the website's hover
          animation, touch-ported — see entropy-mark-animated.tsx). */}
      <EntropyMarkAnimated size={size} variant={variant} scheme={scheme} />
      <Text className="font-mono text-xs text-muted-foreground dark:text-neutral-400">{label}</Text>
    </View>
  );
}