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

interface StaffProps {
  navigateTo: (screen: Screen) => void;
  language: Language;
  user: UserProfile | null;
  allUsers: UserProfile[];
  onApprove: (userId: string) => void;
  onReject: (userId: string) => void;
}

const StaffManagement: React.FC<StaffProps> = ({ navigateTo, language, user, allUsers, onApprove, onReject }) => {
  const t = translations[language].staff;
  const common = translations[language].common;
  const isAdmin = user?.roleType === 'admin';
  const [confirmDeleteId, setConfirmDeleteId] = useState<string | null>(null);
  
  // Real users from the global registry
  const pendingUsers = allUsers.filter(u => u.status === 'pending');
  const activeUsers = allUsers.filter(u => u.status === 'active');

  const handleDeleteStaff = (userId: string) => {
    onReject(userId); // Reusing onReject as it removes the user from the global state
    setConfirmDeleteId(null);
  };

  return (
    <div className="bg-background-light dark:bg-background-dark min-h-[100dvh]">
      <header className="sticky top-0 z-50 bg-background-light/90 dark:bg-background-dark/90 backdrop-blur-md px-4 safe-area-pt pb-4 border-b border-slate-300 dark:border-slate-800 flex items-center justify-between">
        <div className="flex items-center gap-3">
          <button 
            onClick={() => navigateTo('dashboard')}
            className="w-10 h-10 flex items-center justify-center text-primary active:scale-90 transition-transform"
          >
            <span className="material-icons">arrow_back</span>
          </button>
          <h1 className="text-xl font-bold tracking-tight">{t.title}</h1>
        </div>
        {isAdmin && (
          <button 
            onClick={() => navigateTo('add-staff')}
            className="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center shadow-lg active:scale-90 transition-transform"
          >
            <span className="material-icons">person_add</span>
          </button>
        )}
      </header>
      
      <main className="px-4 py-6 space-y-8 pb-32">
        {/* Pending Approvals Section (Admin Only) */}
        {isAdmin && pendingUsers.length > 0 && (
          <section className="space-y-4">
            <h2 className="text-xs font-black uppercase tracking-widest text-red-500 px-1 flex items-center gap-2">
              <span className="material-icons text-sm">notification_important</span>
              {t.pendingTitle}
            </h2>
            <div className="space-y-3">
              {pendingUsers.map(pUser => (
                <div key={pUser.id} className="bg-surface-light dark:bg-surface-dark p-4 rounded-2xl shadow-sm border border-slate-300 dark:border-slate-800 flex flex-col gap-3 animate-in fade-in slide-in-from-top-2">
                  <div className="flex items-center gap-3">
                    <div className="w-12 h-12 rounded-full bg-slate-100 dark:bg-slate-700 flex items-center justify-center text-slate-400">
                      <span className="material-icons">person_outline</span>
                    </div>
                    <div className="flex-grow">
                      <h3 className="font-bold text-slate-900 dark:text-white">{pUser.fullName}</h3>
                      <p className="text-[10px] text-slate-400">BIG: {pUser.bigNumber} • {pUser.email}</p>
                    </div>
                  </div>
                  <div className="flex gap-2">
                    <button 
                      onClick={() => onApprove(pUser.id)}
                      className="flex-1 bg-primary text-white py-2.5 rounded-xl font-bold text-xs flex items-center justify-center gap-1 active:scale-95 transition-transform"
                    >
                      <span className="material-icons text-sm">check_circle</span>
                      {common.approve}
                    </button>
                    <button 
                      onClick={() => onReject(pUser.id)}
                      className="flex-1 bg-slate-100 dark:bg-slate-700 text-slate-500 py-2.5 rounded-xl font-bold text-xs flex items-center justify-center gap-1 active:scale-95 transition-transform"
                    >
                      <span className="material-icons text-sm">cancel</span>
                      {common.reject}
                    </button>
                  </div>
                </div>
              ))}
            </div>
          </section>
        )}

        {/* Active Team List */}
        <section className="space-y-4">
          <h2 className="text-xs font-black uppercase tracking-widest text-slate-400 px-1">
            {language === 'nl' ? 'Actief Team' : 'Active Team'}
          </h2>
          <div className="space-y-4">
            {activeUsers.map(aUser => (
              <div key={aUser.id} className="bg-surface-light dark:bg-surface-dark p-4 rounded-2xl shadow-sm border border-slate-300 dark:border-slate-800 flex items-center gap-4 transition-all hover:border-primary/20 relative group">
                <div className="relative shrink-0">
                  <div className="w-16 h-16 rounded-2xl bg-primary/10 flex items-center justify-center text-primary font-bold text-xl">
                    {aUser.fullName[0]}
                  </div>
                  <div className={`absolute -bottom-1 -right-1 w-4 h-4 rounded-full border-2 border-white dark:border-slate-800 bg-green-500`}></div>
                </div>
                <div className="flex-grow min-w-0">
                  <div className="flex justify-between items-start">
                    <h3 className="font-bold truncate text-slate-900 dark:text-white">{aUser.fullName}</h3>
                    <div className="flex items-center gap-2">
                      <span className={`text-[9px] font-black uppercase px-2 py-0.5 rounded-full bg-green-100 text-green-600`}>
                        {t.active}
                      </span>
                      {isAdmin && aUser.id !== user?.id && (
                        <button 
                          onClick={() => setConfirmDeleteId(aUser.id)}
                          className="p-1 text-slate-300 hover:text-red-500 transition-colors active:scale-90"
                          title={t.removeMember}
                        >
                          <span className="material-icons text-lg">person_remove</span>
                        </button>
                      )}
                    </div>
                  </div>
                  <p className="text-xs text-slate-500 font-medium mb-2">{aUser.role || aUser.roleType}</p>
                  <div className="flex gap-6">
                    <div>
                      <p className="text-[9px] text-slate-400 uppercase font-black tracking-widest">{t.workload}</p>
                      <p className="text-sm font-black text-slate-800 dark:text-slate-200">
                        {aUser.id === user?.id ? '4' : '0'}
                      </p>
                    </div>
                    <div>
                      <p className="text-[9px] text-slate-400 uppercase font-black tracking-widest">{t.hoursThisWeek}</p>
                      <p className="text-sm font-black text-primary">
                        {aUser.id === user?.id ? '18' : '0'}h
                      </p>
                    </div>
                  </div>
                </div>

                {/* Inline Confirmation for Resignation/Deletion */}
                {confirmDeleteId === aUser.id && (
                  <div className="absolute inset-0 bg-white/95 dark:bg-slate-900/95 rounded-2xl flex flex-col items-center justify-center p-4 z-10 animate-in fade-in zoom-in-95 duration-200">
                    <p className="text-[10px] font-bold text-red-500 uppercase mb-3 text-center px-4">
                      {t.confirmRemove}
                    </p>
                    <div className="flex gap-4 w-full px-8">
                      <button 
                        onClick={() => handleDeleteStaff(aUser.id)}
                        className="flex-1 bg-red-500 text-white text-xs font-bold py-2 rounded-xl active:scale-95 transition-transform"
                      >
                        {common.confirm}
                      </button>
                      <button 
                        onClick={() => setConfirmDeleteId(null)}
                        className="flex-1 bg-slate-100 dark:bg-slate-800 text-slate-500 text-xs font-bold py-2 rounded-xl active:scale-95 transition-transform"
                      >
                        {common.cancel}
                      </button>
                    </div>
                  </div>
                )}
              </div>
            ))}
          </div>
        </section>
      </main>
    </div>
  );
};

export default StaffManagement;
