<script setup lang="ts">
import { ref, computed } from "vue";
import { useRouter } from "vue-router";
import { TransitionRoot } from "@headlessui/vue";
import api from "@/api/client";
import { markSetupComplete } from "@/router";

const router = useRouter();

const step = ref(1);
const totalSteps = 4;

// Step 2: Admin account
const username = ref("");
const password = ref("");
const confirmPassword = ref("");

// Step 3: Basic config
const listenPort = ref(8100);
const enableHttps = ref(false);

const error = ref("");
const loading = ref(false);

const passwordMismatch = computed(
  () => confirmPassword.value.length > 0 && password.value !== confirmPassword.value,
);

const canProceedStep2 = computed(
  () =>
    username.value.length >= 3 &&
    password.value.length >= 8 &&
    password.value === confirmPassword.value,
);

function nextStep() {
  error.value = "";
  step.value = Math.min(step.value + 1, totalSteps);
}

function prevStep() {
  error.value = "";
  step.value = Math.max(step.value - 1, 1);
}

async function completeSetup() {
  error.value = "";
  loading.value = true;
  try {
    await api.post("/setup/init", {
      username: username.value,
      password: password.value,
    });
    markSetupComplete();
    step.value = totalSteps;
  } catch {
    error.value = "Setup failed. Please try again.";
  } finally {
    loading.value = false;
  }
}

function goToLogin() {
  router.push("/login");
}
</script>

