import React, { useState } from 'react';
import { useLanguage } from '../contexts/LanguageContext';

interface LoginProps {
  onLogin: (name: string, role: string, allowedMuseums: string, allowedChannels: string) => void;
}

function Login({ onLogin }: LoginProps) {
  const { t } = useLanguage();
  const [pin, setPin] = useState('');
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError('');
    setLoading(true);

    try {
      const res = await fetch('/auth/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        credentials: 'include',
        body: JSON.stringify({ pin }),
      });

      if (!res.ok) {
        setError(t('login.invalid'));
        setLoading(false);
        return;
      }

      const data = await res.json();
      onLogin(data.name || '', data.role || 'viewer', data.allowedMuseums ?? '[]', data.allowedChannels ?? '[]');
    } catch {
      setError(t('login.error'));
      setLoading(false);
    }
  };

  return (
    <div className="login-page">
      <div className="login-card">
        <div className="login-brand">
          <svg width="32" height="32" viewBox="0 0 24 24" fill="var(--accent)" aria-hidden="true">
            <rect x="3" y="3" width="7" height="7" rx="1"/>
            <rect x="14" y="3" width="7" height="4" rx="1"/>
            <rect x="3" y="14" width="7" height="7" rx="1"/>
            <rect x="14" y="11" width="7" height="10" rx="1"/>
          </svg>
          <h1>HiHala Data</h1>
        </div>
        <p className="login-subtitle">{t('login.subtitle')}</p>

        <form onSubmit={handleSubmit}>
          <label htmlFor="pin-input" className="sr-only">{t('login.placeholder')}</label>
          <input
            id="pin-input"
            type="password"
            inputMode="numeric"
            value={pin}
            onChange={e => setPin(e.target.value)}
            placeholder={t('login.placeholder')}
            autoFocus
            disabled={loading}
          />
          {error && <p className="login-error">{error}</p>}
          <button type="submit" disabled={loading || !pin}>
            {loading ? '...' : t('login.submit')}
          </button>
        </form>
      </div>
    </div>
  );
}

export default Login;