// src/components/OnboardingChecklist.jsx
import React, { useState, useEffect } from react;
import axios from axios; // API 요청 라이브러리

function OnboardingChecklist({ userId }) {
    const [steps, setSteps] = useState([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
        // 서버에서 사용자별 온보딩 단계 정보를 불러옵니다.
        const fetchOnboardingSteps = async () => {
            try {
                const response = await axios.get(`/api/users/${userId}/onboarding-steps`);
                setSteps(response.data);
            } catch (err) {
                setError(온보딩 단계를 불러오는 데 실패했습니다.);
                console.error(err);
            } finally {
                setLoading(false);
            }
        };
        fetchOnboardingSteps();
    }, [userId]);

    const handleStepComplete = async (stepId) => {
        const updatedSteps = steps.map(step =>
            step.id === stepId ? { ...step, completed: !step.completed } : step
        );
        setSteps(updatedSteps); // UI 즉시 업데이트

        try {
            // 서버에 단계 완료 상태를 업데이트합니다.
            await axios.put(`/api/users/${userId}/onboarding-steps/${stepId}`, {
                completed: updatedSteps.find(s => s.id === stepId).completed
            });
        } catch (err) {
            setError(단계 완료 상태를 업데이트하는 데 실패했습니다.);
            console.error(err);
            // 에러 발생 시 UI 롤백 또는 사용자에게 알림
            setSteps(steps); // 롤백 예시
        }
    };

    if (loading) return <p>온보딩 단계를 불러오는 중...</p>;
    if (error) return <p className="error">{error}</p>;

    const completedCount = steps.filter(step => step.completed).length;
    const totalSteps = steps.length;
    const progress = totalSteps > 0 ? (completedCount / totalSteps) * 100 : 0;

    return (
        <div className="onboarding-checklist-container">
            <h2>🚀 시작하기</h2>
            <div className="progress-bar-wrapper">
                <div className="progress-bar" style={{ width: `${progress}%` }}></div>
            </div>
            <p>{completedCount} / {totalSteps} 단계 완료</p>
            <ul>
                {steps.map(step => (
                    <li key={step.id} className={step.completed ? completed : }>
                        <input
                            type="checkbox"
                            checked={step.completed}
                            onChange={() => handleStepComplete(step.id)}
                            id={`step-${step.id}`}
                        />
                        <label htmlFor={`step-${step.id}`}>{step.text}</label>
                    </li>
                ))}
            </ul>
            {completedCount === totalSteps && (
                <div className="completion-message">
                    <p>🎉 모든 온보딩 단계를 완료하셨습니다! 이제 제품을 완전히 활용해 보세요.</p>
                </div>
            )}
        </div>
    );
}

export default OnboardingChecklist;

// public/js/onboarding-tour.js (또는 React/Vue 컴포넌트 내에서)
import introJs from intro.js; // intro.js 라이브러리 임포트 (npm install intro.js)
import intro.js/introjs.css; // 기본 스타일 시트 임포트

export const startOnboardingTour = (initialStep = 0) => {
    // 사용자가 이전에 투어를 완료했는지 또는 스킵했는지 확인하는 로직 추가
    // 예: localStorage.getItem(onboarding_tour_completed)

    const intro = introJs();
    intro.setOptions({
        steps: [
            {
                element: #dashboard-overview, // 투어 대상 HTML 요소의 ID
                intro: 여기는 대시보드입니다. 전체 현황을 한눈에 파악할 수 있어요.,
                position: right
            },
            {
                element: #create-project-button,
                intro: 새로운 프로젝트를 시작하려면 이 버튼을 클릭하세요.,
                position: bottom
            },
            {
                element: #sidebar-settings,
                intro: 계정 설정 및 기타 옵션은 여기서 관리할 수 있습니다.,
                position: right
            }
        ],
        showButtons: true,
        showStepNumbers: false,
        exitOnOverlayClick: false,
        overlayOpacity: 0.7,
        tooltipClass: custom-intro-tooltip, // 커스텀 스타일링을 위한 클래스
        nextLabel: 다음,
        prevLabel: 이전,
        skipLabel: 건너뛰기,
        doneLabel: 완료
    });

    intro.oncomplete(function() {
        console.log(온보딩 투어 완료!);
        // 투어 완료 시 서버에 기록하거나 로컬 스토리지에 저장
        // localStorage.setItem(onboarding_tour_completed, true);
    });

    intro.onexit(function() {
        console.log(온보딩 투어 종료 (건너뛰기 또는 닫기));
        // 투어 종료 시 로직 (예: 다시 보지 않기 옵션)
    });

    intro.start(initialStep);
};

// 필요한 시점에 호출
// 예: 페이지 로드 후, 특정 조건 만족 시
// startOnboardingTour();

# templates/project_list.html (Django 템플릿)

{% if user_projects %}
    <div class="project-list-container">
        <h2>내 프로젝트</h2>
        <ul>
            {% for project in user_projects %}
                <li>
                    <a href="{% url project_detail project.id %}">{{ project.name }}</a>
                    <p>{{ project.description }}</p>
                </li>
            {% endfor %}
        </ul>
        <button class="btn-primary" onclick="window.location.href={% url create_project %}">새 프로젝트 생성</button>
    </div>
{% else %}
    <div class="empty-state-container">
        <img src="/static/images/empty-projects.svg" alt="프로젝트 없음" class="empty-state-image"/>
        <h3>아직 생성된 프로젝트가 없습니다.</h3>
        <p>프로젝트를 생성하고 팀원들과 협업을 시작해보세요! 몇 분 안에 첫 프로젝트를 만들 수 있습니다.</p>
        <button class="btn-primary large" onclick="window.location.href={% url create_project %}">
            <i class="fas fa-plus-circle"></i> 첫 프로젝트 생성하기
        </button>
        <p class="empty-state-tip">💡 Tip: 템플릿을 활용하면 더 빠르게 시작할 수 있어요!</p>
    </div>
{% endif %}

