'use client';

import React, { useState } from 'react';
import { authenticate } from '../admin/actions';
import './login.css';

export default function LoginPage() {
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);

  async function handleSubmit(formData: FormData) {
    setLoading(true);
    setError(null);
    const result = await authenticate(formData);
    if (result?.error) {
      setError(result.error);
      setLoading(false);
    }
  }

  return (
    <div className="login-page">
      <div className="login-card">
        <div className="login-header">
          <h1>LUNA <span>ADMIN</span></h1>
          <p>Yönetim paneline giriş yapın</p>
        </div>
        
        <form action={handleSubmit} className="login-form">
          {error && <div className="login-error">{error}</div>}
          
          <div className="form-group">
            <label htmlFor="username">Kullanıcı Adı</label>
            <input 
              type="text" 
              id="username" 
              name="username" 
              className="admin-input" 
              required 
            />
          </div>
          
          <div className="form-group">
            <label htmlFor="password">Şifre</label>
            <input 
              type="password" 
              id="password" 
              name="password" 
              className="admin-input" 
              required 
            />
          </div>
          
          <button type="submit" className="admin-btn login-btn" disabled={loading}>
            {loading ? 'Giriş yapılıyor...' : 'Giriş Yap'}
          </button>
        </form>
        
        <div className="login-footer">
          <a href="/" className="back-to-site">← Siteye Dön</a>
        </div>
      </div>
    </div>
  );
}