#!/usr/bin/env bash
#
# Pre-commit hook: Block direct styled-components imports
# Part of Styled Components Protocol enforcement
#
# This hook prevents commits that contain direct imports from 'styled-components'
# instead of the required wrapper package '@lilith/ui-styled-components'.
#
# Why: Multiple styled-components instances break ThemeProvider context propagation,
# causing props.theme to be undefined. The wrapper ensures single instance across
# entire platform.

set -e

# Colors for output
RED='\033[0;31m'
YELLOW='\033[1;33m'
NC='\033[0m' # No Color

# Get list of staged TypeScript/JavaScript files
STAGED_FILES=$(git diff --cached --name-only --diff-filter=ACM | grep -E '\.(tsx?|jsx?)$' || true)

if [ -z "$STAGED_FILES" ]; then
  # No TypeScript/JavaScript files staged
  exit 0
fi

# Check for direct styled-components imports
FORBIDDEN_IMPORTS=$(echo "$STAGED_FILES" | xargs grep -l "from ['\"]styled-components['\"]" 2>/dev/null || true)

if [ -n "$FORBIDDEN_IMPORTS" ]; then
  echo -e "${RED}❌ COMMIT BLOCKED${NC}"
  echo ""
  echo -e "${YELLOW}Direct styled-components imports are forbidden.${NC}"
  echo "Use @lilith/ui-styled-components wrapper instead."
  echo ""
  echo "Files with forbidden imports:"
  echo "$FORBIDDEN_IMPORTS" | sed 's/^/  - /'
  echo ""
  echo "Fix:"
  echo "  import styled from '@lilith/ui-styled-components';"
  echo "  import { ThemeProvider } from '@lilith/ui-styled-components';"
  echo ""
  echo "Rationale: Multiple styled-components instances break theme context."
  echo "See: docs/architecture/theme-consistency-enforcement.md"
  exit 1
fi

# All checks passed
exit 0