action.yml

name: 'CanICode Design to Code'
description: 'Analyze a Figma design, generate code with AI, and create a PR with screenshot comparison.'
author: 'let-sunny'

inputs:
  figma_url:
    description: 'Figma URL with node-id'
    required: true
  figma_token:
    description: 'Figma API token'
    required: true
  output_dir:
    description: 'Directory to save generated code (e.g., src/components)'
    required: true
  prompt_file:
    description: 'Path to AI instruction file with project context (stack, conventions, etc.)'
    required: false
    default: '.github/canicode-prompt.md'
  llm_provider:
    description: 'AI provider: claude | openai | gemini'
    required: false
    default: 'claude'
  llm_api_key:
    description: 'API key for the chosen LLM provider'
    required: true
  min_score:
    description: 'Minimum canicode score to proceed with code generation (0-100)'
    required: false
    default: '60'
  preset:
    description: 'Analysis preset: relaxed | dev-friendly | ai-ready | strict'
    required: false
    default: 'strict'
  version:
    description: 'canicode CLI version'
    required: false
    default: 'latest'

outputs:
  score:
    description: 'canicode analysis score'
    value: ${{ steps.gate.outputs.score }}
  grade:
    description: 'canicode analysis grade'
    value: ${{ steps.gate.outputs.grade }}
  similarity:
    description: 'Pixel-level similarity percentage (0-100)'
    value: ${{ steps.compare.outputs.similarity }}
  generated_files:
    description: 'List of generated files'
    value: ${{ steps.generate.outputs.files }}
  pr_url:
    description: 'URL of the created PR'
    value: ${{ steps.pr.outputs.url }}

