import React, { useState } from 'react';
import Button from './Button';
import Logo from './Logo';
import { APP_NAME } from '../constants';

interface AdminLoginPageProps {
  onLoginSuccess: () => void;
}

// SHA-256 hash of "IZI348ax@" is 8b1f38e07289947545ea88540871147573199ce071804100412e0b5f590d7c71
const STORED_HASH = '8b1f38e07289947545ea88540871147573199ce071804100412e0b5f590d7c71';

async function sha256(message: string): Promise<string> {
  const msgBuffer = new TextEncoder().encode(message);
  const hashBuffer = await crypto.subtle.digest('SHA-256', msgBuffer);
  const hashArray = Array.from(new Uint8Array(hashBuffer));
  const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
  return hashHex;
}

const AdminLoginPage: React.FC<AdminLoginPageProps> = ({ onLoginSuccess }) => {
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');
  const [isLoading, setIsLoading] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsLoading(true);
    setError('');
    const inputHash = await sha256(password);
    if (inputHash === STORED_HASH) {
      onLoginSuccess();
    } else {
      setError('Неверный пароль. Пожалуйста, попробуйте снова.');
    }
    setIsLoading(false);
    setPassword('');
  };

  return (
    <div className="min-h-screen flex flex-col items-center justify-center bg-white p-4">
      <div className="w-full max-w-md">
        <div className="text-center mb-8">
          <Logo width={120} height={90} className="mx-auto" />
          <h1 className="mt-6 text-3xl font-quicksand font-bold text-slate-800">
            Админ-панель {APP_NAME}
          </h1>
          <p className="mt-2 text-sm text-slate-600">
            Редактирование констант приложения
          </p>
        </div>
        <form onSubmit={handleSubmit} className="bg-white rounded-xl p-8 space-y-6">
          <div>
            <label htmlFor="password" className="block text-sm font-medium text-slate-700 font-quicksand">
              Пароль
            </label>
            <input
              type="password"
              id="password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              required
              className="mt-1 block w-full px-3 py-2 bg-white border border-slate-300 rounded-md placeholder-slate-400 focus:outline-none focus:ring-slate-500 focus:border-slate-500 sm:text-sm text-slate-900"
              placeholder="Введите ваш пароль"
            />
          </div>
          {error && <p className="text-xs text-red-600">{error}</p>}
          <Button
            type="submit"
            variant="primary"
            size="lg"
            className="w-full"
            disabled={isLoading}
          >
            {isLoading ? 'Вход...' : 'Войти'}
          </Button>
        </form>
         <p className="mt-8 text-center text-xs text-slate-500">
          Только для авторизованного персонала. Все действия могут отслеживаться.
        </p>
      </div>
    </div>
  );
};

export default AdminLoginPage;