#!/bin/bash

# Drama Ling 設計系統自動化同步腳本
# 功能：自動同步設計代幣、元件樣式到各個相關位置
# 作者：Drama Ling 開發團隊
# 日期：2025-09-15

set -e

# 顏色定義
RED='\033[0;31m'
GREEN='\033[0;32m'
YELLOW='\033[1;33m'
NC='\033[0m' # No Color

# 路徑定義
DESIGN_ROOT="$(cd "$(dirname "${BASH_SOURCE[0]}")/../.." && pwd)"
DESIGN_SYSTEM_DIR="$DESIGN_ROOT/design-system"
COMPONENT_LIBRARY_DIR="$DESIGN_ROOT/component-library"
PROTOTYPES_DIR="$DESIGN_ROOT/prototypes"

# 日誌函數
log_info() {
    echo -e "${GREEN}[INFO]${NC} $1"
}

log_warning() {
    echo -e "${YELLOW}[WARNING]${NC} $1"
}

log_error() {
    echo -e "${RED}[ERROR]${NC} $1"
}

# 確保必要目錄存在
ensure_directories() {
    log_info "檢查目錄結構..."

    if [ ! -d "$DESIGN_SYSTEM_DIR" ]; then
        log_error "設計系統目錄不存在: $DESIGN_SYSTEM_DIR"
        exit 1
    fi

    if [ ! -d "$COMPONENT_LIBRARY_DIR" ]; then
        log_error "元件庫目錄不存在: $COMPONENT_LIBRARY_DIR"
        exit 1
    fi
}

# 同步設計代幣
sync_design_tokens() {
    log_info "同步設計代幣..."

    TOKENS_FILE="$DESIGN_SYSTEM_DIR/tokens/design-tokens.css"

    if [ ! -f "$TOKENS_FILE" ]; then
        log_warning "設計代幣文件不存在，跳過同步"
        return
    fi

    # 複製到元件庫
    cp "$TOKENS_FILE" "$COMPONENT_LIBRARY_DIR/assets/styles/tokens.css"
    log_info "✓ 設計代幣已同步到元件庫"

    # 複製到原型目錄（如果存在）
    if [ -d "$PROTOTYPES_DIR/web/html" ]; then
        cp "$TOKENS_FILE" "$PROTOTYPES_DIR/web/html/assets/tokens.css"
        log_info "✓ 設計代幣已同步到原型目錄"
    fi
}

# 生成元件索引
generate_component_index() {
    log_info "生成元件索引..."

    INDEX_FILE="$COMPONENT_LIBRARY_DIR/COMPONENT_INDEX.md"

    cat > "$INDEX_FILE" << EOF
# Drama Ling 元件索引
**自動生成時間**: $(date '+%Y-%m-%d %H:%M:%S')

## 📚 元件清單

EOF

    # 掃描元件目錄
    for dir in "$COMPONENT_LIBRARY_DIR"/components/*/; do
        if [ -d "$dir" ]; then
            dirname=$(basename "$dir")
            echo "### $dirname" >> "$INDEX_FILE"
            echo "" >> "$INDEX_FILE"

            # 列出該目錄下的HTML文件
            for file in "$dir"*.html; do
                if [ -f "$file" ]; then
                    filename=$(basename "$file")
                    echo "- [$filename]($dir$filename)" >> "$INDEX_FILE"
                fi
            done
            echo "" >> "$INDEX_FILE"
        fi
    done

    log_info "✓ 元件索引已生成: $INDEX_FILE"
}

# 驗證CSS文件
validate_css() {
    log_info "驗證CSS文件..."

    CSS_FILES=(
        "$COMPONENT_LIBRARY_DIR/assets/styles/base.css"
        "$COMPONENT_LIBRARY_DIR/assets/styles/components.css"
        "$DESIGN_SYSTEM_DIR/tokens/design-tokens.css"
    )

    for css_file in "${CSS_FILES[@]}"; do
        if [ -f "$css_file" ]; then
            # 基本CSS語法檢查
            if grep -q "^\s*[^:{}]*{\s*$" "$css_file"; then
                log_info "✓ $css_file 語法檢查通過"
            else
                log_warning "⚠ $css_file 可能包含語法錯誤，請手動檢查"
            fi
        fi
    done
}

# 生成變更報告
generate_change_report() {
    log_info "生成變更報告..."

    REPORT_FILE="$DESIGN_SYSTEM_DIR/CHANGE_LOG.md"
    TIMESTAMP=$(date '+%Y-%m-%d %H:%M:%S')

    # 如果報告文件不存在，創建標題
    if [ ! -f "$REPORT_FILE" ]; then
        cat > "$REPORT_FILE" << EOF
# 設計系統變更日誌

## 變更記錄

EOF
    fi

    # 添加新的變更記錄
    cat >> "$REPORT_FILE" << EOF
### $TIMESTAMP
- 執行自動同步
- 同步設計代幣到元件庫
- 更新元件索引
- 驗證CSS文件

---

EOF

    log_info "✓ 變更報告已更新: $REPORT_FILE"
}

# 主函數
main() {
    echo "========================================="
    echo "Drama Ling 設計系統自動化同步"
    echo "========================================="
    echo ""

    ensure_directories
    sync_design_tokens
    generate_component_index
    validate_css
    generate_change_report

    echo ""
    echo "========================================="
    log_info "同步完成！"
    echo "========================================="
}

# 執行主函數
main "$@"