# app.py (Flask 예시)
from flask import Flask, request, jsonify, session
import json

app = Flask(__name__)
app.secret_key = your_secret_key # 실제 앱에서는 안전한 키 사용

# 예시 데이터: 역할별 온보딩 콘텐츠
ONBOARDING_CONTENT_BY_ROLE = {
    developer: {
        title: 개발자를 위한 빠른 시작 가이드,
        steps: [
            {id: 101, text: API 연동하기, completed: False},
            {id: 102, text: SDK 설치 및 테스트, completed: False},
            {id: 103, text: Webhook 설정하기, completed: False},
        ],
        resources: [API 문서, 개발자 커뮤니티],
        cta: 첫 API 호출하기
    },
    marketing: {
        title: 마케터를 위한 캠페인 분석 시작하기,
        steps: [
            {id: 201, text: 첫 캠페인 생성하기, completed: False},
            {id: 202, text: 대시보드 이해하기, completed: False},
            {id: 203, text: 보고서 내보내기, completed: False},
        ],
        resources: [캠페인 가이드, 마케팅 성공 사례],
        cta: 새로운 캠페인 시작하기
    },
    manager: {
        title: 관리자를 위한 팀 관리 시작하기,
        steps: [
            {id: 301, text: 팀원 초대하기, completed: False},
            {id: 302, text: 권한 설정하기, completed: False},
            {id: 303, text: 청구서 확인하기, completed: False},
        ],
        resources: [관리자 매뉴얼, 엔터프라이즈 지원],
        cta: 팀원 초대하기
    }
}

@app.route(/api/onboarding/start, methods=[POST])
def start_onboarding():
    user_id = session.get(user_id) # 세션에서 사용자 ID 가져오기 (로그인 필수)
    if not user_id:
        return jsonify({message: Unauthorized}), 401

    data = request.json
    user_role = data.get(role) # 사용자가 선택한 역할 (예: developer, marketing)

    if user_role not in ONBOARDING_CONTENT_BY_ROLE:
        user_role = manager # 기본값 설정

    # 사용자별 온보딩 데이터 저장 (예: DB에 저장)
    # 여기서는 간단히 세션에 저장하는 것으로 대체
    session[onboarding_role] = user_role
    session[onboarding_steps] = ONBOARDING_CONTENT_BY_ROLE[user_role][steps]

    return jsonify({
        message: Onboarding started successfully,
        role: user_role,
        content: ONBOARDING_CONTENT_BY_ROLE[user_role]
    }), 200

@app.route(/api/onboarding/steps, methods=[GET])
def get_onboarding_steps():
    user_id = session.get(user_id)
    if not user_id:
        return jsonify({message: Unauthorized}), 401

    # 세션 또는 DB에서 해당 사용자의 온보딩 단계 정보 불러오기
    onboarding_steps = session.get(onboarding_steps, [])
    onboarding_role = session.get(onboarding_role, manager) # 기본값

    content = ONBOARDING_CONTENT_BY_ROLE.get(onboarding_role, ONBOARDING_CONTENT_BY_ROLE[manager])
    content[steps] = onboarding_steps # 실제 업데이트된 스텝으로 대체

    return jsonify(content), 200

@app.route(/api/onboarding/steps/<int:step_id>, methods=[PUT])
def update_onboarding_step(step_id):
    user_id = session.get(user_id)
    if not user_id:
        return jsonify({message: Unauthorized}), 401

    data = request.json
    completed = data.get(completed)

    onboarding_steps = session.get(onboarding_steps, [])
    found = False
    for step in onboarding_steps:
        if step[id] == step_id:
            step[completed] = completed
            found = True
            break
    
    if not found:
        return jsonify({message: Step not found}), 404

    session[onboarding_steps] = onboarding_steps # 세션 업데이트

    return jsonify({message: Step updated successfully, steps: onboarding_steps}), 200


if __name__ == __main__:
    app.run(debug=True)

// src/utils/analytics.js
// GA4 전역 객체가 로드된 후 사용해야 합니다.
// <script async src="https://www.googletagmanager.com/gtag/js?id=YOUR_GA_MEASUREMENT_ID"></script>
// <script>
//   window.dataLayer = window.dataLayer || [];
//   function gtag(){dataLayer.push(arguments);}
//   gtag(js, new Date());
//   gtag(config, YOUR_GA_MEASUREMENT_ID);
// </script>

export const trackOnboardingEvent = (eventName, params = {}) => {
    if (typeof window.gtag === function) {
        window.gtag(event, eventName, {
            ...params,
            event_category: Onboarding,
            // 사용자 ID 등 추가 정보 포함 가능
            // user_id: currentUser.id
        });
        console.log(`GA4 Event Tracked: ${eventName}`, params);
    } else {
        console.warn(gtag is not defined. Google Analytics may not be loaded.);
    }
};

// 사용 예시:
// OnboardingChecklist.jsx 파일에서 handleStepComplete 함수 내에 추가
// trackOnboardingEvent(onboarding_step_completed, { step_id: stepId, step_name: step.text });

// 빈 상태에서 첫 프로젝트 생성 버튼 클릭 시
// trackOnboardingEvent(empty_state_cta_clicked, { cta_target: create_project });

// 온보딩 투어 완료 시
// trackOnboardingEvent(onboarding_tour_completed);