---
import { Icon } from "astro-icon/components";
import UserProfileSettings from "./SettingsSection/UserProfileSettings";
import AccountSecuritySettings from "./SettingsSection/AccountSecuritySettings";
import NotificationSettings from "./SettingsSection/NotificationSettings";
import DisplaySettings from "./SettingsSection/DisplaySettings";
import ResumeSettings from "./SettingsSection/ResumeSettings";
import ThemeToggle from "./universal/ThemeToggle";

// Import environment variables
const logtoAppId = import.meta.env.LOGTO_APP_ID;
const logtoAppSecret = import.meta.env.LOGTO_APP_SECRET;
const logtoEndpoint = import.meta.env.LOGTO_ENDPOINT;
const logtoTokenEndpoint = import.meta.env.LOGTO_TOKEN_ENDPOINT;
const logtoApiEndpoint = import.meta.env.LOGTO_API_ENDPOINT;

// Define fallback values if environment variables are not set
const safeLogtoAppId = logtoAppId || "missing_app_id";
const safeLogtoAppSecret = logtoAppSecret || "missing_app_secret";
const safeLogtoEndpoint = logtoEndpoint || "https://auth.ieeeucsd.org";
const safeLogtoTokenEndpoint =
    logtoTokenEndpoint || "https://auth.ieeeucsd.org/oidc/token";
const safeLogtoApiEndpoint = logtoApiEndpoint || "";
---

