.PHONY: help install dev storybook lint test build verify clean

# Color output
BOLD=\033[1m
GREEN=\033[32m
YELLOW=\033[33m
NC=\033[0m

help:
	@echo "$(BOLD)OMS·WMS·ERP Development Commands$(NC)"
	@echo ""
	@echo "$(GREEN)Setup & Installation$(NC)"
	@echo "  make install              Install dependencies"
	@echo "  make clean                Remove node_modules and build artifacts"
	@echo ""
	@echo "$(GREEN)Development$(NC)"
	@echo "  make dev                  Start Vite dev server (http://localhost:5173)"
	@echo "  make storybook            Start Storybook (http://localhost:6006)"
	@echo ""
	@echo "$(GREEN)Quality Checks$(NC)"
	@echo "  make lint                 Run ESLint + Prettier"
	@echo "  make type-check           Run TypeScript compiler"
	@echo "  make test                 Run unit tests"
	@echo "  make test-watch           Run unit tests in watch mode"
	@echo ""
	@echo "$(GREEN)Build & Deploy$(NC)"
	@echo "  make build                Build for production"
	@echo "  make build-storybook      Build Storybook static"
	@echo "  make preview              Preview production build"
	@echo ""
	@echo "$(GREEN)Verification$(NC)"
	@echo "  make verify               Run all checks (lint + type + test + build)"
	@echo "  make verify-step2         Phase 1 Step 2 full verification"
	@echo ""

install:
	@echo "$(YELLOW)Installing dependencies...$(NC)"
	npm install
	@echo "$(GREEN)✓ Installation complete$(NC)"

dev:
	@echo "$(YELLOW)Starting Vite dev server...$(NC)"
	npm run dev

storybook:
	@echo "$(YELLOW)Starting Storybook...$(NC)"
	npm run storybook

lint:
	@echo "$(YELLOW)Running ESLint...$(NC)"
	npm run lint
	@echo "$(GREEN)✓ Linting complete$(NC)"

type-check:
	@echo "$(YELLOW)Running TypeScript compiler...$(NC)"
	npm run type-check
	@echo "$(GREEN)✓ Type check complete$(NC)"

test:
	@echo "$(YELLOW)Running unit tests...$(NC)"
	npm run test:unit

test-watch:
	@echo "$(YELLOW)Running unit tests (watch mode)...$(NC)"
	npm run test:unit -- --watch

build:
	@echo "$(YELLOW)Building for production...$(NC)"
	npm run build
	@echo "$(GREEN)✓ Build complete$(NC)"
	@du -sh dist/

build-storybook:
	@echo "$(YELLOW)Building Storybook...$(NC)"
	npm run build-storybook
	@echo "$(GREEN)✓ Storybook build complete$(NC)"

preview:
	@echo "$(YELLOW)Previewing production build...$(NC)"
	npm run preview

verify:
	@echo "$(BOLD)$(GREEN)Phase 1 Verification$(NC)"
	@echo ""
	@echo "$(YELLOW)1. Linting...$(NC)"
	@npm run lint
	@echo ""
	@echo "$(YELLOW)2. Type-checking...$(NC)"
	@npm run type-check
	@echo ""
	@echo "$(YELLOW)3. Testing...$(NC)"
	@npm run test:unit
	@echo ""
	@echo "$(YELLOW)4. Building...$(NC)"
	@npm run build
	@echo ""
	@echo "$(GREEN)✓ All verifications passed$(NC)"

verify-step2:
	@echo "$(BOLD)$(GREEN)Phase 1 Step 2: Full Environment Verification$(NC)"
	@echo ""
	@echo "$(YELLOW)[1/5] npm install$(NC)"
	@npm install
	@echo "$(GREEN)✓ Installed$(NC)"
	@echo ""
	@echo "$(YELLOW)[2/5] ESLint$(NC)"
	@npm run lint
	@echo "$(GREEN)✓ Lint passed$(NC)"
	@echo ""
	@echo "$(YELLOW)[3/5] TypeScript$(NC)"
	@npm run type-check
	@echo "$(GREEN)✓ Type check passed$(NC)"
	@echo ""
	@echo "$(YELLOW)[4/5] Unit tests$(NC)"
	@npm run test:unit
	@echo "$(GREEN)✓ Tests passed$(NC)"
	@echo ""
	@echo "$(YELLOW)[5/5] Production build$(NC)"
	@npm run build
	@echo "$(GREEN)✓ Build passed$(NC)"
	@echo ""
	@echo "$(BOLD)$(GREEN)✓✓✓ Phase 1 Step 2 COMPLETE ✓✓✓$(NC)"
	@echo ""
	@echo "Next steps:"
	@echo "  1. Start dev: make dev"
	@echo "  2. View stories: make storybook"
	@echo "  3. Create components: npm run component:create Button"

create-primitives:
	@echo "$(YELLOW)Generating 25 Primitive components...$(NC)"
	npm run component:create Card
	npm run component:create Badge
	npm run component:create Modal
	npm run component:create Alert
	npm run component:create Spinner
	npm run component:create Tooltip
	npm run component:create Checkbox
	npm run component:create Radio
	npm run component:create Pagination
	npm run component:create Dropdown
	npm run component:create Tabs
	npm run component:create Breadcrumb
	npm run component:create NavBar
	npm run component:create Sidebar
	npm run component:create Icon
	npm run component:create Link
	npm run component:create FormGroup
	npm run component:create Label
	npm run component:create HelpText
	npm run component:create ErrorMessage
	npm run component:create LoadingState
	npm run component:create EmptyState
	npm run component:create Divider
	npm run component:create Collapse
	npm run component:create Stepper
	@echo "$(GREEN)✓ Generated 25 components$(NC)"

clean:
	@echo "$(YELLOW)Cleaning up...$(NC)"
	rm -rf node_modules/ dist/ storybook-static/ coverage/ .next/
	@echo "$(GREEN)✓ Clean complete$(NC)"