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

interface ClientListProps {
  navigateTo: (screen: Screen, clientId?: string) => void;
  language: Language;
  clients: Client[];
  onDeleteClient: (id: string) => void;
  user: UserProfile | null;
}

const ClientList: React.FC<ClientListProps> = ({ navigateTo, language, clients, onDeleteClient, user }) => {
  const t = translations[language].clients;
  const common = translations[language].common;
  const ts = translations[language].statuses;
  const [deletingId, setDeletingId] = useState<string | null>(null);
  const [accessDeniedId, setAccessDeniedId] = useState<string | null>(null);

  const initiateDelete = (e: React.MouseEvent, id: string) => {
    e.stopPropagation();
    
    // ROLE CHECK: Active resistance for staff members
    if (user?.roleType !== 'admin') {
      setAccessDeniedId(id);
      // Auto-clear feedback after 3 seconds
      setTimeout(() => setAccessDeniedId(null), 3000);
      return;
    }

    setDeletingId(id);
  };

  const cancelDelete = (e: React.MouseEvent) => {
    e.stopPropagation();
    setDeletingId(null);
  };

  const confirmDelete = (e: React.MouseEvent, id: string) => {
    e.stopPropagation();
    onDeleteClient(id);
    setDeletingId(null);
  };

  return (
    <div className="bg-background-light dark:bg-background-dark min-h-[100dvh]">
      <header className="sticky top-0 z-40 bg-background-light/90 dark:bg-background-dark/90 backdrop-blur-md safe-area-pt pb-4 px-4 border-b border-slate-300 dark:border-slate-800">
        <div className="flex justify-between items-end mb-4 pt-4">
          <h1 className="text-3xl font-bold tracking-tight">{t.title}</h1>
          <div className="flex items-center gap-2">
            <button 
              onClick={() => navigateTo('add-client')}
              aria-label="Add new client"
              className="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center shadow-md active:scale-90 transition-transform"
            >
              <span className="material-icons text-xl">person_add_alt</span>
            </button>
          </div>
        </div>
        <div className="relative group">
          <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
            <span className="material-icons text-slate-400 text-lg">search</span>
          </div>
          <input 
            className="block w-full pl-10 pr-10 py-2.5 bg-primary/5 dark:bg-white/5 border-none focus:ring-2 focus:ring-primary rounded-xl text-sm placeholder-slate-400 dark:placeholder-slate-500 outline-none" 
            placeholder={t.search} 
            type="text" 
          />
        </div>
      </header>

      <main className="px-4 py-6 space-y-4 pb-32">
        {clients.length > 0 ? (
          clients.map((client) => (
            <div 
              key={client.id}
              onClick={() => navigateTo('client-detail', client.id)}
              className={`bg-surface-light dark:bg-surface-dark rounded-xl p-4 shadow-sm border transition-all ${
                deletingId === client.id 
                  ? 'border-red-500 ring-1 ring-red-500' 
                  : accessDeniedId === client.id 
                    ? 'border-red-300 dark:border-red-900 bg-red-50 dark:bg-red-900/10' 
                    : 'border-slate-300 dark:border-slate-800 active:scale-[0.98]'
              } flex items-center gap-4 cursor-pointer relative overflow-hidden`}
            >
              <div className="relative flex-shrink-0">
                <div className="w-14 h-14 rounded-full bg-slate-100 dark:bg-slate-700 flex items-center justify-center border-2 border-primary/10 text-primary/40">
                  <span className="material-icons text-3xl">account_circle</span>
                </div>
              </div>
              <div className="flex-grow min-w-0">
                <div className="flex justify-between items-start">
                  <h3 className="font-semibold text-lg truncate">{client.name}</h3>
                  {accessDeniedId === client.id ? (
                    <span className="text-[9px] font-black uppercase text-red-600 dark:text-red-400 animate-bounce">
                      {common.permissionDenied}
                    </span>
                  ) : (
                    <span className={`text-[10px] font-bold uppercase tracking-wider px-2 py-0.5 rounded-full border bg-primary/10 text-primary`}>
                      {ts[client.status] || client.status}
                    </span>
                  )}
                </div>
                <p className="text-slate-500 dark:text-slate-400 text-sm">{client.age} yrs • {client.birthDate}</p>
                <div className="flex items-center gap-1 mt-1 text-slate-400 dark:text-slate-500 text-xs">
                  <span className="material-icons text-[14px]">event</span>
                  <span>{t.lastVisit}: {client.lastVisit}</span>
                </div>
              </div>
              
              <div className="flex flex-col items-center gap-2 relative z-10">
                {deletingId === client.id ? (
                  <div className="flex flex-col gap-2">
                    <button 
                      onClick={(e) => confirmDelete(e, client.id)}
                      className="bg-red-500 text-white p-2 rounded-lg shadow-sm active:scale-90"
                    >
                      <span className="material-icons text-xl">check</span>
                    </button>
                    <button 
                      onClick={cancelDelete}
                      className="bg-slate-100 dark:bg-slate-700 text-slate-500 p-2 rounded-lg"
                    >
                      <span className="material-icons text-xl">close</span>
                    </button>
                  </div>
                ) : (
                  <>
                    <button 
                      onClick={(e) => initiateDelete(e, client.id)}
                      className={`p-2 transition-colors ${accessDeniedId === client.id ? 'text-red-600' : 'text-slate-300 hover:text-red-500'}`}
                    >
                      <span className="material-icons text-xl">
                        {accessDeniedId === client.id ? 'gpp_bad' : 'delete_outline'}
                      </span>
                    </button>
                    <span className="material-icons text-slate-300">chevron_right</span>
                  </>
                )}
              </div>
            </div>
          ))
        ) : (
          <div className="text-center py-20">
            <span className="material-icons text-5xl text-slate-200">folder_off</span>
            <p className="text-slate-400 mt-2">{language === 'nl' ? 'Geen cliënten gevonden' : 'No clients found'}</p>
          </div>
        )}
      </main>
    </div>
  );
};

export default ClientList;
