import React, { useState } from 'react';

export default function FirstTimeSetup({ onComplete }) {
  const [form, setForm] = useState({ email: 'admin@arpm.com', password: '', confirm: '' });
  const [error, setError] = useState('');

  const set = (k, v) => { setForm(f => ({ ...f, [k]: v })); setError(''); };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!form.email) { setError('Ingresa un correo electrónico.'); return; }
    if (form.password.length < 8) { setError('La contraseña debe tener al menos 8 caracteres.'); return; }
    if (form.password !== form.confirm) { setError('Las contraseñas no coinciden.'); return; }

    const settings = JSON.parse(localStorage.getItem('arpm_settings') || '{}');
    settings.adminEmail    = form.email;
    settings.adminPassword = form.password;
    localStorage.setItem('arpm_settings', JSON.stringify(settings));
    localStorage.setItem('arpm_initialized', '1');
    onComplete({ email: form.email, password: form.password });
  };

  return (
    <div className="min-h-screen flex items-center justify-center bg-surface-900 px-4">
      <div className="w-full max-w-md">
        <div className="text-center mb-8">
          <div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-primary-500 mb-4">
            <span className="text-white text-2xl font-bold">AR</span>
          </div>
          <h1 className="text-2xl font-bold text-white">Bienvenido a AR Project Management</h1>
          <p className="text-gray-400 mt-1 text-sm">Configura tu cuenta de administrador antes de continuar</p>
        </div>

        <div className="bg-surface-800 rounded-2xl p-8 border border-surface-700 shadow-2xl">
          <div className="flex items-center gap-3 mb-6 p-3 rounded-xl bg-blue-500/10 border border-blue-500/20">
            <svg className="w-5 h-5 text-blue-400 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
              <path strokeLinecap="round" strokeLinejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
            <p className="text-xs text-blue-300">Este paso solo se realiza una vez. Establece las credenciales con las que accederás al sistema.</p>
          </div>

          {error && (
            <div className="mb-4 p-3 rounded-lg bg-red-500/10 border border-red-500/30 text-red-400 text-sm">
              {error}
            </div>
          )}

          <form onSubmit={handleSubmit} className="space-y-4">
            <div>
              <label className="block text-sm font-medium text-gray-300 mb-1.5">Correo de administrador</label>
              <input type="email" required value={form.email}
                onChange={e => set('email', e.target.value)}
                className="w-full px-4 py-2.5 bg-surface-700 border border-surface-600 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-500 transition"
                placeholder="admin@tuempresa.com"/>
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-300 mb-1.5">Nueva contraseña</label>
              <input type="password" required value={form.password}
                onChange={e => set('password', e.target.value)}
                className="w-full px-4 py-2.5 bg-surface-700 border border-surface-600 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-500 transition"
                placeholder="Mínimo 8 caracteres"/>
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-300 mb-1.5">Confirmar contraseña</label>
              <input type="password" required value={form.confirm}
                onChange={e => set('confirm', e.target.value)}
                className="w-full px-4 py-2.5 bg-surface-700 border border-surface-600 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-500 transition"
                placeholder="••••••••"/>
            </div>

            <button type="submit"
              className="w-full py-2.5 px-4 bg-primary-500 hover:bg-primary-600 text-white font-medium rounded-lg transition focus:outline-none focus:ring-2 focus:ring-primary-500 mt-2">
              Configurar y continuar
            </button>
          </form>
        </div>
      </div>
    </div>
  );
}
