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

interface ProfileProps {
  navigateTo: (screen: Screen) => void;
  language: Language;
  setLanguage: (lang: Language) => void;
  onLogout: () => void;
  onUpdatePassword: (userId: string, newPass: string) => void;
  user: UserProfile | null;
}

const Profile: React.FC<ProfileProps> = ({ navigateTo, language, setLanguage, onLogout, onUpdatePassword, user }) => {
  const [showPasswordModal, setShowPasswordModal] = useState(false);
  const [currentPass, setCurrentPass] = useState('');
  const [newPass, setNewPass] = useState('');
  const [confirmPass, setConfirmPass] = useState('');
  const [modalError, setModalError] = useState('');
  const [modalSuccess, setModalSuccess] = useState(false);

  const t = translations[language].profile;
  const isAdmin = user?.roleType === 'admin';

  const userDisplayName = user?.fullName || 'Professional';
  const userEmail = user?.email || 'user@careportal.nl';
  const userBigNumber = user?.bigNumber || '12345678901';
  const userRole = user?.role || t.nurse;

  const getInitials = (name: string) => {
    if (!name) return '??';
    const parts = name.trim().split(/\s+/);
    if (parts.length === 1) return parts[0].substring(0, 2).toUpperCase();
    return (parts[0][0] + (parts[parts.length - 1]?.[0] || '')).toUpperCase();
  };

  const initials = getInitials(userDisplayName);

  const handlePasswordChange = () => {
    setModalError('');
    if (currentPass !== user?.password) {
      setModalError(t.passwordInvalid);
      return;
    }
    if (newPass.length < 6) {
      setModalError(t.passwordShort);
      return;
    }
    if (newPass !== confirmPass) {
      setModalError(t.passwordMismatch);
      return;
    }

    if (user) {
      onUpdatePassword(user.id, newPass);
      setModalSuccess(true);
      setTimeout(() => {
        setShowPasswordModal(false);
        setModalSuccess(false);
        setCurrentPass('');
        setNewPass('');
        setConfirmPass('');
      }, 2000);
    }
  };

  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 flex items-center gap-3">
        <div className="flex items-center justify-between w-full">
          <button onClick={() => navigateTo('dashboard')} 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.title}</h1>
          <div className="w-10"></div>
        </div>
      </header>

      <main className="px-4 py-6 space-y-6 pb-32">
        <section className="bg-surface-light dark:bg-surface-dark p-6 rounded-3xl shadow-sm border border-slate-300 dark:border-slate-800 flex flex-col items-center text-center">
          <div className="w-24 h-24 rounded-full overflow-hidden border-4 border-primary/20 mb-4 shadow-lg bg-slate-100 dark:bg-slate-700 flex items-center justify-center">
            <span className="text-3xl font-black text-primary/50 uppercase">
              {initials}
            </span>
          </div>
          <h2 className="text-xl font-bold text-slate-900 dark:text-white">{userDisplayName}</h2>
          <p className="text-sm font-medium text-primary bg-primary/10 px-3 py-1 rounded-full mt-1">
            {userRole}
          </p>
        </section>

        {isAdmin && (
          <section className="space-y-3">
            <h3 className="text-xs font-bold text-slate-500 uppercase tracking-widest px-1">Management</h3>
            <div className="bg-surface-light dark:bg-surface-dark rounded-2xl shadow-sm border border-slate-300 dark:border-slate-800 overflow-hidden">
               <button 
                  onClick={() => navigateTo('admin-settings')}
                  className="w-full flex justify-between items-center p-4 text-slate-700 dark:text-slate-200 active:bg-slate-50 dark:active:bg-slate-700/50 transition-colors"
                >
                  <div className="flex items-center gap-3">
                    <span className="material-icons text-primary">business_center</span>
                    <span className="text-sm font-bold">{t.companySettings}</span>
                  </div>
                  <span className="material-icons text-slate-400">chevron_right</span>
                </button>
            </div>
          </section>
        )}

        <section className="space-y-3">
          <h3 className="text-xs font-bold text-slate-500 uppercase tracking-widest px-1">{t.personalInfo}</h3>
          <div className="bg-surface-light dark:bg-surface-dark rounded-2xl shadow-sm border border-slate-200 dark:border-slate-800 overflow-hidden">
            <div className="flex justify-between items-center p-4 border-b border-slate-200 dark:border-slate-800">
              <span className="text-sm text-slate-500">{t.name}</span>
              <span className="text-sm font-semibold">{userDisplayName}</span>
            </div>
            <div className="flex justify-between items-center p-4 border-b border-slate-200 dark:border-slate-800">
              <span className="text-sm text-slate-500">{t.bigNumber}</span>
              <span className="text-sm font-semibold">{userBigNumber}</span>
            </div>
            <div className="flex justify-between items-center p-4">
              <span className="text-sm text-slate-500">{t.email}</span>
              <span className="text-sm font-semibold">{userEmail}</span>
            </div>
          </div>
        </section>

        <section className="space-y-3">
          <h3 className="text-xs font-bold text-slate-500 uppercase tracking-widest px-1">{t.settings}</h3>
          <div className="bg-surface-light dark:bg-surface-dark rounded-2xl shadow-sm border border-slate-200 dark:border-slate-800 overflow-hidden">
            <div className="flex justify-between items-center p-4 border-b border-slate-200 dark:border-slate-800">
              <div className="flex items-center gap-3">
                <span className="material-icons text-primary/70">notifications_none</span>
                <span className="text-sm font-medium">{t.notifications}</span>
              </div>
              <div className="w-10 h-6 bg-primary rounded-full relative flex items-center px-1">
                <div className="w-4 h-4 bg-white rounded-full translate-x-4"></div>
              </div>
            </div>
            <div className="flex justify-between items-center p-4 border-b border-slate-200 dark:border-slate-800">
              <div className="flex items-center gap-3">
                <span className="material-icons text-primary/70">translate</span>
                <span className="text-sm font-medium">{t.language}</span>
              </div>
              <div className="flex gap-2">
                <button 
                  onClick={() => setLanguage('nl')}
                  className={`text-xs font-bold px-2 py-1 rounded ${language === 'nl' ? 'bg-primary text-white' : 'text-slate-400'}`}
                >
                  NL
                </button>
                <button 
                  onClick={() => setLanguage('en')}
                  className={`text-xs font-bold px-2 py-1 rounded ${language === 'en' ? 'bg-primary text-white' : 'text-slate-400'}`}
                >
                  EN
                </button>
              </div>
            </div>
            <button 
              onClick={() => setShowPasswordModal(true)}
              className="w-full flex justify-between items-center p-4 border-b border-slate-200 dark:border-slate-800 text-slate-700 dark:text-slate-200 active:bg-slate-50 dark:active:bg-slate-700/50 transition-colors"
            >
              <div className="flex items-center gap-3">
                <span className="material-icons text-primary/70">lock_outline</span>
                <span className="text-sm font-medium">{t.changePassword}</span>
              </div>
              <span className="material-icons text-slate-400">chevron_right</span>
            </button>
            <button 
              onClick={onLogout}
              className="w-full flex items-center gap-3 p-4 text-red-500 active:bg-red-50 dark:active:bg-red-900/10 transition-colors"
            >
              <span className="material-icons">logout</span>
              <span className="text-sm font-bold">{t.logout}</span>
            </button>
          </div>
        </section>
      </main>

      {/* Password Change Modal */}
      {showPasswordModal && (
        <div className="fixed inset-0 z-[100] flex items-end md:items-center justify-center bg-black/50 backdrop-blur-sm animate-in fade-in duration-300">
          <div className="w-full max-w-lg bg-white dark:bg-slate-900 md:rounded-3xl rounded-t-3xl shadow-2xl overflow-hidden animate-in slide-in-from-bottom-2 duration-300">
            <div className="p-6 border-b border-slate-100 dark:border-slate-800 flex justify-between items-center">
              <h2 className="text-lg font-bold">{t.changePassword}</h2>
              <button onClick={() => setShowPasswordModal(false)} className="text-slate-400 hover:text-slate-600">
                <span className="material-icons">close</span>
              </button>
            </div>
            <div className="p-6 space-y-4">
              {modalError && (
                <div className="bg-red-50 text-red-600 p-3 rounded-xl text-xs font-bold flex items-center gap-2">
                  <span className="material-icons text-sm">error</span>
                  {modalError}
                </div>
              )}
              {modalSuccess && (
                <div className="bg-green-50 text-green-600 p-3 rounded-xl text-xs font-bold flex items-center gap-2">
                  <span className="material-icons text-sm">check_circle</span>
                  {t.passwordChanged}
                </div>
              )}
              <div className="space-y-1">
                <label className="text-xs font-bold text-slate-400 uppercase tracking-widest px-1">{t.currentPassword}</label>
                <input 
                  type="password"
                  value={currentPass}
                  onChange={e => setCurrentPass(e.target.value)}
                  className="w-full bg-slate-50 dark:bg-slate-800 border-none rounded-xl py-3 px-4 focus:ring-2 focus:ring-primary outline-none transition-all"
                />
              </div>
              <div className="space-y-1">
                <label className="text-xs font-bold text-slate-400 uppercase tracking-widest px-1">{t.newPassword}</label>
                <input 
                  type="password"
                  value={newPass}
                  onChange={e => setNewPass(e.target.value)}
                  className="w-full bg-slate-50 dark:bg-slate-800 border-none rounded-xl py-3 px-4 focus:ring-2 focus:ring-primary outline-none transition-all"
                />
              </div>
              <div className="space-y-1">
                <label className="text-xs font-bold text-slate-400 uppercase tracking-widest px-1">{t.confirmNewPassword}</label>
                <input 
                  type="password"
                  value={confirmPass}
                  onChange={e => setConfirmPass(e.target.value)}
                  className="w-full bg-slate-50 dark:bg-slate-800 border-none rounded-xl py-3 px-4 focus:ring-2 focus:ring-primary outline-none transition-all"
                />
              </div>
              <button 
                onClick={handlePasswordChange}
                disabled={modalSuccess || !currentPass || !newPass || !confirmPass}
                className="w-full bg-primary text-white py-4 rounded-2xl font-bold shadow-lg shadow-primary/20 active:scale-[0.98] transition-all disabled:opacity-50 mt-4"
              >
                {translations[language].common.save}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default Profile;