runs:
  using: 'composite'
  steps:
    # 1. Score gate — reuse root canicode-action
    - name: Run canicode score gate
      id: gate
      uses: let-sunny/canicode-action@v0.1.0
      with:
        figma_url: ${{ inputs.figma_url }}
        figma_token: ${{ inputs.figma_token }}
        min_score: ${{ inputs.min_score }}
        preset: ${{ inputs.preset }}
        version: ${{ inputs.version }}
        comment: 'false'

    # 2. Check prompt file exists
    - name: Check prompt file
      shell: bash
      env:
        PROMPT_FILE: ${{ inputs.prompt_file }}
      run: |
        if [ ! -f "$PROMPT_FILE" ]; then
          echo "::error::Prompt file not found: ${PROMPT_FILE}"
          echo "Please add this file to your repository with instructions for code generation (stack, conventions, etc.)"
          exit 1
        fi

    # 3. Fetch Figma design data (full node data with styles)
    - name: Fetch Figma design data
      id: figma
      shell: bash
      env:
        FIGMA_TOKEN: ${{ inputs.figma_token }}
        FIGMA_URL: ${{ inputs.figma_url }}
      run: |
        FILE_KEY=$(echo "$FIGMA_URL" | sed -n 's|.*\/design\/\([^/]*\)\/.*|\1|p')
        NODE_ID=$(echo "$FIGMA_URL" | sed -n 's|.*node-id=\([^&]*\).*|\1|p' | tr '-' ':')

        # Reuse fixture from score gate (node data already fetched)
        echo "Reusing fixture from score gate: /tmp/canicode-fixture.json"

        # Fetch file styles (not included in fixture)
        curl -s -H "X-Figma-Token: $FIGMA_TOKEN" \
          "https://api.figma.com/v1/files/${FILE_KEY}/styles" \
          -o /tmp/figma-styles.json

        echo "Figma styles: $(jq '.meta.styles | length' /tmp/figma-styles.json)"

        # Fetch screenshot for AI context
        IMG_RESPONSE=$(curl -s -H "X-Figma-Token: $FIGMA_TOKEN" \
          "https://api.figma.com/v1/images/${FILE_KEY}?ids=${NODE_ID}&format=png&scale=2")
        IMG_URL=$(echo "$IMG_RESPONSE" | jq -r ".images[\"${NODE_ID}\"]")

        if [ "$IMG_URL" != "null" ] && [ -n "$IMG_URL" ]; then
          curl -s -o /tmp/figma-screenshot.png "$IMG_URL"
          echo "has_screenshot=true" >> "$GITHUB_OUTPUT"
          echo "Figma screenshot saved"
        else
          echo "has_screenshot=false" >> "$GITHUB_OUTPUT"
          echo "::warning::Could not fetch Figma screenshot for AI context"
        fi

    # 4. Save analysis JSON to file
    - name: Save analysis to file
      shell: bash
      env:
        ANALYSIS: ${{ steps.gate.outputs.report_json }}
      run: echo "$ANALYSIS" > /tmp/canicode-analysis.json

    # 5. Install dependencies
    - name: Install AI SDK
      shell: bash
      run: |
        ACTION_DIR="${{ github.action_path }}"
        cd "$ACTION_DIR"
        npm install ai @ai-sdk/anthropic @ai-sdk/openai @ai-sdk/google

    # 6. Generate code with AI
    - name: Generate code with AI
      id: generate
      shell: bash
      env:
        LLM_PROVIDER: ${{ inputs.llm_provider }}
        LLM_API_KEY: ${{ inputs.llm_api_key }}
        PROMPT_FILE: ${{ inputs.prompt_file }}
        OUTPUT_DIR: ${{ inputs.output_dir }}
        FIGMA_NODES_PATH: /tmp/canicode-fixture.json
        FIGMA_STYLES_PATH: /tmp/figma-styles.json
        ANALYSIS_PATH: /tmp/canicode-analysis.json
        HAS_SCREENSHOT: ${{ steps.figma.outputs.has_screenshot }}
      run: |
        ACTION_DIR="${{ github.action_path }}"
        case "$LLM_PROVIDER" in
          claude)  export ANTHROPIC_API_KEY="$LLM_API_KEY" ;;
          openai)  export OPENAI_API_KEY="$LLM_API_KEY" ;;
          gemini)  export GOOGLE_GENERATIVE_AI_API_KEY="$LLM_API_KEY" ;;
        esac
        node "$ACTION_DIR/generate.mjs"

    # 7. Visual compare — pixel-level similarity via canicode CLI
    - name: Visual compare
      id: compare
      shell: bash
      env:
        FIGMA_TOKEN: ${{ inputs.figma_token }}
        FIGMA_URL: ${{ inputs.figma_url }}
        OUTPUT_DIR: ${{ inputs.output_dir }}
      run: |
        # Find the main HTML file
        HTML_FILE=$(find "$OUTPUT_DIR" -name "index.html" -o -name "preview.html" -o -name "main.html" | head -1)
        if [ -z "$HTML_FILE" ]; then
          HTML_FILE=$(find "$OUTPUT_DIR" -name "*.html" | head -1)
        fi

        if [ -z "$HTML_FILE" ]; then
          echo "::warning::No HTML file found — skipping visual compare"
          echo "similarity=-1" >> "$GITHUB_OUTPUT"
          echo "has_compare=false" >> "$GITHUB_OUTPUT"
          exit 0
        fi

        # Install Playwright globally so canicode can find it
        npm install -g playwright
        npx playwright install --with-deps chromium

        # Run visual compare (print output for debugging, then parse)
        echo "Running visual-compare on $HTML_FILE..."
        npx canicode visual-compare "$HTML_FILE" \
          --figma-url "$FIGMA_URL" \
          --token "$FIGMA_TOKEN" \
          --output /tmp/canicode-visual-compare \
          > /tmp/visual-compare-output.txt 2>&1 || true

        cat /tmp/visual-compare-output.txt

        # Extract similarity from JSON output
        SIMILARITY=$(sed -n '/^{/,/^}/p' /tmp/visual-compare-output.txt | jq -r '.similarity // -1')
        SIMILARITY=${SIMILARITY:--1}
        echo "similarity=$SIMILARITY" >> "$GITHUB_OUTPUT"

        if [ "$SIMILARITY" != "-1" ]; then
          echo "has_compare=true" >> "$GITHUB_OUTPUT"
          echo "Visual similarity: ${SIMILARITY}%"
        else
          echo "::error::Visual compare failed — cannot verify pixel accuracy. See output above."
          exit 1
        fi

    # 8. Create PR
    - name: Create PR
      id: pr
      shell: bash
      env:
        GH_TOKEN: ${{ github.token }}
        OUTPUT_DIR: ${{ inputs.output_dir }}
        SCORE: ${{ steps.gate.outputs.score }}
        GRADE: ${{ steps.gate.outputs.grade }}
        SIMILARITY: ${{ steps.compare.outputs.similarity }}
        FIGMA_URL: ${{ inputs.figma_url }}
        HAS_COMPARE: ${{ steps.compare.outputs.has_compare }}
      run: |
        BRANCH="design-to-code/$(date +%Y%m%d-%H%M%S)"
        git checkout -b "$BRANCH"

        git add "$OUTPUT_DIR"

        # Add screenshots from visual-compare
        mkdir -p .github/design-comparison
        if [ "$HAS_COMPARE" = "true" ] && [ -f /tmp/canicode-visual-compare/figma.png ]; then
          cp /tmp/canicode-visual-compare/figma.png .github/design-comparison/
          cp /tmp/canicode-visual-compare/code.png .github/design-comparison/
          cp /tmp/canicode-visual-compare/diff.png .github/design-comparison/
          git add .github/design-comparison/
        fi

        git -c user.name="github-actions[bot]" \
            -c user.email="github-actions[bot]@users.noreply.github.com" \
            commit -m "feat: generate code from Figma design (${SCORE}% ${GRADE}, ${SIMILARITY}% similarity)"
        git push origin "$BRANCH"

        # Build PR body
        {
          echo "## Design to Code"
          echo ""
          echo "| Metric | Value |"
          echo "|--------|-------|"
          echo "| canicode score | ${SCORE}% (${GRADE}) |"
          echo "| pixel similarity | ${SIMILARITY}% |"
          echo "| Figma | ${FIGMA_URL} |"
        } > /tmp/pr-body.md

        REPO="${{ github.repository }}"
        RAW_BASE="https://raw.githubusercontent.com/${REPO}/${BRANCH}"

        if [ "$HAS_COMPARE" = "true" ] && [ -f /tmp/canicode-visual-compare/figma.png ]; then
          {
            echo ""
            echo "### Screenshot Comparison"
            echo ""
            echo "| Figma (original) | AI (generated) | Diff |"
            echo "|:---:|:---:|:---:|"
            echo "| ![Figma](${RAW_BASE}/.github/design-comparison/figma.png) | ![AI](${RAW_BASE}/.github/design-comparison/code.png) | ![Diff](${RAW_BASE}/.github/design-comparison/diff.png) |"
          } >> /tmp/pr-body.md
        fi

        # Add interpretations section
        if [ -f "${OUTPUT_DIR}/interpretations.md" ]; then
          INTERP=$(cat "${OUTPUT_DIR}/interpretations.md")
          if [ "$INTERP" != "none" ]; then
            {
              echo ""
              echo "### AI Interpretations (not in Figma data)"
              echo ""
              echo "The AI had to guess these values because they were missing from the design data:"
              echo ""
              echo "$INTERP"
            } >> /tmp/pr-body.md
          fi
        fi

        {
          echo ""
          echo "---"
          echo "Generated by CanICode Design to Code"
        } >> /tmp/pr-body.md

        PR_URL=$(gh pr create \
          --title "feat: design to code (${SCORE}% ${GRADE}, ${SIMILARITY}% pixel match)" \
          --body-file /tmp/pr-body.md)

        echo "url=$PR_URL" >> "$GITHUB_OUTPUT"