import React, { useState } from 'react';
import { Screen, UserProfile, RoleType } from '../types';
import { Language, translations } from '../i18n';

interface AddStaffProps {
  navigateTo: (screen: Screen) => void;
  language: Language;
  onAdd: (user: Omit<UserProfile, 'id' | 'status'>) => void;
}

const AddStaff: React.FC<AddStaffProps> = ({ navigateTo, language, onAdd }) => {
  const [fullName, setFullName] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [bigNumber, setBigNumber] = useState('');
  const [role, setRole] = useState('');
  const [roleType, setRoleType] = useState<RoleType>('staff');
  const [error, setError] = useState('');
  
  const t = translations[language].staff;
  const tc = translations[language].common;

  const handleSave = () => {
    if (!fullName.trim() || !email.trim() || !password.trim() || !bigNumber.trim() || !role.trim()) {
      setError(language === 'nl' ? 'Vul alle verplichte velden in.' : 'Please fill in all required fields.');
      return;
    }
    setError('');
    onAdd({ 
      fullName, 
      email, 
      password,
      bigNumber, 
      role,
      roleType
    });
  };

  return (
    <div className="bg-background-light dark:bg-background-dark min-h-[100dvh] text-slate-900 dark:text-white">
      <header className="sticky top-0 z-50 bg-background-light/90 dark:bg-background-dark/90 backdrop-blur-md border-b border-slate-300 dark:border-slate-800 px-4 safe-area-pt pb-4">
        <div className="flex items-center justify-between">
          <button onClick={() => navigateTo('staff')} className="p-2 -ml-2 text-primary active:scale-95 transition-transform">
            <span className="material-icons">arrow_back</span>
          </button>
          <h1 className="text-xl font-bold tracking-tight">{t.addMember}</h1>
          <div className="w-10"></div>
        </div>
      </header>

      <main className="px-4 py-8 space-y-6 max-w-md mx-auto">
        {error && (
          <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-600 dark:text-red-400 p-3 rounded-xl text-sm flex items-center gap-2 animate-in fade-in slide-in-from-top-1">
            <span className="material-icons text-sm">error</span>
            {error}
          </div>
        )}

        <div className="space-y-4">
          <div className="space-y-1.5">
            <label className="text-xs font-bold uppercase tracking-widest text-slate-500 px-1">{t.fullName}</label>
            <input 
              value={fullName}
              onChange={(e) => setFullName(e.target.value)}
              className="w-full bg-surface-light dark:bg-surface-dark border border-slate-300 dark:border-slate-700 rounded-xl py-3.5 px-4 shadow-sm focus:ring-2 focus:ring-primary focus:outline-none text-slate-900 dark:text-white transition-all"
              placeholder="e.g. Maria Jansen"
              type="text"
            />
          </div>

          <div className="space-y-1.5">
            <label className="text-xs font-bold uppercase tracking-widest text-slate-500 px-1">{t.email}</label>
            <input 
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              className="w-full bg-surface-light dark:bg-surface-dark border border-slate-300 dark:border-slate-700 rounded-xl py-3.5 px-4 shadow-sm focus:ring-2 focus:ring-primary focus:outline-none text-slate-900 dark:text-white transition-all"
              placeholder="maria@careportal.nl"
              type="email"
            />
          </div>

          <div className="space-y-1.5">
            <label className="text-xs font-bold uppercase tracking-widest text-slate-500 px-1">{t.password}</label>
            <input 
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              className="w-full bg-surface-light dark:bg-surface-dark border border-slate-300 dark:border-slate-700 rounded-xl py-3.5 px-4 shadow-sm focus:ring-2 focus:ring-primary focus:outline-none text-slate-900 dark:text-white transition-all"
              placeholder="••••••••"
              type="password"
            />
          </div>

          <div className="space-y-1.5">
            <label className="text-xs font-bold uppercase tracking-widest text-slate-500 px-1">{t.bigNumber}</label>
            <input 
              value={bigNumber}
              onChange={(e) => setBigNumber(e.target.value)}
              className="w-full bg-surface-light dark:bg-surface-dark border border-slate-300 dark:border-slate-700 rounded-xl py-3.5 px-4 shadow-sm focus:ring-2 focus:ring-primary focus:outline-none text-slate-900 dark:text-white transition-all"
              placeholder="12345678901"
              type="text"
            />
          </div>

          <div className="space-y-1.5">
            <label className="text-xs font-bold uppercase tracking-widest text-slate-500 px-1">{t.role}</label>
            <input 
              value={role}
              onChange={(e) => setRole(e.target.value)}
              className="w-full bg-surface-light dark:bg-surface-dark border border-slate-300 dark:border-slate-700 rounded-xl py-3.5 px-4 shadow-sm focus:ring-2 focus:ring-primary focus:outline-none text-slate-900 dark:text-white transition-all"
              placeholder={language === 'nl' ? 'bijv. Sociaal Werker' : 'e.g. Social Worker'}
              type="text"
            />
          </div>

          <div className="space-y-1.5">
            <label className="text-xs font-bold uppercase tracking-widest text-slate-500 px-1">{language === 'nl' ? 'Toegangsrol' : 'Access Level'}</label>
            <div className="grid grid-cols-2 gap-2">
              <button 
                onClick={() => setRoleType('staff')}
                className={`py-3 rounded-xl text-xs font-bold border transition-all ${
                  roleType === 'staff' 
                    ? 'bg-primary border-primary text-white' 
                    : 'bg-surface-light dark:bg-surface-dark border-slate-300 dark:border-slate-700 text-slate-500'
                }`}
              >
                {t.staff}
              </button>
              <button 
                onClick={() => setRoleType('admin')}
                className={`py-3 rounded-xl text-xs font-bold border transition-all ${
                  roleType === 'admin' 
                    ? 'bg-primary border-primary text-white' 
                    : 'bg-surface-light dark:bg-surface-dark border-slate-300 dark:border-slate-700 text-slate-500'
                }`}
              >
                {t.admin}
              </button>
            </div>
          </div>
        </div>

        <button 
          onClick={handleSave}
          className="w-full bg-primary text-white font-black py-4 rounded-2xl shadow-xl shadow-primary/20 active:scale-95 transition-all mt-8"
        >
          {tc.save}
        </button>
      </main>
    </div>
  );
};

export default AddStaff;
