<template>
  <div class="signin-container">
    <div class="logo-container">
      <img
        src="@/assets/logo.png"
        alt="Логотип"
        class="logo"
      >
      <h1 class="title">WorldCinema</h1>
    </div>

    <form @submit.prevent="handleSignIn" class="signin-form">
      <input
        type="email"
        v-model="email"
        placeholder="E-mail"
        required
        class="input"
      >
      <input
        type="password"
        v-model="password"
        placeholder="Пароль"
        required
        class="input"
      >
      <button type="submit" class="signin-button">Войти</button>
      <router-link to="/signup" class="signup-link">Регистрация</router-link>
    </form>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { authAPI } from '@/services/api'

const router = useRouter()
const email = ref('')
const password = ref('')

const handleSignIn = async () => {
  try {
    const response = await authAPI.login(email.value.toLowerCase(), password.value)

    if (response && response.token) {
      localStorage.setItem('token', response.token)
      const userData = {
        name: email.value.split('@')[0],
        email: email.value
      }
      localStorage.setItem('userData', JSON.stringify(userData))
      router.push('/')
    }
  } catch (error) {
    console.error('Ошибка входа:', error)
    alert(error.message)
  }
}
</script>

<style scoped>
.signin-container {
  background-color: #000;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  color: white;
}

.logo-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 48px;
}

.logo {
  width: 100px;
  height: 100px;
  margin-bottom: 16px;
}

.title {
  color: #EF3A01;
  font-size: 24px;
  font-weight: bold;
}

.signin-form {
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.input {
  width: 100%;
  padding: 16px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: transparent;
  color: white;
  font-size: 16px;
}

.input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.signin-button {
  width: 100%;
  padding: 16px;
  background: #2c74a4;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
}

.signup-link {
  width: 100%;
  padding: 16px;
  text-align: center;
  color: #2c74a4;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  font-size: 16px;
}
</style>