<div id="settings-section" class="">
    <div class="mb-6">
        <h2 class="text-2xl font-bold">Settings</h2>
        <p class="opacity-70">Manage your account settings and preferences</p>
    </div>

    <!-- Debug Environment Variables (Only visible in development) -->
    {
        import.meta.env.DEV && (
            <div class="card bg-card shadow-xl border border-warning mb-6 p-4">
                <h3 class="text-lg font-bold text-warning">
                    Debug Environment Variables
                </h3>
                <p class="text-sm mb-2">
                    This section is only visible in development mode
                </p>
                <div class="overflow-x-auto">
                    <table class="table-auto w-full text-xs">
                        <thead>
                            <tr>
                                <th>Variable</th>
                                <th>Value</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>LOGTO_APP_ID</td>
                                <td>{logtoAppId ? "********" : "Not set"}</td>
                                <td>{logtoAppId ? "✅" : "❌"}</td>
                            </tr>
                            <tr>
                                <td>LOGTO_APP_SECRET</td>
                                <td>
                                    {logtoAppSecret ? "********" : "Not set"}
                                </td>
                                <td>{logtoAppSecret ? "✅" : "❌"}</td>
                            </tr>
                            <tr>
                                <td>LOGTO_ENDPOINT</td>
                                <td>{logtoEndpoint || "Not set"}</td>
                                <td>{logtoEndpoint ? "✅" : "❌"}</td>
                            </tr>
                            <tr>
                                <td>LOGTO_TOKEN_ENDPOINT</td>
                                <td>{logtoTokenEndpoint || "Not set"}</td>
                                <td>{logtoTokenEndpoint ? "✅" : "❌"}</td>
                            </tr>
                            <tr>
                                <td>LOGTO_API_ENDPOINT</td>
                                <td>{logtoApiEndpoint || "Not set"}</td>
                                <td>{logtoApiEndpoint ? "✅" : "❌"}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        )
    }

    <!-- Profile Settings Card -->
    <div
        class="card bg-card shadow-xl border border-border hover:border-primary transition-all duration-300 hover:-translate-y-1 transform mb-6"
    >
        <div class="card-body">
            <h3 class="card-title flex items-center gap-3">
                <div
                    class="inline-flex items-center justify-center p-3 rounded-full bg-primary text-primary-foreground"
                >
                    <Icon name="heroicons:user" class="h-5 w-5" />
                </div>
                Profile Information
            </h3>
            <p class="text-sm opacity-70 mb-4">
                Update your personal information and profile details
            </p>
            <div class="h-px w-full bg-border my-4"></div>
            <UserProfileSettings
                client:load
                logtoApiEndpoint={logtoApiEndpoint}
            />
        </div>
    </div>

    <!-- Resume Settings Card -->
    <div
        id="resume-management-section"
        class="card bg-card shadow-xl border border-border hover:border-primary transition-all duration-300 hover:-translate-y-1 transform mb-6"
    >
        <div class="card-body">
            <h3 class="card-title flex items-center gap-3">
                <div
                    class="inline-flex items-center justify-center p-3 rounded-full bg-primary text-primary-foreground"
                >
                    <Icon name="heroicons:document-text" class="h-5 w-5" />
                </div>
                Resume Management
            </h3>
            <p class="text-sm opacity-70 mb-4">
                Upload and manage your resume for recruiters and career
                opportunities
            </p>
            <div class="h-px w-full bg-border my-4"></div>
            <ResumeSettings client:load />
        </div>
    </div>

    <!-- Account Security Settings Card -->
    <div
        class="card bg-card shadow-xl border border-border hover:border-primary transition-all duration-300 hover:-translate-y-1 transform mb-6"
    >
        <div class="card-body">
            <h3 class="card-title flex items-center gap-3">
                <div
                    class="inline-flex items-center justify-center p-3 rounded-full bg-primary text-primary-foreground"
                >
                    <Icon name="heroicons:lock-closed" class="h-5 w-5" />
                </div>
                Account Security
            </h3>
            <p class="text-sm opacity-70 mb-4">
                Manage your account security settings and authentication options
            </p>
            <div class="h-px w-full bg-border my-4"></div>
            <AccountSecuritySettings
                client:load
                logtoAppId={safeLogtoAppId}
                logtoAppSecret={safeLogtoAppSecret}
                logtoEndpoint={safeLogtoEndpoint}
                logtoTokenEndpoint={safeLogtoTokenEndpoint}
                logtoApiEndpoint={safeLogtoApiEndpoint}
            />
        </div>
    </div>

    <!-- Notification Settings Card -->
    <div
        class="card bg-card shadow-xl border border-border hover:border-primary transition-all duration-300 hover:-translate-y-1 transform mb-6 relative group"
    >
        <!-- Coming Soon Overlay -->
        <div
            class="absolute inset-0 bg-muted bg-opacity-90 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-10 rounded-xl"
        >
            <div class="text-center">
                <h4 class="text-xl font-bold">Coming Soon</h4>
                <p class="text-sm opacity-70">
                    Notification settings will be available in a future update
                </p>
            </div>
        </div>

        <div class="card-body">
            <h3 class="card-title flex items-center gap-3">
                <div
                    class="inline-flex items-center justify-center p-3 rounded-full bg-primary text-primary-foreground"
                >
                    <Icon name="heroicons:bell" class="h-5 w-5" />
                </div>
                Notification Preferences
            </h3>
            <p class="text-sm opacity-70 mb-4">
                Customize how and when you receive notifications
            </p>
            <div class="h-px w-full bg-border my-4"></div>
            <NotificationSettings client:load />
        </div>
    </div>

    <!-- Display Settings Card -->
    <div
        class="card bg-base-100 shadow-xl border border-base-200 hover:border-primary transition-all duration-300 hover:-translate-y-1 transform"
    >
        <div class="card-body">
            <h3 class="card-title flex items-center gap-3">
                <div class="badge badge-primary p-3">
                    <Icon name="heroicons:computer-desktop" class="h-5 w-5" />
                </div>
                Display Settings
            </h3>
            <p class="text-sm opacity-70 mb-4">
                Customize your dashboard appearance and display preferences
            </p>
            <div class="divider"></div>

            <div class="alert alert-warning mb-4">
                <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="stroke-current shrink-0 h-6 w-6"
                    fill="none"
                    viewBox="0 0 24 24"
                    ><path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
                    ></path></svg
                >
                <div>
                    <h3 class="font-bold">Light Mode Experimental</h3>
                    <p class="text-sm">
                        Light mode is still experimental and some UI elements
                        may not display correctly.
                    </p>
                </div>
            </div>

            <DisplaySettings client:load />
        </div>
    </div>
</div>