<script setup lang="ts">
  import { Card, CardHeader, CardContent } from "@/components/ui/card";
  import { Button } from "@/components/ui/button";
  import { Input } from "@/components/ui/input";
  import { Label } from "@/components/ui/label";
  import { Info } from "lucide-vue-next"; // Icon library (like react-icons)
  import PageLayout from "../components/PageLayout.vue"; // Layout component (like a layout in Next.js)
  import { ref } from "vue"; // ref is like React's useState

  import { useAuthStore } from "@/stores/auth";
  import { useRouter } from "vue-router";

  const router = useRouter();
  const authStore = useAuthStore();

  // Form state
  const username = ref("");
  const password = ref("");
  const isLoading = ref(false);
  const errorMessage = ref("");
  const isRegistering = ref(false);
  const email = ref("");

  const login = async () => {
    if (!username.value || !password.value) {
      errorMessage.value = "Please enter both username and password";
      return;
    }

    isLoading.value = true;
    errorMessage.value = "";

    try {
      const success = await authStore.login(username.value, password.value);
      if (success) {
        router.push("/");
      } else {
        errorMessage.value = authStore.error || "Login failed";
      }
    } catch (err) {
      errorMessage.value = "An unexpected error occurred";
      console.error(err);
    } finally {
      isLoading.value = false;
    }
  };

  /**
   * Handle registration form submission
   */
  const register = async () => {
    if (!username.value || !password.value) {
      errorMessage.value = "Please enter both username and password";
      return;
    }

    isLoading.value = true;
    errorMessage.value = "";

    try {
      const success = await authStore.register(
        username.value,
        password.value,
        email.value,
      );
      if (success) {
        isRegistering.value = false;
        errorMessage.value = "Registration successful! You can now log in.";
      } else {
        errorMessage.value = authStore.error || "Registration failed";
      }
    } catch (err) {
      errorMessage.value = "An unexpected error occurred";
      console.error(err);
    } finally {
      isLoading.value = false;
    }
  };

  const toggleRegistration = () => {
    isRegistering.value = !isRegistering.value;
    errorMessage.value = "";
  };
</script>
<template>
  <PageLayout header="Login">
    <!-- Layout structure (similar to React) -->
    <div class="flex justify-center items-center h-full">
      <div class="w-full max-w-md">
        <!-- 
          Component composition works similarly to React
          These are shadcn components, equivalent to React's shadcn/ui 
        -->
        <Card>
          <CardHeader>
            <h2 class="text-lg font-semibold">
              {{ isRegistering ? "Create an Account" : "Account Login" }}
            </h2>
          </CardHeader>
          <CardContent>
            <!-- Show error message if any -->
            <div
              v-if="errorMessage"
              class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded mb-4 text-sm">
              {{ errorMessage }}
            </div>

            <form
              @submit.prevent="isRegistering ? register() : login()"
              method="post"
              class="space-y-4">
              <div class="space-y-2">
                <Label for="username" class="text-sm font-medium"
                  >Username</Label
                >
                <Input
                  type="text"
                  id="username"
                  v-model="username"
                  name="username"
                  required
                  :disabled="isLoading" />
              </div>

              <!-- Email field (only for registration) -->
              <div v-if="isRegistering" class="space-y-2">
                <Label for="email" class="text-sm font-medium">Email</Label>
                <Input
                  type="email"
                  id="email"
                  v-model="email"
                  name="email"
                  :disabled="isLoading" />
              </div>

              <div class="space-y-2">
                <Label for="password" class="text-sm font-medium"
                  >Password</Label
                >
                <Input
                  type="password"
                  id="password"
                  v-model="password"
                  name="password"
                  required
                  :disabled="isLoading" />
              </div>

              <div class="pt-2">
                <Button type="submit" class="w-full" :disabled="isLoading">
                  {{ isRegistering ? "Register" : "Login" }}
                </Button>
              </div>

              <div class="text-center mt-4 text-sm">
                <a @click="toggleRegistration" href="#" class="font-medium">
                  {{
                    isRegistering
                      ? "Already have an account? Login"
                      : "Need an account? Register"
                  }}
                </a>
              </div>
            </form>
          </CardContent>
        </Card>
      </div>
    </div>
  </PageLayout>
</template>
