'use client'

import { useState } from 'react'
import { useRouter } from 'next/navigation'

export default function AdminLoginPage() {
    const [password, setPassword] = useState('')
    const [error, setError] = useState('')
    const router = useRouter()

    const handleLogin = async () => {
        const res = await fetch('/api/admin-login', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ password }),
        })

        if (res.ok) {
            router.push('/admin')
        } else {
            const data = await res.json()
            setError(data.error || 'Ошибка авторизации')
        }
    }

    return (
        <div className="min-vh-100 d-flex justify-content-center align-items-center bg-black text-light px-3">
            <div className="card bg-dark text-white shadow-lg border-0" style={{ width: '100%', maxWidth: 400 }}>
                <div className="card-body p-4">
                    <h3 className="card-title text-center mb-4">Админ-панель</h3>

                    <div className="form-group mb-3">
                        <label htmlFor="password" className="form-label">
                            Пароль
                        </label>
                        <input
                            type="password"
                            className="form-control bg-secondary border-0 text-white"
                            id="password"
                            value={password}
                            onChange={(e) => setPassword(e.target.value)}
                            placeholder="Введите пароль"
                        />
                    </div>

                    {error && <div className="alert alert-danger py-2">{error}</div>}

                    <button className="btn btn-primary w-100 mt-2" onClick={handleLogin}>
                        Войти
                    </button>
                </div>
            </div>
        </div>
    )
}