<template>
  <div class="flex min-h-screen items-center justify-center bg-gray-50">
    <div class="w-full max-w-lg rounded-xl bg-white p-8 shadow-sm ring-1 ring-gray-200">
      <!-- Progress bar -->
      <div class="mb-6 flex gap-2">
        <div
          v-for="i in totalSteps"
          :key="i"
          class="h-1.5 flex-1 rounded-full transition-colors"
          :class="i <= step ? 'bg-blue-600' : 'bg-gray-200'"
        />
      </div>

      <!-- Step 1: Welcome -->
      <TransitionRoot
        :show="step === 1"
        enter="transition-opacity duration-200"
        enter-from="opacity-0"
        enter-to="opacity-100"
        leave="transition-opacity duration-150"
        leave-from="opacity-100"
        leave-to="opacity-0"
      >
        <div>
          <h1 class="text-2xl font-semibold text-gray-900">Welcome to CookieBridge</h1>
          <p class="mt-3 text-sm leading-relaxed text-gray-600">
            CookieBridge synchronizes your browser cookies across devices with end-to-end encryption.
            Login once on any device, and stay logged in everywhere.
          </p>
          <ul class="mt-4 space-y-2 text-sm text-gray-600">
            <li class="flex gap-2">
              <span class="text-green-500">&#10003;</span>
              End-to-end encrypted — the server never sees your data
            </li>
            <li class="flex gap-2">
              <span class="text-green-500">&#10003;</span>
              Multi-browser support (Chrome, Firefox, Edge, Safari)
            </li>
            <li class="flex gap-2">
              <span class="text-green-500">&#10003;</span>
              AI agent integration via Agent Skill API
            </li>
          </ul>
          <button
            class="mt-6 w-full rounded-lg bg-blue-600 px-4 py-2.5 text-sm font-medium text-white hover:bg-blue-700"
            @click="nextStep"
          >
            Get Started
          </button>
        </div>
      </TransitionRoot>

      <!-- Step 2: Admin account -->
      <TransitionRoot
        :show="step === 2"
        enter="transition-opacity duration-200"
        enter-from="opacity-0"
        enter-to="opacity-100"
        leave="transition-opacity duration-150"
        leave-from="opacity-100"
        leave-to="opacity-0"
      >
        <div>
          <h2 class="text-xl font-semibold text-gray-900">Create Admin Account</h2>
          <p class="mt-1 text-sm text-gray-500">Set up your administrator credentials</p>

          <form class="mt-5 space-y-4" @submit.prevent="nextStep">
            <div>
              <label class="block text-sm font-medium text-gray-700" for="setup-username">
                Username
              </label>
              <input
                id="setup-username"
                v-model="username"
                type="text"
                required
                minlength="3"
                autocomplete="username"
                class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
                placeholder="admin"
              />
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700" for="setup-password">
                Password
              </label>
              <input
                id="setup-password"
                v-model="password"
                type="password"
                required
                minlength="8"
                autocomplete="new-password"
                class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
                placeholder="At least 8 characters"
              />
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700" for="setup-confirm">
                Confirm Password
              </label>
              <input
                id="setup-confirm"
                v-model="confirmPassword"
                type="password"
                required
                autocomplete="new-password"
                class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
                :class="passwordMismatch ? 'border-red-300 focus:border-red-500 focus:ring-red-500' : ''"
              />
              <p v-if="passwordMismatch" class="mt-1 text-xs text-red-600">
                Passwords do not match
              </p>
            </div>

            <div class="flex gap-3 pt-2">
              <button
                type="button"
                class="flex-1 rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
                @click="prevStep"
              >
                Back
              </button>
              <button
                type="submit"
                :disabled="!canProceedStep2"
                class="flex-1 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 disabled:opacity-50"
              >
                Next
              </button>
            </div>
          </form>
        </div>
      </TransitionRoot>

      <!-- Step 3: Basic config -->
      <TransitionRoot
        :show="step === 3"
        enter="transition-opacity duration-200"
        enter-from="opacity-0"
        enter-to="opacity-100"
        leave="transition-opacity duration-150"
        leave-from="opacity-100"
        leave-to="opacity-0"
      >
        <div>
          <h2 class="text-xl font-semibold text-gray-900">Basic Configuration</h2>
          <p class="mt-1 text-sm text-gray-500">Configure your relay server</p>

          <div class="mt-5 space-y-4">
            <div>
              <label class="block text-sm font-medium text-gray-700" for="setup-port">
                Listen Port
              </label>
              <input
                id="setup-port"
                v-model.number="listenPort"
                type="number"
                min="1"
                max="65535"
                class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
              />
              <p class="mt-1 text-xs text-gray-500">Default: 8100</p>
            </div>

            <div class="flex items-center justify-between rounded-lg border border-gray-200 px-4 py-3">
              <div>
                <p class="text-sm font-medium text-gray-700">Enable HTTPS</p>
                <p class="text-xs text-gray-500">Recommended for production use</p>
              </div>
              <button
                type="button"
                class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors"
                :class="enableHttps ? 'bg-blue-600' : 'bg-gray-200'"
                @click="enableHttps = !enableHttps"
              >
                <span
                  class="inline-block h-4 w-4 rounded-full bg-white transition-transform"
                  :class="enableHttps ? 'translate-x-6' : 'translate-x-1'"
                />
              </button>
            </div>

            <p v-if="error" class="text-sm text-red-600">{{ error }}</p>

            <div class="flex gap-3 pt-2">
              <button
                type="button"
                class="flex-1 rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
                @click="prevStep"
              >
                Back
              </button>
              <button
                :disabled="loading"
                class="flex-1 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 disabled:opacity-50"
                @click="completeSetup"
              >
                {{ loading ? "Setting up..." : "Complete Setup" }}
              </button>
            </div>
          </div>
        </div>
      </TransitionRoot>

      <!-- Step 4: Done -->
      <TransitionRoot
        :show="step === 4"
        enter="transition-opacity duration-200"
        enter-from="opacity-0"
        enter-to="opacity-100"
        leave="transition-opacity duration-150"
        leave-from="opacity-100"
        leave-to="opacity-0"
      >
        <div class="text-center">
          <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
            <span class="text-2xl text-green-600">&#10003;</span>
          </div>
          <h2 class="mt-4 text-xl font-semibold text-gray-900">Setup Complete!</h2>
          <p class="mt-2 text-sm text-gray-500">
            Your CookieBridge server is ready. Sign in with your admin credentials.
          </p>
          <button
            class="mt-6 w-full rounded-lg bg-blue-600 px-4 py-2.5 text-sm font-medium text-white hover:bg-blue-700"
            @click="goToLogin"
          >
            Go to Login
          </button>
        </div>
      </TransitionRoot>
    </div>
  </div>
</template>
