'use client';
import Button from '@/components/button';
import Input from '@/components/input';
import { useRouter } from 'next/navigation';
import React, { useState } from 'react';
import Cookies from 'js-cookie';

export default function Page() {
  const router = useRouter();
  const [formData, setFormData] = useState({ username: '', password: '' });
  const [error, setError] = useState('');

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value,
    });
    setError('');
  };

  const handleOnSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();

    const { username, password } = formData;

    if (username === 'staff1' && password === 'st@ffP@ss') {
      Cookies.set('token', 'staff1');
      router.push('/staff');
    } else {
      setError('Usuario o contraseña incorrectos');
    }
  };

  return (
    <div className='d-flex flex-column justify-content-center align-items-center'>
      <h1 className='text-dorado'>Iniciar sesión</h1>
      <h2 className='text-azul'>Staff</h2>

      <form className='w-300px' onSubmit={handleOnSubmit}>
        <Input
          name='username'
          label='Usuario'
          value={formData.username}
          onChange={handleChange}
        />
        <Input
          name='password'
          type='password'
          label='Contraseña'
          value={formData.password}
          onChange={handleChange}
        />
        {error && <div className='alert alert-danger text-center' role='alert'>{error}</div>}
        <div className='mb-3'>
          <Button className='w-100' type='submit'>
            Iniciar sesión
          </Button>
        </div>
      </form>
    </div>
  );
}
