<template>
  <div class="mx-auto max-w-7xl space-y-6">
    <header class="flex flex-wrap items-center justify-between gap-3">
      <div>
        <h1 class="text-2xl font-semibold tracking-tight">Settings</h1>
        <p class="text-sm text-text-secondary">Manage profile, security, notifications, and workspace preferences.</p>
      </div>
      <button class="btn-primary">Save All Changes</button>
    </header>

    <section class="grid gap-4 lg:grid-cols-[240px_1fr]">
      <aside class="card p-3">
        <nav class="space-y-1">
          <button
            v-for="section in sections"
            :key="section.id"
            class="w-full rounded-xl px-3 py-2 text-left text-sm transition"
            :class="activeSection === section.id ? 'bg-brand-50 text-brand-700' : 'text-text-secondary hover:bg-brand-50/70 hover:text-text-primary'"
            @click="activeSection = section.id"
          >
            {{ section.label }}
          </button>
        </nav>
      </aside>

      <div class="space-y-4">
        <article v-show="activeSection === 'profile'" class="card space-y-5 p-5 sm:p-6 transition-all">
          <div class="flex items-center justify-between">
            <h2 class="text-lg font-semibold">Profile Settings</h2>
            <span class="chip">Public Info</span>
          </div>
          <div class="grid gap-4 sm:grid-cols-2">
            <div>
              <label class="mb-2 block text-xs uppercase tracking-wide text-text-secondary">Full Name</label>
              <input class="input" placeholder="Fikri Ahmad" />
            </div>
            <div>
              <label class="mb-2 block text-xs uppercase tracking-wide text-text-secondary">Work Email</label>
              <input class="input" placeholder="fikri@company.com" />
            </div>
            <div class="sm:col-span-2">
              <label class="mb-2 block text-xs uppercase tracking-wide text-text-secondary">Job Title</label>
              <input class="input" placeholder="Senior Backend Engineer" />
            </div>
          </div>
        </article>

        <article v-show="activeSection === 'security'" class="card space-y-5 p-5 sm:p-6 transition-all">
          <div class="flex items-center justify-between">
            <h2 class="text-lg font-semibold">Password & Security</h2>
            <span class="chip">Protected</span>
          </div>
          <div class="grid gap-4 sm:grid-cols-2">
            <div>
              <label class="mb-2 block text-xs uppercase tracking-wide text-text-secondary">Current Password</label>
              <input class="input" type="password" placeholder="••••••••" />
            </div>
            <div>
              <label class="mb-2 block text-xs uppercase tracking-wide text-text-secondary">New Password</label>
              <input class="input" type="password" placeholder="••••••••" />
            </div>
          </div>
          <div class="card-muted p-4">
            <p class="text-sm font-medium">Active Device Sessions</p>
            <div class="mt-3 space-y-2 text-sm">
              <div class="flex items-center justify-between rounded-lg border border-surface-border bg-white/70 px-3 py-2 dark:bg-slate-900/50">
                <span>Windows · Chrome · Jakarta</span>
                <span class="chip">Current</span>
              </div>
              <div class="flex items-center justify-between rounded-lg border border-surface-border bg-white/70 px-3 py-2 dark:bg-slate-900/50">
                <span>Android · Mobile App</span>
                <button class="text-xs text-brand-700">Revoke</button>
              </div>
            </div>
          </div>
        </article>

        <article v-show="activeSection === 'preferences'" class="card space-y-5 p-5 sm:p-6 transition-all">
          <h2 class="text-lg font-semibold">Preferences</h2>
          <div class="grid gap-4 sm:grid-cols-2">
            <div>
              <label class="mb-2 block text-xs uppercase tracking-wide text-text-secondary">Theme</label>
              <UiSelectField v-model="selectedTheme" :options="themeOptions" placeholder="Choose theme" />
            </div>
            <div>
              <label class="mb-2 block text-xs uppercase tracking-wide text-text-secondary">Language</label>
              <UiSelectField v-model="selectedLanguage" :options="languageOptions" placeholder="Choose language" />
            </div>
          </div>
          <div class="space-y-3">
            <label class="card-muted flex items-center justify-between p-3 text-sm">
              Report reminder notifications
              <span class="relative inline-flex h-6 w-11 items-center rounded-full bg-brand-500">
                <span class="absolute right-1 h-4 w-4 rounded-full bg-white transition"></span>
              </span>
            </label>
            <label class="card-muted flex items-center justify-between p-3 text-sm">
              Mention and comment alerts
              <span class="relative inline-flex h-6 w-11 items-center rounded-full bg-brand-500">
                <span class="absolute right-1 h-4 w-4 rounded-full bg-white transition"></span>
              </span>
            </label>
            <label class="card-muted flex items-center justify-between p-3 text-sm">
              Weekly summary email
              <span class="relative inline-flex h-6 w-11 items-center rounded-full bg-slate-300 dark:bg-slate-700">
                <span class="absolute left-1 h-4 w-4 rounded-full bg-white transition"></span>
              </span>
            </label>
          </div>
        </article>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
const sections = [
  { id: "profile", label: "Profile" },
  { id: "security", label: "Security" },
  { id: "preferences", label: "Preferences" }
];

const activeSection = ref("profile");
const selectedTheme = ref("light");
const selectedLanguage = ref("en");

const themeOptions = [
  { label: "Light mode", value: "light" },
  { label: "Dark mode", value: "dark" }
];

const languageOptions = [
  { label: "English", value: "en" },
  { label: "Bahasa Indonesia", value: "id" }
];
</script>
