"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
    var ownKeys = function(o) {
        ownKeys = Object.getOwnPropertyNames || function (o) {
            var ar = [];
            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
            return ar;
        };
        return ownKeys(o);
    };
    return function (mod) {
        if (mod && mod.__esModule) return mod;
        var result = {};
        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
        __setModuleDefault(result, mod);
        return result;
    };
})();
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importStar(require("react"));
const head_1 = __importDefault(require("next/head"));
const link_1 = __importDefault(require("next/link"));
const config_1 = require("../config");
// Inline styles object with proper React CSSProperties type
const styles = {
    container: {
        minHeight: '100vh',
        padding: '0 0.5rem',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        maxWidth: '1200px',
        margin: '0 auto',
    },
    main: {
        padding: '5rem 0',
        flex: 1,
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        width: '100%',
    },
    title: {
        margin: 0,
        lineHeight: 1.15,
        fontSize: '4rem',
        textAlign: 'center',
    },
    description: {
        lineHeight: 1.5,
        fontSize: '1.5rem',
        margin: '1rem 0',
        textAlign: 'center',
    },
    apiStatus: {
        margin: '2rem 0',
        fontSize: '1.2rem',
    },
    loading: {
        color: '#f0ad4e',
    },
    online: {
        color: '#5cb85c',
        fontWeight: 'bold',
    },
    offline: {
        color: '#d9534f',
        fontWeight: 'bold',
    },
    grid: {
        display: 'flex',
        alignItems: 'stretch',
        justifyContent: 'center',
        flexWrap: 'wrap',
        width: '100%',
        marginTop: '3rem',
    },
    card: {
        margin: '1rem',
        flexBasis: '30%',
        padding: '1.5rem',
        color: 'inherit',
        textDecoration: 'none',
        border: '1px solid #eaeaea',
        borderRadius: '10px',
        transition: 'color 0.15s ease, border-color 0.15s ease',
        minHeight: '250px',
    },
    cardFeatured: {
        margin: '1rem',
        flexBasis: '100%',
        padding: '1.5rem',
        color: 'inherit',
        textDecoration: 'none',
        border: '2px solid #0070f3',
        borderRadius: '10px',
        transition: 'color 0.15s ease, border-color 0.15s ease',
        minHeight: '250px',
        backgroundColor: '#f5f9ff',
    },
    cardTitle: {
        margin: '0 0 1rem 0',
        fontSize: '1.5rem',
    },
    cardContent: {
        margin: '0 0 1.5rem 0',
        fontSize: '1.25rem',
        lineHeight: 1.5,
    },
    subjectsList: {
        paddingLeft: '1.5rem',
    },
    subjectsListItem: {
        marginBottom: '0.5rem',
        textTransform: 'capitalize',
    },
    button: {
        backgroundColor: '#0070f3',
        color: 'white',
        border: 'none',
        borderRadius: '5px',
        padding: '0.75rem 1.5rem',
        fontSize: '1rem',
        cursor: 'pointer',
        transition: 'background-color 0.15s ease',
    },
    buttonDisabled: {
        backgroundColor: '#cccccc',
        color: 'white',
        border: 'none',
        borderRadius: '5px',
        padding: '0.75rem 1.5rem',
        fontSize: '1rem',
        cursor: 'not-allowed',
    },
};
const Home = () => {
    const [apiStatus, setApiStatus] = (0, react_1.useState)('loading');
    const [subjects, setSubjects] = (0, react_1.useState)([
        'mathematics',
        'science',
        'history',
        'language_arts',
        'computer_science',
        'art',
        'music'
    ]);
    (0, react_1.useEffect)(() => {
        // Check if the API is online
        const checkApiStatus = async () => {
            try {
                // Try to fetch educational contents to see if the API is running
                const response = await fetch((0, config_1.getApiUrl)('/api/educational-contents'));
                if (response.ok) {
                    setApiStatus('online');
                }
                else {
                    setApiStatus('offline');
                }
            }
            catch (error) {
                setApiStatus('offline');
                console.error('Error checking API status:', error);
            }
        };
        checkApiStatus();
    }, []);
    // Get status style based on current API status
    const getStatusStyle = () => {
        if (apiStatus === 'loading')
            return styles.loading;
        if (apiStatus === 'online')
            return styles.online;
        return styles.offline;
    };
    // Get button style based on disabled state
    const getButtonStyle = (disabled) => {
        return disabled ? styles.buttonDisabled : styles.button;
    };
    return (<div style={styles.container}>
      <head_1.default>
        <title>Education Module</title>
        <meta name="description" content="AI-powered educational platform"/>
        <link rel="icon" href="/favicon.ico"/>
      </head_1.default>

      <main style={styles.main}>
        <h1 style={styles.title}>
          Welcome to the Education Module
        </h1>

        <p style={styles.description}>
          An AI-powered educational platform
        </p>

        <div style={styles.apiStatus}>
          API Status: {' '}
          {apiStatus === 'loading' ? (<span style={styles.loading}>Checking...</span>) : apiStatus === 'online' ? (<span style={styles.online}>Online</span>) : (<span style={styles.offline}>Offline - Make sure to run the backend with 'pnpm run backend'</span>)}
        </div>

        <div style={styles.grid}>
          <div style={styles.card}>
            <h2 style={styles.cardTitle}>Educational Content</h2>
            <p style={styles.cardContent}>Explore educational content in various subjects:</p>
            <ul style={styles.subjectsList}>
              {subjects.map((subject) => (<li key={subject} style={styles.subjectsListItem}>{subject.replace('_', ' ')}</li>))}
            </ul>
          </div>

          <div style={styles.card}>
            <h2 style={styles.cardTitle}>Learning Sessions</h2>
            <p style={styles.cardContent}>Start an interactive learning session with our AI tutor!</p>
            <button style={getButtonStyle(apiStatus !== 'online')} disabled={apiStatus !== 'online'}>
              Start Session
            </button>
          </div>

          <div style={styles.card}>
            <h2 style={styles.cardTitle}>User Profile</h2>
            <p style={styles.cardContent}>Create and manage your learning profile.</p>
            <button style={getButtonStyle(apiStatus !== 'online')} disabled={apiStatus !== 'online'}>
              Manage Profile
            </button>
          </div>
          
          <div style={styles.card}>
            <h2 style={styles.cardTitle}>AI Quiz Generator</h2>
            <p style={styles.cardContent}>Test your knowledge with AI-generated quizzes on any topic of your choice.</p>
            <link_1.default href="/quiz">
              <button style={getButtonStyle(apiStatus !== 'online')} disabled={apiStatus !== 'online'}>
                Generate Quiz
              </button>
            </link_1.default>
          </div>
          
          <div style={styles.card}>
            <h2 style={styles.cardTitle}>Ask Educational Questions</h2>
            <p style={styles.cardContent}>Get answers to your educational questions with detailed explanations from our AI tutor.</p>
            <link_1.default href="/questions">
              <button style={getButtonStyle(apiStatus !== 'online')} disabled={apiStatus !== 'online'}>
                Ask Questions
              </button>
            </link_1.default>
          </div>
          
          <div style={styles.cardFeatured}>
            <h2 style={styles.cardTitle}>AI Learning Path Generator</h2>
            <p style={styles.cardContent}>Get a personalized learning path for any topic, complete with resources and step-by-step guidance.</p>
            <link_1.default href="/learning-path">
              <button style={getButtonStyle(apiStatus !== 'online')} disabled={apiStatus !== 'online'}>
                Generate Learning Path
              </button>
            </link_1.default>
          </div>
        </div>
      </main>
    </div>);
};
exports.default = Home;