<div class="max-w-7xl mx-auto px-4 py-8">
  <h1 class="text-2xl font-bold mb-8">Account Settings</h1>

  <%= if @flash["info"] do %>
    <.flash kind="info" title="Success!">
      <%= @flash["info"] %>
    </.flash>
  <% end %>

  <%= if @flash["error"] do %>
    <.flash kind="error" title="Error!">
      <%= @flash["error"] %>
    </.flash>
  <% end %>

  <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
    <!-- Left Column -->
    <div class="space-y-8">
      <!-- Profile Settings -->
      <div class="bg-white shadow rounded-lg p-6">
        <h2 class="text-lg font-semibold mb-4">Profile Information</h2>
        <form phx-submit="update_profile" phx-change="validate" class="space-y-4">
          <.form_group
            name="user[email]"
            label="Email"
            type="email"
            value={@current_user.email}
            required
          />
          <.form_group
            name="user[name]"
            label="Name"
            value={@current_user.name}
            required
          />
          <.button type="submit" class="w-full">
            Update Profile
          </.button>
        </form>
      </div>

      <!-- Password Settings -->
      <div class="bg-white shadow rounded-lg p-6">
        <h2 class="text-lg font-semibold mb-4">Change Password</h2>
        <form phx-submit="update_password" class="space-y-4">
          <.form_group
            name="current_password"
            label="Current Password"
            type="password"
            required
          />
          <.form_group
            name="user[password]"
            label="New Password"
            type="password"
            required
          />
          <.form_group
            name="user[password_confirmation]"
            label="Confirm New Password"
            type="password"
            required
          />
          <.button type="submit" class="w-full">
            Update Password
          </.button>
        </form>
      </div>

      <!-- Theme Settings -->
      <div class="bg-white shadow rounded-lg p-6">
        <h2 class="text-lg font-semibold mb-4">Theme Settings</h2>
        <div class="space-y-4">
          <div class="flex items-center justify-between">
            <span class="text-sm text-gray-600">Dark Mode</span>
            <button phx-click="toggle_theme" class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 bg-gray-200">
              <span class="translate-x-0 pointer-events-none relative inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out">
                <span class="opacity-100 duration-200 ease-in absolute inset-0 flex h-full w-full items-center justify-center transition-opacity">
                  <svg class="h-3 w-3 text-gray-400" fill="none" viewBox="0 0 12 12">
                    <path d="M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                  </svg>
                </span>
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- Right Column -->
    <div class="space-y-8">
      <!-- Terminal Preferences -->
      <div class="bg-white shadow rounded-lg p-6">
        <h2 class="text-lg font-semibold mb-4">Terminal Preferences</h2>
        <form phx-submit="update_preferences" class="space-y-4">
          <div class="grid grid-cols-2 gap-4">
            <.form_group
              name="font_size"
              label="Font Size"
              type="number"
              value={@preferences["terminal"]["font_size"]}
              min="8"
              max="32"
            />
            <.form_group
              name="font_family"
              label="Font Family"
              value={@preferences["terminal"]["font_family"]}
            />
          </div>
          <div class="grid grid-cols-2 gap-4">
            <.form_group
              name="line_height"
              label="Line Height"
              type="number"
              value={@preferences["terminal"]["line_height"]}
              step="0.1"
              min="1"
              max="2"
            />
            <.form_group
              name="scrollback_size"
              label="Scrollback Size"
              type="number"
              value={@preferences["terminal"]["scrollback_size"]}
              min="1000"
              max="100000"
            />
          </div>
          <div class="grid grid-cols-2 gap-4">
            <.form_group
              name="cursor_style"
              label="Cursor Style"
              value={@preferences["terminal"]["cursor_style"]}
            />
          </div>
          <.button type="submit" class="w-full">
            Update Terminal Preferences
          </.button>
        </form>
      </div>

      <!-- Editor Preferences -->
      <div class="bg-white shadow rounded-lg p-6">
        <h2 class="text-lg font-semibold mb-4">Editor Preferences</h2>
        <form phx-submit="update_preferences" class="space-y-4">
          <div class="grid grid-cols-2 gap-4">
            <.form_group
              name="tab_size"
              label="Tab Size"
              type="number"
              value={@preferences["editor"]["tab_size"]}
              min="2"
              max="8"
            />
          </div>
          <div class="space-y-2">
            <div class="flex items-center">
              <input
                type="checkbox"
                name="insert_spaces"
                value="true"
                checked={@preferences["editor"]["insert_spaces"]}
                class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 rounded"
              />
              <label class="ml-2 block text-sm text-gray-900">
                Insert Spaces Instead of Tabs
              </label>
            </div>
            <div class="flex items-center">
              <input
                type="checkbox"
                name="word_wrap"
                value="true"
                checked={@preferences["editor"]["word_wrap"]}
                class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 rounded"
              />
              <label class="ml-2 block text-sm text-gray-900">
                Enable Word Wrap
              </label>
            </div>
            <div class="flex items-center">
              <input
                type="checkbox"
                name="line_numbers"
                value="true"
                checked={@preferences["editor"]["line_numbers"]}
                class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 rounded"
              />
              <label class="ml-2 block text-sm text-gray-900">
                Show Line Numbers
              </label>
            </div>
          </div>
          <.button type="submit" class="w-full">
            Update Editor Preferences
          </.button>
        </form>
      </div>

      <!-- Update Settings -->
      <div class="bg-white shadow rounded-lg p-6">
        <h2 class="text-lg font-semibold mb-4">Update Settings</h2>
        <div class="space-y-4">
          <div class="flex items-center justify-between">
            <span class="text-sm text-gray-600">Auto-check for Updates</span>
            <button
              phx-click="update_auto_check"
              phx-value-enabled={!@update_settings["auto_check"]}
              class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 bg-gray-200"
            >
              <span class={[
                "pointer-events-none relative inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out",
                @update_settings["auto_check"] && "translate-x-5"
              ]}>
                <span class={[
                  "absolute inset-0 flex h-full w-full items-center justify-center transition-opacity",
                  @update_settings["auto_check"] && "opacity-0 duration-100 ease-out",
                  !@update_settings["auto_check"] && "opacity-100 duration-200 ease-in"
                ]}>
                  <svg class="h-3 w-3 text-gray-400" fill="none" viewBox="0 0 12 12">
                    <path d="M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                  </svg>
                </span>
                <span class={[
                  "absolute inset-0 flex h-full w-full items-center justify-center transition-opacity",
                  @update_settings["auto_check"] && "opacity-100 duration-200 ease-in",
                  !@update_settings["auto_check"] && "opacity-0 duration-100 ease-out"
                ]}>
                  <svg class="h-3 w-3 text-primary-600" fill="currentColor" viewBox="0 0 12 12">
                    <path d="M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z" />
                  </svg>
                </span>
              </span>
            </button>
          </div>
        </div>
      </div>

      <!-- Cloud Settings -->
      <div class="bg-white shadow rounded-lg p-6">
        <h2 class="text-lg font-semibold mb-4">Cloud Settings</h2>
        <form phx-submit="update_cloud_config" class="space-y-4">
          <div class="space-y-2">
            <div class="flex items-center">
              <input
                type="checkbox"
                name="auto_sync"
                value="true"
                checked={@cloud_config["auto_sync"]}
                class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 rounded"
              />
              <label class="ml-2 block text-sm text-gray-900">
                Enable Auto-sync
              </label>
            </div>
            <.form_group
              name="sync_interval"
              label="Sync Interval (minutes)"
              type="number"
              value={@cloud_config["sync_interval"]}
              min="1"
              max="1440"
            />
            <div class="flex items-center">
              <input
                type="checkbox"
                name="notifications"
                value="true"
                checked={@cloud_config["notifications"]}
                class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 rounded"
              />
              <label class="ml-2 block text-sm text-gray-900">
                Enable Notifications
              </label>
            </div>
            <div class="flex items-center">
              <input
                type="checkbox"
                name="error_reporting"
                value="true"
                checked={@cloud_config["error_reporting"]}
                class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 rounded"
              />
              <label class="ml-2 block text-sm text-gray-900">
                Enable Error Reporting
              </label>
            </div>
          </div>
          <.button type="submit" class="w-full">
            Update Cloud Settings
          </.button>
        </form>
      </div>
    </div>
  </div>
</div>
