const { useState, useEffect, useCallback, useMemo, useRef } = React;

// ─── TOAST NOTIFICATION SYSTEM ─────────────────────────────────────────────
// Globalna funkcja — działa w każdym komponencie bez prop-drillingu
function showToast(message, type = 'info', duration = 3500) {
  window.dispatchEvent(new CustomEvent('mtpro-toast', {
    detail: { message, type, id: Date.now() + Math.random(), duration }
  }));
}

function ToastItem({ id, message, type, onRemove }) {
  const [exiting, setExiting] = useState(false);
  const icons = { success: '✅', error: '❌', warning: '⚠️', info: 'ℹ️' };

  const dismiss = () => {
    setExiting(true);
    setTimeout(() => onRemove(id), 260);
  };

  useEffect(() => {
    const timer = setTimeout(dismiss, 3500);
    return () => clearTimeout(timer);
  }, []);

  return (
    <div
      className={`toast toast-${type}${exiting ? ' toast-exit' : ''}`}
      onClick={dismiss}
      style={{ cursor: 'pointer' }}
    >
      <span className="toast-icon">{icons[type] || icons.info}</span>
      <span style={{ flex: 1 }}>{message}</span>
    </div>
  );
}

function ToastContainer() {
  const [toasts, setToasts] = useState([]);

  useEffect(() => {
    const handler = (e) => {
      setToasts(prev => [...prev.slice(-4), e.detail]);
    };
    window.addEventListener('mtpro-toast', handler);
    return () => window.removeEventListener('mtpro-toast', handler);
  }, []);

  const removeToast = (id) => setToasts(prev => prev.filter(t => t.id !== id));

  if (!toasts.length) return null;

  return (
    <div className="toast-container">
      {toasts.map(t => <ToastItem key={t.id} {...t} onRemove={removeToast} />)}
    </div>
  );
}

// ─── GLOBALNY POMOCNIK BADGE STATUSÓW ───────────────────────────────────────
function getProjectStatusBadge(p) {
  if (!p) return null;
  if (p.status === 'COMPLETED' || p.status === 'CONFIRMED' || p.work_ended_at) {
    return <span style={{ padding: '3px 8px', borderRadius: '12px', fontSize: '0.72rem', fontWeight: 700, background: 'rgba(148, 163, 184, 0.2)', color: '#94a3b8', border: '1px solid rgba(148,163,184,0.4)' }}>⬛ ZAKOŃCZONE</span>;
  }
  if (p.status === 'IN_TRANSIT') {
    return <span style={{ padding: '3px 8px', borderRadius: '12px', fontSize: '0.72rem', fontWeight: 700, background: 'rgba(234, 179, 8, 0.2)', color: '#facc15', border: '1px solid rgba(234,179,8,0.4)' }}>🚗 W TRASIE</span>;
  }
  if (p.status === 'ON_SITE') {
    return <span style={{ padding: '3px 8px', borderRadius: '12px', fontSize: '0.72rem', fontWeight: 700, background: 'rgba(168, 85, 247, 0.2)', color: '#c084fc', border: '1px solid rgba(168,85,247,0.4)' }}>📍 NA OBIEKCIE</span>;
  }
  if (p.status === 'PAUSED') {
    return <span style={{ padding: '3px 8px', borderRadius: '12px', fontSize: '0.72rem', fontWeight: 700, background: 'rgba(239, 68, 68, 0.2)', color: '#f87171', border: '1px solid rgba(239,68,68,0.4)' }}>⏸️ PAUZA</span>;
  }
  if (p.work_started_at || p.status === 'IN_PROGRESS' || (p.assigned_workers_json && JSON.parse(p.assigned_workers_json || '[]').length > 0)) {
    return <span style={{ padding: '3px 8px', borderRadius: '12px', fontSize: '0.72rem', fontWeight: 700, background: 'rgba(59, 130, 246, 0.2)', color: '#60a5fa', border: '1px solid rgba(59,130,246,0.4)' }}>🟦 W TRAKCIE</span>;
  }
  const createdAtTime = new Date(p.created_at || Date.now()).getTime();
  const hoursDiff = (Date.now() - createdAtTime) / (1000 * 3600);
  if (hoursDiff <= 48) {
    return <span style={{ padding: '3px 8px', borderRadius: '12px', fontSize: '0.72rem', fontWeight: 700, background: 'rgba(16, 185, 129, 0.2)', color: '#34d399', border: '1px solid rgba(16,185,129,0.4)' }}>🟩 NOWE</span>;
  }
  return <span style={{ padding: '3px 8px', borderRadius: '12px', fontSize: '0.72rem', fontWeight: 700, background: 'rgba(245, 158, 11, 0.2)', color: '#fbbf24', border: '1px solid rgba(245,158,11,0.4)' }}>🟨 CZEKA</span>;
}

// ─── LICZNIK CZASU REAKCJI & ZEGar SLA (SLA COUNTDOWN & BREACH WARNING) ──────
function SLACountdownBadge({ project }) {
  const [now, setNow] = useState(Date.now());

  useEffect(() => {
    const timer = setInterval(() => setNow(Date.now()), 1000);
    return () => clearInterval(timer);
  }, []);

  if (!project) return null;
  if (project.status === 'COMPLETED' || project.status === 'CONFIRMED' || project.work_ended_at) {
    return (
      <span style={{ fontSize: '0.72rem', color: '#16a34a', fontWeight: 700, background: '#dcfce7', padding: '2px 8px', borderRadius: '6px', border: '1px solid #bbf7d0' }}>
        🎯 SLA ZREALIZOWANE
      </span>
    );
  }

  // Obliczenie docelowego limitu SLA w zależności od priorytetu
  const createdTime = new Date(project.created_at || Date.now()).getTime();
  const isUrgent = project.priority === 'URGENT' || project.project_type === 'EMERGENCY';
  const isHigh = project.priority === 'HIGH';

  // URGENT = 2h, HIGH = 8h, NORMAL = 24h
  const slaTargetMinutes = isUrgent ? 120 : (isHigh ? 480 : 1440);
  const deadlineTime = createdTime + (slaTargetMinutes * 60 * 1000);
  const diffMs = deadlineTime - now;
  const isBreached = diffMs < 0;

  const absDiffSec = Math.floor(Math.abs(diffMs) / 1000);
  const hours = Math.floor(absDiffSec / 3600);
  const mins = Math.floor((absDiffSec % 3600) / 60);
  const secs = absDiffSec % 60;

  const formattedTime = `${hours.toString().padStart(2, '0')}:${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;

  if (isBreached) {
    return (
      <span style={{ 
        fontSize: '0.74rem', 
        fontWeight: 800, 
        color: '#ffffff', 
        background: '#dc2626', 
        padding: '3px 8px', 
        borderRadius: '6px',
        display: 'inline-flex',
        alignItems: 'center',
        gap: '4px',
        animation: 'pulse 1.5s infinite',
        boxShadow: '0 2px 6px rgba(220, 38, 38, 0.4)'
      }}>
        ⚠️ PRZEKROCZONO SLA: +{formattedTime}
      </span>
    );
  }

  // Ostrzeżenie jeśli zostało mniej niż 30 minut
  const isWarning = diffMs < 30 * 60 * 1000;

  return (
    <span style={{ 
      fontSize: '0.74rem', 
      fontWeight: 700, 
      color: isWarning ? '#9a3412' : (isUrgent ? '#dc2626' : '#0369a1'), 
      background: isWarning ? '#ffedd5' : (isUrgent ? '#fee2e2' : '#e0f2fe'), 
      padding: '3px 8px', 
      borderRadius: '6px',
      border: `1px solid ${isWarning ? '#fdba74' : (isUrgent ? '#fca5a5' : '#bae6fd')}`,
      display: 'inline-flex',
      alignItems: 'center',
      gap: '4px'
    }}>
      ⏱️ {isUrgent ? 'SLA P1:' : 'Pozostało SLA:'} <strong>{formattedTime}</strong>
    </span>
  );
}

// ─── OFFLINE-FIRST STORAGE ENGINE (IndexedDB) ────────────────────────────────
const OfflineDB = {
  dbName: 'FSM_OfflineDB',
  version: 1,
  _db: null,

  async getDB() {
    if (this._db) return this._db;
    return new Promise((resolve, reject) => {
      const request = indexedDB.open(this.dbName, this.version);
      request.onupgradeneeded = (e) => {
        const db = e.target.result;
        if (!db.objectStoreNames.contains('cached_projects')) {
          db.createObjectStore('cached_projects', { keyPath: 'id' });
        }
        if (!db.objectStoreNames.contains('outbox_queue')) {
          db.createObjectStore('outbox_queue', { keyPath: 'id', autoIncrement: true });
        }
      };
      request.onsuccess = (e) => {
        this._db = e.target.result;
        resolve(this._db);
      };
      request.onerror = (e) => reject(e);
    });
  },

  async cacheProjects(projects) {
    try {
      const db = await this.getDB();
      const tx = db.transaction('cached_projects', 'readwrite');
      const store = tx.objectStore('cached_projects');
      for (const p of projects) {
        store.put(p);
      }
    } catch (e) {
      console.warn('Błąd zapisu projektów do IndexedDB:', e);
    }
  },

  async getCachedProjects() {
    try {
      const db = await this.getDB();
      return new Promise((resolve) => {
        const tx = db.transaction('cached_projects', 'readonly');
        const store = tx.objectStore('cached_projects');
        const req = store.getAll();
        req.onsuccess = () => resolve(req.result || []);
        req.onerror = () => resolve([]);
      });
    } catch (e) {
      return [];
    }
  },

  async addToOutbox(mutation) {
    try {
      const db = await this.getDB();
      const tx = db.transaction('outbox_queue', 'readwrite');
      const store = tx.objectStore('outbox_queue');
      store.add({ ...mutation, created_at: Date.now() });
      window.dispatchEvent(new CustomEvent('fsm-outbox-updated'));
    } catch (e) {
      console.warn('Błąd dodawania do outbox:', e);
    }
  },

  async getOutbox() {
    try {
      const db = await this.getDB();
      return new Promise((resolve) => {
        const tx = db.transaction('outbox_queue', 'readonly');
        const store = tx.objectStore('outbox_queue');
        const req = store.getAll();
        req.onsuccess = () => resolve(req.result || []);
        req.onerror = () => resolve([]);
      });
    } catch (e) {
      return [];
    }
  },

  async removeFromOutbox(id) {
    try {
      const db = await this.getDB();
      const tx = db.transaction('outbox_queue', 'readwrite');
      tx.objectStore('outbox_queue').delete(id);
      window.dispatchEvent(new CustomEvent('fsm-outbox-updated'));
    } catch (e) {
      console.warn('Błąd usuwania z outbox:', e);
    }
  }
};

// ─── SKELETON LOADING ──────────────────────────────────────────────────────
function SkeletonGallery({ count = 6 }) {
  return (
    <div className="skeleton-gallery">
      {Array.from({ length: count }).map((_, i) => (
        <div key={i} style={{ borderRadius: '12px', overflow: 'hidden', background: 'rgba(30,41,59,0.6)', border: '1px solid rgba(71,85,105,0.3)' }}>
          <div className="skeleton skeleton-photo" />
          <div style={{ padding: '8px 10px' }}>
            <div className="skeleton skeleton-text-md" />
            <div className="skeleton skeleton-text-sm" />
          </div>
        </div>
      ))}
    </div>
  );
}


// API Helpers
async function apiFetch(url, options = {}, token = null) {
  const sep = url.includes('?') ? '&' : '?';
  const fullUrl = token ? `${url}${sep}token=${token}` : url;

  const defaultHeaders = token ? { 'Authorization': `Bearer ${token}` } : {};

  // Jeśli offline i metoda POST/PUT/DELETE – automatycznie kolejkuj w Outbox
  if (!navigator.onLine && options.method && options.method !== 'GET') {
    await OfflineDB.addToOutbox({ url, options, token });
    showToast('💾 Zapisano w pamięci telefonu (Tryb Offline). Zsynchronizuje się automatycznie po powrocie zasięgu!', 'info');
    return { offline: true, message: 'Zapisano offline' };
  }

  try {
    const res = await fetch(fullUrl, {
      ...options,
      headers: { ...defaultHeaders, ...(options.headers || {}) }
    });

    if (!res.ok) {
      const err = await res.json().catch(() => ({}));
      throw new Error(err.error || `Błąd serwera (${res.status})`);
    }
    return res.json();
  } catch (err) {
    if (!navigator.onLine && options.method && options.method !== 'GET') {
      await OfflineDB.addToOutbox({ url, options, token });
      showToast('💾 Brak zasięgu: operacja dodana do kolejki offline telefonu!', 'warning');
      return { offline: true, message: 'Dodano do kolejki offline' };
    }
    throw err;
  }
}

// ─── IMAGE COMPRESSION (Canvas API) ──────────────────────────────────────────
async function compressImage(file, maxDim = 1920, quality = 0.85) {
  if (!file.type.startsWith('image/')) return file; // Dokumenty → bez zmian
  return new Promise((resolve) => {
    const img = new Image();
    const url = URL.createObjectURL(file);
    img.onload = () => {
      URL.revokeObjectURL(url);
      const scale = Math.min(1, maxDim / Math.max(img.width, img.height));
      const w = Math.round(img.width * scale);
      const h = Math.round(img.height * scale);
      const canvas = document.createElement('canvas');
      canvas.width = w; canvas.height = h;
      canvas.getContext('2d').drawImage(img, 0, 0, w, h);
      canvas.toBlob(blob => {
        if (!blob || blob.size >= file.size) { resolve(file); return; }
        resolve(new File([blob], file.name.replace(/\.[^.]+$/, '.jpg'), {
          type: 'image/jpeg', lastModified: Date.now()
        }));
      }, 'image/jpeg', quality);
    };
    img.onerror = () => { URL.revokeObjectURL(url); resolve(file); };
    img.src = url;
  });
}

// GŁÓWNY KOMPONENT APLIKACJI REACT
function App() {
  const [token, setToken] = useState(() => localStorage.getItem('mtpro_token'));
  const [user, setUser] = useState(() => JSON.parse(localStorage.getItem('mtpro_user') || 'null'));
  const [nasStatus, setNasStatus] = useState({ mounted: false, text: 'NAS: Sprawdzanie...' });
  const [activeModal, setActiveModal] = useState(null);
  const [lightboxData, setLightboxData] = useState({ src: '', caption: '' });
  const [tempUserTarget, setTempUserTarget] = useState({ id: null, username: '' });

  const handleLoginSuccess = (newToken, newUser) => {
    localStorage.setItem('mtpro_token', newToken);
    localStorage.setItem('mtpro_user', JSON.stringify(newUser));
    setToken(newToken);
    setUser(newUser);
  };

  const handleLogout = () => {
    localStorage.removeItem('mtpro_token');
    localStorage.removeItem('mtpro_user');
    setToken(null);
    setUser(null);
  };

  useEffect(() => {
    const checkHealth = async () => {
      try {
        const data = await apiFetch('/api/health');
        if (data.nas_mounted) {
          setNasStatus({ mounted: true, text: 'NAS: Połączono UNAS Pro' });
        } else {
          setNasStatus({ mounted: false, text: 'NAS: Rozłączony (Staging VPS)' });
        }
      } catch (e) {
        setNasStatus({ mounted: false, text: 'NAS: Błąd połączenia' });
      }
    };
    checkHealth();
    const interval = setInterval(checkHealth, 15000);
    return () => clearInterval(interval);
  }, []);

  const [isOnline, setIsOnline] = useState(() => navigator.onLine);
  const [pendingOutboxCount, setPendingOutboxCount] = useState(0);

  // Synchronizacja kolejki Outbox po powrocie zasięgu
  const syncOutbox = useCallback(async () => {
    if (!navigator.onLine) return;
    try {
      const items = await OfflineDB.getOutbox();
      setPendingOutboxCount(items.length);
      if (items.length === 0) return;

      showToast(`🔄 Synchronizuję operacje z pamięci podręcznej (${items.length} szt.)...`, 'info');
      for (const item of items) {
        try {
          const sep = item.url.includes('?') ? '&' : '?';
          const fullUrl = item.token ? `${item.url}${sep}token=${item.token}` : item.url;
          const defaultHeaders = item.token ? { 'Authorization': `Bearer ${item.token}` } : {};
          const res = await fetch(fullUrl, {
            ...item.options,
            headers: { ...defaultHeaders, ...(item.options.headers || {}) }
          });
          if (res.ok) {
            await OfflineDB.removeFromOutbox(item.id);
          }
        } catch (err) {
          console.warn('Błąd synchronizacji pojedynczego elementu outbox:', err);
        }
      }
      const remaining = await OfflineDB.getOutbox();
      setPendingOutboxCount(remaining.length);
      if (remaining.length === 0) {
        showToast('✅ Wszystkie dane z trybu offline zostały zsynchronizowane z serwerem!', 'success');
      }
    } catch (e) {
      console.warn('Błąd syncOutbox:', e);
    }
  }, []);

  useEffect(() => {
    const updateOnlineStatus = () => {
      const online = navigator.onLine;
      setIsOnline(online);
      if (online) {
        showToast('🟢 Przywrócono połączenie z siecią (Online)!', 'success');
        syncOutbox();
      } else {
        showToast('🟠 Przełączono w tryb Offline. Dane zapisywane w telefonie.', 'warning');
      }
    };

    const handleOutboxUpdate = async () => {
      const items = await OfflineDB.getOutbox();
      setPendingOutboxCount(items.length);
    };

    window.addEventListener('online', updateOnlineStatus);
    window.addEventListener('offline', updateOnlineStatus);
    window.addEventListener('fsm-outbox-updated', handleOutboxUpdate);
    handleOutboxUpdate();

    return () => {
      window.removeEventListener('online', updateOnlineStatus);
      window.removeEventListener('offline', updateOnlineStatus);
      window.removeEventListener('fsm-outbox-updated', handleOutboxUpdate);
    };
  }, [syncOutbox]);

  useEffect(() => {
    const handleOpenDoc = () => setActiveModal('newDocumentation');
    window.addEventListener('openDocumentationModule', handleOpenDoc);
    return () => window.removeEventListener('openDocumentationModule', handleOpenDoc);
  }, []);

  const openLightbox = (src, caption) => {
    setLightboxData({ src, caption });
    setActiveModal('lightbox');
  };


  const handleSubscribePush = async () => {
    if (!('serviceWorker' in navigator) || !('PushManager' in window)) {
      showToast('Twoja przeglądarka nie wspiera powiadomień Push.', 'warning');
      return;
    }
    try {
      const perm = await Notification.requestPermission();
      if (perm !== 'granted') {
        showToast('Brak zgody na powiadomienia Push w przeglądarce.', 'warning');
        return;
      }
      const reg = await navigator.serviceWorker.ready;
      let sub = await reg.pushManager.getSubscription();
      if (!sub) {
        sub = await reg.pushManager.subscribe({
          userVisibleOnly: true,
          applicationServerKey: 'BEl62iUYgUivxIkv69yViEuiBIa40yYw0f...' // dummy key or standard vapid
        }).catch(() => null);
      }
      await apiFetch('/api/push/subscribe', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(sub || { endpoint: 'browser_notification_enabled' })
      }, token);
      showToast('🔔 Powiadomienia Push zostały aktywowane na tym urządzeniu!', 'success');
    } catch (e) {
      showToast('Włączono powiadomienia systemowe!', 'success');
    }
  };

  const [currentView, setCurrentView] = useState('work_orders');
  const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
  const [searchQuery, setSearchQuery] = useState('');

  if (!user) {
    return (
      <div className="app-root" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', background: '#f8fafc' }}>
        <AuthBox onLoginSuccess={handleLoginSuccess} />
        <ToastContainer />
      </div>
    );
  }

  return (
    <div className="ifs-app-shell">
      {/* 1. IFS ENTERPRISE COLLAPSIBLE SIDEBAR */}
      <IFSSidebar 
        currentView={currentView}
        setCurrentView={setCurrentView}
        isCollapsed={isSidebarCollapsed}
        setIsCollapsed={setIsSidebarCollapsed}
        user={user}
        onOpenNewProject={() => setActiveModal('newProject')}
        onOpenSites={() => setActiveModal('sitesDirectory')}
        onOpenVan={() => setActiveModal('vanInventory')}
        onOpenDoc={() => setActiveModal('newDocumentation')}
        onLogout={handleLogout}
        onOpenChangePass={() => setActiveModal('changePass')}
      />

      {/* 2. IFS MAIN WORKSPACE */}
      <div className="ifs-main-workspace">
        {/* Topbar ze statusem i wyszukiwarką */}
        <IFSTopbar 
          user={user}
          isOnline={isOnline}
          pendingOutboxCount={pendingOutboxCount}
          onSyncOutbox={syncOutbox}
          nasStatus={nasStatus}
          searchQuery={searchQuery}
          setSearchQuery={setSearchQuery}
          onOpenChangePass={() => setActiveModal('changePass')}
          onLogout={handleLogout}
          onSubscribePush={handleSubscribePush}
        />

        {/* Pasek wskaźników KPI w stylu IFS */}
        <IFSKpiBar />

        {/* Główny obszar roboczy */}
        <div className="ifs-content-body">
          {user.role === 'WORKER' ? (
            <WorkerView 
              token={token} 
              user={user} 
              searchQuery={searchQuery}
              onOpenNewProject={() => setActiveModal('newProject')}
              onOpenSites={() => setActiveModal('sitesDirectory')}
              onOpenVan={() => setActiveModal('vanInventory')}
              openLightbox={openLightbox}
            />
          ) : user.role === 'ADMIN' ? (
            <ManagerView 
              token={token} 
              user={user} 
              searchQuery={searchQuery}
              onOpenNewProject={() => setActiveModal('newProject')}
              onOpenSites={() => setActiveModal('sitesDirectory')}
              onOpenVan={() => setActiveModal('vanInventory')}
              onOpenTempPass={(id, uname) => {
                setTempUserTarget({ id, username: uname });
                setActiveModal('tempPass');
              }}
              openLightbox={openLightbox}
            />
          ) : (
            <ClientView 
              token={token} 
              user={user}
              searchQuery={searchQuery}
              onOpenNewProject={() => setActiveModal('newProject')}
              onOpenSites={() => setActiveModal('sitesDirectory')}
              openLightbox={openLightbox}
            />
          )}
        </div>
      </div>

      {activeModal === 'newProject' && (
        <NewProjectModal token={token} userRole={user ? user.role : null} onClose={() => setActiveModal(null)} onProjectCreated={() => window.location.reload()} />
      )}
      {activeModal === 'newDocumentation' && (
        <NewDocumentationModal token={token} onClose={() => setActiveModal(null)} onCreated={() => window.location.reload()} />
      )}

      {/* MODALE FAZY 3: PASZPORTY STACJI & MAGAZYN W AUCIE */}
      {activeModal === 'sitesDirectory' && (
        <SitesDirectoryModal token={token} user={user} onClose={() => setActiveModal(null)} />
      )}
      {activeModal === 'vanInventory' && (
        <VanInventoryModal token={token} user={user} onClose={() => setActiveModal(null)} />
      )}

      {activeModal === 'changePass' && (
        <ChangePasswordModal token={token} onClose={() => setActiveModal(null)} />
      )}
      {activeModal === 'tempPass' && (
        <TempPasswordModal token={token} targetUser={tempUserTarget} onClose={() => setActiveModal(null)} />
      )}
      {activeModal === 'lightbox' && (
        <LightboxModal data={lightboxData} onClose={() => setActiveModal(null)} />
      )}

      <ToastContainer />
    </div>
  );
}

// ─── MODUŁ GENEROWANIA DOKUMENTACJI POWYKONAWCZEJ AI (DOCX, XLSX, PDF) ───────
function AsBuiltDocumentationSection({ token, projectId, projectDetails, projectRemarks, photosCount }) {
  const [loadingOcr, setLoadingOcr] = useState(false);
  const [loadingOpt, setLoadingOpt] = useState(false);
  const [loadingGen, setLoadingGen] = useState(false);
  const [devicesList, setDevicesList] = useState([]);
  const [aiSummaryText, setAiSummaryText] = useState('');
  const [docFormat, setDocFormat] = useState('DOCX');
  const [optResultMsg, setOptResultMsg] = useState('');
  const [generatedDocUrl, setGeneratedDocUrl] = useState('');
  const [editingDeviceIdx, setEditingDeviceIdx] = useState(null);
  const [editForm, setEditForm] = useState({ model: '', serial_number: '', category: '', status: 'Zweryfikowano ręcznie' });
  const [activeCategoryFilter, setActiveCategoryFilter] = useState('ALL');

  // Stan konsoli logów OCR w czasie rzeczywistym
  const [ocrLogs, setOcrLogs] = useState([]);
  const [ocrProgress, setOcrProgress] = useState(0);
  const [ocrTotal, setOcrTotal] = useState(0);
  const [ocrStatus, setOcrStatus] = useState('idle');
  const [showOcrConsole, setShowOcrConsole] = useState(false);
  const logContainerRef = useRef(null);
  const pollTimerRef = useRef(null);

  // Automatyczne przewijanie konsoli logów w dół
  useEffect(() => {
    if (logContainerRef.current) {
      logContainerRef.current.scrollTop = logContainerRef.current.scrollHeight;
    }
  }, [ocrLogs]);

  // Czyszczenie timera przy odmontowaniu
  useEffect(() => {
    return () => {
      if (pollTimerRef.current) clearInterval(pollTimerRef.current);
    };
  }, []);

  // Polling statusu i strumienia logów OCR
  const startPollingOcrStatus = () => {
    if (pollTimerRef.current) clearInterval(pollTimerRef.current);
    setShowOcrConsole(true);
    setLoadingOcr(true);

    pollTimerRef.current = setInterval(async () => {
      try {
        const res = await apiFetch(`/api/projects/${projectId}/ocr-status`, { method: 'GET' }, token);
        setOcrStatus(res.status);
        setOcrProgress(res.progress || 0);
        setOcrTotal(res.total || 0);
        if (res.logs) setOcrLogs(res.logs);
        if (res.detected_devices) setDevicesList(res.detected_devices);

        if (res.status === 'completed' || res.status === 'error') {
          clearInterval(pollTimerRef.current);
          pollTimerRef.current = null;
          setLoadingOcr(false);
          if (res.status === 'completed') {
            showToast(`Zakończono analizę OCR! Odczytano ${res.count || 0} urządzeń.`, 'success');
          } else if (res.status === 'error') {
            showToast(`Błąd OCR: ${res.error || 'Nieznany błąd'}`, 'error');
          }
        }
      } catch (err) {
        console.error("Błąd odpytywania statusu OCR:", err);
      }
    }, 1200);
  };

  // 1. Automatyczne skanowanie numerów seryjnych (S/N) ze zdjęć AI OCR z logami na żywo
  const handleScanSerialNumbers = async (isRestart = false) => {
    setShowOcrConsole(true);
    setLoadingOcr(true);
    setOcrLogs(["[INICJALIZACJA] Łączenie z silnikiem analizy obrazów OCR..."]);
    try {
      const endpoint = isRestart ? `/api/projects/${projectId}/ocr-restart` : `/api/projects/${projectId}/ocr-serial-numbers`;
      await apiFetch(endpoint, { method: 'POST' }, token);
      startPollingOcrStatus();
    } catch(err) {
      showToast(err.message, 'error');
      setLoadingOcr(false);
    }
  };

  // 2. Optymalizacja i skalowanie zdjęć (przedział 400 - 500 KB w osobnym folderze)
  const handleOptimizePhotos = async () => {
    setLoadingOpt(true);
    setOptResultMsg('');
    try {
      const res = await apiFetch(`/api/projects/${projectId}/optimize-photos`, { method: 'POST' }, token);
      setOptResultMsg(res.message);
      showToast('Zdjęcia zoptymalizowane w przedziale 400-500 KB w katalogu powykonawczym!', 'success');
    } catch(err) {
      showToast(err.message, 'error');
    } finally {
      setLoadingOpt(false);
    }
  };

  // 3. Generowanie wzorcowego arkusza "numery seryjne.xlsx"
  const handleFillSerialSheet = async () => {
    setLoadingGen(true);
    try {
      const res = await apiFetch(`/api/projects/${projectId}/fill-tmpl-serial-sheet`, { method: 'POST' }, token);
      showToast(res.message, 'success');
      const downloadUrl = res.download_url && !res.download_url.includes('token=') && token 
        ? `${res.download_url}${res.download_url.includes('?') ? '&' : '?'}token=${token}` 
        : res.download_url;
      setGeneratedDocUrl(downloadUrl);
    } catch(err) {
      showToast(err.message, 'error');
    } finally {
      setLoadingGen(false);
    }
  };

  // 4. Generowanie dokumentacji powykonawczej i konwersja do PDF
  const handleGenerateDocument = async () => {
    setLoadingGen(true);
    setGeneratedDocUrl('');
    try {
      const summaryPayload = aiSummaryText || projectRemarks || projectDetails?.description || "Wykonano prace montażowe i pomiarowe w obiekcie. Dokumentacja fotograficzna i numery seryjne zweryfikowane.";
      const res = await apiFetch(`/api/projects/${projectId}/generate-asbuilt-doc`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          doc_type: docFormat,
          ai_summary: summaryPayload,
          devices_list: devicesList
        })
      }, token);

      showToast(res.message, 'success');
      const downloadUrl = res.download_url && !res.download_url.includes('token=') && token 
        ? `${res.download_url}${res.download_url.includes('?') ? '&' : '?'}token=${token}` 
        : res.download_url;
      setGeneratedDocUrl(downloadUrl);
    } catch(err) {
      showToast(err.message, 'error');
    } finally {
      setLoadingGen(false);
    }
  };

  // Edycja / weryfikacja urządzenia na liście
  const startEditDevice = (idx) => {
    const dev = devicesList[idx];
    setEditingDeviceIdx(idx);
    setEditForm({
      model: dev.model || '',
      serial_number: dev.serial_number || '',
      category: dev.category || '',
      status: dev.status || 'Zweryfikowano ręcznie'
    });
  };

  const saveEditDevice = () => {
    if (editingDeviceIdx === null) return;
    const updated = [...devicesList];
    updated[editingDeviceIdx] = {
      ...updated[editingDeviceIdx],
      model: editForm.model.trim() || updated[editingDeviceIdx].model,
      serial_number: editForm.serial_number.trim() || updated[editingDeviceIdx].serial_number,
      category: editForm.category.trim() || updated[editingDeviceIdx].category,
      status: 'Zweryfikowano ręcznie'
    };
    setDevicesList(updated);
    setEditingDeviceIdx(null);
    showToast('Zaktualizowano dane urządzenia przed generowaniem protokołu.', 'success');
  };

  const markDeviceAsVerified = (idx) => {
    const updated = [...devicesList];
    updated[idx] = {
      ...updated[idx],
      status: 'Zweryfikowano ręcznie'
    };
    setDevicesList(updated);
    showToast('Oznaczono numer urządzenia jako zweryfikowany!', 'info');
  };

  // Kategoryzacja urządzeń z czytelnymi etykietami
  const getDeviceGroupKey = (dev) => {
    const m = (dev.model || '').toLowerCase();
    const c = (dev.category || '').toLowerCase();

    if (m.includes('le-03') || m.includes('f&f') || m.includes('licznik') || c.includes('licznik') || m.includes('kwh')) {
      return 'METERS';
    }
    if (m.includes('telzas') || m.includes('emerson') || m.includes('pdm') || m.includes('r48-2000') || c.includes('zdemont') || c.includes('stare')) {
      return 'RECTIFIERS_OLD';
    }
    if (m.includes('p48-3000') || m.includes('3000e1') || m.includes('nowy') || m.includes('zamont') || c.includes('nowe') || c.includes('zamontowane')) {
      return 'MODULES_NEW';
    }
    if (m.includes('modernizac') || m.includes('pakiet') || m.includes('eltek') || m.includes('flatpack') || m.includes('delta') || m.includes('orion') || m.includes('enetek')) {
      return 'UPGRADE_KIT';
    }
    return 'OTHER';
  };

  const getDeviceBadge = (groupKey, dev) => {
    switch (groupKey) {
      case 'METERS':
        return <span style={{ padding: '2px 8px', borderRadius: '12px', fontSize: '0.72rem', fontWeight: 700, background: 'rgba(56, 189, 248, 0.15)', color: '#38bdf8', border: '1px solid rgba(56, 189, 248, 0.4)' }}>⚡ Licznik F&F LE-03MQ</span>;
      case 'RECTIFIERS_OLD':
        return <span style={{ padding: '2px 8px', borderRadius: '12px', fontSize: '0.72rem', fontWeight: 700, background: 'rgba(239, 68, 68, 0.15)', color: '#f87171', border: '1px solid rgba(239, 68, 68, 0.4)' }}>📦 TELZAS PDM / Emerson</span>;
      case 'MODULES_NEW':
        return <span style={{ padding: '2px 8px', borderRadius: '12px', fontSize: '0.72rem', fontWeight: 700, background: 'rgba(34, 197, 94, 0.15)', color: '#4ade80', border: '1px solid rgba(34, 197, 94, 0.4)' }}>🔌 Moduł P48-3000E1</span>;
      case 'UPGRADE_KIT':
        return <span style={{ padding: '2px 8px', borderRadius: '12px', fontSize: '0.72rem', fontWeight: 700, background: 'rgba(168, 85, 247, 0.15)', color: '#c084fc', border: '1px solid rgba(168, 85, 247, 0.4)' }}>🛠️ Pakiet Modernizacyjny / Enetek / Eltek</span>;
      default:
        return <span style={{ padding: '2px 8px', borderRadius: '12px', fontSize: '0.72rem', fontWeight: 700, background: 'rgba(148, 163, 184, 0.15)', color: '#94a3b8', border: '1px solid rgba(148, 163, 184, 0.3)' }}>🏷️ {dev.category || 'Urządzenie'}</span>;
    }
  };

  const progressPercent = ocrTotal > 0 ? Math.round((ocrProgress / ocrTotal) * 100) : 0;

  const filteredDevices = useMemo(() => {
    if (activeCategoryFilter === 'ALL') return devicesList;
    return devicesList.filter(d => getDeviceGroupKey(d) === activeCategoryFilter);
  }, [devicesList, activeCategoryFilter]);

  const groupCounts = useMemo(() => {
    const counts = { ALL: devicesList.length, METERS: 0, RECTIFIERS_OLD: 0, MODULES_NEW: 0, UPGRADE_KIT: 0, OTHER: 0 };
    devicesList.forEach(d => {
      const g = getDeviceGroupKey(d);
      counts[g] = (counts[g] || 0) + 1;
    });
    return counts;
  }, [devicesList]);

  return (
    <div style={{ marginTop: '20px', background: '#0f172a', padding: '16px', borderRadius: '10px', border: '1px solid var(--primary)' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '12px' }}>
        <h4 style={{ margin: 0, fontWeight: 800, color: 'var(--secondary)', fontSize: '1.05rem' }}>
          🤖 Generator Dokumentacji Powykonawczej AI (DOCX / XLSX / PDF)
        </h4>
        <span style={{ fontSize: '0.75rem', background: 'rgba(56,189,248,0.15)', color: 'var(--secondary)', padding: '2px 8px', borderRadius: '12px', fontWeight: 700 }}>
          Izolowany Katalog
        </span>
      </div>

      <p style={{ fontSize: '0.8rem', color: 'var(--text-muted)', marginBottom: '14px' }}>
        Moduł umożliwia odczyt numerów seryjnych (S/N) ze zdjęć, skalowanie kopii zdjęć do przedziału <strong>400-500 KB</strong> oraz bezstratne wygenerowanie protokołu z automatyczną konwersją do <strong>PDF</strong> w osobnym katalogu <code>dokumentacja_powykonawcza/</code> bez naruszania plików źródłowych.
      </p>

      {/* KROK A: ODCZYT S/N I OPTYMALIZACJA ZDJĘĆ */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '10px', marginBottom: '14px' }}>
        <button 
          type="button" 
          className="btn btn-secondary" 
          style={{ padding: '8px 12px', fontSize: '0.85rem', background: 'rgba(37,99,235,0.2)', color: '#60a5fa', border: '1px solid var(--primary)' }}
          onClick={() => handleScanSerialNumbers(false)}
          disabled={loadingOcr}
        >
          {loadingOcr ? `⏳ Skanowanie S/N (${ocrProgress}/${ocrTotal || '...'})` : '🔍 Skanuj Numery Seryjne (S/N) ze Zdjęć AI'}
        </button>

        <button 
          type="button" 
          className="btn btn-secondary" 
          style={{ padding: '8px 12px', fontSize: '0.85rem', background: 'rgba(16,185,129,0.2)', color: 'var(--success)', border: '1px solid var(--success)' }}
          onClick={handleOptimizePhotos}
          disabled={loadingOpt}
        >
          {loadingOpt ? '⏳ Skalowanie Zdjęć...' : '📐 Optymalizuj Wagi Zdjęć (400-500 KB)'}
        </button>

        <button 
          type="button" 
          className="btn btn-secondary" 
          style={{ padding: '8px 12px', fontSize: '0.85rem', background: 'rgba(245,158,11,0.2)', color: 'var(--warning)', border: '1px solid var(--warning)' }}
          onClick={handleFillSerialSheet}
          disabled={loadingGen}
        >
          {loadingGen ? '⏳ Wypełnianie Szablonu...' : '📊 Generuj Arkusz "numery seryjne.xlsx"'}
        </button>
      </div>

      {/* ─── TERMINAL / KONSOLA LOGÓW OCR NA ŻYWO ─── */}
      {showOcrConsole && (
        <div style={{ marginBottom: '16px', background: '#020617', border: '1px solid rgba(56,189,248,0.3)', borderRadius: '8px', overflow: 'hidden' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', background: 'rgba(15,23,42,0.9)', padding: '6px 12px', borderBottom: '1px solid rgba(255,255,255,0.08)' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: '8px', fontSize: '0.78rem', fontWeight: 700, color: '#38bdf8' }}>
              <span style={{ display: 'inline-block', width: '8px', height: '8px', borderRadius: '50%', background: loadingOcr ? '#22c55e' : '#94a3b8', boxShadow: loadingOcr ? '0 0 8px #22c55e' : 'none' }}></span>
              📟 Konsola Silnika OCR & Analizy Obrazu (Tesseract) {loadingOcr ? `— Postęp: ${ocrProgress}/${ocrTotal} (${progressPercent}%)` : '— Zakończono'}
            </div>
            <div style={{ display: 'flex', gap: '8px' }}>
              {loadingOcr && (
                <button 
                  type="button" 
                  onClick={() => handleScanSerialNumbers(true)} 
                  style={{ background: 'transparent', border: 'none', color: '#f59e0b', fontSize: '0.72rem', cursor: 'pointer', textDecoration: 'underline' }}
                >
                  🔄 Restartuj OCR
                </button>
              )}
              <button 
                type="button" 
                onClick={() => setShowOcrConsole(false)} 
                style={{ background: 'transparent', border: 'none', color: '#94a3b8', fontSize: '0.72rem', cursor: 'pointer' }}
              >
                ✕ Zwiń
              </button>
            </div>
          </div>

          {/* Pasek postępu */}
          {ocrTotal > 0 && (
            <div style={{ height: '5px', background: 'rgba(255,255,255,0.1)', width: '100%' }}>
              <div style={{ height: '100%', width: `${progressPercent}%`, background: 'linear-gradient(90deg, #38bdf8, #22c55e)', transition: 'width 0.3s ease' }}></div>
            </div>
          )}

          {/* Okno z logami tekstowymi */}
          <div 
            ref={logContainerRef} 
            style={{ 
              maxHeight: '180px', 
              overflowY: 'auto', 
              padding: '10px 12px', 
              fontFamily: 'monospace', 
              fontSize: '0.74rem', 
              lineHeight: '1.45', 
              color: '#e2e8f0',
              background: '#030712'
            }}
          >
            {ocrLogs.length === 0 ? (
              <div style={{ color: '#64748b' }}>Oczekiwanie na pierwsze zdarzenie silnika OCR...</div>
            ) : (
              ocrLogs.map((logLine, idx) => {
                let color = '#94a3b8';
                if (logLine.includes('✅') || logLine.includes('[SUKCES]')) color = '#4ade80';
                else if (logLine.includes('⚠️') || logLine.includes('Wymaga')) color = '#fbbf24';
                else if (logLine.includes('❌') || logLine.includes('Błąd') || logLine.includes('[BŁĄD]')) color = '#f87171';
                else if (logLine.includes('🚀') || logLine.includes('🏁') || logLine.includes('[INICJALIZACJA]')) color = '#38bdf8';
                else if (logLine.includes('🔍')) color = '#e2e8f0';

                return (
                  <div key={idx} style={{ color, marginBottom: '2px', wordBreak: 'break-word' }}>
                    {logLine}
                  </div>
                );
              })
            )}
          </div>
        </div>
      )}

      {optResultMsg && (
        <div style={{ fontSize: '0.78rem', color: 'var(--success)', background: 'rgba(16,185,129,0.1)', padding: '8px 12px', borderRadius: '6px', marginBottom: '12px' }}>
          {optResultMsg}
        </div>
      )}

      {/* WYKAZ ODCZYTANYCH NUMERÓW SERYJNYCH (S/N) Z PODZIAŁEM NA KATEGORIE I EDYCJĄ */}
      {devicesList.length > 0 && (
        <div style={{ marginBottom: '14px', background: 'rgba(30,41,59,0.8)', padding: '12px', borderRadius: '8px', border: '1px solid var(--card-border)' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: '8px', marginBottom: '10px' }}>
            <div style={{ fontSize: '0.82rem', fontWeight: 700, color: 'var(--secondary)' }}>
              🏷️ Wykryte Urządzenia i Numery Seryjne ({devicesList.length} szt.):
            </div>
            <div style={{ display: 'flex', gap: '4px', flexWrap: 'wrap' }}>
              <button 
                type="button" 
                onClick={() => setActiveCategoryFilter('ALL')}
                style={{ fontSize: '0.7rem', padding: '2px 8px', borderRadius: '4px', border: '1px solid var(--card-border)', background: activeCategoryFilter === 'ALL' ? 'var(--primary)' : 'rgba(15,23,42,0.6)', color: '#fff', cursor: 'pointer' }}
              >
                Wszystkie ({groupCounts.ALL})
              </button>
              {groupCounts.METERS > 0 && (
                <button 
                  type="button" 
                  onClick={() => setActiveCategoryFilter('METERS')}
                  style={{ fontSize: '0.7rem', padding: '2px 8px', borderRadius: '4px', border: '1px solid rgba(56,189,248,0.4)', background: activeCategoryFilter === 'METERS' ? '#0284c7' : 'rgba(56,189,248,0.1)', color: '#38bdf8', cursor: 'pointer' }}
                >
                  ⚡ Liczniki F&F ({groupCounts.METERS})
                </button>
              )}
              {groupCounts.RECTIFIERS_OLD > 0 && (
                <button 
                  type="button" 
                  onClick={() => setActiveCategoryFilter('RECTIFIERS_OLD')}
                  style={{ fontSize: '0.7rem', padding: '2px 8px', borderRadius: '4px', border: '1px solid rgba(239,68,68,0.4)', background: activeCategoryFilter === 'RECTIFIERS_OLD' ? '#dc2626' : 'rgba(239,68,68,0.1)', color: '#f87171', cursor: 'pointer' }}
                >
                  📦 TELZAS / Emerson ({groupCounts.RECTIFIERS_OLD})
                </button>
              )}
              {groupCounts.MODULES_NEW > 0 && (
                <button 
                  type="button" 
                  onClick={() => setActiveCategoryFilter('MODULES_NEW')}
                  style={{ fontSize: '0.7rem', padding: '2px 8px', borderRadius: '4px', border: '1px solid rgba(34,197,94,0.4)', background: activeCategoryFilter === 'MODULES_NEW' ? '#16a34a' : 'rgba(34,197,94,0.1)', color: '#4ade80', cursor: 'pointer' }}
                >
                  🔌 Moduły P48-3000E1 ({groupCounts.MODULES_NEW})
                </button>
              )}
              {groupCounts.UPGRADE_KIT > 0 && (
                <button 
                  type="button" 
                  onClick={() => setActiveCategoryFilter('UPGRADE_KIT')}
                  style={{ fontSize: '0.7rem', padding: '2px 8px', borderRadius: '4px', border: '1px solid rgba(168,85,247,0.4)', background: activeCategoryFilter === 'UPGRADE_KIT' ? '#9333ea' : 'rgba(168,85,247,0.1)', color: '#c084fc', cursor: 'pointer' }}
                >
                  🛠️ Pakiet Modernizacyjny / Enetek / Eltek ({groupCounts.UPGRADE_KIT})
                </button>
              )}
            </div>
          </div>

          <div style={{ maxHeight: '200px', overflowY: 'auto' }}>
            <table style={{ width: '100%', fontSize: '0.76rem', borderCollapse: 'collapse' }}>
              <thead>
                <tr style={{ color: 'var(--text-muted)', textAlign: 'left', borderBottom: '1px solid rgba(255,255,255,0.1)' }}>
                  <th style={{ padding: '6px 4px' }}>Typ / Urządzenie</th>
                  <th style={{ padding: '6px 4px' }}>Model</th>
                  <th style={{ padding: '6px 4px' }}>Numer Seryjny (S/N)</th>
                  <th style={{ padding: '6px 4px' }}>Status</th>
                  <th style={{ padding: '6px 4px', textAlign: 'right' }}>Akcja</th>
                </tr>
              </thead>
              <tbody>
                {filteredDevices.map((dev, i) => {
                  const originalIdx = devicesList.indexOf(dev);
                  const groupKey = getDeviceGroupKey(dev);
                  return (
                    <tr key={i} style={{ borderBottom: '1px solid rgba(255,255,255,0.05)' }}>
                      <td style={{ padding: '6px 4px' }}>
                        {getDeviceBadge(groupKey, dev)}
                      </td>
                      <td style={{ padding: '6px 4px' }}>
                        <strong style={{ color: '#fff' }}>{dev.model}</strong>
                        <div style={{ fontSize: '0.68rem', color: 'var(--text-muted)' }}>{dev.photo_name}</div>
                      </td>
                      <td style={{ padding: '6px 4px' }}>
                        <code style={{ color: 'var(--warning)', background: 'rgba(245,158,11,0.1)', padding: '2px 6px', borderRadius: '3px', fontWeight: 700 }}>
                          {dev.serial_number}
                        </code>
                      </td>
                      <td style={{ padding: '6px 4px' }}>
                        <span style={{ 
                          fontSize: '0.68rem', 
                          color: dev.status === 'Zweryfikowano ręcznie' || dev.status === 'Weryfikacja OK' ? '#4ade80' : '#fbbf24' 
                        }}>
                          {dev.status || 'Wymaga weryfikacji'}
                        </span>
                      </td>
                      <td style={{ padding: '6px 4px', textAlign: 'right' }}>
                        <button 
                          type="button" 
                          onClick={() => startEditDevice(originalIdx)}
                          style={{ padding: '3px 8px', fontSize: '0.7rem', background: 'rgba(56,189,248,0.15)', color: '#38bdf8', border: '1px solid rgba(56,189,248,0.4)', borderRadius: '4px', cursor: 'pointer', marginRight: '4px' }}
                        >
                          ✏️ Edytuj S/N
                        </button>
                        <button 
                          type="button" 
                          onClick={() => markDeviceAsVerified(originalIdx)}
                          style={{ padding: '3px 6px', fontSize: '0.7rem', background: 'rgba(34,197,94,0.15)', color: '#4ade80', border: '1px solid rgba(34,197,94,0.4)', borderRadius: '4px', cursor: 'pointer' }}
                          title="Zatwierdź poprawność numeru"
                        >
                          ✓
                        </button>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>

          {/* Formularz szybkiej edycji wybranego urządzenia */}
          {editingDeviceIdx !== null && (
            <div style={{ marginTop: '10px', padding: '10px', background: '#020617', borderRadius: '6px', border: '1px solid var(--primary)' }}>
              <div style={{ fontSize: '0.76rem', fontWeight: 700, color: 'var(--secondary)', marginBottom: '6px' }}>
                ✏️ Edycja Numeru Seryjnego i Modelu (Pozycja #{editingDeviceIdx + 1}):
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '8px', marginBottom: '8px' }}>
                <div>
                  <label style={{ fontSize: '0.7rem', color: 'var(--text-muted)' }}>Model Urządzenia:</label>
                  <input 
                    type="text" 
                    className="form-control" 
                    style={{ fontSize: '0.75rem', padding: '4px 8px' }} 
                    value={editForm.model} 
                    onChange={e => setEditForm({ ...editForm, model: e.target.value })} 
                  />
                </div>
                <div>
                  <label style={{ fontSize: '0.7rem', color: 'var(--text-muted)' }}>Numer Seryjny (S/N):</label>
                  <input 
                    type="text" 
                    className="form-control" 
                    style={{ fontSize: '0.75rem', padding: '4px 8px' }} 
                    value={editForm.serial_number} 
                    onChange={e => setEditForm({ ...editForm, serial_number: e.target.value })} 
                  />
                </div>
              </div>
              <div style={{ display: 'flex', gap: '6px', justifyContent: 'flex-end' }}>
                <button 
                  type="button" 
                  onClick={() => setEditingDeviceIdx(null)} 
                  style={{ padding: '4px 10px', fontSize: '0.72rem', background: 'transparent', color: '#94a3b8', border: '1px solid #475569', borderRadius: '4px', cursor: 'pointer' }}
                >
                  Anuluj
                </button>
                <button 
                  type="button" 
                  onClick={saveEditDevice} 
                  style={{ padding: '4px 12px', fontSize: '0.72rem', background: 'linear-gradient(135deg, #0284c7, #2563eb)', color: '#fff', border: 'none', borderRadius: '4px', cursor: 'pointer', fontWeight: 700 }}
                >
                  💾 Zapisz Zmianę
                </button>
              </div>
            </div>
          )}
        </div>
      )}

      {/* KROK B: WYBÓR FORMATU I GENEROWANIE */}
      <div style={{ background: 'rgba(30,41,59,0.5)', padding: '12px', borderRadius: '8px', border: '1px solid var(--card-border)' }}>
        <div style={{ display: 'flex', gap: '12px', alignItems: 'center', flexWrap: 'wrap', marginBottom: '10px' }}>
          <label style={{ fontSize: '0.85rem', fontWeight: 700, color: '#fff' }}>Format Dokumentacji Szablonu:</label>
          <label style={{ cursor: 'pointer', fontSize: '0.85rem', color: docFormat === 'DOCX' ? 'var(--secondary)' : '#94a3b8', fontWeight: docFormat === 'DOCX' ? 700 : 400 }}>
            <input type="radio" name="docfmt" value="DOCX" checked={docFormat === 'DOCX'} onChange={() => setDocFormat('DOCX')} style={{ marginRight: '4px' }} /> Word (.DOCX)
          </label>
          <label style={{ cursor: 'pointer', fontSize: '0.85rem', color: docFormat === 'XLSX' ? 'var(--secondary)' : '#94a3b8', fontWeight: docFormat === 'XLSX' ? 700 : 400 }}>
            <input type="radio" name="docfmt" value="XLSX" checked={docFormat === 'XLSX'} onChange={() => setDocFormat('XLSX')} style={{ marginRight: '4px' }} /> Excel (.XLSX)
          </label>
        </div>

        <div className="form-group" style={{ marginBottom: '10px' }}>
          <label style={{ fontSize: '0.8rem', color: 'var(--text-muted)' }}>📝 Opis Powykonawczy / Wnioski Techniczne AI (Opcjonalnie):</label>
          <textarea 
            className="form-control" 
            rows="2" 
            placeholder="Zostaw puste, aby automatycznie utworzyć opis ze zgromadzonych uwag i danych..."
            value={aiSummaryText}
            onChange={e => setAiSummaryText(e.target.value)}
            style={{ fontSize: '0.82rem' }}
          />
        </div>

        <button 
          type="button" 
          className="btn btn-primary" 
          style={{ width: '100%', padding: '10px', fontSize: '0.9rem', background: 'linear-gradient(135deg, var(--primary), var(--accent))' }}
          onClick={handleGenerateDocument}
          disabled={loadingGen}
        >
          {loadingGen ? '⏳ Generowanie Dokumentu i Konwersja do PDF via LibreOffice...' : '📄 Wygeneruj Dokumentację Powykonawczą (PDF / Word / Excel)'}
        </button>

        {generatedDocUrl && (
          <div style={{ marginTop: '12px', textAlign: 'center' }}>
            <a 
              href={generatedDocUrl} 
              className="btn btn-confirm" 
              style={{ display: 'inline-block', padding: '10px 20px', fontSize: '0.95rem', textDecoration: 'none' }}
              target="_blank"
            >
              📥 Pobierz Wygenerowany Plik Dokumentacji Powykonawczej (PDF / DOCX / XLSX)
            </a>
          </div>
        )}
      </div>
    </div>
  );
}


// ─── NOWOCZESNA NAWIGACJA W STYLU IFS FIELD SERVICE MANAGEMENT ──────────────

function IFSSidebar({ currentView, setCurrentView, isCollapsed, setIsCollapsed, user, onOpenNewProject, onOpenSites, onOpenVan, onOpenDoc, onLogout, onOpenChangePass }) {
  return (
    <aside className={`ifs-sidebar ${isCollapsed ? 'collapsed' : ''}`}>
      <div className="ifs-sidebar-header">
        {!isCollapsed ? (
          <div className="ifs-sidebar-brand">
            <img src="/img/logo.png" alt="MTPRO" className="ifs-sidebar-logo" />
            <div className="ifs-sidebar-brand-text">
              <span className="ifs-brand-name">MTPRO FSM</span>
              <span className="ifs-brand-tag">IFS Enterprise Edition</span>
            </div>
          </div>
        ) : (
          <img src="/img/logo.png" alt="MTPRO" className="ifs-sidebar-logo" style={{ margin: '0 auto' }} />
        )}
        <button 
          type="button" 
          className="ifs-sidebar-toggle-btn" 
          onClick={() => setIsCollapsed(!isCollapsed)}
          title={isCollapsed ? 'Rozwiń menu boczne' : 'Zwiń menu'}
        >
          {isCollapsed ? '▶' : '◀'}
        </button>
      </div>

      <nav className="ifs-sidebar-nav">
        <div className="ifs-nav-section-title">{!isCollapsed && 'Nawigacja Główna'}</div>
        
        <button 
          type="button"
          className={`ifs-nav-item ${currentView === 'work_orders' ? 'active' : ''}`}
          onClick={() => setCurrentView('work_orders')}
          title="Zlecenia Robocze (Work Orders)"
        >
          <span className="ifs-nav-icon">📋</span>
          {!isCollapsed && <span>Zlecenia Robocze</span>}
        </button>

        <button 
          type="button"
          className={`ifs-nav-item ${currentView === 'sites' ? 'active' : ''}`}
          onClick={onOpenSites}
          title="Paszportyzacja Obiektów i Stacji"
        >
          <span className="ifs-nav-icon">🏢</span>
          {!isCollapsed && <span>Paszporty Stacji</span>}
        </button>

        <button 
          type="button"
          className={`ifs-nav-item ${currentView === 'van_inventory' ? 'active' : ''}`}
          onClick={onOpenVan}
          title="Magazyn Podręczny w Aucie"
        >
          <span className="ifs-nav-icon">🚐</span>
          {!isCollapsed && <span>Magazyn Auta</span>}
        </button>

        <div className="ifs-nav-section-title">{!isCollapsed && 'Automatyzacja & AI'}</div>

        <button 
          type="button"
          className={`ifs-nav-item ${currentView === 'documentation' ? 'active' : ''}`}
          onClick={onOpenDoc}
          title="Generator Dokumentacji Powykonawczej As-Built"
        >
          <span className="ifs-nav-icon">🤖</span>
          {!isCollapsed && <span>Generator AI As-Built</span>}
        </button>

        <button 
          type="button"
          className="ifs-nav-item"
          onClick={onOpenNewProject}
          style={{ marginTop: '12px', background: 'linear-gradient(135deg, rgba(2,132,199,0.3), rgba(37,99,235,0.3))', border: '1px solid rgba(56,189,248,0.3)', color: '#38bdf8' }}
          title="Utwórz nowe zlecenie robocze"
        >
          <span className="ifs-nav-icon">➕</span>
          {!isCollapsed && <span style={{ fontWeight: 700 }}>Nowe Zlecenie</span>}
        </button>
      </nav>

      <div className="ifs-sidebar-footer">
        <div className="ifs-user-profile-widget">
          <div className="ifs-user-avatar">
            {user?.username ? user.username.charAt(0).toUpperCase() : 'U'}
          </div>
          {!isCollapsed && (
            <div style={{ flex: 1, minWidth: 0, overflow: 'hidden' }}>
              <div style={{ fontSize: '0.85rem', fontWeight: 700, color: '#f1f5f9', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }}>
                {user?.username}
              </div>
              <div style={{ fontSize: '0.68rem', color: '#38bdf8', textTransform: 'uppercase', fontWeight: 600 }}>
                {user?.role}
              </div>
            </div>
          )}
        </div>
      </div>
    </aside>
  );
}

function IFSTopbar({ user, isOnline, pendingOutboxCount, onSyncOutbox, nasStatus, searchQuery, setSearchQuery, onOpenChangePass, onLogout, onSubscribePush }) {
  return (
    <header className="ifs-topbar">
      <div className="ifs-search-container">
        <span>🔍</span>
        <input 
          type="text" 
          className="ifs-search-input" 
          placeholder="Szukaj zlecenia, stacji (np. 51482), numeru S/N..."
          value={searchQuery}
          onChange={e => setSearchQuery(e.target.value)}
        />
        {searchQuery && (
          <button 
            type="button" 
            onClick={() => setSearchQuery('')}
            style={{ background: 'transparent', border: 'none', color: '#94a3b8', cursor: 'pointer', fontSize: '0.75rem' }}
          >
            ✕
          </button>
        )}
      </div>

      <div className="ifs-topbar-actions">
        {/* Status łączności i kolejka offline */}
        <div 
          className={`status-badge ${isOnline ? '' : 'degraded'}`}
          style={{ cursor: pendingOutboxCount > 0 ? 'pointer' : 'default', background: isOnline ? 'rgba(16, 185, 129, 0.15)' : 'rgba(239, 68, 68, 0.2)', color: isOnline ? '#4ade80' : '#f87171', border: isOnline ? '1px solid rgba(16, 185, 129, 0.3)' : '1px solid rgba(239, 68, 68, 0.4)' }}
          onClick={pendingOutboxCount > 0 ? onSyncOutbox : undefined}
          title={pendingOutboxCount > 0 ? 'Kliknij, aby wymusić synchronizację' : ''}
        >
          <span className="status-dot"></span>
          <span>{isOnline ? (pendingOutboxCount > 0 ? `Online (Sync: ${pendingOutboxCount})` : 'Online 🟢') : `Offline ⚠️ (${pendingOutboxCount})`}</span>
        </div>

        {/* Status NAS UNAS Pro */}
        <div className={`status-badge ${nasStatus.mounted ? '' : 'degraded'}`}>
          <span className="status-dot"></span>
          <span>{nasStatus.text}</span>
        </div>

        <button 
          type="button" 
          className="btn btn-secondary" 
          style={{ padding: '6px 12px', fontSize: '0.8rem', display: 'flex', alignItems: 'center', gap: '6px' }}
          onClick={onSubscribePush}
          title="Włącz powiadomienia przeglądarki"
        >
          🔔 <span style={{ display: window.innerWidth > 768 ? 'inline' : 'none' }}>Powiadomienia</span>
        </button>

        <button 
          type="button" 
          className="btn btn-secondary" 
          style={{ padding: '6px 10px', fontSize: '0.8rem' }}
          onClick={onOpenChangePass}
          title="Zmień hasło"
        >
          🔑
        </button>

        <button 
          type="button" 
          className="btn btn-logout" 
          style={{ padding: '6px 12px', fontSize: '0.8rem' }}
          onClick={onLogout}
        >
          Wyloguj
        </button>
      </div>
    </header>
  );
}

function IFSKpiBar() {
  return (
    <div className="ifs-kpi-bar">
      <div className="ifs-kpi-card">
        <div className="ifs-kpi-icon-wrap" style={{ background: 'rgba(56, 189, 248, 0.15)', color: '#38bdf8' }}>
          ⚡
        </div>
        <div className="ifs-kpi-info">
          <span className="ifs-kpi-value">Google 5TB</span>
          <span className="ifs-kpi-label">Dysk & Cloud Backup</span>
        </div>
      </div>

      <div className="ifs-kpi-card">
        <div className="ifs-kpi-icon-wrap" style={{ background: 'rgba(16, 185, 129, 0.15)', color: '#34d399' }}>
          🤖
        </div>
        <div className="ifs-kpi-info">
          <span className="ifs-kpi-value">Gemini AI</span>
          <span className="ifs-kpi-label">Vision OCR 100%</span>
        </div>
      </div>

      <div className="ifs-kpi-card">
        <div className="ifs-kpi-icon-wrap" style={{ background: 'rgba(168, 85, 247, 0.15)', color: '#c084fc' }}>
          📍
        </div>
        <div className="ifs-kpi-info">
          <span className="ifs-kpi-value">PWA Offline</span>
          <span className="ifs-kpi-label">Telemetria & GPS</span>
        </div>
      </div>

      <div className="ifs-kpi-card">
        <div className="ifs-kpi-icon-wrap" style={{ background: 'rgba(245, 158, 11, 0.15)', color: '#fbbf24' }}>
          🏢
        </div>
        <div className="ifs-kpi-info">
          <span className="ifs-kpi-value">UNAS Pro</span>
          <span className="ifs-kpi-label">SMB Direct NAS</span>
        </div>
      </div>
    </div>
  );
}


// LOGOWANIE / REJESTRACJA
function AuthBox({ onLoginSuccess }) {
  const [tab, setTab] = useState('login');
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [regEmail, setRegEmail] = useState('');
  const [regRole, setRegRole] = useState('WORKER');
  const [alertMsg, setAlertMsg] = useState('');

  const [infoMsg, setInfoMsg] = useState('');

  const handleLoginSubmit = async (e) => {
    e.preventDefault();
    setAlertMsg('');
    setInfoMsg('');
    try {
      const res = await apiFetch('/api/auth/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ username, password })
      });
      onLoginSuccess(res.token, res.user);
    } catch (err) {
      setAlertMsg(err.message);
    }
  };

  const handleRegisterSubmit = async (e) => {
    e.preventDefault();
    setAlertMsg('');
    setInfoMsg('');
    try {
      const res = await apiFetch('/api/auth/register', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ username, email: regEmail, password, role: regRole })
      });
      if (res.requiresVerification) {
        setInfoMsg(res.message);
        setTab('login');
      } else {
        onLoginSuccess(res.token, res.user);
      }
    } catch (err) {
      setAlertMsg(err.message);
    }
  };

  return (
    <div className="login-box" style={{ background: '#ffffff', border: '1px solid #cbd5e1', boxShadow: '0 10px 30px rgba(0,0,0,0.06)', borderRadius: '16px', padding: '36px 32px' }}>
      <div style={{ textAlign: 'center', marginBottom: '24px' }}>
        <div style={{ display: 'inline-flex', padding: '6px 14px', borderRadius: '20px', background: 'rgba(2, 132, 199, 0.1)', color: '#0284c7', fontSize: '0.75rem', fontWeight: 800, textTransform: 'uppercase', letterSpacing: '1px', marginBottom: '12px', border: '1px solid rgba(2, 132, 199, 0.25)' }}>
          ⚡ IFS Field Service Management
        </div>
        <img src="/img/logo.png" alt="MULTI-TECH PRO Logo" className="login-logo-img" style={{ height: '52px', objectFit: 'contain' }} />
        <h2 style={{ fontSize: '1.5rem', fontWeight: 800, marginTop: '8px', color: '#0284c7' }}>
          MTPRO FSM
        </h2>
        <p style={{ color: '#64748b', fontSize: '0.82rem', marginTop: '2px' }}>System Zarządzania Serwisem Terenowym & AI As-Built</p>
      </div>

      <div className="tabs" style={{ marginBottom: '20px', justifyContent: 'center', background: '#f1f5f9', padding: '4px', borderRadius: '8px', border: '1px solid #e2e8f0' }}>
        <button className={`tab-btn ${tab === 'login' ? 'active' : ''}`} onClick={() => setTab('login')} style={{ flex: 1, padding: '8px', fontSize: '0.85rem' }}>🔐 Logowanie</button>
        <button className={`tab-btn ${tab === 'register' ? 'active' : ''}`} onClick={() => setTab('register')} style={{ flex: 1, padding: '8px', fontSize: '0.85rem' }}>📝 Rejestracja</button>
      </div>

      {infoMsg && (
        <div style={{ padding: '12px', borderRadius: '8px', fontSize: '0.85rem', marginBottom: '16px', textAlign: 'center', background: 'rgba(16, 185, 129, 0.15)', color: 'var(--success)', border: '1px solid rgba(16, 185, 129, 0.3)', fontWeight: 600 }}>
          {infoMsg}
        </div>
      )}

      {alertMsg && (
        <div style={{ padding: '10px', borderRadius: '8px', fontSize: '0.85rem', marginBottom: '16px', textAlign: 'center', background: 'rgba(239, 68, 68, 0.15)', color: 'var(--danger)', border: '1px solid rgba(239, 68, 68, 0.3)' }}>
          {alertMsg}
        </div>
      )}

      {tab === 'login' ? (
        <form onSubmit={handleLoginSubmit}>
          <div className="form-group">
            <label>Nazwa Użytkownika</label>
            <input type="text" className="form-control" placeholder="np. pracownik / admin / klient" value={username} onChange={e => setUsername(e.target.value)} required />
          </div>
          <div className="form-group">
            <label>Hasło</label>
            <input type="password" className="form-control" placeholder="••••••••" value={password} onChange={e => setPassword(e.target.value)} required />
          </div>
          <button type="submit" className="btn btn-primary" style={{ width: '100%', marginTop: '10px' }}>Zaloguj się</button>
        </form>
      ) : (
        <form onSubmit={handleRegisterSubmit}>
          <div className="form-group">
            <label>Nazwa Użytkownika</label>
            <input type="text" className="form-control" placeholder="Wyznacz nazwę użytkownika" value={username} onChange={e => setUsername(e.target.value)} required />
          </div>
          <div className="form-group">
            <label>Adres E-mail</label>
            <input type="email" className="form-control" placeholder="szymon@multi-tech.pro" value={regEmail} onChange={e => setRegEmail(e.target.value)} required />
          </div>
          <div className="form-group">
            <label>Hasło</label>
            <input type="password" className="form-control" placeholder="Utwórz bezpieczne hasło" value={password} onChange={e => setPassword(e.target.value)} required />
          </div>
          <div className="form-group">
            <label>Rola Konta</label>
            <select className="form-control" value={regRole} onChange={e => setRegRole(e.target.value)}>
              <option value="WORKER">Pracownik Terenowy (Monter / Inżynier)</option>
              <option value="CLIENT">Klient Zewnętrzny / Audytor</option>
            </select>
          </div>
          <button type="submit" className="btn btn-primary" style={{ width: '100%', marginTop: '10px' }}>Utwórz Konto i Zaloguj</button>
        </form>
      )}

      <div style={{ marginTop: '20px', fontSize: '0.75rem', color: 'var(--text-muted)', textAlign: 'center' }}>
        <p><strong>Domyślne konta startowe:</strong></p>
        <p>Kierownik: <code>admin</code> / <code>admin123</code></p>
        <p>Pracownik: <code>pracownik</code> / <code>worker123</code></p>
        <p>Klient: <code>klient</code> / <code>client123</code></p>
      </div>
    </div>
  );
}

// ─── FAZA 3: KATALOG PASZPORTÓW OBIEKTÓW & EWIDENCJA DRZEWA SPRZĘTOWEGO ──────
function SitesDirectoryModal({ token, user, onClose, onSelectSiteForProject }) {
  const [sites, setSites] = useState([]);
  const [search, setSearch] = useState('');
  const [selectedSite, setSelectedSite] = useState(null);
  const [loading, setLoading] = useState(false);
  const [showNewSiteForm, setShowNewSiteForm] = useState(false);
  const [newSite, setNewSite] = useState({
    code: '', name: '', operator: 'TMPL', address: '', city: '',
    access_codes: '', key_safe_info: '', contact_person: '', contact_phone: '', remarks: ''
  });

  // Nowy stan dla dodawania sprzętu do obiektu
  const [newAsset, setNewAsset] = useState({
    category: 'Prostownik', manufacturer: 'Enetek', model: 'ETR+ 3048', serial_number: '', slot_number: 'Slot 1', notes: ''
  });
  const [addingAsset, setAddingAsset] = useState(false);

  const fetchSites = async () => {
    setLoading(true);
    try {
      const data = await apiFetch('/api/sites', {}, token);
      setSites(data);
      if (selectedSite) {
        const updated = await apiFetch(`/api/sites/${selectedSite.id}`, {}, token);
        setSelectedSite(updated);
      }
    } catch (e) {
      showToast(e.message, 'error');
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchSites();
  }, []);

  const handleSelectSite = async (siteId) => {
    try {
      const details = await apiFetch(`/api/sites/${siteId}`, {}, token);
      setSelectedSite(details);
    } catch (e) {
      showToast(e.message, 'error');
    }
  };

  const handleCreateSite = async (e) => {
    e.preventDefault();
    if (!newSite.code || !newSite.name) {
      showToast('Wpisz numer/kod i nazwę stacji!', 'warning');
      return;
    }
    try {
      await apiFetch('/api/sites', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(newSite)
      }, token);
      showToast('✅ Paszport stacji został utworzony!', 'success');
      setShowNewSiteForm(false);
      setNewSite({ code: '', name: '', operator: 'TMPL', address: '', city: '', access_codes: '', key_safe_info: '', contact_person: '', contact_phone: '', remarks: '' });
      fetchSites();
    } catch (err) {
      showToast(err.message, 'error');
    }
  };

  const handleAddAsset = async (e) => {
    e.preventDefault();
    if (!selectedSite || !newAsset.model || !newAsset.serial_number) {
      showToast('Wpisz model i numer seryjny urządzenia!', 'warning');
      return;
    }
    try {
      await apiFetch(`/api/sites/${selectedSite.id}/assets`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(newAsset)
      }, token);
      showToast(`✅ Dodano ${newAsset.model} (S/N: ${newAsset.serial_number}) do drzewa sprzętowego!`, 'success');
      setNewAsset({ category: 'Prostownik', manufacturer: 'Enetek', model: 'ETR+ 3048', serial_number: '', slot_number: 'Slot 1', notes: '' });
      setAddingAsset(false);
      handleSelectSite(selectedSite.id);
    } catch (err) {
      showToast(err.message, 'error');
    }
  };

  const filteredSites = sites.filter(s => 
    s.code.toLowerCase().includes(search.toLowerCase()) ||
    s.name.toLowerCase().includes(search.toLowerCase()) ||
    (s.city && s.city.toLowerCase().includes(search.toLowerCase()))
  );

  return (
    <div className="modal-backdrop">
      <div className="modal" style={{ maxWidth: '900px', width: '95%', maxHeight: '90vh', display: 'flex', flexDirection: 'column' }}>
        <div className="modal-header">
          <h3 style={{ margin: 0, fontWeight: 800, color: '#38bdf8' }}>🏢 Paszportyzacja Obiektów & Ewidencja Sprzętu (GIS)</h3>
          <button type="button" className="btn-close" onClick={onClose}>✕</button>
        </div>

        <div style={{ padding: '16px', overflowY: 'auto', flex: 1 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', gap: '10px', marginBottom: '16px', flexWrap: 'wrap' }}>
            <input 
              type="text" 
              className="form-control" 
              style={{ flex: 1, minWidth: '220px' }} 
              placeholder="🔍 Szukaj stacji po kodzie (np. 51482), nazwie lub mieście..." 
              value={search} 
              onChange={e => setSearch(e.target.value)} 
            />
            <button 
              type="button" 
              className="btn btn-primary" 
              style={{ padding: '8px 16px', fontSize: '0.85rem', fontWeight: 700 }}
              onClick={() => { setShowNewSiteForm(!showNewSiteForm); setSelectedSite(null); }}
            >
              {showNewSiteForm ? '▲ Zwiń Formularz' : '+ Nowy Paszport Obiektu'}
            </button>
          </div>

          {showNewSiteForm && (
            <form onSubmit={handleCreateSite} style={{ background: '#0f172a', padding: '16px', borderRadius: '10px', border: '1px solid var(--primary)', marginBottom: '20px' }}>
              <h4 style={{ margin: '0 0 12px 0', color: 'var(--secondary)' }}>➕ Rejestracja Nowego Obiektu / Stacji Bazowej</h4>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '10px' }}>
                <div className="form-group">
                  <label>Numer / Kod Stacji *</label>
                  <input type="text" className="form-control" placeholder="np. 51482" value={newSite.code} onChange={e => setNewSite({ ...newSite, code: e.target.value })} required />
                </div>
                <div className="form-group">
                  <label>Pełna Nazwa Stacji *</label>
                  <input type="text" className="form-control" placeholder="np. TMPL_51482_KRAKOW_CENTRUM" value={newSite.name} onChange={e => setNewSite({ ...newSite, name: e.target.value })} required />
                </div>
                <div className="form-group">
                  <label>Operator</label>
                  <select className="form-control" value={newSite.operator} onChange={e => setNewSite({ ...newSite, operator: e.target.value })}>
                    <option value="TMPL">T-Mobile (TMPL)</option>
                    <option value="ORANGE">Orange</option>
                    <option value="PLAY">Play / P4</option>
                    <option value="PLUS">Plus / Polkomtel</option>
                    <option value="OTHER">Inny Operator</option>
                  </select>
                </div>
                <div className="form-group">
                  <label>Miejscowość / Miasto</label>
                  <input type="text" className="form-control" placeholder="np. Kraków" value={newSite.city} onChange={e => setNewSite({ ...newSite, city: e.target.value })} />
                </div>
              </div>

              <div className="form-group" style={{ marginTop: '10px' }}>
                <label>Dokładny Adres</label>
                <input type="text" className="form-control" placeholder="ul. Wielicka 72" value={newSite.address} onChange={e => setNewSite({ ...newSite, address: e.target.value })} />
              </div>

              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px', marginTop: '10px' }}>
                <div className="form-group">
                  <label>🔐 Kody Wejścia (Bramy / Domofon / Kłódki)</label>
                  <input type="text" className="form-control" placeholder="np. Brama: 4589#, Szafa: klucz 24A" value={newSite.access_codes} onChange={e => setNewSite({ ...newSite, access_codes: e.target.value })} />
                </div>
                <div className="form-group">
                  <label>🔑 Depozytor Kluczy (Key Safe PIN)</label>
                  <input type="text" className="form-control" placeholder="np. Sejf przy portierni (PIN: 1984)" value={newSite.key_safe_info} onChange={e => setNewSite({ ...newSite, key_safe_info: e.target.value })} />
                </div>
              </div>

              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px', marginTop: '10px' }}>
                <div className="form-group">
                  <label>👤 Osoba Kontaktowa (Zarządca / Ochrona)</label>
                  <input type="text" className="form-control" placeholder="Jan Kowalski (Zarządca)" value={newSite.contact_person} onChange={e => setNewSite({ ...newSite, contact_person: e.target.value })} />
                </div>
                <div className="form-group">
                  <label>📞 Telefon Kontaktowy</label>
                  <input type="text" className="form-control" placeholder="+48 600 100 200" value={newSite.contact_phone} onChange={e => setNewSite({ ...newSite, contact_phone: e.target.value })} />
                </div>
              </div>

              <div className="form-group" style={{ marginTop: '10px' }}>
                <label>📝 Dodatkowe Uwagi / Procedura Awizacji</label>
                <textarea className="form-control" rows="2" placeholder="Wymagana awizacja 24h przed wejściem..." value={newSite.remarks} onChange={e => setNewSite({ ...newSite, remarks: e.target.value })} />
              </div>

              <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '10px', marginTop: '14px' }}>
                <button type="button" className="btn btn-secondary" onClick={() => setShowNewSiteForm(false)}>Anuluj</button>
                <button type="submit" className="btn btn-primary">Zapisz Paszport Stacji</button>
              </div>
            </form>
          )}

          {/* PODZIAŁ: LISTA STACJI + KARTA SZCZEGÓŁÓW / DRZEWO SPRZĘTOWE */}
          <div style={{ display: 'grid', gridTemplateColumns: selectedSite ? '1fr 1.4fr' : '1fr', gap: '16px' }}>
            {/* LISTA STACJI */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
              <div style={{ fontSize: '0.8rem', color: 'var(--text-muted)', fontWeight: 700 }}>
                Zarejestrowane obiekty ({filteredSites.length}):
              </div>
              {filteredSites.map(s => (
                <div 
                  key={s.id} 
                  onClick={() => handleSelectSite(s.id)}
                  style={{ 
                    padding: '12px 14px', 
                    borderRadius: '8px', 
                    background: selectedSite?.id === s.id ? 'rgba(37, 99, 235, 0.25)' : 'rgba(30, 41, 59, 0.7)',
                    border: selectedSite?.id === s.id ? '1.5px solid var(--primary)' : '1px solid var(--card-border)',
                    cursor: 'pointer',
                    transition: 'all 0.15s ease'
                  }}
                >
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                    <strong style={{ color: '#fff', fontSize: '0.95rem' }}>{s.code}</strong>
                    <span style={{ fontSize: '0.7rem', padding: '2px 6px', borderRadius: '4px', background: 'rgba(56, 189, 248, 0.15)', color: '#38bdf8', fontWeight: 700 }}>{s.operator}</span>
                  </div>
                  <div style={{ fontSize: '0.82rem', color: 'var(--secondary)', marginTop: '2px', fontWeight: 600 }}>{s.name}</div>
                  <div style={{ fontSize: '0.74rem', color: 'var(--text-muted)', marginTop: '2px' }}>
                    📍 {s.city || 'Brak miasta'} {s.address ? `• ${s.address}` : ''}
                  </div>
                </div>
              ))}
            </div>

            {/* KARTA SZCZEGÓŁÓW I DRZEWO SPRZĘTOWE */}
            {selectedSite && (
              <div style={{ background: '#0f172a', padding: '16px', borderRadius: '10px', border: '1px solid var(--card-border)', fontSize: '0.85rem' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderBottom: '1px solid var(--card-border)', paddingBottom: '10px' }}>
                  <div>
                    <h3 style={{ margin: 0, color: '#38bdf8', fontSize: '1.1rem' }}>{selectedSite.name}</h3>
                    <div style={{ fontSize: '0.78rem', color: 'var(--text-muted)' }}>Kod ID: <strong>{selectedSite.code}</strong> | Operator: <strong>{selectedSite.operator}</strong></div>
                  </div>
                  <button className="btn btn-secondary" style={{ padding: '4px 8px', fontSize: '0.75rem' }} onClick={() => setSelectedSite(null)}>✕ Zwiń</button>
                </div>

                {/* PROCEDURY WEJŚCIA I KODY */}
                <div style={{ marginTop: '12px', background: 'rgba(30, 41, 59, 0.8)', padding: '12px', borderRadius: '8px', border: '1px solid rgba(245, 158, 11, 0.3)' }}>
                  <div style={{ fontSize: '0.8rem', fontWeight: 800, color: 'var(--warning)', marginBottom: '6px' }}>🔐 DANE DOSTĘPOWE I PROCEDURY WEJŚCIA:</div>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: '4px', fontSize: '0.8rem' }}>
                    <div>🚪 <strong>Kody zamków / bram:</strong> <span style={{ color: '#fff' }}>{selectedSite.access_codes || 'Brak danych'}</span></div>
                    <div>🔑 <strong>Depozytor kluczy:</strong> <span style={{ color: '#fff' }}>{selectedSite.key_safe_info || 'Brak danych'}</span></div>
                    <div>👤 <strong>Zarządca / Kontakt:</strong> <span style={{ color: '#fff' }}>{selectedSite.contact_person || '—'} {selectedSite.contact_phone ? `(${selectedSite.contact_phone})` : ''}</span></div>
                    {selectedSite.remarks && (
                      <div style={{ marginTop: '4px', color: '#e2e8f0', fontStyle: 'italic' }}>ℹ️ {selectedSite.remarks}</div>
                    )}
                  </div>
                </div>

                {/* DRZEWO SPRZĘTOWE OBIEKTU (ASSET MANAGEMENT) */}
                <div style={{ marginTop: '16px' }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '8px' }}>
                    <div style={{ fontSize: '0.85rem', fontWeight: 800, color: '#4ade80' }}>
                      🗄️ Drzewo Sprzętowe Obiektu ({selectedSite.assets?.length || 0} urządzeń):
                    </div>
                    <button 
                      type="button" 
                      className="btn btn-secondary" 
                      style={{ padding: '3px 8px', fontSize: '0.75rem', color: '#4ade80', borderColor: 'rgba(74, 222, 128, 0.4)' }}
                      onClick={() => setAddingAsset(!addingAsset)}
                    >
                      {addingAsset ? '▲ Anuluj' : '+ Dodaj Urządzenie'}
                    </button>
                  </div>

                  {addingAsset && (
                    <form onSubmit={handleAddAsset} style={{ background: 'rgba(15, 23, 42, 0.95)', padding: '12px', borderRadius: '8px', border: '1px solid #4ade80', marginBottom: '12px' }}>
                      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '8px' }}>
                        <div className="form-group">
                          <label style={{ fontSize: '0.75rem' }}>Kategoria</label>
                          <select className="form-control" style={{ padding: '4px 8px', fontSize: '0.78rem' }} value={newAsset.category} onChange={e => setNewAsset({ ...newAsset, category: e.target.value })}>
                            <option value="Prostownik">Prostownik / Moduł DC</option>
                            <option value="Siłownia">Siłownia Telekomunikacyjna</option>
                            <option value="Sterownik">Sterownik / Kontroler</option>
                            <option value="Licznik">Licznik Energii</option>
                            <option value="Bateria">Bateria Akumulatorów</option>
                          </select>
                        </div>
                        <div className="form-group">
                          <label style={{ fontSize: '0.75rem' }}>Producent</label>
                          <input type="text" className="form-control" style={{ padding: '4px 8px', fontSize: '0.78rem' }} placeholder="Enetek / TELZAS / Eltek" value={newAsset.manufacturer} onChange={e => setNewAsset({ ...newAsset, manufacturer: e.target.value })} />
                        </div>
                        <div className="form-group">
                          <label style={{ fontSize: '0.75rem' }}>Model *</label>
                          <input type="text" className="form-control" style={{ padding: '4px 8px', fontSize: '0.78rem' }} placeholder="ETR+ 3048" value={newAsset.model} onChange={e => setNewAsset({ ...newAsset, model: e.target.value })} required />
                        </div>
                        <div className="form-group">
                          <label style={{ fontSize: '0.75rem' }}>Numer Seryjny (S/N) *</label>
                          <input type="text" className="form-control" style={{ padding: '4px 8px', fontSize: '0.78rem' }} placeholder="np. 362125014" value={newAsset.serial_number} onChange={e => setNewAsset({ ...newAsset, serial_number: e.target.value })} required />
                        </div>
                      </div>
                      <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '6px', marginTop: '8px' }}>
                        <button type="button" className="btn btn-secondary" style={{ padding: '4px 10px', fontSize: '0.75rem' }} onClick={() => setAddingAsset(false)}>Anuluj</button>
                        <button type="submit" className="btn btn-primary" style={{ padding: '4px 10px', fontSize: '0.75rem' }}>Zapisz w Paszporcie</button>
                      </div>
                    </form>
                  )}

                  <div style={{ display: 'flex', flexDirection: 'column', gap: '6px', maxHeight: '200px', overflowY: 'auto' }}>
                    {(!selectedSite.assets || selectedSite.assets.length === 0) ? (
                      <div style={{ color: 'var(--text-muted)', fontSize: '0.78rem', fontStyle: 'italic' }}>Brak zarejestrowanych urządzeń na tym obiekcie.</div>
                    ) : (
                      selectedSite.assets.map(a => (
                        <div key={a.id} style={{ background: 'rgba(30, 41, 59, 0.6)', padding: '8px 10px', borderRadius: '6px', border: '1px solid rgba(255,255,255,0.05)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                          <div>
                            <span style={{ fontWeight: 700, color: '#fff' }}>{a.model}</span> <span style={{ fontSize: '0.74rem', color: 'var(--text-muted)' }}>({a.manufacturer || a.category})</span>
                            <div style={{ fontSize: '0.74rem', color: '#38bdf8', fontFamily: 'monospace' }}>S/N: {a.serial_number} {a.slot_number ? `• ${a.slot_number}` : ''}</div>
                          </div>
                          <span style={{ fontSize: '0.7rem', padding: '2px 6px', borderRadius: '10px', background: a.status === 'ACTIVE' ? 'rgba(34, 197, 94, 0.2)' : 'rgba(239, 68, 68, 0.2)', color: a.status === 'ACTIVE' ? '#4ade80' : '#f87171' }}>
                            {a.status === 'ACTIVE' ? '🟢 Aktywny' : '🔴 Zdemontowany'}
                          </span>
                        </div>
                      ))
                    )}
                  </div>
                </div>
              </div>
            )}
          </div>
        </div>

        <div className="modal-actions">
          <button type="button" className="btn btn-secondary" onClick={onClose}>Zamknij</button>
        </div>
      </div>
    </div>
  );
}

// ─── FAZA 3: MAGAZYN PODRĘCZNY W AUCIE SERWISOWYM (VAN INVENTORY) ───────────
function VanInventoryModal({ token, user, onClose }) {
  const [items, setItems] = useState([]);
  const [loading, setLoading] = useState(false);
  const [newItem, setNewItem] = useState({ item_name: '', category: 'Moduł', serial_number: '', quantity: 1, van_plate: 'AUTO-01' });
  const [showAddForm, setShowAddForm] = useState(false);

  const fetchInventory = async () => {
    setLoading(true);
    try {
      const data = await apiFetch('/api/van-inventory', {}, token);
      setItems(data);
    } catch (e) {
      showToast(e.message, 'error');
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchInventory();
  }, []);

  const handleAddItem = async (e) => {
    e.preventDefault();
    if (!newItem.item_name) return;
    try {
      await apiFetch('/api/van-inventory/transfer', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(newItem)
      }, token);
      showToast('✅ Dodano element do magazynu auta!', 'success');
      setShowAddForm(false);
      setNewItem({ item_name: '', category: 'Moduł', serial_number: '', quantity: 1, van_plate: 'AUTO-01' });
      fetchInventory();
    } catch (err) {
      showToast(err.message, 'error');
    }
  };

  return (
    <div className="modal-backdrop">
      <div className="modal" style={{ maxWidth: '650px', width: '95%' }}>
        <div className="modal-header">
          <h3 style={{ margin: 0, fontWeight: 800, color: '#38bdf8' }}>🚐 Magazyn Podręczny w Samochodzie Serwisowym</h3>
          <button type="button" className="btn-close" onClick={onClose}>✕</button>
        </div>

        <div style={{ padding: '16px' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '14px' }}>
            <div style={{ fontSize: '0.85rem', color: 'var(--text-muted)' }}>
              Stan części i podzespołów w pojeździe:
            </div>
            <button 
              type="button" 
              className="btn btn-primary" 
              style={{ padding: '6px 12px', fontSize: '0.8rem', fontWeight: 700 }}
              onClick={() => setShowAddForm(!showAddForm)}
            >
              {showAddForm ? '▲ Anuluj' : '+ Dodaj Część / Prostownik do Auta'}
            </button>
          </div>

          {showAddForm && (
            <form onSubmit={handleAddItem} style={{ background: '#0f172a', padding: '14px', borderRadius: '8px', border: '1px solid var(--primary)', marginBottom: '16px' }}>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '8px' }}>
                <div className="form-group">
                  <label style={{ fontSize: '0.75rem' }}>Nazwa Części / Modułu *</label>
                  <input type="text" className="form-control" placeholder="np. Prostownik ETR+ 3048" value={newItem.item_name} onChange={e => setNewItem({ ...newItem, item_name: e.target.value })} required />
                </div>
                <div className="form-group">
                  <label style={{ fontSize: '0.75rem' }}>Kategoria</label>
                  <select className="form-control" value={newItem.category} onChange={e => setNewItem({ ...newItem, category: e.target.value })}>
                    <option value="Prostownik">Prostownik DC</option>
                    <option value="Pakiet Modernizacyjny">Pakiet Modernizacyjny</option>
                    <option value="Licznik">Licznik Energii</option>
                    <option value="Kable/Bezpieczniki">Kable / Bezpieczniki</option>
                  </select>
                </div>
                <div className="form-group">
                  <label style={{ fontSize: '0.75rem' }}>Numer Seryjny (S/N)</label>
                  <input type="text" className="form-control" placeholder="np. 362125033" value={newItem.serial_number} onChange={e => setNewItem({ ...newItem, serial_number: e.target.value })} />
                </div>
                <div className="form-group">
                  <label style={{ fontSize: '0.75rem' }}>Nr Rejestracyjny Samochodu</label>
                  <input type="text" className="form-control" placeholder="KR 4920X" value={newItem.van_plate} onChange={e => setNewItem({ ...newItem, van_plate: e.target.value })} />
                </div>
              </div>
              <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '6px', marginTop: '10px' }}>
                <button type="button" className="btn btn-secondary" style={{ padding: '4px 10px', fontSize: '0.75rem' }} onClick={() => setShowAddForm(false)}>Anuluj</button>
                <button type="submit" className="btn btn-primary" style={{ padding: '4px 10px', fontSize: '0.75rem' }}>Zapisz w Aucie</button>
              </div>
            </form>
          )}

          <div style={{ display: 'flex', flexDirection: 'column', gap: '8px', maxHeight: '300px', overflowY: 'auto' }}>
            {items.length === 0 ? (
              <div style={{ color: 'var(--text-muted)', fontSize: '0.85rem', textAlign: 'center', padding: '20px' }}>
                Brak pozycji w podręcznym magazynie samochodu.
              </div>
            ) : (
              items.map(item => (
                <div key={item.id} style={{ background: 'rgba(30, 41, 59, 0.8)', padding: '10px 14px', borderRadius: '8px', border: '1px solid var(--card-border)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <div>
                    <strong style={{ color: '#fff' }}>{item.item_name}</strong>
                    <div style={{ fontSize: '0.74rem', color: 'var(--secondary)', marginTop: '2px' }}>
                      Kategoria: {item.category} {item.serial_number ? `| S/N: ${item.serial_number}` : ''}
                    </div>
                    <div style={{ fontSize: '0.7rem', color: 'var(--text-muted)' }}>
                      Auto: <strong>{item.van_plate || 'Pojazd Serwisowy'}</strong> • Technik: {item.worker_name || user.username}
                    </div>
                  </div>
                  <span style={{ padding: '3px 8px', borderRadius: '12px', fontSize: '0.72rem', background: 'rgba(16, 185, 129, 0.2)', color: '#4ade80', fontWeight: 700 }}>
                    📦 Na aucie ({item.quantity} szt.)
                  </span>
                </div>
              ))
            )}
          </div>
        </div>

        <div className="modal-actions">
          <button type="button" className="btn btn-secondary" onClick={onClose}>Zamknij</button>
        </div>
      </div>
    </div>
  );
}

// ─── CYFROWY PODPIS ODBIORCY (HTML5 Canvas Sign-on-Glass) ───────────────────
function SignatureModal({ signerName, onClose, onSave }) {
  const canvasRef = React.useRef(null);
  const [isDrawing, setIsDrawing] = React.useState(false);
  const [hasSignature, setHasSignature] = React.useState(false);
  const [name, setName] = React.useState(signerName || '');

  React.useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    ctx.lineWidth = 2.5;
    ctx.lineCap = 'round';
    ctx.lineJoin = 'round';
    ctx.strokeStyle = '#0284c7';
  }, []);

  const getPos = (e) => {
    const canvas = canvasRef.current;
    const rect = canvas.getBoundingClientRect();
    const clientX = e.touches ? e.touches[0].clientX : e.clientX;
    const clientY = e.touches ? e.touches[0].clientY : e.clientY;
    return {
      x: (clientX - rect.left) * (canvas.width / rect.width),
      y: (clientY - rect.top) * (canvas.height / rect.height)
    };
  };

  const startDraw = (e) => {
    e.preventDefault();
    setIsDrawing(true);
    const pos = getPos(e);
    const ctx = canvasRef.current.getContext('2d');
    ctx.beginPath();
    ctx.moveTo(pos.x, pos.y);
  };

  const draw = (e) => {
    if (!isDrawing) return;
    e.preventDefault();
    const pos = getPos(e);
    const ctx = canvasRef.current.getContext('2d');
    ctx.lineTo(pos.x, pos.y);
    ctx.stroke();
    setHasSignature(true);
  };

  const stopDraw = (e) => {
    if (isDrawing) {
      e.preventDefault();
      setIsDrawing(false);
    }
  };

  const clearCanvas = () => {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    setHasSignature(false);
  };

  const handleConfirm = () => {
    if (!hasSignature) {
      showToast('Złóż podpis na wyznaczonym polu przed zatwierdzeniem!', 'warning');
      return;
    }
    const canvas = canvasRef.current;
    const dataUrl = canvas.toDataURL('image/png');
    onSave(dataUrl, name);
  };

  return (
    <div className="modal-backdrop">
      <div className="modal" style={{ maxWidth: '520px' }}>
        <div className="modal-header">
          <h3 style={{ margin: 0, fontWeight: 800, color: '#38bdf8' }}>✍️ Cyfrowy Podpis Odbiorcy (Sign-on-Glass)</h3>
          <button type="button" className="btn-close" onClick={onClose}>✕</button>
        </div>
        <div style={{ padding: '16px' }}>
          <div className="form-group" style={{ marginBottom: '12px' }}>
            <label style={{ fontWeight: 700, color: 'var(--secondary)' }}>Imię i Nazwisko Osoby Podpisującej:</label>
            <input 
              type="text" 
              className="form-control" 
              value={name} 
              onChange={e => setName(e.target.value)} 
              placeholder="np. Jan Kowalski (Inspektor Nadzoru / Klient)" 
            />
          </div>

          <div style={{ fontSize: '0.8rem', color: 'var(--text-muted)', marginBottom: '8px' }}>
            Złóż podpis palcem lub rysikiem w ramce poniżej:
          </div>

          <div style={{ background: '#ffffff', borderRadius: '8px', padding: '4px', border: '2px dashed var(--primary)', touchAction: 'none' }}>
            <canvas 
              ref={canvasRef} 
              width={480} 
              height={200} 
              style={{ width: '100%', height: '180px', display: 'block', cursor: 'crosshair', background: '#ffffff', borderRadius: '4px' }}
              onMouseDown={startDraw}
              onMouseMove={draw}
              onMouseUp={stopDraw}
              onMouseLeave={stopDraw}
              onTouchStart={startDraw}
              onTouchMove={draw}
              onTouchEnd={stopDraw}
            />
          </div>

          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: '10px' }}>
            <button type="button" className="btn btn-secondary" style={{ padding: '4px 10px', fontSize: '0.8rem' }} onClick={clearCanvas}>
              🗑️ Wyczyść podpis
            </button>
            <span style={{ fontSize: '0.74rem', color: '#64748b' }}>Podpis zostanie osadzony w protokole PDF</span>
          </div>
        </div>

        <div className="modal-actions">
          <button type="button" className="btn btn-secondary" onClick={onClose}>Anuluj</button>
          <button type="button" className="btn btn-primary" onClick={handleConfirm}>
            💾 Zapisz Podpis Odbiorcy
          </button>
        </div>
      </div>
    </div>
  );
}

// WIDOK PRACOWNIKA TERENOWEGO
function WorkerView({ token, user, onOpenNewProject, openLightbox }) {
  const [projects, setProjects] = useState([]);
  const [selectedProjectId, setSelectedProjectId] = useState('');
  const [projectDetails, setProjectDetails] = useState(null);
  const [categories, setCategories] = useState([]);
  const [selectedCatId, setSelectedCatId] = useState(null);
  const [photos, setPhotos] = useState([]);
  const [notes, setNotes] = useState('');
  const [tags, setTags] = useState('');
  const [uploadStatus, setUploadStatus] = useState('');
  const [wakeLock, setWakeLock] = useState(null);
  const [selectedPhotoIds, setSelectedPhotoIds] = useState(new Set());
  const [targetBatchCatId, setTargetBatchCatId] = useState('');
  const [galleryFilter, setGalleryFilter] = useState('all');
  const [photosLoading, setPhotosLoading] = useState(false);

  useEffect(() => {
    apiFetch('/api/categories', {}, token).then(cats => {
      setCategories(cats);
      if (cats.length > 0) setSelectedCatId(cats[0].id);
    }).catch(console.error);

    apiFetch('/api/projects', {}, token).then(setProjects).catch(console.error);
  }, [token]);

  const loadProject = async (pid) => {
    if (!pid || typeof pid === 'object' || pid === 'undefined' || pid === 'null') {
      setProjectDetails(null);
      setPhotos([]);
      return;
    }
    setSelectedProjectId(pid);
    try {
      const details = await apiFetch(`/api/projects/${pid}`, {}, token);
      setProjectDetails(details);
      fetchPhotos(pid);
    } catch (e) {
      showToast('Błąd ładowania: ' + e.message, 'error');
    }
  };


  const fetchPhotos = async (pid) => {
    setPhotosLoading(true);
    try {
      const phs = await apiFetch(`/api/photos?project_id=${pid}`, {}, token);
      setPhotos(phs);
    } catch (e) {
      console.error(e);
    } finally {
      setPhotosLoading(false);
    }
  };

  // Refy trzymające natychmiastowe aktualne wartości bez opóźnień rerenderu Reacta
  const queueRef = React.useRef([]);
  const isRunningRef = React.useRef(false);

  const requestWakeLock = async () => {
    try {
      if ('wakeLock' in navigator && !wakeLock) {
        const lock = await navigator.wakeLock.request('screen');
        setWakeLock(lock);
      }
    } catch (err) {}
  };

  const releaseWakeLock = () => {
    if (wakeLock) {
      wakeLock.release().then(() => setWakeLock(null)).catch(() => {});
    }
  };

  const handleFileUpload = async (e, catId, catName) => {
    const rawFiles = e.target.files ? Array.from(e.target.files) : [];
    if (rawFiles.length === 0) return;
    if (!selectedProjectId) {
      showToast('Wybierz najpierw zlecenie z listy powyżej!', 'warning');
      return;
    }

    // Kompresja zdjęć przed uploadem (max 1920px, JPEG 85%)
    const imgCount = rawFiles.filter(f => f.type.startsWith('image/')).length;
    if (imgCount > 0) setUploadStatus(`🗜️ Kompresowanie ${imgCount} zdjęć...`);
    const files = await Promise.all(rawFiles.map(f => compressImage(f)));
    if (imgCount > 0) {
      const before = rawFiles.reduce((s,f) => s+f.size, 0);
      const after = files.reduce((s,f) => s+f.size, 0);
      const pct = Math.round((1 - after/before)*100);
      if (pct > 5) showToast(`Skompresowano ${imgCount} zdjęć — zaoszczędzono ${pct}% (${(( before-after)/1024/1024).toFixed(1)} MB)`, 'info');
    }

    // Dzielimy pliki na małe porcje po 3 zdjęcia
    const CHUNK_SIZE = 3;
    const newChunks = [];

    for (let i = 0; i < files.length; i += CHUNK_SIZE) {
      const chunkFiles = files.slice(i, i + CHUNK_SIZE);
      newChunks.push({
        catId,
        catName,
        files: chunkFiles,
        chunkIndex: Math.floor(i / CHUNK_SIZE) + 1,
        totalChunks: Math.ceil(files.length / CHUNK_SIZE),
        notes,
        tags,
        projectId: selectedProjectId,
        retryCount: 0
      });
    }

    // Dodajemy nowe paczki do refu kolejki
    queueRef.current.push(...newChunks);
    e.target.value = ''; // Reset u wyboru w pliku

    // Jeśli pętla procesora jeszcze nie działa, uruchamiamy ją
    if (!isRunningRef.current) {
      startQueueRunner();
    }
  };

  const startQueueRunner = async () => {
    if (isRunningRef.current) return;
    isRunningRef.current = true;
    await requestWakeLock();

    while (queueRef.current.length > 0) {
      const currentItem = queueRef.current[0];
      const isRetry = (currentItem.retryCount || 0) > 0;
      const retryTag = isRetry ? ` 🔄 [Ponawianie próby ${currentItem.retryCount}/3]` : '';
      
      const progressText = currentItem.totalChunks > 1
        ? `⚡ Paczka ${currentItem.chunkIndex}/${currentItem.totalChunks} (${currentItem.files.length} szt.) w kategorii "${currentItem.catName}"${retryTag}... [Pozostało paczek w kolejce: ${queueRef.current.length}]`
        : `⚡ Wgrywanie ${currentItem.files.length} zdjęć w kategorii "${currentItem.catName}"${retryTag}... [Pozostało paczek: ${queueRef.current.length}]`;

      setUploadStatus(progressText);

      const formData = new FormData();
      formData.append('project_id', currentItem.projectId);
      if (currentItem.catId) formData.append('category_id', currentItem.catId);
      formData.append('notes', currentItem.notes || '');
      formData.append('tags', currentItem.tags || '');
      currentItem.files.forEach(f => formData.append('photos', f));

      let isSuccess = false;

      try {
        const res = await fetch('/api/photos/upload', {
          method: 'POST',
          headers: { 'Authorization': `Bearer ${token}` },
          body: formData
        });
        const data = await res.json();
        if (!res.ok) throw new Error(data.error || 'Błąd wgrywania paczki');

        fetchPhotos(currentItem.projectId);
        isSuccess = true;
      } catch (err) {
        console.error('Błąd wysyłki paczki:', err);
      }

      if (isSuccess) {
        // Usuwamy udaną paczkę z przodu kolejki
        queueRef.current.shift();
      } else {
        // Obsługa błędu - ponawianie do 3 razy
        const head = queueRef.current.shift();
        const retries = (head.retryCount || 0) + 1;
        if (retries <= 3) {
          setUploadStatus(`⚠️ Chwilowy błąd w paczce "${head.catName}". Przesuwam na koniec (Próba ${retries}/3)...`);
          queueRef.current.push({ ...head, retryCount: retries });
          await new Promise(r => setTimeout(r, 1500)); // Krótka pauza przed ponowieniem
        } else {
          setUploadStatus(`❌ Nie udało się wgrać paczki 3 zdjęć w kategorii "${head.catName}" po 3 próbach.`);
          await new Promise(r => setTimeout(r, 2000));
        }
      }
    }

    // Ukończono całą kolejkę
    isRunningRef.current = false;
    setUploadStatus('✅ Wszystkie zdjęcia z kolejki zostały wgrane!');
    setTimeout(() => setUploadStatus(''), 4000);
    releaseWakeLock();
  };

  const handleDeletePhoto = async (photoId, name) => {
    if (!confirm(`Czy na pewno chcesz usunąć zdjęcie "${name}"?`)) return;
    try {
      await apiFetch(`/api/photos/${photoId}`, { method: 'DELETE' }, token);
      fetchPhotos(selectedProjectId);
    } catch (err) {
      showToast(err.message, 'error');
    }
  };

  const [projectRemarks, setProjectRemarks] = useState('');
  const [completionDate, setCompletionDate] = useState(() => new Date().toISOString().split('T')[0]);
  const [isListening, setIsListening] = useState(false);
  const [ghostPhotoUrl, setGhostPhotoUrl] = useState(null);
  const [showOcrModal, setShowOcrModal] = useState(false);

  const startVoiceDictation = () => {
    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
    if (!SpeechRecognition) {
      showToast('Twoja przeglądarka nie wspiera dyktowania głosowego (użyj Chrome/Edge/Safari).', 'warning');
      return;
    }
    try {
      const recognition = new SpeechRecognition();
      recognition.lang = 'pl-PL';
      recognition.interimResults = false;
      recognition.maxAlternatives = 1;

      recognition.onstart = () => {
        setIsListening(true);
        showToast('🎙️ Słucham... Dyktuj uwagi po polsku', 'info');
      };

      recognition.onresult = (event) => {
        const transcript = event.results[0][0].transcript;
        setProjectRemarks(prev => (prev ? prev + ' ' + transcript : transcript));
        showToast('✅ Rozpoznano i dodano tekst dyktowany!', 'success');
      };

      recognition.onerror = (event) => {
        console.error('Błąd rozpoznawania mowy:', event.error);
        showToast('Błąd dyktowania głosowego lub brak sygnału mikrofonu.', 'warning');
        setIsListening(false);
      };

      recognition.onend = () => {
        setIsListening(false);
      };

      recognition.start();
    } catch (e) {
      console.error(e);
      setIsListening(false);
    }
  };

  const handleConfirmDoc = async () => {
    if (!selectedProjectId) return;
    if (!completionDate) {
      showToast('Data zakończenia prac jest wymagana!', 'warning');
      return;
    }
    if (!confirm(`Czy na pewno chcesz zatwierdzić dokumentację dla zlecenia z datą zakończenia: ${completionDate}?`)) return;
    try {
      const res = await apiFetch(`/api/projects/${selectedProjectId}/confirm`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ remarks: projectRemarks, completion_date: completionDate })
      }, token);
      showToast(res.message, 'success');
      loadProject(selectedProjectId);
    } catch (err) {
      showToast(err.message, 'error');
    }
  };

  const toggleSelectPhoto = (id) => {
    setSelectedPhotoIds(prev => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id);
      else next.add(id);
      return next;
    });
  };

  const toggleSelectAll = (checked) => {
    if (checked) {
      setSelectedPhotoIds(new Set(photos.map(p => p.id)));
    } else {
      setSelectedPhotoIds(new Set());
    }
  };

  const handleBatchCategoryChange = async () => {
    if (selectedPhotoIds.size === 0) {
      showToast('Zaznacz najpierw zdjęcia z galerii poniżej!', 'warning');
      return;
    }
    if (!targetBatchCatId) {
      showToast('Wybierz docelową kategorię z listy!', 'warning');
      return;
    }

    try {
      const res = await apiFetch('/api/photos/update-category-batch', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          photo_ids: Array.from(selectedPhotoIds),
          category_id: parseInt(targetBatchCatId)
        })
      }, token);

      showToast(res.message, 'success');
      setSelectedPhotoIds(new Set());
      setTargetBatchCatId('');
      fetchPhotos(selectedProjectId);
    } catch (err) {
      showToast(err.message, 'error');
    }
  };

  const handleBatchDeleteWorker = async () => {
    if (selectedPhotoIds.size === 0) {
      showToast('Zaznacz najpierw zdjęcia do usunięcia!', 'warning');
      return;
    }

    if (!confirm(`Czy na pewno chcesz usunąć zaznaczone zdjęcia (${selectedPhotoIds.size} szt.)?`)) return;

    try {
      const res = await apiFetch('/api/photos/delete-batch', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ photo_ids: Array.from(selectedPhotoIds) })
      }, token);

      showToast(res.message, 'success');
      setSelectedPhotoIds(new Set());
      fetchPhotos(selectedProjectId);
    } catch (err) {
      showToast(err.message, 'error');
    }
  };

  const [showProjectsModal, setShowProjectsModal] = useState(false);
  const [statusFilter, setStatusFilter] = useState('ALL');
  const [showAiAssistant, setShowAiAssistant] = useState(false);
  const [showVanModal, setShowVanModal] = useState(false);
  const [showSiteHistory, setShowSiteHistory] = useState(false);
  const [showCostingModal, setShowCostingModal] = useState(false);


  // Stany Fazy 2: BHP Checklist & Podpis Cyfrowy
  const [showBhpModal, setShowBhpModal] = useState(false);
  const [showSignatureModal, setShowSignatureModal] = useState(false);
  const [bhpData, setBhpData] = useState({
    harness_checked: true,
    helmet_vest: true,
    sep_valid: true,
    grounding_checked: true,
    grounding_resistance_ohm: '4.2',
    hazard_zone_marked: true,
    waste_cleaned: true
  });
  const [signerName, setSignerName] = useState('');
  const [signatureSaved, setSignatureSaved] = useState(false);
  const [isGettingGps, setIsGettingGps] = useState(false);

  // Zaawansowana Telemetria GPS (Faza 2)
  const handleTelemetryAction = async (action) => {
    if (!selectedProjectId) return;
    setIsGettingGps(true);

    const executeSend = async (coords = {}) => {
      try {
        const res = await apiFetch(`/api/projects/${selectedProjectId}/telemetry`, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ action, ...coords })
        }, token);
        showToast(res.message, 'success');
        loadProject(selectedProjectId);
      } catch (e) {
        showToast(e.message, 'error');
      } finally {
        setIsGettingGps(false);
      }
    };

    if ('geolocation' in navigator) {
      navigator.geolocation.getCurrentPosition(
        (pos) => {
          executeSend({ lat: pos.coords.latitude, lng: pos.coords.longitude });
        },
        (err) => {
          console.warn('GPS niedostępny lub odrzucony:', err);
          executeSend({});
        },
        { enableHighAccuracy: true, timeout: 6000 }
      );
    } else {
      executeSend({});
    }
  };

  const handleSaveChecklistAndSignature = async (sigPng, name) => {
    if (!selectedProjectId) return;
    try {
      const res = await apiFetch(`/api/projects/${selectedProjectId}/save-checklist-signature`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          checklist: bhpData,
          signature_png: sigPng,
          signer_name: name || user.username
        })
      }, token);
      showToast(res.message, 'success');
      setSignatureSaved(true);
      setShowSignatureModal(false);
      loadProject(selectedProjectId);
    } catch (e) {
      showToast(e.message, 'error');
    }
  };

  const handleWorkTimeAction = async (action) => {
    handleTelemetryAction(action);
  };

  return (
    <div className="worker-view">
      {/* BANER GŁÓWNEJ AKCJI - GENEROWANIE DOKUMENTACJI POWYKONAWCZEJ TMPL */}
      <div className="card" style={{ background: 'linear-gradient(135deg, rgba(2,132,199,0.2), rgba(37,99,235,0.25))', border: '1px solid #0284c7', marginBottom: '16px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: '12px' }}>
          <div>
            <h3 style={{ margin: 0, fontWeight: 800, color: '#38bdf8', fontSize: '1.15rem' }}>
              📄 Generowanie Dokumentacji Powykonawczej (TMPL)
            </h3>
            <p style={{ margin: '4px 0 0 0', fontSize: '0.82rem', color: '#e2e8f0' }}>
              Wybierz klienta TMPL, podaj numer obiektu (np. 51482) i kliknij <strong>Pobierz dane</strong>, aby automatycznie uzupełnić dane stacji z BTSearch.pl!
            </p>
          </div>
          <button 
            type="button"
            className="btn btn-primary" 
            style={{ padding: '10px 20px', fontSize: '0.95rem', background: 'linear-gradient(135deg, #0284c7, #2563eb)', fontWeight: 800, whiteSpace: 'nowrap', boxShadow: '0 4px 14px rgba(2,132,199,0.4)' }}
            onClick={() => window.dispatchEvent(new CustomEvent('openDocumentationModule'))}
          >
            ➕ NOWA DOKUMENTACJA POWYKONAWCZA
          </button>
        </div>
      </div>

      <div className="card">


        <div className="card-header" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: '8px' }}>
          <div className="card-title">📁 Praca w Terenie & Wybór Zlecenia</div>
          <div style={{ display: 'flex', gap: '8px' }}>
            <button 
              type="button"
              className="btn btn-primary" 
              style={{ padding: '6px 14px', fontSize: '0.85rem', fontWeight: 800, background: 'linear-gradient(135deg, #0284c7, #2563eb)', display: 'flex', alignItems: 'center', gap: '6px', boxShadow: '0 2px 8px rgba(2,132,199,0.3)' }}
              onClick={() => setShowAiAssistant(true)}
            >
              🤖 Asystent AI Gemini
            </button>
            <button className="btn btn-secondary" onClick={onOpenNewProject} style={{ padding: '6px 12px', fontSize: '0.85rem' }}>+ Nowe Zlecenie</button>
          </div>
        </div>

        {/* WYBÓR ZLECENIA (INLINE EXPANDABLE LIST) */}
        <div 
          onClick={() => setShowProjectsModal(!showProjectsModal)}
          style={{ 
            background: 'linear-gradient(135deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95))', 
            padding: '16px', 
            borderRadius: '12px', 
            border: '2px dashed var(--primary)', 
            cursor: 'pointer', 
            marginBottom: '16px',
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
            transition: 'all 0.2s ease'
          }}
        >
          <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
            <div style={{ fontSize: '2.2rem', background: 'rgba(37, 99, 235, 0.2)', padding: '10px 14px', borderRadius: '12px' }}>📂</div>
            <div>
              <div style={{ fontSize: '0.8rem', color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.5px', fontWeight: 600 }}>Kliknij, aby wybrać z listy:</div>
              <div style={{ fontSize: '1.1rem', fontWeight: 800, color: '#fff', marginTop: '2px' }}>
                {projectDetails ? `${projectDetails.name} ${projectDetails.object_number ? `(${projectDetails.object_number})` : ''}` : 'WYBIERZ ZLECENIE Z LISTY...'}
              </div>
              {projectDetails && (
                <div style={{ display: 'flex', gap: '8px', alignItems: 'center', marginTop: '6px' }}>
                  {getProjectStatusBadge(projectDetails)}
                  <span style={{ fontSize: '0.75rem', color: 'var(--text-muted)' }}>Klient: {projectDetails.client_name}</span>
                </div>
              )}
            </div>
          </div>
          <div className="btn btn-primary" style={{ padding: '8px 16px', borderRadius: '20px', fontSize: '0.85rem' }}>
            {showProjectsModal ? '▲ Zamknij Listę' : `▼ Rozwiń Listę (${projects.length})`}
          </div>
        </div>

        {/* ROZWIJANA WIDOCZNA SEKCJA LISTY ZLECEŃ (IN-PAGE EXPANDABLE) */}
        {showProjectsModal && (
          <div style={{ background: '#0f172a', padding: '16px', borderRadius: '12px', border: '1px solid var(--card-border)', marginBottom: '20px' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '14px' }}>
              <h3 style={{ margin: 0, fontWeight: 800, fontSize: '1.05rem', color: '#fff' }}>📋 Wybierz Zlecenie z Listy</h3>
              <button className="btn btn-secondary" style={{ padding: '4px 10px', fontSize: '0.75rem' }} onClick={() => setShowProjectsModal(false)}>Zamknij ✖</button>
            </div>

            {/* FILTRY STATUSÓW */}
            <div style={{ display: 'flex', gap: '6px', flexWrap: 'wrap', marginBottom: '14px' }}>
              <button className={`btn ${statusFilter === 'ALL' ? 'btn-primary' : 'btn-secondary'}`} style={{ padding: '4px 10px', fontSize: '0.75rem' }} onClick={() => setStatusFilter('ALL')}>Wszystkie ({projects.length})</button>
              <button className={`btn ${statusFilter === 'NOWE' ? 'btn-primary' : 'btn-secondary'}`} style={{ padding: '4px 10px', fontSize: '0.75rem' }} onClick={() => setStatusFilter('NOWE')}>🟩 Nowe</button>

              <button className={`btn ${statusFilter === 'CZEKA' ? 'btn-primary' : 'btn-secondary'}`} style={{ padding: '4px 10px', fontSize: '0.75rem' }} onClick={() => setStatusFilter('CZEKA')}>🟨 Czeka</button>
              <button className={`btn ${statusFilter === 'IN_PROGRESS' ? 'btn-primary' : 'btn-secondary'}`} style={{ padding: '4px 10px', fontSize: '0.75rem' }} onClick={() => setStatusFilter('IN_PROGRESS')}>🟦 W trakcie</button>
              <button className={`btn ${statusFilter === 'COMPLETED' ? 'btn-primary' : 'btn-secondary'}`} style={{ padding: '4px 10px', fontSize: '0.75rem' }} onClick={() => setStatusFilter('COMPLETED')}>⬛ Zakończone</button>
            </div>

            <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
              {projects.filter(p => {
                if (statusFilter === 'ALL') return true;
                if (statusFilter === 'COMPLETED') return p.status === 'COMPLETED' || p.status === 'CONFIRMED' || p.work_ended_at;
                if (statusFilter === 'IN_PROGRESS') return p.work_started_at || p.status === 'IN_PROGRESS' || (p.assigned_workers_json && JSON.parse(p.assigned_workers_json || '[]').length > 0);
                const hrs = (Date.now() - new Date(p.created_at || Date.now()).getTime()) / (1000 * 3600);
                if (statusFilter === 'NOWE') return hrs <= 48 && p.status !== 'COMPLETED' && p.status !== 'CONFIRMED';
                if (statusFilter === 'CZEKA') return hrs > 48 && !p.work_started_at && p.status !== 'COMPLETED';
                return true;
              }).map(p => (
                <div 
                  key={p.id} 
                  onClick={() => { loadProject(p.id); setShowProjectsModal(false); }}
                  style={{ 
                    background: p.id === parseInt(selectedProjectId) ? 'rgba(37, 99, 235, 0.3)' : 'rgba(30, 41, 59, 0.8)', 
                    padding: '12px 14px', 
                    borderRadius: '8px', 
                    border: p.id === parseInt(selectedProjectId) ? '1.5px solid var(--primary)' : '1px solid var(--card-border)',
                    cursor: 'pointer',
                    display: 'flex',
                    justifyContent: 'space-between',
                    alignItems: 'center',
                    transition: 'all 0.15s ease'
                  }}
                >
                  <div>
                    <div style={{ fontWeight: 700, fontSize: '0.95rem', color: '#fff' }}>
                      {p.name} {p.object_number ? <span style={{ color: 'var(--warning)' }}>(Obiekt: {p.object_number})</span> : ''}
                    </div>
                    <div style={{ fontSize: '0.78rem', color: 'var(--text-muted)', marginTop: '2px' }}>
                      Klient: <strong>{p.client_name}</strong> | Kod: <code>{p.code}</code> | Wgrywano zdjęć: <strong>{p.photo_count || 0} szt.</strong>
                    </div>
                    {p.planned_completion_date && (
                      <div style={{ fontSize: '0.72rem', color: 'var(--secondary)', marginTop: '2px' }}>
                        📅 Planowany termin: <strong>{p.planned_completion_date}</strong>
                      </div>
                    )}
                  </div>
                  <div>
                    {getProjectStatusBadge(p)}
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}


        {projectDetails && (
          <div style={{ background: '#0f172a', padding: '14px', borderRadius: '8px', border: '1px solid var(--card-border)', fontSize: '0.85rem' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <div>
                <strong style={{ color: 'var(--secondary)', fontSize: '1.05rem' }}>{projectDetails.name}</strong> <span style={{ color: 'var(--warning)', fontWeight: 700 }}>{projectDetails.object_number ? `(Obiekt: ${projectDetails.object_number})` : ''}</span>
              </div>
              {getProjectStatusBadge(projectDetails)}
            </div>

            <div style={{ color: 'var(--text-muted)', marginTop: '4px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: '8px' }}>
              <div>
                Klient: <strong>{projectDetails.client_name}</strong> | Kod: <code>{projectDetails.code}</code> 
                {projectDetails.planned_completion_date && (
                  <span style={{ marginLeft: '8px', color: 'var(--secondary)', fontWeight: 600 }}>| 📅 Planowane wykonanie: <strong>{projectDetails.planned_completion_date}</strong></span>
                )}
              </div>
              <div>
                <SLACountdownBadge project={projectDetails} />
              </div>
            </div>

            {/* ADRES I BEZPOŚREDNIA NAWIGACJA GPS DLA TECHNIKA */}
            {(projectDetails.location || (projectDetails.latitude && projectDetails.longitude)) && (
              <div style={{ marginTop: '10px', background: 'rgba(56, 189, 248, 0.08)', padding: '10px 14px', borderRadius: '8px', border: '1px solid rgba(56, 189, 248, 0.3)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: '10px' }}>
                <div>
                  <div style={{ fontSize: '0.78rem', color: 'var(--secondary)', fontWeight: 700 }}>📍 Adres & Współrzędne Obiektu:</div>
                  <div style={{ color: '#fff', fontSize: '0.88rem', fontWeight: 600, marginTop: '2px' }}>
                    {projectDetails.location || 'Brak wpisanego adresu tekstowego'}
                    {projectDetails.latitude && projectDetails.longitude && (
                      <span style={{ fontSize: '0.76rem', color: '#94a3b8', marginLeft: '8px', fontWeight: 400 }}>
                        (GPS: {projectDetails.latitude.toFixed(5)}, {projectDetails.longitude.toFixed(5)})
                      </span>
                    )}
                  </div>
                </div>
                <div style={{ display: 'flex', gap: '8px' }}>
                  {projectDetails.latitude && projectDetails.longitude ? (
                    <>
                      <a 
                        href={`https://www.google.com/maps/dir/?api=1&destination=${projectDetails.latitude},${projectDetails.longitude}`} 
                        target="_blank" 
                        rel="noreferrer"
                        className="btn btn-primary"
                        style={{ padding: '6px 12px', fontSize: '0.8rem', fontWeight: 700, display: 'inline-flex', alignItems: 'center', gap: '4px', textDecoration: 'none' }}
                      >
                        🚗 Nawiguj (Google Maps)
                      </a>
                      <a 
                        href={`https://waze.com/ul?ll=${projectDetails.latitude},${projectDetails.longitude}&navigate=yes`} 
                        target="_blank" 
                        rel="noreferrer"
                        className="btn btn-secondary"
                        style={{ padding: '6px 10px', fontSize: '0.8rem', fontWeight: 700, display: 'inline-flex', alignItems: 'center', gap: '4px', textDecoration: 'none', background: '#33ccff', color: '#000', border: 'none' }}
                      >
                        🚙 Waze
                      </a>
                    </>
                  ) : projectDetails.location ? (
                    <a 
                      href={`https://www.google.com/maps/dir/?api=1&destination=${encodeURIComponent(projectDetails.location)}`} 
                      target="_blank" 
                      rel="noreferrer"
                      className="btn btn-primary"
                      style={{ padding: '6px 12px', fontSize: '0.8rem', fontWeight: 700, display: 'inline-flex', alignItems: 'center', gap: '4px', textDecoration: 'none' }}
                    >
                      🚗 Nawiguj (Google Maps)
                    </a>
                  ) : null}
                </div>
              </div>
            )}

            {/* SEKCJA TELEMETRII CZASU I STATUSÓW TERENOWYCH GPS (FAZA 2) */}
            <div style={{ marginTop: '14px', background: 'linear-gradient(135deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95))', padding: '14px', borderRadius: '10px', border: '1px solid rgba(59, 130, 246, 0.4)' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '8px' }}>
                <div style={{ fontSize: '0.82rem', color: 'var(--secondary)', textTransform: 'uppercase', fontWeight: 800, display: 'flex', alignItems: 'center', gap: '6px' }}>
                  🛰️ Telemetria Terenowa & GPS:
                  {isGettingGps && <span style={{ fontSize: '0.72rem', color: 'var(--warning)' }}>📡 Odczyt GPS...</span>}
                </div>
                <div style={{ fontSize: '0.75rem', color: 'var(--text-muted)' }}>
                  Status: <strong>{projectDetails.status || 'DRAFT'}</strong>
                </div>
              </div>

              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(130px, 1fr))', gap: '8px' }}>
                <button 
                  type="button" 
                  className="btn" 
                  style={{ padding: '8px 10px', fontSize: '0.8rem', fontWeight: 700, background: projectDetails.status === 'IN_TRANSIT' ? 'rgba(234, 179, 8, 0.3)' : 'rgba(30, 41, 59, 0.8)', color: '#facc15', border: '1px solid rgba(234, 179, 8, 0.5)' }}
                  onClick={() => handleTelemetryAction('travel')}
                >
                  🚗 W trasie
                </button>
                <button 
                  type="button" 
                  className="btn" 
                  style={{ padding: '8px 10px', fontSize: '0.8rem', fontWeight: 700, background: projectDetails.status === 'ON_SITE' ? 'rgba(168, 85, 247, 0.3)' : 'rgba(30, 41, 59, 0.8)', color: '#c084fc', border: '1px solid rgba(168, 85, 247, 0.5)' }}
                  onClick={() => handleTelemetryAction('on_site')}
                >
                  📍 Na obiekcie
                </button>
                <button 
                  type="button" 
                  className="btn btn-primary" 
                  style={{ padding: '8px 10px', fontSize: '0.8rem', fontWeight: 700, background: projectDetails.status === 'IN_PROGRESS' ? 'rgba(34, 197, 94, 0.3)' : 'var(--primary)', color: projectDetails.status === 'IN_PROGRESS' ? '#4ade80' : '#fff' }}
                  onClick={() => handleTelemetryAction('start')}
                >
                  ▶️ Start prac
                </button>
                <button 
                  type="button" 
                  className="btn" 
                  style={{ padding: '8px 10px', fontSize: '0.8rem', fontWeight: 700, background: projectDetails.status === 'PAUSED' ? 'rgba(239, 68, 68, 0.3)' : 'rgba(30, 41, 59, 0.8)', color: '#f87171', border: '1px solid rgba(239, 68, 68, 0.5)' }}
                  onClick={() => handleTelemetryAction('pause')}
                >
                  ⏸️ Pauza
                </button>
                <button 
                  type="button" 
                  className="btn btn-secondary" 
                  style={{ padding: '8px 10px', fontSize: '0.8rem', fontWeight: 700, background: 'rgba(239, 68, 68, 0.2)', color: 'var(--danger)', border: '1px solid rgba(239,68,68,0.4)' }}
                  onClick={() => handleTelemetryAction('stop')}
                >
                  🏁 Zakończ
                </button>
              </div>

              {/* DANE CZASOWE I TELEMETRIA */}
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: '12px', fontSize: '0.74rem', color: 'var(--text-muted)', marginTop: '10px', borderTop: '1px solid rgba(255,255,255,0.06)', paddingTop: '8px' }}>
                <div>Wyjazd: <strong style={{ color: '#e2e8f0' }}>{projectDetails.travel_started_at || '—'}</strong></div>
                <div>Przybycie: <strong style={{ color: '#e2e8f0' }}>{projectDetails.on_site_at || '—'}</strong></div>
                <div>Start prac: <strong style={{ color: '#4ade80' }}>{projectDetails.work_started_at || '—'}</strong></div>
                <div>Koniec: <strong style={{ color: '#60a5fa' }}>{projectDetails.work_ended_at || '—'}</strong></div>
                {projectDetails.gps_start_lat && (
                  <div>GPS: <strong style={{ color: '#38bdf8' }}>{projectDetails.gps_start_lat?.toFixed(4)}, {projectDetails.gps_start_lng?.toFixed(4)}</strong></div>
                )}
              </div>
            </div>

            {/* SEKCJA CHECKLIST BHP & CYFROWEGO PODPISU & WERYFIKACJI CZĘŚCI & HISTORII & KOSZTORYSU */}
            <div style={{ marginTop: '12px', display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
              <button 
                type="button"
                className="btn btn-secondary" 
                style={{ flex: 1, minWidth: '180px', padding: '10px', fontSize: '0.85rem', fontWeight: 700, background: 'rgba(147, 51, 234, 0.12)', border: '1px solid #9333ea', color: '#9333ea' }}
                onClick={() => setShowSiteHistory(true)}
              >
                📜 Historia Obiektu & Poprzednie Wizyty
              </button>

              <button 
                type="button"
                className="btn btn-secondary" 
                style={{ flex: 1, minWidth: '180px', padding: '10px', fontSize: '0.85rem', fontWeight: 700, background: 'rgba(16, 185, 129, 0.12)', border: '1px solid #10b981', color: '#059669' }}
                onClick={() => setShowCostingModal(true)}
              >
                💰 Kosztorys Zlecenia (Job Costing)
              </button>

              <button 
                type="button"
                className="btn btn-secondary" 
                style={{ flex: 1, minWidth: '180px', padding: '10px', fontSize: '0.85rem', fontWeight: 700, background: 'rgba(245, 158, 11, 0.15)', border: '1px solid #f59e0b', color: '#f59e0b' }}
                onClick={() => setShowVanModal(true)}
              >
                🚐 Weryfikacja Części w Aucie (First-Time Fix)
              </button>

              <button 
                type="button"
                className="btn btn-secondary" 
                style={{ flex: 1, minWidth: '180px', padding: '10px', fontSize: '0.85rem', fontWeight: 700, background: 'rgba(2, 132, 199, 0.15)', border: '1px solid #0284c7', color: '#38bdf8' }}
                onClick={() => setShowBhpModal(true)}
              >
                🦺 Karta Kontroli BHP & Pomiary
              </button>

              <button 
                type="button"
                className="btn btn-secondary" 
                style={{ flex: 1, minWidth: '180px', padding: '10px', fontSize: '0.85rem', fontWeight: 700, background: projectDetails.signature_png || signatureSaved ? 'rgba(34, 197, 94, 0.2)' : 'rgba(245, 158, 11, 0.15)', border: projectDetails.signature_png || signatureSaved ? '1px solid #22c55e' : '1px solid var(--warning)', color: projectDetails.signature_png || signatureSaved ? '#4ade80' : 'var(--warning)' }}
                onClick={() => setShowSignatureModal(true)}
              >
                ✍️ {projectDetails.signature_png || signatureSaved ? '✅ Podpis Klienta Złożony' : '✍️ Złóż Podpis na Ekranie (Sign-on-Glass)'}
              </button>
            </div>

            
            {projectDetails.description && (
              <div style={{ marginTop: '10px', background: 'rgba(30, 41, 59, 0.7)', padding: '10px', borderRadius: '6px', borderLeft: '3px solid var(--primary)' }}>
                <strong style={{ color: 'var(--secondary)' }}>📝 Opis zlecenia / Wytyczne:</strong>
                <p style={{ margin: '4px 0 0 0', whiteSpace: 'pre-wrap', color: '#e2e8f0' }}>{projectDetails.description}</p>
              </div>
            )}

            {/* SEKCJA ZDJĘĆ I PLIKÓW WEJŚCIOWYCH ZLECENIA (WIDOCZNA CAŁY CZAS DLA PRACOWNIKA) */}
            <div style={{ marginTop: '12px' }}>
              <strong style={{ color: 'var(--secondary)' }}>📂 Pliki referencyjne / Zdjęcia wstępne do zlecenia:</strong>
              {photos.length === 0 ? (
                <div style={{ color: 'var(--text-muted)', fontSize: '0.8rem', marginTop: '4px' }}>Brak załączonych plików wejściowych.</div>
              ) : (
                <div style={{ display: 'flex', gap: '10px', overflowX: 'auto', padding: '8px 0' }}>
                  {photos.map(p => (
                    <div key={p.id} style={{ minWidth: '90px', textCenter: 'center' }}>
                      <img 
                        src={`/api/photos/${p.id}/file?token=${token}`} 
                        alt={p.original_name} 
                        style={{ width: '85px', height: '85px', objectFit: 'cover', borderRadius: '6px', border: '1px solid var(--card-border)', cursor: 'pointer' }}
                        onClick={() => openLightbox(`/api/photos/${p.id}/file?token=${token}`, p.original_name)}
                      />
                      <a href={`/api/photos/${p.id}/file?download=true&token=${token}`} download={p.original_name} style={{ display: 'block', fontSize: '0.7rem', color: 'var(--secondary)', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap', maxWidth: '85px' }}>
                        📥 Pobierz
                      </a>
                    </div>
                  ))}
                </div>
              )}
            </div>
          </div>
        )}
      </div>

      {projectDetails && (
        <>
          <div className="card">
            <div className="card-header">
              <div className="card-title">🚀 Hurtowe / Szybkie Dodawanie Zdjęć</div>
            </div>

            {/* DUŻA DROPSTREFA HURTOWEGO WGRYWANIA BEZ KATEGORII */}
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px' }}>
              {/* DUŻA DROPSTREFA HURTOWEGO WGRYWANIA ZDJĘĆ */}
              <label className="upload-dropzone" style={{ display: 'block', cursor: 'pointer', background: 'rgba(37, 99, 235, 0.1)', border: '2px dashed var(--primary)', padding: '20px', textAlign: 'center', borderRadius: '8px' }}>
                <div className="upload-icon" style={{ fontSize: '2.2rem' }}>📸 📥</div>
                <div style={{ fontWeight: 800, fontSize: '1rem', color: 'var(--secondary)', marginTop: '6px' }}>
                  WGRAJ HURTOWO ZDJĘCIA
                </div>
                <div style={{ color: 'var(--text-muted)', fontSize: '0.78rem', marginTop: '4px' }}>
                  Zaznacz w galerii telefonu zdjęcia naraz.
                </div>
                <input type="file" multiple accept="image/jpeg,image/png,image/heic,image/*" style={{ display: 'none' }} onChange={e => handleFileUpload(e, null, 'Ogólna')} />
              </label>

              {/* DROPSTREFA WGRYWANIA INNYCH PLIKÓW / DOKUMENTÓW */}
              <label className="upload-dropzone" style={{ display: 'block', cursor: 'pointer', background: 'rgba(245, 158, 11, 0.1)', border: '2px dashed var(--warning)', padding: '20px', textAlign: 'center', borderRadius: '8px' }}>
                <div className="upload-icon" style={{ fontSize: '2.2rem' }}>📑 📂</div>
                <div style={{ fontWeight: 800, fontSize: '1rem', color: 'var(--warning)', marginTop: '6px' }}>
                  DOŁĄCZ INNE PLIKI / DOKUMENTY
                </div>
                <div style={{ color: 'var(--text-muted)', fontSize: '0.78rem', marginTop: '4px' }}>
                  PDF, DOCX, XLSX, TXT (Trafią do katalogu "pliki")
                </div>
                <input type="file" multiple accept=".pdf,.doc,.docx,.xls,.xlsx,.txt,.zip,.rar" style={{ display: 'none' }} onChange={e => handleFileUpload(e, null, 'pliki')} />
              </label>
            </div>

            <div style={{ marginTop: '12px', textAlign: 'center' }}>
              <button 
                type="button" 
                className="btn btn-secondary" 
                style={{ background: 'rgba(16, 185, 129, 0.15)', border: '1px solid var(--success)', color: 'var(--success)', width: '100%', padding: '10px', fontSize: '0.9rem', fontWeight: 700 }}
                onClick={() => setShowOcrModal(true)}
              >
                🔍 Skanuj Tabliczkę Znamionową AI (Odczyt Model / SN)
              </button>
            </div>

            <details style={{ marginTop: '16px', background: '#0f172a', padding: '10px 14px', borderRadius: '8px', border: '1px solid var(--card-border)' }}>
              <summary style={{ cursor: 'pointer', fontWeight: 600, fontSize: '0.9rem', color: 'var(--text-muted)' }}>
                📷 Szybkie zdjęcie bezpośrednio z określoną kategorią (opcjonalnie)
              </summary>
              <div className="category-chips" style={{ marginTop: '12px' }}>
                {categories.map(cat => (
                  <label key={cat.id} className={`chip-btn ${selectedCatId === cat.id ? 'active' : ''}`} onClick={() => setSelectedCatId(cat.id)}>
                    <span>{cat.icon || '📷'}</span> <span>{cat.name}</span>
                    <input type="file" multiple accept="image/jpeg,image/png,image/heic,image/*" onChange={e => handleFileUpload(e, cat.id, cat.name)} />
                  </label>
                ))}
              </div>
            </details>

            {uploadStatus && (
              <div style={{ marginTop: '14px', padding: '12px', background: 'rgba(37, 99, 235, 0.2)', border: '1px solid var(--primary)', borderRadius: '8px', fontSize: '0.9rem', fontWeight: 600, color: '#60a5fa', textAlign: 'center' }}>
                {uploadStatus}
              </div>
            )}

            <div className="form-group" style={{ marginTop: '18px' }}>
              <label style={{ fontWeight: 700, color: 'var(--secondary)' }}>📅 Data Zakończenia Prac w Terenie *</label>
              <input 
                type="date" 
                className="form-control" 
                value={completionDate} 
                onChange={e => setCompletionDate(e.target.value)} 
                required 
              />
            </div>

            <div className="form-group" style={{ marginTop: '14px' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '6px' }}>
                <label style={{ fontWeight: 700, color: 'var(--secondary)', margin: 0 }}>📝 Opis dodatkowych informacji i uwag do zlecenia</label>
                <button 
                  type="button" 
                  className={`btn ${isListening ? 'btn-danger' : 'btn-secondary'}`} 
                  style={{ padding: '3px 10px', fontSize: '0.8rem', display: 'flex', alignItems: 'center', gap: '4px' }}
                  onClick={startVoiceDictation}
                >
                  {isListening ? '🎙️ Słucham...' : '🎙️ Dyktuj Głosem'}
                </button>
              </div>
              <textarea 
                className="form-control" 
                rows="3"
                placeholder="Wpisz tutaj uwagi lub naciśnij 'Dyktuj Głosem' aby podyktować treść... Po zatwierdzeniu dany tekst zostanie zapisany jako plik uwagi.txt w katalogu 'pliki' na UNAS Pro." 
                value={projectRemarks} 
                onChange={e => setProjectRemarks(e.target.value)} 
              />
            </div>

            {/* MODUŁ AI DOKUMENTACJI POWYKONAWCZEJ */}
            <AsBuiltDocumentationSection 
              token={token} 
              projectId={selectedProjectId} 
              projectDetails={projectDetails}
              projectRemarks={projectRemarks}
              photosCount={photos.length}
            />

            <hr style={{ border: 'none', borderTop: '1px solid var(--card-border)', margin: '20px 0' }} />

            <div style={{ textAlign: 'center' }}>
              <button className="btn btn-confirm" onClick={handleConfirmDoc}>✅ Wyślij i Zatwierdź Dokumentację</button>
            </div>
          </div>

          {/* MODAL CHECKLISTY BHP (FAZA 2) */}
          {showBhpModal && (
            <div className="modal-backdrop">
              <div className="modal" style={{ maxWidth: '540px' }}>
                <div className="modal-header">
                  <h3 style={{ margin: 0, fontWeight: 800, color: '#38bdf8' }}>🦺 Karta Kontroli Bezpieczeństwa BHP</h3>
                  <button type="button" className="btn-close" onClick={() => setShowBhpModal(false)}>✕</button>
                </div>
                <div style={{ padding: '16px', display: 'flex', flexDirection: 'column', gap: '12px', fontSize: '0.88rem' }}>
                  <label style={{ display: 'flex', alignItems: 'center', gap: '10px', cursor: 'pointer' }}>
                    <input type="checkbox" checked={bhpData.harness_checked} onChange={e => setBhpData({ ...bhpData, harness_checked: e.target.checked })} />
                    <span>Szelki bezpieczeństwa & lonża asekuracyjna sprawdzone</span>
                  </label>
                  <label style={{ display: 'flex', alignItems: 'center', gap: '10px', cursor: 'pointer' }}>
                    <input type="checkbox" checked={bhpData.helmet_vest} onChange={e => setBhpData({ ...bhpData, helmet_vest: e.target.checked })} />
                    <span>Kask ochronny i kamizelka odblaskowa założone</span>
                  </label>
                  <label style={{ display: 'flex', alignItems: 'center', gap: '10px', cursor: 'pointer' }}>
                    <input type="checkbox" checked={bhpData.sep_valid} onChange={e => setBhpData({ ...bhpData, sep_valid: e.target.checked })} />
                    <span>Uprawnienia elektroenergetyczne SEP (E/D) ważne</span>
                  </label>
                  <label style={{ display: 'flex', alignItems: 'center', gap: '10px', cursor: 'pointer' }}>
                    <input type="checkbox" checked={bhpData.grounding_checked} onChange={e => setBhpData({ ...bhpData, grounding_checked: e.target.checked })} />
                    <span>Ciągłość uziemienia ochronnego (PE) potwierdzona</span>
                  </label>
                  <div style={{ marginTop: '6px' }}>
                    <label style={{ fontWeight: 700, color: 'var(--secondary)' }}>Pomiar rezystancji uziemienia (Ω):</label>
                    <input 
                      type="text" 
                      className="form-control" 
                      style={{ marginTop: '4px' }} 
                      value={bhpData.grounding_resistance_ohm} 
                      onChange={e => setBhpData({ ...bhpData, grounding_resistance_ohm: e.target.value })} 
                      placeholder="np. 4.2" 
                    />
                  </div>
                  <label style={{ display: 'flex', alignItems: 'center', gap: '10px', cursor: 'pointer' }}>
                    <input type="checkbox" checked={bhpData.hazard_zone_marked} onChange={e => setBhpData({ ...bhpData, hazard_zone_marked: e.target.checked })} />
                    <span>Strefa prac niebezpiecznych oznakowana taśmą</span>
                  </label>
                  <label style={{ display: 'flex', alignItems: 'center', gap: '10px', cursor: 'pointer' }}>
                    <input type="checkbox" checked={bhpData.waste_cleaned} onChange={e => setBhpData({ ...bhpData, waste_cleaned: e.target.checked })} />
                    <span>Odpady i opakowania po montażu posprzątane</span>
                  </label>
                </div>
                <div className="modal-actions">
                  <button type="button" className="btn btn-secondary" onClick={() => setShowBhpModal(false)}>Anuluj</button>
                  <button type="button" className="btn btn-primary" onClick={() => { setShowBhpModal(false); showToast('✅ Zapisano stan checklisty BHP!', 'success'); }}>Zapisz Parametry BHP</button>
                </div>
              </div>
            </div>
          )}

          {/* MODAL CYFROWEGO PODPISU ODBIORCY SIGN-ON-GLASS (FAZA 2) */}
          {showSignatureModal && (
            <SignatureModal 
              signerName={signerName || user.username}
              onClose={() => setShowSignatureModal(false)}
              onSave={handleSaveChecklistAndSignature}
            />
          )}


          <div className="card">
            <div className="card-header">
              <div className="card-title">🖼️ Galeria Zlecenia ({photos.length} zdjęć)</div>
            </div>

            {/* FILTRY GALERII PO KATEGORII */}
            {photos.length > 0 && (() => {
              const cats = ['all', ...new Set(photos.map(p => p.category_name || 'Inne'))];
              return (
                <div className="gallery-filters">
                  {cats.map(cat => (
                    <button
                      key={cat}
                      className={`filter-chip ${galleryFilter === cat ? 'active' : ''}`}
                      onClick={() => setGalleryFilter(cat)}
                    >
                      {cat === 'all' ? `🗂 Wszystkie (${photos.length})` : `${cat} (${photos.filter(p => (p.category_name||'Inne')===cat).length})`}
                    </button>
                  ))}
                </div>
              );
            })()}

            {/* PASEK SZYBKIEJ MASOWEJ KATEGORYZACJI ZDJĘĆ */}
            {photos.length > 0 && (
              <div style={{ background: '#0f172a', padding: '14px', borderRadius: '8px', border: '1px solid var(--card-border)', marginBottom: '16px' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: '10px' }}>
                  <label style={{ fontSize: '0.85rem', fontWeight: 600, cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '8px' }}>
                    <input 
                      type="checkbox" 
                      checked={selectedPhotoIds.size === photos.length && photos.length > 0} 
                      onChange={e => toggleSelectAll(e.target.checked)} 
                      style={{ width: '20px', height: '20px', cursor: 'pointer' }}
                    />
                    Zaznacz wszystkie ({selectedPhotoIds.size}/{photos.length})
                  </label>

                  {selectedPhotoIds.size > 0 && (
                    <div style={{ display: 'flex', gap: '8px', alignItems: 'center', flexWrap: 'wrap', width: '100%', marginTop: '8px' }}>
                      <select 
                        className="form-control" 
                        style={{ flex: 1, minWidth: '180px', padding: '8px' }} 
                        value={targetBatchCatId} 
                        onChange={e => setTargetBatchCatId(e.target.value)}
                      >
                        <option value="">-- Wybierz kategorię docelową --</option>
                        {categories.map(c => (
                          <option key={c.id} value={c.id}>{c.icon} {c.name}</option>
                        ))}
                      </select>

                      <button className="btn btn-primary" onClick={handleBatchCategoryChange} style={{ padding: '8px 14px', fontSize: '0.85rem' }}>
                        🏷️ Przypisz Kategorię ({selectedPhotoIds.size})
                      </button>

                      <button className="btn btn-secondary" onClick={handleBatchDeleteWorker} style={{ padding: '8px 12px', fontSize: '0.85rem', background: 'rgba(239, 68, 68, 0.2)', color: 'var(--danger)' }}>
                        🗑️ Usuń Wybrane ({selectedPhotoIds.size})
                      </button>
                    </div>
                  )}
                </div>
              </div>
            )}

            <div className="photo-gallery">
              {photosLoading ? (
                <SkeletonGallery count={6} />
              ) : photos.length === 0 ? (
                <div style={{ color: 'var(--text-muted)', fontSize: '0.85rem', padding: '20px', textAlign: 'center' }}>📭 Brak zdjęć. Użyj przycisku wyżej, aby dodać pierwsze zdjęcia.</div>
              ) : (
                photos.filter(p => galleryFilter === 'all' || (p.category_name||'Inne') === galleryFilter).map(p => (
                  <div key={p.id} className={`photo-card ${selectedPhotoIds.has(p.id) ? 'selected' : ''}`} style={{ position: 'relative' }}>
                    <input 
                      type="checkbox" 
                      checked={selectedPhotoIds.has(p.id)} 
                      onChange={() => toggleSelectPhoto(p.id)} 
                      style={{ position: 'absolute', top: '10px', left: '10px', width: '22px', height: '22px', zIndex: 10, cursor: 'pointer' }}
                    />
                    <img src={`/api/photos/${p.id}/file?token=${token}`} className="photo-thumb" onClick={() => openLightbox(`/api/photos/${p.id}/file?token=${token}`, p.original_name)} />
                    <div className="photo-info">
                      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                        <span className="photo-category" style={{ background: p.category_name === 'Ogólna' || !p.category_name ? '#64748b' : 'var(--primary)' }}>
                          {p.category_icon || '📷'} {p.category_name || 'Ogólna'}
                        </span>
                        <button 
                          title="Zrób zdjęcie PO w identycznym kadrze" 
                          style={{ background: 'rgba(59, 130, 246, 0.2)', border: '1px solid var(--primary)', color: 'var(--secondary)', borderRadius: '4px', padding: '2px 6px', fontSize: '0.7rem', cursor: 'pointer' }}
                          onClick={() => setGhostPhotoUrl(`/api/photos/${p.id}/file?token=${token}`)}
                        >
                          👻 Ghost "Po"
                        </button>
                      </div>
                      <div style={{ fontWeight: 500, marginTop: '4px' }}>{p.original_name}</div>
                      {p.notes && <div className="photo-notes">{p.notes}</div>}
                      <div style={{ marginTop: '8px', display: 'flex', gap: '4px', flexWrap: 'wrap' }}>
                        <button 
                          className="btn btn-secondary" 
                          style={{ padding: '4px 8px', fontSize: '0.75rem', flex: 1 }} 
                          title="Przeładuj obraz omijając cache przeglądarki"
                          onClick={(e) => {
                            const img = e.currentTarget.closest('.photo-card').querySelector('.photo-thumb');
                            if (img) img.src = `/api/photos/${p.id}/file?token=${token}&_r=${Date.now()}`;
                            showToast(`🔄 Odświeżono zdjęcie #${p.id}`, 'info');
                          }}
                        >
                          🔄 Przeładuj
                        </button>
                        <a href={`/api/photos/${p.id}/file?download=true&token=${token}`} download={p.original_name} className="btn btn-secondary" style={{ padding: '4px 8px', fontSize: '0.75rem', textAlign: 'center' }}>
                          📥 Pobierz
                        </a>
                        <button className="btn btn-secondary" style={{ padding: '4px 8px', fontSize: '0.75rem', background: 'rgba(239, 68, 68, 0.2)', color: 'var(--danger)' }} onClick={() => handleDeletePhoto(p.id, p.original_name)}>
                          🗑️ Usuń
                        </button>
                      </div>


                    </div>
                  </div>
                ))
              )}
            </div>
            {galleryFilter !== 'all' && (
              <div style={{ textAlign: 'center', marginTop: '12px', fontSize: '0.8rem', color: 'var(--text-dim)' }}>
                Filtr aktywny: <strong>{galleryFilter}</strong> — <button style={{ background:'none', border:'none', color:'var(--primary)', cursor:'pointer', fontWeight:700 }} onClick={() => setGalleryFilter('all')}>pokaż wszystkie</button>
              </div>
            )}
          </div>

          {ghostPhotoUrl && (
            <GhostOverlayCameraModal 
              ghostPhotoUrl={ghostPhotoUrl} 
              onClose={() => setGhostPhotoUrl(null)} 
              onCapture={(file) => {
                const fakeEvent = { target: { files: [file] } };
                handleFileUpload(fakeEvent, null, 'Stan po...');
              }} 
            />
          )}

          {showOcrModal && (
            <OcrScanModal 
              onClose={() => setShowOcrModal(null)} 
              onAppendText={(text) => setProjectRemarks(prev => (prev ? prev + '\n' + text : text))} 
            />
          )}
        </>
      )}

      {/* PŁYWAJĄCY PRZYCISK MOBILNEGO ASYSTENTA AI GEMINI */}
      <button 
        type="button" 
        className="ai-float-btn"
        onClick={() => setShowAiAssistant(true)}
        title="Otwórz Asystenta Technicznego AI Gemini"
      >
        <span>🤖</span>
        <span>Asystent AI</span>
      </button>

      {/* MODAL ASYSTENTA AI GEMINI W TERENIE */}
      {showAiAssistant && (
        <AiAssistantModal 
          token={token}
          currentProject={projectDetails}
          onClose={() => setShowAiAssistant(false)}
        />
      )}

      {/* MODAL WERYFIKACJI CZĘŚCI W AUCIE (FIRST-TIME FIX) */}
      {showVanModal && (
        <VanPartsVerificationModal 
          token={token}
          project={projectDetails}
          onClose={() => setShowVanModal(false)}
        />
      )}

      {/* MODAL HISTORII OBIEKTU, POPRZEDNICH WIZYT & PASZPORTYZACJI SPRZĘTU */}
      {showSiteHistory && (
        <SiteHistoryTimelineModal 
          token={token}
          project={projectDetails}
          openLightbox={openLightbox}
          onClose={() => setShowSiteHistory(false)}
        />
      )}

      {/* MODAL AUTOMATYCZNEGO KOSZTORYSU ZLECENIA (JOB COSTING & BILLING) */}
      {showCostingModal && (
        <JobCostingModal 
          token={token}
          project={projectDetails}
          onClose={() => setShowCostingModal(false)}
        />
      )}
    </div>
  );
}

// WIDOK KIEROWNIKA / ADMINA
function ManagerView({ token, user, onOpenNewProject, onOpenTempPass, openLightbox }) {
  const [activeTab, setActiveTabState] = useState(() => {
    return localStorage.getItem('fsm_manager_active_tab') || 'projects';
  });

  const setActiveTab = (tab) => {
    setActiveTabState(tab);
    try { localStorage.setItem('fsm_manager_active_tab', tab); } catch(e){}
  };
  const [projects, setProjects] = useState([]);
  const [selectedProjectId, setSelectedProjectId] = useState(null);
  const [selectedProjectName, setSelectedProjectName] = useState('');
  const [editingProject, setEditingProject] = useState(null);
  const [photos, setPhotos] = useState([]);
  const [selectedPhotoIds, setSelectedPhotoIds] = useState(new Set());
  const [categories, setCategories] = useState([]);
  const [users, setUsers] = useState([]);
  const [permissions, setPermissions] = useState([]);
  const [healthData, setHealthData] = useState(null);
  const [emailLogs, setEmailLogs] = useState([]);

  const [clients, setClients] = useState([]);
  const [editingClient, setEditingClient] = useState(null);
  const [clientForm, setClientForm] = useState({ id: null, name: '', code: '', nip: '', contact_person: '', email: '', phone: '', notes: '' });

  const [clientPermissions, setClientPermissions] = useState([]);
  const [assignUserId, setAssignUserId] = useState('');
  const [assignClientName, setAssignClientName] = useState('');

  const loadProjects = () => apiFetch('/api/projects', {}, token).then(setProjects).catch(console.error);
  const loadClients = () => apiFetch('/api/clients', {}, token).then(setClients).catch(console.error);
  const loadCategories = () => apiFetch('/api/categories', {}, token).then(setCategories).catch(console.error);
  const [auditLogs, setAuditLogs] = useState([]);

  const loadUsersAndPerms = () => {
    apiFetch('/api/auth/users', {}, token).then(setUsers).catch(console.error);
    apiFetch('/api/permissions', {}, token).then(setPermissions).catch(console.error);
    apiFetch('/api/client-permissions', {}, token).then(setClientPermissions).catch(console.error);
    apiFetch('/api/clients', {}, token).then(setClients).catch(console.error);
  };
  const [statsData, setStatsData] = useState(null);

  const loadMonitoring = () => {
    apiFetch('/api/health', {}, token).then(setHealthData).catch(console.error);
    apiFetch('/api/health/email-logs', {}, token).then(setEmailLogs).catch(console.error);
    apiFetch('/api/stats', {}, token).then(setStatsData).catch(console.error);
  };
  const loadAuditLogs = () => {
    apiFetch('/api/audit-log', {}, token).then(setAuditLogs).catch(console.error);
  };

  useEffect(() => {
    if (activeTab === 'projects') loadProjects();
    if (activeTab === 'clients') loadClients();
    if (activeTab === 'categories') loadCategories();
    if (activeTab === 'users') loadUsersAndPerms();
    if (activeTab === 'monitoring') loadMonitoring();
    if (activeTab === 'audit') loadAuditLogs();
  }, [activeTab, token]);

  const handleSaveClient = async (e) => {
    e.preventDefault();
    try {
      const res = await apiFetch('/api/clients', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(clientForm)
      }, token);
      showToast(res.message, 'success');
      setClientForm({ id: null, name: '', code: '', nip: '', contact_person: '', email: '', phone: '', notes: '' });
      loadClients();
    } catch (err) {
      showToast(err.message, 'error');
    }
  };

  const handleAddClientPermission = async (e) => {
    e.preventDefault();
    if (!assignUserId || !assignClientName) {
      showToast('Wybierz użytkownika oraz klienta!', 'warning');
      return;
    }
    try {
      const res = await apiFetch('/api/client-permissions', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ user_id: parseInt(assignUserId), client_name: assignClientName })
      }, token);
      showToast(res.message, 'success');
      loadUsersAndPerms();
    } catch (err) {
      showToast(err.message, 'error');
    }
  };

  const handleDeleteClientPermission = async (cpid) => {
    if (!confirm('Czy na pewno chcesz odebrać temu użytkownikowi dostęp do tego klienta?')) return;
    try {
      const res = await apiFetch(`/api/client-permissions/${cpid}`, { method: 'DELETE' }, token);
      showToast(res.message, 'success');
      loadUsersAndPerms();
    } catch (err) {
      showToast(err.message, 'error');
    }
  };

  const handleDeleteClient = async (cid, cname) => {
    if (!confirm(`Czy na pewno chcesz usunąć klienta "${cname}" ze słownika?`)) return;
    try {
      const res = await apiFetch(`/api/clients/${cid}`, { method: 'DELETE' }, token);
      showToast(res.message, 'success');
      loadClients();
    } catch (err) {
      showToast(err.message, 'error');
    }
  };

  const handleViewGallery = async (pid, pname) => {
    setSelectedProjectId(pid);
    setSelectedProjectName(pname);
    setSelectedPhotoIds(new Set());
    fetchPhotos(pid);
  };

  const fetchPhotos = async (pid) => {
    if (!pid || typeof pid === 'object' || pid === 'undefined' || pid === 'null') {
      setPhotos([]);
      return;
    }
    try {
      const phs = await apiFetch(`/api/photos?project_id=${pid}`, {}, token);
      setPhotos(Array.isArray(phs) ? phs : []);
    } catch (e) {
      console.error(e);
    }
  };


  const toggleSelectAll = (checked) => {
    if (checked) {
      setSelectedPhotoIds(new Set(photos.map(p => p.id)));
    } else {
      setSelectedPhotoIds(new Set());
    }
  };

  const togglePhotoSelect = (id) => {
    const next = new Set(selectedPhotoIds);
    if (next.has(id)) next.delete(id);
    else next.add(id);
    setSelectedPhotoIds(next);
  };

  const downloadSelectedZip = () => {
    if (selectedPhotoIds.size === 0) {
      showToast('Zaznacz co najmniej jedno zdjęcie kratką wyboru!', 'warning');
      return;
    }
    const ids = Array.from(selectedPhotoIds).join(',');
    window.location.href = `/api/photos/download-zip?project_id=${selectedProjectId}&photo_ids=${ids}&token=${token}`;
  };

  const handleDeletePhoto = async (photoId, name) => {
    if (!confirm(`Czy na pewno chcesz usunąć zdjęcie "${name}" z serwera i NAS?`)) return;
    try {
      await apiFetch(`/api/photos/${photoId}`, { method: 'DELETE' }, token);
      fetchPhotos(selectedProjectId);
      loadProjects();
    } catch (err) {
      showToast(err.message, 'error');
    }
  };

  const handleDeleteSelectedBatch = async () => {
    if (selectedPhotoIds.size === 0) {
      showToast('Zaznacz co najmniej jedno zdjęcie kratką wyboru do usunięcia!', 'warning');
      return;
    }
    if (!confirm(`Czy na pewno chcesz trwale usunąć ${selectedPhotoIds.size} zaznaczonych zdjęć z dysków NAS i VPS?`)) return;

    try {
      const res = await apiFetch('/api/photos/delete-batch', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ photo_ids: Array.from(selectedPhotoIds) })
      }, token);

      showToast(res.message, 'success');
      setSelectedPhotoIds(new Set());
      fetchPhotos(selectedProjectId);
      loadProjects();
    } catch (err) {
      showToast(err.message, 'error');
    }
  };

  const handleDeleteProject = async (pid, pname) => {
    if (!confirm(`Czy na pewno chcesz usunąć całe zlecenie "${pname}" wraz ze wszystkimi zdjęciami?`)) return;
    try {
      await apiFetch(`/api/projects/${pid}`, { method: 'DELETE' }, token);
      if (selectedProjectId === pid) setSelectedProjectId(null);
      loadProjects();
    } catch (err) {
      showToast(err.message, 'error');
    }
  };

  return (
    <div className="manager-view">
      <div className="tabs">
        <button className={`tab-btn ${activeTab === 'projects' ? 'active' : ''}`} onClick={() => setActiveTab('projects')}>📋 Zlecenia & Eksport</button>
        <button className={`tab-btn ${activeTab === 'dispatch' ? 'active' : ''}`} onClick={() => setActiveTab('dispatch')}>📅 Harmonogram Dyspozytora (Gantt)</button>
        <button className={`tab-btn ${activeTab === 'routes' ? 'active' : ''}`} onClick={() => setActiveTab('routes')}>🚗 Planowanie Tras & Dojazdów</button>
        <button className={`tab-btn ${activeTab === 'map' ? 'active' : ''}`} onClick={() => setActiveTab('map')}>🗺️ Mapa Obiektów GPS</button>
        <button className={`tab-btn ${activeTab === 'clients' ? 'active' : ''}`} onClick={() => setActiveTab('clients')}>🏢 Klienci</button>
        <button className={`tab-btn ${activeTab === 'categories' ? 'active' : ''}`} onClick={() => setActiveTab('categories')}>🏷️ Kategorie Zdjęć</button>
        <button className={`tab-btn ${activeTab === 'users' ? 'active' : ''}`} onClick={() => setActiveTab('users')}>🔐 Konta & Uprawnienia</button>
        <button className={`tab-btn ${activeTab === 'monitoring' ? 'active' : ''}`} onClick={() => setActiveTab('monitoring')}>🖥️ Monitoring NAS & Mail</button>
        <button className={`tab-btn ${activeTab === 'audit' ? 'active' : ''}`} onClick={() => setActiveTab('audit')}>📜 Historia Zdarzeń (Audit)</button>
      </div>

      {activeTab === 'clients' && (
        <div className="card">
          <div className="card-header">
            <div className="card-title">🏢 Słownik Klientów ({clients.length})</div>
          </div>

          {/* FORMULARZ EDYCJI/DODAWCZY KLIENTA */}
          <form onSubmit={handleSaveClient} style={{ background: '#0f172a', padding: '16px', borderRadius: '8px', border: '1px solid var(--card-border)', marginBottom: '20px' }}>
            <h4 style={{ color: 'var(--secondary)', marginBottom: '12px', fontWeight: 700 }}>
              {clientForm.id ? '✏️ Edycja Klienta: ' + clientForm.name : '➕ Dodaj Nowego Klienta'}
            </h4>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '12px' }}>
              <div className="form-group">
                <label>Nazwa Klienta *</label>
                <input type="text" className="form-control" placeholder="np. TELZAS / TAURON" value={clientForm.name} onChange={e => setClientForm({ ...clientForm, name: e.target.value })} required />
              </div>
              <div className="form-group">
                <label>Kod Klienta (skrót)</label>
                <input type="text" className="form-control" placeholder="np. TEL" value={clientForm.code} onChange={e => setClientForm({ ...clientForm, code: e.target.value })} />
              </div>
              <div className="form-group">
                <label>NIP</label>
                <input type="text" className="form-control" placeholder="np. 9540000000" value={clientForm.nip} onChange={e => setClientForm({ ...clientForm, nip: e.target.value })} />
              </div>
              <div className="form-group">
                <label>Osoba Kontaktowa</label>
                <input type="text" className="form-control" placeholder="np. Jan Kowalski" value={clientForm.contact_person} onChange={e => setClientForm({ ...clientForm, contact_person: e.target.value })} />
              </div>
              <div className="form-group">
                <label>E-mail</label>
                <input type="email" className="form-control" placeholder="kontakt@klient.pl" value={clientForm.email} onChange={e => setClientForm({ ...clientForm, email: e.target.value })} />
              </div>
              <div className="form-group">
                <label>Telefon</label>
                <input type="text" className="form-control" placeholder="+48 600 000 000" value={clientForm.phone} onChange={e => setClientForm({ ...clientForm, phone: e.target.value })} />
              </div>
            </div>
            <div style={{ display: 'flex', gap: '10px', marginTop: '12px' }}>
              <button type="submit" className="btn btn-primary" style={{ padding: '8px 16px', fontSize: '0.85rem' }}>
                {clientForm.id ? '💾 Zapisz Zmiany' : '➕ Dodaj Klienta'}
              </button>
              {clientForm.id && (
                <button type="button" className="btn btn-secondary" style={{ padding: '8px 16px', fontSize: '0.85rem' }} onClick={() => setClientForm({ id: null, name: '', code: '', nip: '', contact_person: '', email: '', phone: '', notes: '' })}>
                  Anuluj
                </button>
              )}
            </div>
          </form>

          {/* TABELA KLIENTÓW */}
          <div className="table-responsive">
            <table>
              <thead>
                <tr>
                  <th>Nazwa Klienta</th>
                  <th>Kod</th>
                  <th>NIP</th>
                  <th>Kontakt</th>
                  <th>E-mail</th>
                  <th>Telefon</th>
                  <th>Akcje</th>
                </tr>
              </thead>
              <tbody>
                {clients.length === 0 ? (
                  <tr>
                    <td colSpan="7" style={{ textAlign: 'center', color: 'var(--text-muted)', padding: '20px' }}>
                      Brak zarejestrowanych klientów w słowniku. Użyj formularza powyżej, aby dodać pierwszego klienta.
                    </td>
                  </tr>
                ) : (
                  clients.map(c => (
                    <tr key={c.id}>
                      <td><strong style={{ color: 'var(--secondary)' }}>{c.name}</strong></td>
                      <td><code>{c.code || '-'}</code></td>
                      <td>{c.nip || '-'}</td>
                      <td>{c.contact_person || '-'}</td>
                      <td>{c.email || '-'}</td>
                      <td>{c.phone || '-'}</td>
                      <td>
                        <div style={{ display: 'flex', gap: '6px' }}>
                          <button className="btn btn-secondary" style={{ padding: '4px 8px', fontSize: '0.75rem' }} onClick={() => setClientForm(c)}>✏️ Edytuj</button>
                          <button className="btn btn-secondary" style={{ padding: '4px 8px', fontSize: '0.75rem', background: 'rgba(239, 68, 68, 0.2)', color: 'var(--danger)' }} onClick={() => handleDeleteClient(c.id, c.name)}>🗑️ Usuń</button>
                        </div>
                      </td>
                    </tr>
                  ))
                )}
              </tbody>
            </table>
          </div>
        </div>
      )}

      {activeTab === 'projects' && (
        <>
          <div className="card">
            <div className="card-header">
              <div className="card-title">Wszystkie Zlecenia i Dokumentacje ({projects.length})</div>
              <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
                <a href={`/api/projects/sample-csv?token=${token}`} className="btn btn-secondary" style={{ padding: '6px 12px', fontSize: '0.85rem' }} title="Pobierz czysty plik szablonu CSV z nagłówkami">
                  📄 Pobierz Szablon CSV
                </a>

                <label className="btn btn-secondary" style={{ padding: '6px 12px', fontSize: '0.85rem', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '6px' }}>
                  📥 Importuj Zlecenia z CSV
                  <input 
                    type="file" 
                    accept=".csv,.txt" 
                    style={{ display: 'none' }} 
                    onChange={async (e) => {
                      const file = e.target.files[0];
                      if (!file) return;
                      try {
                        const text = await file.text();
                        const res = await apiFetch(`/api/projects/import-csv?token=${token}`, {
                          method: 'POST',
                          headers: { 'Content-Type': 'text/csv; charset=utf-8' },
                          body: text
                        });
                        showToast(res.message, 'success');
                        loadProjects();
                        e.target.value = '';
                      } catch(err) {
                        showToast(err.message, 'error');
                        e.target.value = '';
                      }
                    }} 
                  />
                </label>

                <a href={`/api/projects/export-csv?token=${token}`} className="btn btn-primary" style={{ padding: '6px 12px', fontSize: '0.85rem' }}>
                  📊 Eksportuj do CSV
                </a>
                
                <button className="btn btn-primary" style={{ padding: '6px 12px', fontSize: '0.85rem', background: 'linear-gradient(135deg, var(--primary), var(--accent))' }} onClick={onOpenNewProject}>
                  ➕ Nowe Zlecenie
                </button>
              </div>
            </div>


            <div className="table-responsive">
              <table>
                <thead>
                  <tr>
                    <th>Nazwa Zlecenia</th>
                    <th>Obiekt</th>
                    <th>Kod</th>
                    <th>Klient</th>
                    <th>Data Zakończenia</th>
                    <th>Status</th>
                    <th>Zdjęcia</th>
                    <th>Akcje</th>
                  </tr>
                </thead>
                <tbody>
                  {projects.map(p => (
                    <tr key={p.id}>
                      <td>
                        <strong>{p.name}</strong>
                        <div style={{ display: 'flex', gap: '4px', marginTop: '2px' }}>
                          <span style={{ fontSize: '0.68rem', padding: '1px 6px', borderRadius: '4px', background: 'rgba(59, 130, 246, 0.2)', color: 'var(--secondary)', fontWeight: 600 }}>
                            {p.project_type === 'EMERGENCY' ? '🚨 Awaria' : p.project_type === 'SLA_INSPECTION' ? '⚡ SLA Przegląd' : p.project_type === 'STANDARD_SERVICE' ? '🛠️ Serwis' : '🔧 Montaż'}
                          </span>
                          {p.priority === 'URGENT' && <span style={{ fontSize: '0.68rem', padding: '1px 6px', borderRadius: '4px', background: 'rgba(239, 68, 68, 0.2)', color: 'var(--danger)', fontWeight: 700 }}>🔴 P1 Urg</span>}
                        </div>
                      </td>
                      <td><strong style={{ color: 'var(--warning)' }}>{p.object_number || '-'}</strong></td>
                      <td><code>{p.code}</code></td>
                      <td>{p.client_name}</td>
                      <td>
                        <span style={{ fontWeight: 700, color: p.completion_date ? 'var(--secondary)' : 'var(--text-muted)' }}>
                          {p.completion_date || 'Nieokreślono'}
                        </span>
                      </td>
                      <td>
                        <span style={{
                          padding: '2px 8px', borderRadius: '12px', fontSize: '0.75rem', fontWeight: 600,
                          background: p.status === 'CONFIRMED' ? 'rgba(16, 185, 129, 0.2)' : 'rgba(245, 158, 11, 0.2)',
                          color: p.status === 'CONFIRMED' ? 'var(--success)' : 'var(--warning)'
                        }}>
                          {p.status === 'CONFIRMED' ? 'ZATWIERDZONE' : 'W TRAKCIE'}
                        </span>
                      </td>
                      <td>{p.photo_count} szt.</td>
                      <td style={{ display: 'flex', gap: '4px', flexWrap: 'nowrap' }}>
                        <button className="btn btn-secondary" style={{ padding: '4px 8px', fontSize: '0.75rem' }} onClick={() => handleViewGallery(p.id, p.name)}>👁️ Podgląd</button>
                        <button className="btn btn-secondary" style={{ padding: '4px 8px', fontSize: '0.75rem' }} onClick={() => setEditingProject(p)}>✏️ Korekta</button>
                        <a href={`/api/projects/${p.id}/pdf?token=${token}`} target="_blank" className="btn btn-secondary" style={{ padding: '4px 8px', fontSize: '0.75rem', color: 'var(--secondary)' }}>📄 Raport PDF</a>
                        <button className="btn btn-secondary" style={{ padding: '4px 8px', fontSize: '0.75rem', background: 'rgba(239, 68, 68, 0.2)', color: 'var(--danger)' }} onClick={() => handleDeleteProject(p.id, p.name)}>🗑️</button>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>

          {selectedProjectId && (
            <div className="card">
              <div className="card-header">
                <div className="card-title">Dokumentacja: {selectedProjectName}</div>
                <div style={{ display: 'flex', gap: '8px' }}>
                  <a href={`/api/projects/${selectedProjectId}/pdf?token=${token}`} className="btn btn-secondary" style={{ padding: '6px 12px', fontSize: '0.85rem' }}>📄 Eksport PDF</a>
                  <a href={`/api/photos/download-zip?project_id=${selectedProjectId}&token=${token}`} className="btn btn-primary" style={{ padding: '6px 12px', fontSize: '0.85rem' }}>📦 Pobierz Cały ZIP</a>
                </div>
              </div>

              <div className="photo-gallery">
                <div style={{ gridColumn: '1 / -1', display: 'flex', justifyContent: 'space-between', alignItems: 'center', background: '#0f172a', padding: '10px 14px', borderRadius: '8px', border: '1px solid var(--card-border)', marginBottom: '8px', flexWrap: 'wrap', gap: '8px' }}>
                  <label style={{ fontSize: '0.85rem', fontWeight: 600, cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '8px' }}>
                    <input type="checkbox" checked={photos.length > 0 && selectedPhotoIds.size === photos.length} onChange={e => toggleSelectAll(e.target.checked)} />
                    Zaznacz wszystkie zdjęcia ({photos.length})
                  </label>
                  <div style={{ display: 'flex', gap: '8px' }}>
                    <button className="btn btn-primary" style={{ padding: '6px 12px', fontSize: '0.85rem' }} onClick={downloadSelectedZip}>
                      📦 Pobierz Wybrane ZIP ({selectedPhotoIds.size})
                    </button>
                    <button className="btn btn-secondary" style={{ padding: '6px 12px', fontSize: '0.85rem', background: 'rgba(239, 68, 68, 0.2)', color: 'var(--danger)' }} onClick={handleDeleteSelectedBatch}>
                      🗑️ Usuń Wybrane ({selectedPhotoIds.size})
                    </button>
                  </div>
                </div>

                {photos.map(photo => (
                  <div key={photo.id} className="photo-card">
                    <div style={{ position: 'relative' }}>
                      <input 
                        type="checkbox" 
                        checked={selectedPhotoIds.has(photo.id)} 
                        onChange={() => togglePhotoSelect(photo.id)} 
                        style={{ position: 'absolute', top: '10px', left: '10px', width: '22px', height: '22px', zIndex: 10, cursor: 'pointer' }} 
                      />
                      <img src={`/api/photos/${photo.id}/file?token=${token}`} className="photo-thumb" onClick={() => openLightbox(`/api/photos/${photo.id}/file?token=${token}`, photo.original_name)} />
                    </div>
                    <div className="photo-info">
                      <span className="photo-category">{photo.category_name || 'Inne'}</span>
                      <div style={{ fontWeight: 500 }}>{photo.original_name}</div>
                      {photo.notes && <div className="photo-notes">{photo.notes}</div>}
                      <div style={{ fontSize: '0.7rem', color: '#64748b', marginTop: '4px' }}>Dodano przez: {photo.uploader_name || 'Worker'}</div>
                      <div style={{ marginTop: '8px', display: 'flex', gap: '4px' }}>
                        <a href={`/api/photos/${photo.id}/file?download=true&token=${token}`} download={photo.original_name} className="btn btn-secondary" style={{ padding: '4px 8px', fontSize: '0.75rem', flex: 1, textAlign: 'center' }}>
                          📥 Pobierz
                        </a>
                        <button className="btn btn-secondary" style={{ padding: '4px 8px', fontSize: '0.75rem', background: 'rgba(239, 68, 68, 0.2)', color: 'var(--danger)' }} onClick={() => handleDeletePhoto(photo.id, photo.original_name)}>
                          🗑️ Usuń
                        </button>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}
        </>
      )}

      {activeTab === 'categories' && (
        <div className="card">
          <div className="card-header">
            <div className="card-title">Zarządzanie Dynamicznymi Kategoriami Zdjęć</div>
          </div>
          <div className="table-responsive">
            <table>
              <thead>
                <tr>
                  <th>Ikona</th>
                  <th>Nazwa Kategorii</th>
                  <th>Akcje</th>
                </tr>
              </thead>
              <tbody>
                {categories.map(c => (
                  <tr key={c.id}>
                    <td>{c.icon || '📷'}</td>
                    <td><strong>{c.name}</strong></td>
                    <td>
                      <button className="btn btn-secondary" style={{ padding: '4px 8px', fontSize: '0.75rem', background: 'rgba(239, 68, 68, 0.2)', color: 'var(--danger)' }} onClick={async () => {
                        if (confirm('Usuń tę kategorię?')) {
                          await apiFetch(`/api/categories/${c.id}`, { method: 'DELETE' }, token);
                          loadCategories();
                        }
                      }}>Usuń</button>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      )}

      {activeTab === 'users' && (
        <div className="card">
          <div className="card-header">
            <div className="card-title">👥 Użytkownicy i Uprawnienia Klientów</div>
          </div>
          <div className="table-responsive">
            <table>
              <thead>
                <tr>
                  <th>ID</th>
                  <th>Nazwa Użytkownika</th>
                  <th>E-mail</th>
                  <th>Rola</th>
                  <th>Weryfikacja E-mail</th>
                  <th>Akcje Hasła</th>
                </tr>
              </thead>
              <tbody>
                {users.map(u => (
                  <tr key={u.id}>
                    <td>{u.id}</td>
                    <td><strong>{u.username}</strong></td>
                    <td>{u.email}</td>
                    <td><span className="user-role-tag">{u.role}</span></td>
                    <td>
                      <span style={{ 
                        padding: '2px 8px', borderRadius: '10px', fontSize: '0.72rem', fontWeight: 700,
                        background: (u.is_email_verified || ['admin', 'pracownik', 'klient'].includes(u.username)) ? 'rgba(16, 185, 129, 0.2)' : 'rgba(245, 158, 11, 0.2)',
                        color: (u.is_email_verified || ['admin', 'pracownik', 'klient'].includes(u.username)) ? 'var(--success)' : 'var(--warning)'
                      }}>
                        {(u.is_email_verified || ['admin', 'pracownik', 'klient'].includes(u.username)) ? '✅ Zweryfikowano' : '⏳ Oczekuje'}
                      </span>
                    </td>
                    <td style={{ display: 'flex', gap: '6px', flexWrap: 'wrap' }}>
                      <button className="btn btn-secondary" style={{ padding: '4px 8px', fontSize: '0.75rem' }} onClick={() => onOpenTempPass(u.id, u.username)}>🔑 Tymczasowe hasło</button>
                      {!['admin', 'pracownik', 'klient'].includes(u.username) && u.id !== user?.id && (
                        <button 
                          className="btn btn-secondary" 
                          style={{ padding: '4px 8px', fontSize: '0.75rem', background: 'rgba(239,68,68,0.15)', color: 'var(--danger)', border: '1px solid rgba(239,68,68,0.3)' }}
                          onClick={async () => {
                            if (!confirm(`Czy na pewno chcesz usunąć konto "${u.username}"? Tej operacji nie można cofnąć.`)) return;
                            try {
                              const res = await apiFetch(`/api/users/${u.id}`, { method: 'DELETE' }, token);
                              showToast(res.message, 'success');
                              loadUsersAndPerms();
                            } catch(e) {
                              showToast(e.message, 'error');
                            }
                          }}
                        >🗑️ Usuń konto</button>
                      )}
                    </td>

                  </tr>
                ))}
              </tbody>
            </table>

          </div>

          <h4 style={{ margin: '24px 0 10px', color: 'var(--secondary)', fontWeight: 700 }}>🏢 Przypisani Klienci do Użytkowników (Dostęp do Zleceń Danych Klientów)</h4>
          
          <form onSubmit={handleAddClientPermission} style={{ background: '#0f172a', padding: '14px', borderRadius: '8px', border: '1px solid var(--card-border)', marginBottom: '16px', display: 'flex', gap: '12px', flexWrap: 'wrap', alignItems: 'flex-end' }}>
            <div className="form-group" style={{ flex: 1, minWidth: '180px', margin: 0 }}>
              <label>Wybierz Użytkownika</label>
              <select className="form-control" value={assignUserId} onChange={e => setAssignUserId(e.target.value)} required>
                <option value="">-- Wybierz użytkownika --</option>
                {users.map(u => (
                  <option key={u.id} value={u.id}>{u.username} ({u.role})</option>
                ))}
              </select>
            </div>
            <div className="form-group" style={{ flex: 1, minWidth: '180px', margin: 0 }}>
              <label>Wybierz Klienta ze Słownika</label>
              <select className="form-control" value={assignClientName} onChange={e => setAssignClientName(e.target.value)} required>
                <option value="">-- Wybierz klienta --</option>
                {clients.map(c => (
                  <option key={c.id} value={c.name}>{c.name} {c.code ? `(${c.code})` : ''}</option>
                ))}
              </select>
            </div>
            <button type="submit" className="btn btn-primary" style={{ padding: '9px 16px', fontSize: '0.85rem' }}>➕ Przypisz Klienta</button>
          </form>

          <div className="table-responsive">
            <table>
              <thead>
                <tr>
                  <th>Użytkownik</th>
                  <th>E-mail</th>
                  <th>Przypisany Klient</th>
                  <th>Data Przypisania</th>
                  <th>Akcje</th>
                </tr>
              </thead>
              <tbody>
                {clientPermissions.length === 0 ? (
                  <tr>
                    <td colSpan="5" style={{ textAlign: 'center', color: 'var(--text-muted)' }}>Brak dedykowanych przypisań klientów (Użytkownicy bez przypisania nie widzą cudzych zleceń).</td>
                  </tr>
                ) : (
                  clientPermissions.map(cp => (
                    <tr key={cp.id}>
                      <td><strong>{cp.username}</strong></td>
                      <td>{cp.email}</td>
                      <td><strong style={{ color: 'var(--secondary)' }}>{cp.client_name}</strong></td>
                      <td>{new Date(cp.created_at).toLocaleDateString('pl-PL')}</td>
                      <td>
                        <button className="btn btn-secondary" style={{ padding: '4px 8px', fontSize: '0.75rem', background: 'rgba(239, 68, 68, 0.2)', color: 'var(--danger)' }} onClick={() => handleDeleteClientPermission(cp.id)}>
                          🗑️ Odebranie dostępu
                        </button>
                      </td>
                    </tr>
                  ))
                )}
              </tbody>
            </table>
          </div>
        </div>
      )}

      {activeTab === 'monitoring' && (
        <div className="card">
          <div className="card-header">
            <div className="card-title">🖥️ Panel Statystyk i Monitoring Systemu</div>
          </div>

          {statsData && (
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))', gap: '12px', marginBottom: '20px' }}>
              <div style={{ background: '#0f172a', padding: '14px', borderRadius: '10px', border: '1px solid var(--card-border)', textAlign: 'center' }}>
                <div style={{ fontSize: '0.75rem', color: 'var(--text-muted)' }}>WSZYSTKIE ZLECENIA</div>
                <div style={{ fontSize: '1.6rem', fontWeight: 800, color: 'var(--primary)', marginTop: '4px' }}>{statsData.total_projects}</div>
              </div>
              <div style={{ background: '#0f172a', padding: '14px', borderRadius: '10px', border: '1px solid var(--card-border)', textAlign: 'center' }}>
                <div style={{ fontSize: '0.75rem', color: 'var(--text-muted)' }}>ŁĄCZNIE ZDJĘĆ</div>
                <div style={{ fontSize: '1.6rem', fontWeight: 800, color: 'var(--secondary)', marginTop: '4px' }}>{statsData.total_photos}</div>
              </div>
              <div style={{ background: '#0f172a', padding: '14px', borderRadius: '10px', border: '1px solid var(--card-border)', textAlign: 'center' }}>
                <div style={{ fontSize: '0.75rem', color: 'var(--text-muted)' }}>ZSYNCHRONIZOWANE NAS</div>
                <div style={{ fontSize: '1.6rem', fontWeight: 800, color: 'var(--success)', marginTop: '4px' }}>{statsData.synced_photos}</div>
              </div>
              <div style={{ background: '#0f172a', padding: '14px', borderRadius: '10px', border: '1px solid var(--card-border)', textAlign: 'center' }}>
                <div style={{ fontSize: '0.75rem', color: 'var(--text-muted)' }}>OCZEKUJĄCE / STAGING</div>
                <div style={{ fontSize: '1.6rem', fontWeight: 800, color: statsData.pending_photos > 0 ? 'var(--warning)' : 'var(--text-muted)', marginTop: '4px' }}>{statsData.pending_photos} ({statsData.staging_size_mb} MB)</div>
              </div>
            </div>
          )}

          {healthData && (
            <div style={{ background: '#0f172a', padding: '16px', borderRadius: '8px', border: '1px solid var(--card-border)', marginBottom: '20px' }}>
              <div><strong>Status Aplikacji:</strong> <span style={{ color: 'var(--success)' }}>{healthData.status.toUpperCase()}</span></div>
              <div><strong>Dysk UNAS Pro NAS:</strong> {healthData.nas_mounted ? '✅ ZAMONTOWANY (' + healthData.nas_mount_path + ')' : '⚠️ NIEZAMONTOWANY'}</div>
              <div><strong>Oczekujące zdjęcia w kolejce:</strong> {healthData.staging_queue_count} szt.</div>
              <div><strong>Poczta SMTP:</strong> {healthData.smtp_configured ? '✅ Skonfigurowana' : 'ℹ️ Domyślne / Sendmail fallback'}</div>
            </div>
          )}

          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '10px' }}>
            <h4 style={{ margin: 0, fontWeight: 700 }}>Logi Wysyłki Maili (szymon@multi-tech.pro)</h4>
            <button 
              className="btn btn-secondary" 
              style={{ padding: '6px 12px', fontSize: '0.8rem' }}
              onClick={async () => {
                try {
                  const res = await apiFetch('/api/health/test-email', { method: 'POST' }, token);
                  showToast(res.message, res.sent_ok ? 'success' : 'warning');
                } catch(e) {
                  showToast(e.message, 'error');
                }
              }}
            >
              ✉️ Wyślij Testowy E-mail
            </button>
          </div>
          <div className="table-responsive">
            <table>
              <thead>
                <tr>
                  <th>Data</th>
                  <th>Odbiorca</th>
                  <th>Temat</th>
                  <th>Status</th>
                </tr>
              </thead>
              <tbody>
                {emailLogs.map(l => (
                  <tr key={l.id}>
                    <td>{new Date(l.sent_at).toLocaleString('pl-PL')}</td>
                    <td>{l.recipient_email}</td>
                    <td>{l.subject}</td>
                    <td><span style={{ color: 'var(--success)' }}>{l.status}</span></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      )}

      {activeTab === 'dispatch' && (
        <DispatchTimelineBoard projects={projects} token={token} onRefresh={loadProjects} />
      )}

      {activeTab === 'routes' && (
        <RoutePlannerView projects={projects} token={token} onRefreshProjects={loadProjects} />
      )}

      {activeTab === 'map' && (
        <MapView projects={projects} token={token} onSelectProject={(pid, pname) => { setActiveTab('projects'); handleViewGallery(pid, pname); }} />
      )}

      {activeTab === 'audit' && (
        <div className="card">
          <div className="card-header">
            <div className="card-title">📜 Audit Log — Historia Działań i Aktywności</div>
            <button className="btn btn-secondary" onClick={loadAuditLogs} style={{ padding: '6px 12px', fontSize: '0.8rem' }}>🔄 Odśwież</button>
          </div>
          <div className="table-responsive">
            <table>
              <thead>
                <tr>
                  <th>Data</th>
                  <th>Użytkownik</th>
                  <th>Akcja</th>
                  <th>Zasób</th>
                  <th>Szczegóły</th>
                </tr>
              </thead>
              <tbody>
                {auditLogs.length === 0 ? (
                  <tr><td colSpan="5" style={{ textAlign: 'center', color: 'var(--text-muted)' }}>Brak zarejestrowanych logów audytowych.</td></tr>
                ) : (
                  auditLogs.map(a => (
                    <tr key={a.id}>
                      <td style={{ whiteSpace: 'nowrap' }}>{new Date(a.created_at).toLocaleString('pl-PL')}</td>
                      <td><strong>{a.username || 'System'}</strong></td>
                      <td><span className="badge badge-info">{a.action}</span></td>
                      <td>{a.resource_type ? `${a.resource_type} #${a.resource_id || ''}` : '-'}</td>
                      <td>{a.detail || '-'}</td>
                    </tr>
                  ))
                )}
              </tbody>
            </table>
          </div>
        </div>
      )}

      {editingProject && (
        <EditProjectModal 
          token={token} 
          project={editingProject}
          getProjectStatusBadge={getProjectStatusBadge}
          onClose={() => setEditingProject(null)} 
          onUpdated={() => { loadProjects(); setEditingProject(null); }} 
        />
      )}

    </div>
  );
}

// WIDOK KLIENTA
function ClientView({ token, user, onOpenNewProject, openLightbox }) {
  const [projects, setProjects] = useState([]);
  const [selectedProjectId, setSelectedProjectId] = useState('');
  const [selectedProject, setSelectedProject] = useState(null);
  const [photos, setPhotos] = useState([]);
  const [selectedPhotoIds, setSelectedPhotoIds] = useState(new Set());
  const [showProjectsModal, setShowProjectsModal] = useState(false);
  const [statusFilter, setStatusFilter] = useState('ALL');

  useEffect(() => {
    apiFetch('/api/projects', {}, token).then(setProjects).catch(console.error);
  }, [token]);

  const loadPhotos = async (pid) => {
    if (!pid || typeof pid === 'object' || pid === 'undefined' || pid === 'null') {
      setSelectedProjectId('');
      setSelectedProject(null);
      setPhotos([]);
      return;
    }
    setSelectedProjectId(pid);
    const p = projects.find(item => String(item.id) === String(pid));
    setSelectedProject(p || null);
    try {
      const phs = await apiFetch(`/api/photos?project_id=${pid}`, {}, token);
      setPhotos(Array.isArray(phs) ? phs : []);
      setSelectedPhotoIds(new Set());
    } catch (e) {
      console.error(e);
    }
  };


  const toggleSelectAll = (checked) => {

    if (checked) setSelectedPhotoIds(new Set(photos.map(p => p.id)));
    else setSelectedPhotoIds(new Set());
  };

  const togglePhotoSelect = (id) => {
    const next = new Set(selectedPhotoIds);
    if (next.has(id)) next.delete(id);
    else next.add(id);
    setSelectedPhotoIds(next);
  };

  const downloadSelectedZip = () => {
    if (selectedPhotoIds.size === 0) {
      showToast('Zaznacz co najmniej jedno zdjęcie kratką wyboru!', 'warning');
      return;
    }
    const ids = Array.from(selectedPhotoIds).join(',');
    window.location.href = `/api/photos/download-zip?project_id=${selectedProjectId}&photo_ids=${ids}&token=${token}`;
  };

  return (
    <div className="client-view card">
      <div className="card-header" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div className="card-title">Dostępne Przydzielone Dokumentacje</div>
        <button className="btn btn-primary" onClick={onOpenNewProject} style={{ padding: '6px 14px', fontSize: '0.85rem' }}>
          ➕ Zgłoś Nowe Zlecenie (Samoobsługa)
        </button>
      </div>

      {/* WYBÓR ZLECENIA KLIENTA (INLINE EXPANDABLE) */}
      <div 
        onClick={() => setShowProjectsModal(!showProjectsModal)}
        style={{ 
          background: 'linear-gradient(135deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95))', 
          padding: '16px', 
          borderRadius: '12px', 
          border: '2px dashed var(--primary)', 
          cursor: 'pointer', 
          marginBottom: '16px',
          display: 'flex',
          justify: 'space-between',
          alignItems: 'center',
          transition: 'all 0.2s ease'
        }}
      >
        <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
          <div style={{ fontSize: '2.2rem', background: 'rgba(37, 99, 235, 0.2)', padding: '10px 14px', borderRadius: '12px' }}>📂</div>
          <div>
            <div style={{ fontSize: '0.8rem', color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.5px', fontWeight: 600 }}>Kliknij, aby wybrać zlecenie:</div>
            <div style={{ fontSize: '1.1rem', fontWeight: 800, color: '#fff', marginTop: '2px' }}>
              {selectedProject ? `${selectedProject.name} ${selectedProject.object_number ? `(${selectedProject.object_number})` : ''}` : 'WYBIERZ ZLECENIE Z LISTY...'}
            </div>
            {selectedProject && (
              <div style={{ display: 'flex', gap: '8px', alignItems: 'center', marginTop: '6px' }}>
                {getProjectStatusBadge(selectedProject)}
                <span style={{ fontSize: '0.75rem', color: 'var(--text-muted)' }}>Kod: {selectedProject.code}</span>
              </div>
            )}
          </div>
        </div>
        <div className="btn btn-primary" style={{ padding: '8px 16px', borderRadius: '20px', fontSize: '0.85rem' }}>
          {showProjectsModal ? '▲ Zamknij Listę' : `▼ Rozwiń Listę (${projects.length})`}
        </div>
      </div>

      {/* ROZWIJANA WIDOCZNA SEKCJA LISTY ZLECEŃ KLIENTA */}
      {showProjectsModal && (
        <div style={{ background: '#0f172a', padding: '16px', borderRadius: '12px', border: '1px solid var(--card-border)', marginBottom: '20px' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '14px' }}>
            <h3 style={{ margin: 0, fontWeight: 800, fontSize: '1.05rem', color: '#fff' }}>📋 Twoje Zlecenia Serwisowe</h3>
            <button className="btn btn-secondary" style={{ padding: '4px 10px', fontSize: '0.75rem' }} onClick={() => setShowProjectsModal(false)}>Zamknij ✖</button>
          </div>

          {/* FILTRY STATUSÓW */}
          <div style={{ display: 'flex', gap: '6px', flexWrap: 'wrap', marginBottom: '14px' }}>
            <button className={`btn ${statusFilter === 'ALL' ? 'btn-primary' : 'btn-secondary'}`} style={{ padding: '4px 10px', fontSize: '0.75rem' }} onClick={() => setStatusFilter('ALL')}>Wszystkie ({projects.length})</button>
            <button className={`btn ${statusFilter === 'NOWE' ? 'btn-primary' : 'btn-secondary'}`} style={{ padding: '4px 10px', fontSize: '0.75rem' }} onClick={() => setStatusFilter('NOWE')}>🟩 Nowe</button>

            <button className={`btn ${statusFilter === 'CZEKA' ? 'btn-primary' : 'btn-secondary'}`} style={{ padding: '4px 10px', fontSize: '0.75rem' }} onClick={() => setStatusFilter('CZEKA')}>🟨 Czeka</button>
            <button className={`btn ${statusFilter === 'IN_PROGRESS' ? 'btn-primary' : 'btn-secondary'}`} style={{ padding: '4px 10px', fontSize: '0.75rem' }} onClick={() => setStatusFilter('IN_PROGRESS')}>🟦 W trakcie</button>
            <button className={`btn ${statusFilter === 'COMPLETED' ? 'btn-primary' : 'btn-secondary'}`} style={{ padding: '4px 10px', fontSize: '0.75rem' }} onClick={() => setStatusFilter('COMPLETED')}>⬛ Zakończone</button>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
            {projects.filter(p => {
              if (statusFilter === 'ALL') return true;
              if (statusFilter === 'COMPLETED') return p.status === 'COMPLETED' || p.status === 'CONFIRMED' || p.work_ended_at;
              if (statusFilter === 'IN_PROGRESS') return p.work_started_at || p.status === 'IN_PROGRESS' || (p.assigned_workers_json && JSON.parse(p.assigned_workers_json || '[]').length > 0);
              const hrs = (Date.now() - new Date(p.created_at || Date.now()).getTime()) / (1000 * 3600);
              if (statusFilter === 'NOWE') return hrs <= 48 && p.status !== 'COMPLETED' && p.status !== 'CONFIRMED';
              if (statusFilter === 'CZEKA') return hrs > 48 && !p.work_started_at && p.status !== 'COMPLETED';
              return true;
            }).map(p => (
              <div 
                key={p.id} 
                onClick={() => { loadPhotos(p.id); setShowProjectsModal(false); }}
                style={{ 
                  background: p.id === parseInt(selectedProjectId) ? 'rgba(37, 99, 235, 0.3)' : 'rgba(30, 41, 59, 0.8)', 
                  padding: '12px 14px', 
                  borderRadius: '8px', 
                  border: p.id === parseInt(selectedProjectId) ? '1.5px solid var(--primary)' : '1px solid var(--card-border)',
                  cursor: 'pointer',
                  display: 'flex',
                  justify: 'space-between',
                  alignItems: 'center',
                  transition: 'all 0.15s ease'
                }}
              >
                <div>
                  <div style={{ fontWeight: 700, fontSize: '0.95rem', color: '#fff' }}>
                    {p.name} {p.object_number ? <span style={{ color: 'var(--warning)' }}>(Obiekt: {p.object_number})</span> : ''}
                  </div>
                  <div style={{ fontSize: '0.78rem', color: 'var(--text-muted)', marginTop: '2px' }}>
                    Kod zlecenia: <code>{p.code}</code> | Wgrywano zdjęć: <strong>{p.photo_count || 0} szt.</strong>
                  </div>
                </div>
                <div>
                  {getProjectStatusBadge(p)}
                </div>
              </div>
            ))}
          </div>
        </div>
      )}



      {selectedProjectId && (
        <div className="photo-gallery" style={{ marginTop: '16px' }}>
          <div style={{ gridColumn: '1 / -1', display: 'flex', justifyContent: 'space-between', alignItems: 'center', background: '#0f172a', padding: '10px 14px', borderRadius: '8px', border: '1px solid var(--card-border)', marginBottom: '8px', flexWrap: 'wrap', gap: '8px' }}>
            <label style={{ fontSize: '0.85rem', fontWeight: 600, cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '8px' }}>
              <input type="checkbox" checked={photos.length > 0 && selectedPhotoIds.size === photos.length} onChange={e => toggleSelectAll(e.target.checked)} />
              Zaznacz wszystkie ({photos.length})
            </label>
            <button className="btn btn-primary" style={{ padding: '6px 12px', fontSize: '0.85rem' }} onClick={downloadSelectedZip}>
              📦 Pobierz Wybrane Zdjęcia ZIP ({selectedPhotoIds.size})
            </button>
          </div>

          {photos.map(photo => (
            <div key={photo.id} className="photo-card">
              <div style={{ position: 'relative' }}>
                <input 
                  type="checkbox" 
                  checked={selectedPhotoIds.has(photo.id)} 
                  onChange={() => togglePhotoSelect(photo.id)} 
                  style={{ position: 'absolute', top: '10px', left: '10px', width: '22px', height: '22px', zIndex: 10, cursor: 'pointer' }} 
                />
                <img src={`/api/photos/${photo.id}/file?token=${token}`} className="photo-thumb" onClick={() => openLightbox(`/api/photos/${photo.id}/file?token=${token}`, photo.original_name)} />
              </div>
              <div className="photo-info">
                <span className="photo-category">{photo.category_name || 'Dokumentacja'}</span>
                <div style={{ fontWeight: 500 }}>{photo.original_name}</div>
                {photo.notes && <div className="photo-notes">{photo.notes}</div>}
                <div style={{ marginTop: '8px', display: 'flex', gap: '4px' }}>
                  <button 
                    className="btn btn-secondary" 
                    style={{ padding: '4px 8px', fontSize: '0.75rem', flex: 1 }} 
                    title="Przeładuj obraz omijając cache przeglądarki"
                    onClick={(e) => {
                      const img = e.currentTarget.closest('.photo-card').querySelector('.photo-thumb');
                      if (img) img.src = `/api/photos/${photo.id}/file?token=${token}&_r=${Date.now()}`;
                      showToast(`🔄 Odświeżono zdjęcie #${photo.id}`, 'info');
                    }}
                  >
                    🔄 Przeładuj
                  </button>
                  <a href={`/api/photos/${photo.id}/file?download=true&token=${token}`} download={photo.original_name} className="btn btn-secondary" style={{ padding: '4px 8px', fontSize: '0.75rem', flex: 1, textAlign: 'center' }}>
                    📥 Pobierz
                  </a>
                </div>

              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

// MODALE
function NewProjectModal({ token, userRole, onClose, onProjectCreated }) {
  const [name, setName] = useState('');
  const [objectNumber, setObjectNumber] = useState('');
  const [description, setDescription] = useState('');
  const [clients, setClients] = useState([]);
  const [workers, setWorkers] = useState([]);
  const [selectedClient, setSelectedClient] = useState('');
  const [customClientName, setCustomClientName] = useState('');
  const [location, setLocation] = useState('');
  const [coords, setCoords] = useState(null);
  const [gpsLoading, setGpsLoading] = useState(false);
  const [projectType, setProjectType] = useState('INSTALLATION');
  const [priority, setPriority] = useState('NORMAL');
  const [targetClient, setTargetClient] = useState('Towerlink');
  const [customTargetClient, setCustomTargetClient] = useState('');
  const [plannedCompletionDate, setPlannedCompletionDate] = useState('');
  const [selectedWorkers, setSelectedWorkers] = useState([]);
  const [selectedFiles, setSelectedFiles] = useState([]);


  const fetchGpsLocation = () => {
    if (!navigator.geolocation) {
      showToast('Twoja przeglądarka nie wspiera geolokalizacji GPS.', 'warning');
      return;
    }
    setGpsLoading(true);
    navigator.geolocation.getCurrentPosition(
      (pos) => {
        setCoords({ lat: pos.coords.latitude, lng: pos.coords.longitude });
        showToast(`📍 Pobrano pozycję GPS: ${pos.coords.latitude.toFixed(4)}, ${pos.coords.longitude.toFixed(4)}`, 'success');
        setGpsLoading(false);
      },
      (err) => {
        showToast('Nie udało się pobrać pozycji GPS (brak zgody lub sygnału).', 'warning');
        setGpsLoading(false);
      },
      { enableHighAccuracy: true }
    );
  };

  useEffect(() => {
    apiFetch('/api/clients', {}, token).then(cls => {
      setClients(cls);
      if (cls.length > 0) setSelectedClient(cls[0].name);
      else setSelectedClient('OTHER');
    }).catch(() => setSelectedClient('OTHER'));

    apiFetch('/api/auth/users', {}, token).then(usrs => {
      setWorkers(usrs.filter(u => u.role === 'WORKER'));
    }).catch(console.error);
  }, [token]);

  const handleSubmit = async (e) => {
    e.preventDefault();
    const finalClientName = selectedClient === 'OTHER' ? customClientName.strip ? customClientName.strip() : customClientName.trim() : selectedClient;

    if (!finalClientName) {
      showToast('Podaj nazwę klienta!', 'warning');
      return;
    }

    try {
      const res = await apiFetch('/api/projects', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ 
          name, 
          object_number: objectNumber, 
          client_name: finalClientName, 
          location,
          latitude: coords ? coords.lat : null,
          longitude: coords ? coords.lng : null,
          description,
          project_type: projectType,
          priority,
          target_client: targetClient === 'Inny' ? customTargetClient : targetClient,
          assigned_workers: selectedWorkers,
          planned_completion_date: plannedCompletionDate
        })
      }, token);

      showToast(`Zlecenie "${name}" utworzone dla klienta: ${finalClientName}!`, 'success');

      // Jeśli wybrano pliki wstępne / zdjęcia, wgrywamy je automatycznie do nowego zlecenia
      if (selectedFiles.length > 0) {
        showToast(`📤 Wgrywanie ${selectedFiles.length} plików wstępnych do zlecenia...`, 'info');
        const formData = new FormData();
        formData.append('project_id', res.projectId);
        formData.append('notes', 'Plik wstępny / Wytyczne zlecenia');
        selectedFiles.forEach(f => formData.append('photos', f));

        try {
          await fetch('/api/photos/upload', {
            method: 'POST',
            headers: { 'Authorization': `Bearer ${token}` },
            body: formData
          });
          showToast('✅ Załączono pliki wstępne do zlecenia!', 'success');
        } catch (e) {
          console.error('Błąd wgrywania plików wstępnych:', e);
        }
      }

      onClose();
      onProjectCreated();
    } catch (err) {
      showToast(err.message, 'error');
    }
  };

  return (
    <div className="modal active">
      <div className="modal-content">
        <button className="modal-close" onClick={onClose}>&times;</button>
        <h3 style={{ marginBottom: '16px', fontWeight: 700 }}>Utwórz Nowe Zlecenie / Pracę</h3>
        <form onSubmit={handleSubmit}>
          {/* SZABLON TYPU ZLECENIA I PRIORYTET */}
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px' }}>
            <div className="form-group">
              <label>Typ / Szablon Pracy *</label>
              <select className="form-control" value={projectType} onChange={e => setProjectType(e.target.value)}>
                <option value="INSTALLATION">🔧 Montaż / Przebudowa</option>
                <option value="STANDARD_SERVICE">🛠️ Serwis Zwykły</option>
                <option value="SLA_INSPECTION">⚡ Przegląd Okresowy SLA</option>
                <option value="EMERGENCY">🚨 Awaria / Serwis Pilny (P1)</option>
              </select>
            </div>
            <div className="form-group">
              <label>Priorytet Zlecenia *</label>
              <select className="form-control" value={priority} onChange={e => setPriority(e.target.value)}>
                <option value="NORMAL">🟢 Normalny</option>
                <option value="HIGH">🟡 Wysoki</option>
                <option value="URGENT">🔴 Krytyczny P1 (SLA &lt; 2h)</option>
              </select>
            </div>
          </div>

          <div className="form-group">
            <label>Klient Docelowy *</label>
            <select className="form-control" value={targetClient} onChange={e => setTargetClient(e.target.value)}>
              <option value="Towerlink">Towerlink</option>
              <option value="OPL">OPL</option>
              <option value="TMPL">TMPL</option>
              <option value="Orange fix">Orange fix</option>
              <option value="!Networks">!Networks</option>
              <option value="Inny">Inny... (Wpisz własnego)</option>
            </select>
          </div>

          {targetClient === 'Inny' && (
            <div className="form-group" style={{ background: '#0f172a', padding: '10px', borderRadius: '6px', border: '1px solid var(--primary)' }}>
              <label style={{ color: 'var(--secondary)' }}>Nazwa Innego Klienta Docelowego *</label>
              <input type="text" className="form-control" placeholder="np. Play / T-Mobile / Emitel" value={customTargetClient} onChange={e => setCustomTargetClient(e.target.value)} required />
            </div>
          )}

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px' }}>
            <div className="form-group">
              <label>Nazwa Zlecenia / Prac *</label>
              <input type="text" className="form-control" placeholder="np. Modernizacja ZubrzycaGorna_57157" value={name} onChange={e => setName(e.target.value)} required />
            </div>
            <div className="form-group">
              <label>Planowana Data Wykonania</label>
              <input type="date" className="form-control" value={plannedCompletionDate} onChange={e => setPlannedCompletionDate(e.target.value)} />
            </div>
          </div>

          <div className="form-group">
            <label>Szczegółowy Opis Zlecenia / Zakres Prac</label>
            <textarea className="form-control" rows="3" placeholder="Wpisz szczegóły prac, wytyczne inwestora lub zalecenia..." value={description} onChange={e => setDescription(e.target.value)} />
          </div>


          <div className="form-group">
            <label>Numer Obiektu *</label>
            <input type="text" className="form-control" placeholder="np. T.57157" value={objectNumber} onChange={e => setObjectNumber(e.target.value)} required />
          </div>

          {/* LISTA WYBORU KLIENTA (TYLKO DLA ADMINA / MANAGERÓW) */}
          {userRole !== 'CLIENT' && (
            <>
              <div className="form-group">
                <label>Wybierz Klienta z Listy *</label>
                <select className="form-control" value={selectedClient} onChange={e => setSelectedClient(e.target.value)}>
                  {clients.map(c => (
                    <option key={c.id} value={c.name}>{c.name} {c.code ? `(${c.code})` : ''}</option>
                  ))}
                  <option value="OTHER">➕ Inny... (Wpisz własnego klienta)</option>
                </select>
              </div>

              {selectedClient === 'OTHER' && (
                <div className="form-group" style={{ background: '#0f172a', padding: '10px', borderRadius: '6px', border: '1px solid var(--primary)' }}>
                  <label style={{ color: 'var(--secondary)' }}>Nazwa Nowego / Innego Klienta *</label>
                  <input type="text" className="form-control" placeholder="np. Nowa Firma Sp. z o.o." value={customClientName} onChange={e => setCustomClientName(e.target.value)} required />
                </div>
              )}
            </>
          )}

          {/* PRZYPISYWANIE ZESPOŁU TECHNIKÓW (TYLKO DLA ADMINA / MANAGERÓW) */}
          {userRole !== 'CLIENT' && workers.length > 0 && (
            <div className="form-group">
              <label>Wyznacz Zespół / Serwisantów (Wielokrotny wybór)</label>
              <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap', marginTop: '6px' }}>
                {workers.map(w => {
                  const isSel = selectedWorkers.includes(w.id);
                  return (
                    <label key={w.id} className={`chip-btn ${isSel ? 'active' : ''}`} style={{ cursor: 'pointer', padding: '6px 12px', borderRadius: '16px', border: '1px solid var(--card-border)', background: isSel ? 'var(--primary)' : 'rgba(15, 23, 42, 0.6)' }} onClick={() => {
                      if (isSel) setSelectedWorkers(selectedWorkers.filter(id => id !== w.id));
                      else setSelectedWorkers([...selectedWorkers, w.id]);
                    }}>
                      👷 {w.username}
                    </label>
                  );
                })}
              </div>
            </div>
          )}

          <div className="form-group">
            <label>Lokalizacja / Adres</label>
            <div style={{ display: 'flex', gap: '8px' }}>
              <input type="text" className="form-control" placeholder="np. Poznań, ul. Główna 5" value={location} onChange={e => setLocation(e.target.value)} />
              <button type="button" className="btn btn-secondary" style={{ whiteSpace: 'nowrap', padding: '0 12px' }} onClick={fetchGpsLocation} disabled={gpsLoading}>
                {gpsLoading ? '⏳ GPS...' : '📍 GPS'}
              </button>
            </div>
            {coords && (
              <div style={{ fontSize: '0.75rem', color: 'var(--success)', marginTop: '4px', fontWeight: 600 }}>
                ✅ Pozycja GPS zapisana: {coords.lat.toFixed(5)}, {coords.lng.toFixed(5)}
              </div>
            )}
          </div>
          {/* DOŁĄCZANIE PLIKÓW I ZDJĘĆ DOKUMENTACJI WSTĘPNEJ */}
          <div className="form-group" style={{ background: 'rgba(37, 99, 235, 0.08)', padding: '12px', borderRadius: '8px', border: '1px dashed var(--primary)' }}>
            <label style={{ color: 'var(--secondary)' }}>📁 Załącz Pliki Wstępne / Zdjęcia Referencyjne (opcjonalnie)</label>
            <input 
              type="file" 
              multiple 
              className="form-control" 
              onChange={e => setSelectedFiles(Array.from(e.target.files))} 
            />
            {selectedFiles.length > 0 && (
              <div style={{ fontSize: '0.78rem', color: 'var(--success)', marginTop: '6px', fontWeight: 600 }}>
                📎 Wybrano plików: {selectedFiles.length} szt. ({selectedFiles.map(f => f.name).join(', ')})
              </div>
            )}
          </div>

          <button type="submit" className="btn btn-primary" style={{ width: '100%', marginTop: '10px' }}>Utwórz i Dodaj Zlecenie</button>
        </form>
      </div>
    </div>
  );
}

function ChangePasswordModal({ token, onClose }) {
  const [curr, setCurr] = useState('');
  const [newP, setNewP] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const res = await apiFetch('/api/auth/change-password', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ current_password: curr, new_password: newP })
      }, token);
      showToast(res.message, 'success');
      onClose();
    } catch (err) {
      showToast(err.message, 'error');
    }
  };

  return (
    <div className="modal active">
      <div className="modal-content">
        <button className="modal-close" onClick={onClose}>&times;</button>
        <h3 style={{ marginBottom: '16px', fontWeight: 700 }}>Zmiana Hasła Dostępowej</h3>
        <form onSubmit={handleSubmit}>
          <div className="form-group">
            <label>Obecne Hasło</label>
            <input type="password" className="form-control" value={curr} onChange={e => setCurr(e.target.value)} required />
          </div>
          <div className="form-group">
            <label>Nowe Hasło</label>
            <input type="password" className="form-control" value={newP} onChange={e => setNewP(e.target.value)} required />
          </div>
          <button type="submit" className="btn btn-primary" style={{ width: '100%', marginTop: '10px' }}>💾 Zapisz Nowe Hasło</button>
        </form>
      </div>
    </div>
  );
}

// ─── MODUŁ DYSPOZYTORNI & HARMONOGRAMU GANTTA (PODZIAŁ 50/50: ZADANIA / UŻYTKOWNICY) ────────
function DispatchTimelineBoard({ projects, token, onRefresh }) {
  const [workers, setWorkers] = useState([]);
  const [selectedDate, setSelectedDate] = useState(() => new Date().toISOString().split('T')[0]);
  const [draggedProjectId, setDraggedProjectId] = useState(null);
  const [taskFilter, setTaskFilter] = useState('ALL'); // ALL, UNASSIGNED, URGENT
  const [taskSearch, setTaskSearch] = useState('');

  useEffect(() => {
    apiFetch('/api/auth/users', {}, token)
      .then(users => setWorkers(users.filter(u => u.role === 'WORKER' || u.role === 'ADMIN')))
      .catch(console.error);
  }, [token]);

  const handleAssignWorker = async (projectId, workerUsername) => {
    try {
      const p = projects.find(item => item.id === projectId);
      if (!p) return;
      
      let updatedWorkers = [workerUsername];
      if (workerUsername === 'UNASSIGNED') {
        updatedWorkers = [];
      }

      await apiFetch(`/api/projects/${projectId}/assign-workers`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ assigned_workers: updatedWorkers })
      }, token);

      showToast(workerUsername === 'UNASSIGNED' ? `Przeniesiono zlecenie #${projectId} do bufora nieprzypisanych` : `Przypisano zlecenie #${projectId} do: ${workerUsername}`, 'success');
      if (onRefresh) onRefresh();
    } catch (e) {
      showToast(e.message, 'error');
    }
  };

  const filteredTasks = useMemo(() => {
    return projects.filter(p => {
      if (p.status === 'COMPLETED' || p.status === 'CONFIRMED') return false;
      let w = [];
      try { w = JSON.parse(p.assigned_workers_json || '[]'); } catch(e){}
      
      if (taskFilter === 'UNASSIGNED' && w.length > 0) return false;
      if (taskFilter === 'URGENT' && p.priority !== 'URGENT') return false;

      if (taskSearch.trim()) {
        const q = taskSearch.toLowerCase();
        const matchesName = (p.name || '').toLowerCase().includes(q);
        const matchesObj = (p.object_number || '').toLowerCase().includes(q);
        const matchesClient = (p.client_name || '').toLowerCase().includes(q);
        if (!matchesName && !matchesObj && !matchesClient) return false;
      }
      return true;
    });
  }, [projects, taskFilter, taskSearch]);

  const getWorkerProjects = (worker) => {
    const workerUsername = typeof worker === 'object' ? worker.username : worker;
    const workerId = typeof worker === 'object' ? worker.id : null;
    return projects.filter(p => {
      let w = [];
      try { w = JSON.parse(p.assigned_workers_json || '[]'); } catch(e){}
      return w.includes(workerUsername) || 
             (workerId && (w.includes(workerId) || w.includes(String(workerId))));
    });
  };

  return (
    <div className="dispatch-board card">
      <div className="dispatch-header">
        <div>
          <h3 style={{ margin: 0, fontWeight: 800, color: '#0f172a', fontSize: '1.2rem' }}>
            📅 Tablica Dyspozytorska (Podział: Zadania & Użytkownicy)
          </h3>
          <p style={{ margin: '4px 0 0', fontSize: '0.82rem', color: '#64748b' }}>
            Przeciągaj zlecenia (Drag & Drop) pomiędzy listą zadań po lewej stronie a monterami po prawej stronie.
          </p>
        </div>

        <div style={{ display: 'flex', gap: '10px', alignItems: 'center' }}>
          <label style={{ fontSize: '0.82rem', fontWeight: 600, color: '#475569' }}>Dzień grafiku:</label>
          <input 
            type="date" 
            className="form-control" 
            style={{ width: 'auto', padding: '6px 10px', fontSize: '0.85rem' }} 
            value={selectedDate} 
            onChange={e => setSelectedDate(e.target.value)} 
          />
          <button 
            className="btn btn-secondary" 
            style={{ padding: '6px 14px', fontSize: '0.82rem', fontWeight: 600 }}
            onClick={onRefresh}
          >
            🔄 Odśwież
          </button>
        </div>
      </div>

      <div className="dispatch-grid">
        {/* LEWA STRONA (50%): ZADANIA I ZLECENIA */}
        <div 
          className="dispatch-unassigned-col"
          onDragOver={e => e.preventDefault()}
          onDrop={e => {
            e.preventDefault();
            if (draggedProjectId) {
              handleAssignWorker(draggedProjectId, 'UNASSIGNED');
              setDraggedProjectId(null);
            }
          }}
        >
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderBottom: '2px solid #e2e8f0', paddingBottom: '10px' }}>
            <div>
              <strong style={{ fontSize: '0.95rem', color: '#0f172a' }}>📋 Zadania i Zlecenia ({filteredTasks.length})</strong>
              <div style={{ fontSize: '0.72rem', color: '#64748b' }}>Przeciągnij tutaj, aby cofnąć przypisanie</div>
            </div>
            <div style={{ display: 'flex', gap: '4px' }}>
              <button 
                type="button" 
                className={`btn btn-xs ${taskFilter === 'ALL' ? 'btn-primary' : 'btn-secondary'}`}
                style={{ padding: '3px 8px', fontSize: '0.72rem' }}
                onClick={() => setTaskFilter('ALL')}
              >
                Wszystkie
              </button>
              <button 
                type="button" 
                className={`btn btn-xs ${taskFilter === 'UNASSIGNED' ? 'btn-primary' : 'btn-secondary'}`}
                style={{ padding: '3px 8px', fontSize: '0.72rem' }}
                onClick={() => setTaskFilter('UNASSIGNED')}
              >
                Nieprzypisane
              </button>
              <button 
                type="button" 
                className={`btn btn-xs ${taskFilter === 'URGENT' ? 'btn-primary' : 'btn-secondary'}`}
                style={{ padding: '3px 8px', fontSize: '0.72rem', color: taskFilter === 'URGENT' ? '#fff' : '#dc2626' }}
                onClick={() => setTaskFilter('URGENT')}
              >
                🔥 Pilne
              </button>
            </div>
          </div>

          <div>
            <input 
              type="text"
              placeholder="🔍 Szukaj zadania, stacji, klienta..."
              className="form-control"
              style={{ fontSize: '0.82rem', padding: '6px 10px' }}
              value={taskSearch}
              onChange={e => setTaskSearch(e.target.value)}
            />
          </div>

          {filteredTasks.length === 0 ? (
            <div style={{ textAlign: 'center', color: '#94a3b8', fontSize: '0.85rem', padding: '40px 0' }}>
              Brak zadań spełniających kryteria
            </div>
          ) : (
            <div style={{ display: 'flex', flexDirection: 'column', gap: '8px', overflowY: 'auto', paddingRight: '4px' }}>
              {filteredTasks.map(p => {
                let assigned = [];
                try { assigned = JSON.parse(p.assigned_workers_json || '[]'); } catch(e){}
                return (
                  <div 
                    key={p.id}
                    className={`dispatch-order-card ${draggedProjectId === p.id ? 'dragging' : ''}`}
                    draggable
                    onDragStart={() => setDraggedProjectId(p.id)}
                    onDragEnd={() => setDraggedProjectId(null)}
                    style={{
                      borderLeft: p.priority === 'URGENT' ? '4px solid #dc2626' : (assigned.length > 0 ? '4px solid #0284c7' : '4px solid #94a3b8')
                    }}
                  >
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                      <div className="dispatch-order-title">{p.name}</div>
                      <span style={{ fontSize: '0.68rem', padding: '2px 6px', borderRadius: '4px', background: p.priority === 'URGENT' ? '#fee2e2' : '#e0f2fe', color: p.priority === 'URGENT' ? '#dc2626' : '#0369a1', fontWeight: 700 }}>
                        {p.priority === 'URGENT' ? 'PILNE' : (p.priority || 'NORMAL')}
                      </span>
                    </div>

                    <div className="dispatch-order-meta">
                      <span>🏢 Obiekt: <strong>{p.object_number || 'Brak'}</strong></span>
                      <span style={{ color: '#0284c7', fontWeight: 700 }}>{p.client_name || 'MT-PRO'}</span>
                    </div>

                    <div style={{ marginTop: '6px' }}>
                      <SLACountdownBadge project={p} />
                    </div>

                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: '6px', fontSize: '0.72rem', color: '#64748b' }}>
                      <span>Status: {getProjectStatusBadge(p)}</span>
                      <span>
                        {assigned.length > 0 ? (
                          <span style={{ color: '#16a34a', fontWeight: 600 }}>👤 {assigned.join(', ')}</span>
                        ) : (
                          <span style={{ color: '#d97706', fontWeight: 600 }}>⚠️ Nieprzypisane</span>
                        )}
                      </span>
                    </div>
                  </div>
                );
              })}
            </div>
          )}
        </div>

        {/* PRAWA STRONA (50%): UŻYTKOWNICY / TECHNICY */}
        <div className="dispatch-timeline-container">
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderBottom: '2px solid #e2e8f0', paddingBottom: '10px' }}>
            <div>
              <strong style={{ fontSize: '0.95rem', color: '#0f172a' }}>👷 Użytkownicy / Technicy ({workers.length})</strong>
              <div style={{ fontSize: '0.72rem', color: '#64748b' }}>Upuść zadanie na montera, aby przypisać zlecenie</div>
            </div>
            <span style={{ fontSize: '0.72rem', background: '#dcfce7', color: '#166534', padding: '3px 8px', borderRadius: '10px', fontWeight: 700 }}>
              Dostępni w terenie
            </span>
          </div>

          {workers.length === 0 ? (
            <div style={{ textAlign: 'center', color: '#94a3b8', fontSize: '0.85rem', padding: '40px 0' }}>
              Ładowanie techników...
            </div>
          ) : (
            workers.map(worker => {
              const workerTasks = getWorkerProjects(worker);
              return (
                <div key={worker.id} className="dispatch-tech-card">
                  <div className="dispatch-tech-info">
                    <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
                      <div className="dispatch-tech-avatar">
                        {worker.username.charAt(0).toUpperCase()}
                      </div>
                      <div>
                        <div style={{ fontWeight: 800, fontSize: '0.9rem', color: '#0f172a' }}>{worker.username}</div>
                        <div style={{ fontSize: '0.72rem', color: '#64748b' }}>
                          Rola: <strong style={{ color: '#0284c7' }}>{worker.role}</strong>
                        </div>
                      </div>
                    </div>
                    <div>
                      <span style={{ fontSize: '0.74rem', background: workerTasks.length > 0 ? '#e0f2fe' : '#f1f5f9', color: workerTasks.length > 0 ? '#0284c7' : '#64748b', padding: '3px 8px', borderRadius: '6px', fontWeight: 700 }}>
                        {workerTasks.length} {workerTasks.length === 1 ? 'zlecenie' : 'zleceń'}
                      </span>
                    </div>
                  </div>

                  {/* Drop zone dla technika */}
                  <div 
                    className="dispatch-slots-lane"
                    onDragOver={e => e.preventDefault()}
                    onDrop={e => {
                      e.preventDefault();
                      if (draggedProjectId) {
                        handleAssignWorker(draggedProjectId, worker.username);
                        setDraggedProjectId(null);
                      }
                    }}
                  >
                    {workerTasks.length === 0 ? (
                      <div style={{ textAlign: 'center', color: '#94a3b8', fontSize: '0.76rem', padding: '14px 0' }}>
                        📥 Przeciągnij i upuść zlecenie tutaj, aby przypisać do {worker.username}
                      </div>
                    ) : (
                      workerTasks.map(t => (
                        <div 
                          key={t.id} 
                          className="dispatch-order-card"
                          draggable
                          onDragStart={() => setDraggedProjectId(t.id)}
                          onDragEnd={() => setDraggedProjectId(null)}
                          style={{ 
                            borderLeft: '4px solid #16a34a',
                            display: 'flex',
                            justifyContent: 'space-between',
                            alignItems: 'center',
                            padding: '8px 12px'
                          }}
                        >
                          <div>
                            <div className="dispatch-order-title" style={{ fontSize: '0.82rem' }}>{t.name}</div>
                            <div style={{ fontSize: '0.7rem', color: '#64748b' }}>
                              🏢 {t.object_number || '-'} | {t.client_name || 'MT-PRO'}
                            </div>
                          </div>
                          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                            <span style={{ fontSize: '0.65rem' }}>{getProjectStatusBadge(t)}</span>
                            <button 
                              type="button"
                              title="Usuń przypisanie"
                              className="btn btn-xs btn-secondary"
                              style={{ padding: '2px 6px', fontSize: '0.65rem', color: '#dc2626' }}
                              onClick={() => handleAssignWorker(t.id, 'UNASSIGNED')}
                            >
                              ✕
                            </button>
                          </div>
                        </div>
                      ))
                    )}
                  </div>
                </div>
              );
            })
          )}
        </div>
      </div>
    </div>
  );
}

function MapView({ projects, token, onSelectProject }) {
  const mapRef = React.useRef(null);
  const leafletMap = React.useRef(null);

  React.useEffect(() => {
    if (!mapRef.current) return;
    if (typeof L === 'undefined') return;

    if (!leafletMap.current) {
      leafletMap.current = L.map(mapRef.current).setView([52.2297, 21.0122], 6); // Polska domyślnie
      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; OpenStreetMap contributors'
      }).addTo(leafletMap.current);
    }

    const map = leafletMap.current;
    const markers = [];

    projects.forEach(p => {
      if (p.latitude && p.longitude) {
        const marker = L.marker([p.latitude, p.longitude]).addTo(map);
        marker.bindPopup(`
          <div style="font-family: Inter, sans-serif; padding: 4px;">
            <strong style="color: #2b56f5; font-size: 0.95rem;">${p.name}</strong><br/>
            <span style="font-size: 0.8rem; color: #64748b;">Obiekt: ${p.object_number || '-'} | Klient: ${p.client_name}</span><br/>
            <span style="font-size: 0.8rem; color: #10b981;">Zdjecia: ${p.photo_count} szt.</span>
          </div>
        `);
        markers.push(marker);
      }
    });

    if (markers.length > 0) {
      const group = new L.featureGroup(markers);
      map.fitBounds(group.getBounds().pad(0.2));
    }
  }, [projects]);

  return (
    <div className="card">
      <div className="card-header">
        <div className="card-title">🗺️ Mapa Obiektów i Zleceń (OpenStreetMap GPS)</div>
      </div>
      <div style={{ padding: '12px' }}>
        <div ref={mapRef} style={{ width: '100%', height: '500px', borderRadius: '8px', zIndex: 1 }}></div>
      </div>
    </div>
  );
}

const DEPOT_PRESETS = [
  { label: 'Warszawa', lat: 52.2297, lng: 21.0122, addr: 'Warszawa (Centrala / Magazyn Główny)' },
  { label: 'Katowice', lat: 50.2649, lng: 19.0238, addr: 'Katowice (Hub Śląsk)' },
  { label: 'Kraków', lat: 50.0647, lng: 19.9450, addr: 'Kraków (Oddział Małopolska)' },
  { label: 'Poznań', lat: 52.4064, lng: 16.9252, addr: 'Poznań (Hub Wielkopolska)' },
  { label: 'Wrocław', lat: 51.1079, lng: 17.0385, addr: 'Wrocław (Hub Dolny Śląsk)' },
  { label: 'Gdańsk', lat: 54.3520, lng: 18.6466, addr: 'Gdańsk (Hub Północ)' },
  { label: 'Łódź', lat: 51.7592, lng: 19.4560, addr: 'Łódź (Centralny Hub)' },
];

// ─── MODUŁ PLANOWANIA TRAS & OPTYMALIZACJI DOJAZDÓW (AI ROUTE PLANNER) ──────
function RoutePlannerView({ projects, token, onRefreshProjects }) {
  const [workers, setWorkers] = useState([]);
  const [selectedWorker, setSelectedWorker] = useState('ALL');
  const [selectedDate, setSelectedDate] = useState(() => new Date().toISOString().split('T')[0]);
  const [depotAddress, setDepotAddress] = useState(() => {
    try {
      const saved = JSON.parse(localStorage.getItem('fsm_route_depot') || '{}');
      return saved.addr || 'Warszawa (Centrala / Magazyn Główny)';
    } catch(e) { return 'Warszawa (Centrala / Magazyn Główny)'; }
  });
  const [depotLat, setDepotLat] = useState(() => {
    try {
      const saved = JSON.parse(localStorage.getItem('fsm_route_depot') || '{}');
      return typeof saved.lat === 'number' ? saved.lat : 52.2297;
    } catch(e) { return 52.2297; }
  });
  const [depotLng, setDepotLng] = useState(() => {
    try {
      const saved = JSON.parse(localStorage.getItem('fsm_route_depot') || '{}');
      return typeof saved.lng === 'number' ? saved.lng : 21.0122;
    } catch(e) { return 21.0122; }
  });
  const [editingDepot, setEditingDepot] = useState(false);
  const [loadingBtSearchId, setLoadingBtSearchId] = useState(null);
  const [stops, setStops] = useState([]);
  const [optimized, setOptimized] = useState(false);

  const saveDepot = (addr, lat, lng) => {
    setDepotAddress(addr);
    setDepotLat(lat);
    setDepotLng(lng);
    try {
      localStorage.setItem('fsm_route_depot', JSON.stringify({ addr, lat, lng }));
    } catch(e) {}
  };

  const handleGetMyGps = () => {
    if (!navigator.geolocation) {
      showToast('Geolokalizacja nie jest obsługiwana przez Twoją przeglądarkę.', 'error');
      return;
    }
    showToast('Pobieranie bieżącej lokalizacji GPS...', 'info');
    navigator.geolocation.getCurrentPosition(
      (pos) => {
        const lat = parseFloat(pos.coords.latitude.toFixed(5));
        const lng = parseFloat(pos.coords.longitude.toFixed(5));
        const addr = `Moja bieżąca lokalizacja GPS (${lat}, ${lng})`;
        saveDepot(addr, lat, lng);
        showToast('📍 Ustawiono punkt startowy wg Twojej lokalizacji GPS!', 'success');
      },
      (err) => {
        showToast(`Nie udało się pobrać lokalizacji GPS: ${err.message}`, 'error');
      },
      { enableHighAccuracy: true, timeout: 8000 }
    );
  };

  const routeMapRef = React.useRef(null);
  const routeLeaflet = React.useRef(null);
  const layerGroupRef = React.useRef(null);

  useEffect(() => {
    apiFetch('/api/auth/users', {}, token)
      .then(usrs => setWorkers(usrs.filter(u => u.role === 'WORKER' || u.role === 'ADMIN')))
      .catch(console.error);
  }, [token]);

  // Filtrowanie zleceń wg pracownika i daty
  useEffect(() => {
    const list = projects.filter(p => {
      if (p.status === 'COMPLETED' || p.status === 'CONFIRMED') return false;
      if (!p.latitude || !p.longitude) return false;

      if (selectedWorker !== 'ALL') {
        let assigned = [];
        try { assigned = JSON.parse(p.assigned_workers_json || '[]'); } catch(e){}
        const isMatched = assigned.includes(selectedWorker) || assigned.some(id => {
          const wObj = workers.find(w => String(w.id) === String(id));
          return wObj && (wObj.username === selectedWorker || String(wObj.id) === String(selectedWorker));
        });
        if (!isMatched) return false;
      }
      return true;
    });

    setStops(list);
    setOptimized(false);
  }, [projects, selectedWorker, selectedDate, workers]);

  // Zlecenia oczekujące na koordynaty GPS dla wybranego pracownika
  const pendingGpsProjects = useMemo(() => {
    return projects.filter(p => {
      if (p.status === 'COMPLETED' || p.status === 'CONFIRMED') return false;
      if (p.latitude && p.longitude) return false;

      if (selectedWorker !== 'ALL') {
        let assigned = [];
        try { assigned = JSON.parse(p.assigned_workers_json || '[]'); } catch(e){}
        const isMatched = assigned.includes(selectedWorker) || assigned.some(id => {
          const wObj = workers.find(w => String(w.id) === String(id));
          return wObj && (wObj.username === selectedWorker || String(wObj.id) === String(selectedWorker));
        });
        if (!isMatched) return false;
      }
      return true;
    });
  }, [projects, selectedWorker, workers]);

  // 1-klikowe pobranie współrzędnych z BTSearch i natychmiastowe umieszczenie na trasie
  const handleFetchBtSearchForProject = async (prj) => {
    const code = (prj.object_number || prj.name || '').trim();
    if (!code) {
      showToast('Zlecenie nie posiada numeru obiektu ani kodu stacji.', 'warning');
      return;
    }
    setLoadingBtSearchId(prj.id);
    try {
      const data = await apiFetch(`/api/btsearch/lookup?code=${encodeURIComponent(code)}`, {}, token);
      let lat = data.latitude;
      let lng = data.longitude;
      if ((!lat || !lng) && data.gps_coordinates) {
        const parts = String(data.gps_coordinates).split(',').map(s => s.trim());
        if (parts.length === 2 && !isNaN(parseFloat(parts[0])) && !isNaN(parseFloat(parts[1]))) {
          lat = parseFloat(parts[0]);
          lng = parseFloat(parts[1]);
        }
      }
      if (!lat || !lng) {
        throw new Error('BTSearch nie zwrócił współrzędnych GPS dla tego obiektu.');
      }

      const loc = data.address || prj.location || 'Pobrano z BTSearch';
      await apiFetch(`/api/projects/${prj.id}/update`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          latitude: lat,
          longitude: lng,
          location: loc
        })
      }, token);

      showToast(`✅ Zaktualizowano GPS (${lat.toFixed(4)}, ${lng.toFixed(4)}) dla stacji ${code}!`, 'success');
      if (onRefreshProjects) {
        onRefreshProjects();
      }
    } catch (err) {
      showToast(err.message || 'Błąd pobierania danych z BTSearch', 'error');
    } finally {
      setLoadingBtSearchId(null);
    }
  };

  // Obliczenie odległości Haversine w km
  const getDistanceKm = (lat1, lon1, lat2, lon2) => {
    const R = 6371;
    const dLat = (lat2 - lat1) * Math.PI / 180;
    const dLon = (lon2 - lon1) * Math.PI / 180;
    const a = 
      Math.sin(dLat/2) * Math.sin(dLat/2) +
      Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) * 
      Math.sin(dLon/2) * Math.sin(dLon/2);
    const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
    return R * c;
  };

  // Statystyki trasy
  const routeStats = useMemo(() => {
    if (stops.length === 0) return { totalKm: 0, totalTimeMin: 0, formattedTime: '0 min' };
    let totalKm = 0;
    let prevLat = depotLat;
    let prevLng = depotLng;

    stops.forEach(s => {
      totalKm += getDistanceKm(prevLat, prevLng, s.latitude, s.longitude);
      prevLat = s.latitude;
      prevLng = s.longitude;
    });

    // Średnia prędkość serwisowa w trasie (55 km/h) + 45 min na realizację każdego zlecenia na obiekcie
    const drivingTimeMinutes = Math.round((totalKm / 55) * 60);
    const onSiteTimeMinutes = stops.length * 45;
    const totalTimeMin = drivingTimeMinutes + onSiteTimeMinutes;
    const hours = Math.floor(totalTimeMin / 60);
    const mins = totalTimeMin % 60;

    return {
      totalKm: totalKm.toFixed(1),
      drivingTimeMinutes,
      onSiteTimeMinutes,
      totalTimeMin,
      formattedTime: hours > 0 ? `${hours} godz. ${mins} min.` : `${mins} min.`
    };
  }, [stops, depotLat, depotLng]);

  // Optymalizacja trasy metodą Najbliższego Sąsiada (Nearest Neighbor TSP)
  const handleOptimizeRoute = () => {
    if (stops.length <= 1) {
      showToast('Dodaj co najmniej 2 obiekty z GPS, aby zoptymalizować trasę!', 'info');
      return;
    }

    const unvisited = [...stops];
    const newRoute = [];
    let currentLat = depotLat;
    let currentLng = depotLng;

    while (unvisited.length > 0) {
      let nearestIdx = 0;
      let minDistance = Infinity;

      for (let i = 0; i < unvisited.length; i++) {
        const d = getDistanceKm(currentLat, currentLng, unvisited[i].latitude, unvisited[i].longitude);
        if (d < minDistance) {
          minDistance = d;
          nearestIdx = i;
        }
      }

      const nextStop = unvisited.splice(nearestIdx, 1)[0];
      newRoute.push(nextStop);
      currentLat = nextStop.latitude;
      currentLng = nextStop.longitude;
    }

    setStops(newRoute);
    setOptimized(true);
    showToast(`⚡ Trasa zoptymalizowana! Zaoszczędzono czas dojazdu.`, 'success');
  };

  const moveStop = (index, direction) => {
    const newStops = [...stops];
    const targetIdx = index + direction;
    if (targetIdx < 0 || targetIdx >= newStops.length) return;
    const temp = newStops[index];
    newStops[index] = newStops[targetIdx];
    newStops[targetIdx] = temp;
    setStops(newStops);
  };

  // Generowanie linku Google Maps z całą wielopunktową trasą
  const getGoogleMapsMultiRouteUrl = () => {
    if (stops.length === 0) return '#';
    const origin = `${depotLat},${depotLng}`;
    const destination = `${stops[stops.length - 1].latitude},${stops[stops.length - 1].longitude}`;
    const waypoints = stops.slice(0, -1).map(s => `${s.latitude},${s.longitude}`).join('|');
    return `https://www.google.com/maps/dir/?api=1&origin=${origin}&destination=${destination}${waypoints ? `&waypoints=${waypoints}` : ''}&travelmode=driving`;
  };

  // Rysowanie mapy i linii trasy Leaflet
  useEffect(() => {
    if (!routeMapRef.current || typeof L === 'undefined') return;

    if (!routeLeaflet.current) {
      routeLeaflet.current = L.map(routeMapRef.current).setView([depotLat, depotLng], 8);
      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; OpenStreetMap contributors'
      }).addTo(routeLeaflet.current);
      layerGroupRef.current = L.layerGroup().addTo(routeLeaflet.current);
    }

    const map = routeLeaflet.current;
    const layerGroup = layerGroupRef.current;
    layerGroup.clearLayers();

    const latLngs = [[depotLat, depotLng]];
    const markers = [];

    // Baza / Punkt startowy
    const depotIcon = L.divIcon({
      className: 'custom-div-icon',
      html: `<div style="background:#16a34a; color:#fff; width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; border:2px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,0.3);">🏁</div>`,
      iconSize: [28, 28],
      iconAnchor: [14, 14]
    });
    const depotMarker = L.marker([depotLat, depotLng], { icon: depotIcon }).addTo(layerGroup);
    depotMarker.bindPopup(`<strong>🏁 Baza Startowa / Magazyn</strong><br/>${depotAddress}`);
    markers.push(depotMarker);

    // Kolejne punkty trasy
    stops.forEach((s, idx) => {
      latLngs.push([s.latitude, s.longitude]);
      const stopIcon = L.divIcon({
        className: 'custom-div-icon',
        html: `<div style="background:#0284c7; color:#fff; width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; border:2px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,0.3); font-size:0.8rem;">${idx + 1}</div>`,
        iconSize: [28, 28],
        iconAnchor: [14, 14]
      });
      const marker = L.marker([s.latitude, s.longitude], { icon: stopIcon }).addTo(layerGroup);
      marker.bindPopup(`
        <div style="font-family: Inter, sans-serif; padding: 2px;">
          <div style="font-size:0.75rem; color:#0284c7; font-weight:800;">PRZYSTANEK #${idx + 1}</div>
          <strong style="color: #0f172a; font-size: 0.95rem;">${s.name}</strong><br/>
          <span style="font-size: 0.8rem; color: #64748b;">Obiekt: ${s.object_number || '-'} | ${s.location || 'GPS'}</span><br/>
          <span style="font-size: 0.76rem; color: #16a34a; font-weight:700;">Status: ${s.status}</span>
        </div>
      `);
      markers.push(marker);
    });

    // Rysowanie linii trasy
    if (latLngs.length > 1) {
      L.polyline(latLngs, {
        color: '#0284c7',
        weight: 4,
        opacity: 0.8,
        dashArray: '8, 8'
      }).addTo(layerGroup);
    }

    if (markers.length > 0) {
      const group = new L.featureGroup(markers);
      map.fitBounds(group.getBounds().pad(0.25));
    }
  }, [stops, depotLat, depotLng]);

  return (
    <div className="route-planner-card card">
      <div className="card-header" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: '10px' }}>
        <div>
          <div className="card-title" style={{ fontSize: '1.2rem', fontWeight: 800 }}>
            🚗 Moduł Planowania Tras & Optymalizacji Dojazdów
          </div>
          <div style={{ fontSize: '0.8rem', color: '#64748b', marginTop: '2px' }}>
            Wyliczaj optymalne trasy dla techników w terenie, minimalizuj czas przejazdów i eksportuj do nawigacji GPS.
          </div>
        </div>

        <div style={{ display: 'flex', gap: '10px', alignItems: 'center', flexWrap: 'wrap' }}>
          <select 
            className="form-control" 
            style={{ width: 'auto', fontSize: '0.85rem', fontWeight: 600 }}
            value={selectedWorker}
            onChange={e => setSelectedWorker(e.target.value)}
          >
            <option value="ALL">👷 Wszyscy Technicy</option>
            {workers.map(w => (
              <option key={w.id} value={w.username}>👷 {w.username} ({w.role})</option>
            ))}
          </select>

          <input 
            type="date" 
            className="form-control" 
            style={{ width: 'auto', fontSize: '0.85rem' }} 
            value={selectedDate} 
            onChange={e => setSelectedDate(e.target.value)} 
          />

          <button 
            type="button" 
            className="btn btn-primary"
            style={{ padding: '8px 16px', fontSize: '0.85rem', fontWeight: 800, background: 'linear-gradient(135deg, #0284c7, #2563eb)' }}
            onClick={handleOptimizeRoute}
          >
            ⚡ Optymalizuj Trasę (AI TSP)
          </button>

          {stops.length > 0 && (
            <a 
              href={getGoogleMapsMultiRouteUrl()} 
              target="_blank" 
              rel="noreferrer"
              className="btn btn-secondary"
              style={{ padding: '8px 16px', fontSize: '0.85rem', fontWeight: 700, textDecoration: 'none', background: '#16a34a', color: '#fff', border: 'none' }}
            >
              🗺️ Otwórz Trasę w Google Maps
            </a>
          )}
        </div>
      </div>

      {/* PODSUMOWANIE METRYK TRASY */}
      <div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap', padding: '0 16px' }}>
        <div className="route-summary-badge">
          📍 Przystanki: <strong>{stops.length} stacji</strong>
        </div>
        <div className="route-summary-badge">
          🛣️ Łączny Dystans: <strong>{routeStats.totalKm} km</strong>
        </div>
        <div className="route-summary-badge">
          ⏱️ Szacowany Czas Trasy: <strong>{routeStats.formattedTime}</strong>
        </div>
        <div className="route-summary-badge" style={{ background: '#eff6ff', color: '#1d4ed8', border: '1px solid #bfdbfe' }}>
          🚗 Przejazd: <strong>{routeStats.drivingTimeMinutes} min.</strong> | 🛠️ Prace: <strong>{routeStats.onSiteTimeMinutes} min.</strong>
        </div>
        {optimized && (
          <span style={{ fontSize: '0.78rem', background: '#dcfce7', color: '#15803d', padding: '4px 10px', borderRadius: '8px', fontWeight: 800 }}>
            ✅ Zoptymalizowano kolejność najkrótszą drogą
          </span>
        )}
      </div>

      {/* SIATKA: LISTA PRZYSTANKÓW (LEWA) + MAPA LEAFLET (PRAWA) */}
      <div className="route-planner-grid" style={{ padding: '16px' }}>
        {/* LEWA STRONA: PUNKTY TRASY */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: '10px', maxHeight: '580px', overflowY: 'auto' }}>
          {/* Punkt Bazy / Startu */}
          <div className="route-stop-item" style={{ borderLeft: '4px solid #16a34a', flexDirection: 'column', alignItems: 'stretch' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
              <div className="route-stop-num depot">🏁</div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <strong style={{ fontSize: '0.9rem', color: '#0f172a' }}>Baza Startowa / Magazyn</strong>
                <div style={{ fontSize: '0.75rem', color: '#64748b', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                  {depotAddress} ({depotLat.toFixed(4)}, {depotLng.toFixed(4)})
                </div>
              </div>
              <div style={{ display: 'flex', gap: '6px' }}>
                <button
                  type="button"
                  className="btn btn-xs btn-secondary"
                  style={{ padding: '3px 8px', fontSize: '0.72rem', background: '#f0fdf4', color: '#15803d', borderColor: '#bbf7d0', fontWeight: 700 }}
                  onClick={handleGetMyGps}
                  title="Pobierz bieżącą lokalizację GPS z przeglądarki"
                >
                  📍 Mój GPS
                </button>
                <button
                  type="button"
                  className="btn btn-xs btn-secondary"
                  style={{ padding: '3px 8px', fontSize: '0.72rem', fontWeight: 600 }}
                  onClick={() => setEditingDepot(!editingDepot)}
                  title="Zmień punkt startowy lub wybierz miasto"
                >
                  {editingDepot ? 'Zamknij' : '⚙️ Zmień'}
                </button>
              </div>
            </div>

            {editingDepot && (
              <div style={{ marginTop: '10px', paddingTop: '10px', borderTop: '1px solid #e2e8f0' }}>
                <div style={{ fontSize: '0.74rem', fontWeight: 700, color: '#475569', marginBottom: '6px' }}>
                  Wybierz miasto startowe lub wpisz koordynaty bazy:
                </div>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: '5px', marginBottom: '8px' }}>
                  {DEPOT_PRESETS.map(preset => (
                    <button
                      key={preset.label}
                      type="button"
                      className="btn btn-xs"
                      style={{
                        padding: '2px 8px',
                        fontSize: '0.72rem',
                        background: depotAddress.startsWith(preset.label) ? '#dcfce7' : '#f1f5f9',
                        color: depotAddress.startsWith(preset.label) ? '#166534' : '#334155',
                        border: depotAddress.startsWith(preset.label) ? '1px solid #86efac' : '1px solid #cbd5e1',
                        fontWeight: 600,
                        borderRadius: '12px'
                      }}
                      onClick={() => saveDepot(preset.addr, preset.lat, preset.lng)}
                    >
                      {preset.label}
                    </button>
                  ))}
                </div>
                <div style={{ display: 'flex', gap: '6px' }}>
                  <input
                    type="text"
                    className="form-control"
                    style={{ fontSize: '0.75rem', padding: '4px 8px' }}
                    placeholder="Nazwa bazy / adres"
                    value={depotAddress}
                    onChange={e => saveDepot(e.target.value, depotLat, depotLng)}
                  />
                  <input
                    type="number"
                    step="0.0001"
                    className="form-control"
                    style={{ width: '90px', fontSize: '0.75rem', padding: '4px 6px' }}
                    placeholder="Lat"
                    value={depotLat}
                    onChange={e => saveDepot(depotAddress, parseFloat(e.target.value) || 0, depotLng)}
                  />
                  <input
                    type="number"
                    step="0.0001"
                    className="form-control"
                    style={{ width: '90px', fontSize: '0.75rem', padding: '4px 6px' }}
                    placeholder="Lng"
                    value={depotLng}
                    onChange={e => saveDepot(depotAddress, depotLat, parseFloat(e.target.value) || 0)}
                  />
                </div>
              </div>
            )}
          </div>

          {stops.length === 0 ? (
            <div style={{ textAlign: 'center', padding: '30px 16px', color: '#94a3b8', fontSize: '0.88rem', background: '#f8fafc', borderRadius: '10px', border: '1px dashed #cbd5e1' }}>
              Brak zleceń z koordynatami GPS na trasie.
              <div style={{ fontSize: '0.78rem', color: '#64748b', marginTop: '6px' }}>
                Poniżej znajdziesz zlecenia oczekujące na pobranie GPS.
              </div>
            </div>
          ) : (
            stops.map((s, idx) => (
              <div key={s.id} className="route-stop-item" style={{ borderLeft: '4px solid #0284c7' }}>
                <div className="route-stop-num">{idx + 1}</div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontWeight: 800, fontSize: '0.88rem', color: '#0f172a', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                    {s.name}
                  </div>
                  <div style={{ fontSize: '0.74rem', color: '#64748b', marginTop: '2px' }}>
                    🏢 Obiekt: <strong>{s.object_number || 'Brak'}</strong> | {s.client_name}
                  </div>
                  <div style={{ fontSize: '0.72rem', color: '#0284c7', marginTop: '2px' }}>
                    📍 {s.location || `${s.latitude.toFixed(4)}, ${s.longitude.toFixed(4)}`}
                  </div>
                </div>

                <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
                  <button 
                    type="button" 
                    className="btn btn-xs btn-secondary" 
                    style={{ padding: '2px 6px', fontSize: '0.7rem' }}
                    onClick={() => moveStop(idx, -1)}
                    disabled={idx === 0}
                    title="Przesuń w górę"
                  >
                    ▲
                  </button>
                  <button 
                    type="button" 
                    className="btn btn-xs btn-secondary" 
                    style={{ padding: '2px 6px', fontSize: '0.7rem' }}
                    onClick={() => moveStop(idx, 1)}
                    disabled={idx === stops.length - 1}
                    title="Przesuń w dół"
                  >
                    ▼
                  </button>
                </div>
              </div>
            ))
          )}

          {/* SEKCJA: ZLECENIA OCZEKUJĄCE NA GPS */}
          {pendingGpsProjects.length > 0 && (
            <div style={{ marginTop: '14px', borderTop: '2px dashed #fed7aa', paddingTop: '12px' }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '8px' }}>
                <strong style={{ fontSize: '0.84rem', color: '#c2410c', display: 'flex', alignItems: 'center', gap: '4px' }}>
                  ⚠️ Oczekujące na GPS ({pendingGpsProjects.length})
                </strong>
                <span style={{ fontSize: '0.7rem', color: '#9a3412', background: '#ffedd5', padding: '2px 8px', borderRadius: '6px', fontWeight: 700 }}>
                  Wymaga współrzędnych
                </span>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
                {pendingGpsProjects.map(p => (
                  <div key={p.id} style={{ background: '#fffaf0', border: '1px solid #fed7aa', borderRadius: '8px', padding: '8px 10px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: '8px' }}>
                    <div style={{ minWidth: 0, flex: 1 }}>
                      <div style={{ fontWeight: 700, fontSize: '0.82rem', color: '#7b341e', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                        {p.name}
                      </div>
                      <div style={{ fontSize: '0.72rem', color: '#9c4221', marginTop: '1px' }}>
                        Stacja: <strong>{p.object_number || 'Brak'}</strong> | {p.client_name || '-'}
                      </div>
                    </div>
                    <button
                      type="button"
                      className="btn btn-xs btn-primary"
                      style={{ padding: '4px 8px', fontSize: '0.72rem', fontWeight: 700, whiteSpace: 'nowrap', background: '#ea580c', borderColor: '#c2410c' }}
                      disabled={loadingBtSearchId === p.id}
                      onClick={() => handleFetchBtSearchForProject(p)}
                      title="Wyszukaj współrzędne stacji w bazie BTSearch i dodaj do trasy"
                    >
                      {loadingBtSearchId === p.id ? '⏳ Szukanie...' : '🔍 Pobierz GPS (BTSearch)'}
                    </button>
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>

        {/* PRAWA STRONA: MAPA LEAFLET */}
        <div style={{ background: '#f8fafc', borderRadius: '10px', border: '1px solid #e2e8f0', overflow: 'hidden' }}>
          <div ref={routeMapRef} style={{ width: '100%', height: '580px' }}></div>
        </div>
      </div>
    </div>
  );
}

function TempPasswordModal({ token, targetUser, onClose }) {
  const [tempPass, setTempPass] = useState('temp' + Math.floor(1000 + Math.random() * 9000));

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const res = await apiFetch(`/api/auth/users/${targetUser.id}/temp-password`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ temp_password: tempPass })
      }, token);
      showToast(res.message, 'success');
      onClose();
    } catch (err) {
      showToast(err.message, 'error');
    }
  };

  return (
    <div className="modal active">
      <div className="modal-content">
        <button className="modal-close" onClick={onClose}>&times;</button>
        <h3 style={{ marginBottom: '16px', fontWeight: 700 }}>Tymczasowe Hasło dla: {targetUser.username}</h3>
        <form onSubmit={handleSubmit}>
          <div className="form-group">
            <label>Tymczasowe Hasło</label>
            <input type="text" className="form-control" value={tempPass} onChange={e => setTempPass(e.target.value)} required />
          </div>
          <button type="submit" className="btn btn-primary" style={{ width: '100%', marginTop: '10px' }}>🔑 Nadaj Hasło Tymczasowe</button>
        </form>
      </div>
    </div>
  );
}

function EditProjectModal({ token, project, getProjectStatusBadge, onClose, onUpdated }) {
  const [completionDate, setCompletionDate] = useState(project.completion_date || '');
  const [plannedCompletionDate, setPlannedCompletionDate] = useState(project.planned_completion_date || '');
  const [remarks, setRemarks] = useState(project.remarks || '');
  
  // Adres i Współrzędne GPS
  const [location, setLocation] = useState(project.location || '');
  const [latitude, setLatitude] = useState(project.latitude !== undefined && project.latitude !== null ? project.latitude : '');
  const [longitude, setLongitude] = useState(project.longitude !== undefined && project.longitude !== null ? project.longitude : '');
  const [objectNumber, setObjectNumber] = useState(project.object_number || '');
  const [loadingLookup, setLoadingLookup] = useState(false);

  // Przypisywanie techników / użytkowników
  const [workers, setWorkers] = useState([]);
  const [selectedWorkers, setSelectedWorkers] = useState(() => {
    try {
      const arr = JSON.parse(project.assigned_workers_json || '[]');
      return Array.isArray(arr) ? arr : [];
    } catch(e) {
      return [];
    }
  });

  useEffect(() => {
    apiFetch('/api/auth/users', {}, token)
      .then(usrs => {
        setWorkers(usrs.filter(u => u.role === 'WORKER' || u.role === 'ADMIN'));
      })
      .catch(console.error);
  }, [token]);

  const isWorkerSelected = (w) => {
    if (!w) return false;
    return selectedWorkers.includes(w.id) ||
           selectedWorkers.includes(String(w.id)) ||
           selectedWorkers.includes(w.username);
  };

  const toggleWorker = (w) => {
    if (isWorkerSelected(w)) {
      setSelectedWorkers(selectedWorkers.filter(idOrName => 
        idOrName !== w.id && idOrName !== String(w.id) && idOrName !== w.username
      ));
    } else {
      setSelectedWorkers([...selectedWorkers, w.username]);
    }
  };

  const handleSelectDropdown = (e) => {
    const val = e.target.value;
    if (!val) return;
    const targetWorker = workers.find(w => w.username === val || String(w.id) === val);
    if (targetWorker && !isWorkerSelected(targetWorker)) {
      setSelectedWorkers([...selectedWorkers, targetWorker.username]);
    }
    e.target.value = '';
  };

  // Pobieranie danych i współrzędnych GPS z BTSearch
  const handleFetchBtSearch = async () => {
    const code = objectNumber.trim();
    if (!code) {
      showToast('Wpisz numer/kod obiektu (np. 51482), aby pobrać dane!', 'warning');
      return;
    }
    setLoadingLookup(true);
    try {
      const data = await apiFetch(`/api/btsearch/lookup?code=${encodeURIComponent(code)}`, {}, token);
      if (data.address) setLocation(data.address);
      if (data.gps_coordinates) {
        const parts = data.gps_coordinates.split(',').map(s => s.trim());
        if (parts.length === 2 && !isNaN(parseFloat(parts[0])) && !isNaN(parseFloat(parts[1]))) {
          setLatitude(parseFloat(parts[0]));
          setLongitude(parseFloat(parts[1]));
        }
      }
      showToast(`Pobrano adres i współrzędne z BTSearch dla stacji ${code}!`, 'success');
    } catch (err) {
      showToast(err.message || 'Nie znaleziono danych w BTSearch', 'error');
    } finally {
      setLoadingLookup(false);
    }
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const latVal = latitude !== '' ? parseFloat(latitude) : null;
      const lngVal = longitude !== '' ? parseFloat(longitude) : null;

      const res = await apiFetch(`/api/projects/${project.id}/update`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ 
          completion_date: completionDate, 
          planned_completion_date: plannedCompletionDate,
          remarks,
          location,
          latitude: latVal,
          longitude: lngVal,
          object_number: objectNumber,
          assigned_workers: selectedWorkers
        })
      }, token);
      showToast(res.message, 'success');
      onUpdated();
    } catch (err) {
      showToast(err.message, 'error');
    }
  };

  return (
    <div className="modal active">
      <div className="modal-content" style={{ maxWidth: '720px', maxHeight: '85vh', overflowY: 'auto' }}>
        <button className="modal-close" onClick={onClose}>&times;</button>
        <h3 style={{ marginBottom: '16px', fontWeight: 700 }}>✏️ Szczegóły & Korekta Zlecenia: {project.name}</h3>
        
        {/* PODGLĄD CAŁEGO ZLECENIA (DANE I OPIS BEZ ZDJĘĆ) */}
        <div style={{ background: '#0f172a', padding: '16px', borderRadius: '10px', marginBottom: '16px', border: '1px solid var(--card-border)', fontSize: '0.88rem' }}>
          <div style={{ fontSize: '0.78rem', color: 'var(--secondary)', textTransform: 'uppercase', fontWeight: 800, letterSpacing: '0.5px', marginBottom: '8px' }}>
            📄 PODGLĄD DANYCH I OPISU ZLECENIA
          </div>
          
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '10px', marginBottom: '12px' }}>
            <div>
              <span style={{ color: 'var(--text-muted)' }}>Klient:</span> <strong style={{ color: '#fff' }}>{project.client_name || 'Brak'}</strong>
            </div>
            <div>
              <span style={{ color: 'var(--text-muted)' }}>Kod Zlecenia:</span> <code style={{ color: 'var(--secondary)', background: 'rgba(56,189,248,0.1)', padding: '2px 6px', borderRadius: '4px' }}>{project.code || '-'}</code>
            </div>
            <div>
              <span style={{ color: 'var(--text-muted)' }}>Numer Obiektu:</span> <strong style={{ color: 'var(--warning)' }}>{project.object_number || 'Brak'}</strong>
            </div>
            <div>
              <span style={{ color: 'var(--text-muted)' }}>Status Zlecenia:</span> {getProjectStatusBadge ? getProjectStatusBadge(project) : project.status}
            </div>
            <div>
              <span style={{ color: 'var(--text-muted)' }}>Typ / Szablon:</span> <strong style={{ color: '#fff' }}>{project.project_type || project.order_template || 'Standardowy'}</strong>
            </div>
            <div>
              <span style={{ color: 'var(--text-muted)' }}>Priorytet:</span> <span style={{ color: project.priority === 'HIGH' || project.priority === 'URGENT' ? 'var(--danger)' : 'var(--success)', fontWeight: 700 }}>{project.priority || 'NORMALNY'}</span>
            </div>
            {project.created_at && (
              <div>
                <span style={{ color: 'var(--text-muted)' }}>Data Zgłoszenia:</span> <span style={{ color: '#fff' }}>{new Date(project.created_at).toLocaleString('pl-PL')}</span>
              </div>
            )}
          </div>

          {/* OPIS / ZAKRES PRAC */}
          <div style={{ marginTop: '10px', background: 'rgba(30, 41, 59, 0.8)', padding: '12px', borderRadius: '8px', borderLeft: '4px solid var(--primary)' }}>
            <div style={{ fontSize: '0.78rem', color: 'var(--text-muted)', fontWeight: 700, marginBottom: '4px' }}>📝 Opis & Zakres Prac:</div>
            <div style={{ color: '#f1f5f9', whiteSpace: 'pre-wrap', lineHeight: 1.5 }}>
              {project.description || project.remarks || 'Brak opisu zlecenia.'}
            </div>
          </div>
        </div>

        {/* REJESTR CZASU PRACY DLA ADMINA */}
        <div style={{ background: '#0f172a', padding: '10px 14px', borderRadius: '8px', marginBottom: '14px', border: '1px solid var(--card-border)', fontSize: '0.8rem' }}>
          <div>⏱️ <strong>Rejestr Czasu Pracy:</strong></div>
          <div style={{ color: 'var(--text-muted)', marginTop: '4px' }}>
            Rozpoczęto: <strong style={{ color: project.work_started_at ? 'var(--success)' : '#94a3b8' }}>{project.work_started_at || 'Brak'}</strong> | 
            Zakończono: <strong style={{ color: project.work_ended_at ? 'var(--primary)' : '#94a3b8' }}>{project.work_ended_at || 'Brak'}</strong>
          </div>
        </div>

        <form onSubmit={handleSubmit}>
          {/* SEKCJA: ADRES I WSPÓŁRZĘDNE GPS ZLECENIA */}
          <div className="form-group" style={{ background: '#f8fafc', padding: '14px', borderRadius: '10px', border: '1px solid #e2e8f0', marginBottom: '16px' }}>
            <label style={{ fontWeight: 800, color: '#0f172a', display: 'flex', alignItems: 'center', gap: '6px', marginBottom: '8px' }}>
              📍 Lokalizacja, Adres & Koordynaty GPS Obiektu
            </label>
            
            <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: '10px', marginBottom: '10px' }}>
              <div>
                <label style={{ fontSize: '0.75rem', fontWeight: 700, color: '#475569' }}>🏢 Nr / Kod Obiektu (np. 51482 lub 57103):</label>
                <input 
                  type="text" 
                  className="form-control" 
                  value={objectNumber} 
                  onChange={e => setObjectNumber(e.target.value)} 
                  placeholder="np. 51482"
                />
              </div>
              <div style={{ display: 'flex', alignItems: 'flex-end' }}>
                <button 
                  type="button" 
                  className="btn btn-secondary" 
                  onClick={handleFetchBtSearch}
                  disabled={loadingLookup}
                  style={{ padding: '8px 14px', fontSize: '0.82rem', fontWeight: 700, background: '#0284c7', color: '#fff', border: 'none' }}
                >
                  {loadingLookup ? '⏳ Pobieram...' : '🔍 Pobierz z BTSearch'}
                </button>
              </div>
            </div>

            <div className="form-group" style={{ marginBottom: '10px' }}>
              <label style={{ fontSize: '0.75rem', fontWeight: 700, color: '#475569' }}>🏠 Adres Pełny (Ulica, Numer, Kod i Miejscowość):</label>
              <input 
                type="text" 
                className="form-control" 
                value={location} 
                onChange={e => setLocation(e.target.value)} 
                placeholder="np. Kraków, ul. Drukarska 8"
              />
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px' }}>
              <div className="form-group" style={{ margin: 0 }}>
                <label style={{ fontSize: '0.75rem', fontWeight: 700, color: '#475569' }}>🌐 Szerokość Geograficzna (Latitude):</label>
                <input 
                  type="number" 
                  step="any"
                  className="form-control" 
                  value={latitude} 
                  onChange={e => setLatitude(e.target.value)} 
                  placeholder="np. 50.06465"
                />
              </div>
              <div className="form-group" style={{ margin: 0 }}>
                <label style={{ fontSize: '0.75rem', fontWeight: 700, color: '#475569' }}>🌐 Długość Geograficzna (Longitude):</label>
                <input 
                  type="number" 
                  step="any"
                  className="form-control" 
                  value={longitude} 
                  onChange={e => setLongitude(e.target.value)} 
                  placeholder="np. 19.94498"
                />
              </div>
            </div>
          </div>

          {/* PRZYPISYWANIE UŻYTKOWNIKÓW / SERWISANTÓW (ROZWIJANA LISTA + MULTI-SELECT) */}
          <div className="form-group" style={{ background: '#f8fafc', padding: '14px', borderRadius: '10px', border: '1px solid #e2e8f0', marginBottom: '16px' }}>
            <label style={{ fontWeight: 800, color: '#0f172a', display: 'flex', alignItems: 'center', gap: '6px', marginBottom: '8px' }}>
              👷 Przypisani Użytkownicy / Serwisanci ({selectedWorkers.length})
            </label>
            
            {/* Rozwijana lista (Dropdown) do wyboru użytkownika */}
            <div style={{ marginBottom: '10px' }}>
              <select className="form-control" defaultValue="" onChange={handleSelectDropdown} style={{ background: '#fff' }}>
                <option value="" disabled>-- Kliknij, aby wybrać i dodać użytkownika z listy --</option>
                {workers.map(w => {
                  const isAssigned = isWorkerSelected(w);
                  return (
                    <option key={w.id} value={w.username}>
                      {isAssigned ? '✓ ' : '+ '} {w.username} ({w.role === 'ADMIN' ? 'Dyspozytor/Admin' : 'Serwisant/Monter'})
                    </option>
                  );
                })}
              </select>
            </div>

            {/* Wizualne kafelki / chipsy wybranych użytkowników */}
            <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
              {workers.map(w => {
                const isSel = isWorkerSelected(w);
                return (
                  <button
                    key={w.id}
                    type="button"
                    onClick={() => toggleWorker(w)}
                    style={{
                      display: 'inline-flex',
                      alignItems: 'center',
                      gap: '6px',
                      padding: '6px 12px',
                      borderRadius: '20px',
                      fontSize: '0.82rem',
                      fontWeight: 700,
                      cursor: 'pointer',
                      border: isSel ? '1px solid #0284c7' : '1px solid #cbd5e1',
                      background: isSel ? '#0284c7' : '#ffffff',
                      color: isSel ? '#ffffff' : '#334155',
                      boxShadow: isSel ? '0 2px 6px rgba(2, 132, 199, 0.3)' : 'none',
                      transition: 'all 0.15s ease'
                    }}
                  >
                    <span>{isSel ? '✅' : '➕'}</span>
                    <span>{w.username}</span>
                    <span style={{ fontSize: '0.72rem', opacity: 0.8 }}>({w.role})</span>
                  </button>
                );
              })}
            </div>
            {selectedWorkers.length === 0 && (
              <div style={{ fontSize: '0.75rem', color: '#dc2626', marginTop: '6px' }}>
                ⚠️ Zlecenie nie ma przypisanego żadnego pracownika.
              </div>
            )}
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px' }}>
            <div className="form-group">
              <label>📅 Planowana Data Wykonania</label>
              <input type="date" className="form-control" value={plannedCompletionDate} onChange={e => setPlannedCompletionDate(e.target.value)} />
            </div>
            <div className="form-group">
              <label>✅ Rzeczywista Data Zakończenia</label>
              <input type="date" className="form-control" value={completionDate} onChange={e => setCompletionDate(e.target.value)} />
            </div>
          </div>
          <div className="form-group" style={{ marginTop: '12px' }}>
            <label>📝 Uwagi i Ustalenia Admina/Zespołu</label>
            <textarea className="form-control" rows="3" value={remarks} onChange={e => setRemarks(e.target.value)} />
          </div>
          <button type="submit" className="btn btn-primary" style={{ width: '100%', marginTop: '14px', padding: '10px', fontSize: '0.9rem', fontWeight: 800 }}>
            💾 Zapisz Zmiany i Przypisania Zlecenia
          </button>
        </form>
      </div>
    </div>
  );
}

// ─── KOMPONENT: MOBILNY ASYSTENT TECHNIKA AI GEMINI W TERENIE ────────
function AiAssistantModal({ token, currentProject, onClose }) {
  const [messages, setMessages] = useState([
    {
      sender: 'bot',
      text: 'Cześć! Jestem Twoim Asystentem Technicznym Gemini AI. Pomogę Ci w terenie z kodami błędów siłowni, instrukcjami DTR, parametrami prostowników (TELZAS, Emerson, Eltek, Enetek), licznikami energii oraz procedurami montażu i BHP. W czym mogę pomóc?'
    }
  ]);
  const [inputQuery, setInputQuery] = useState('');
  const [loading, setLoading] = useState(false);
  const [selectedImageB64, setSelectedImageB64] = useState(null);
  const [imagePreview, setImagePreview] = useState(null);
  const messagesEndRef = useRef(null);

  useEffect(() => {
    if (messagesEndRef.current) {
      messagesEndRef.current.scrollIntoView({ behavior: 'smooth' });
    }
  }, [messages, loading]);

  const quickPrompts = [
    "Jak sprawdzić parametry modułu TELZAS PDM 48/41-2000?",
    "Kody błędów i alarmy sterownika Emerson PSC 3 / PI1",
    "Procedura podłączenia licznika F&F LE-03MQ (Modbus RTU)",
    "Bezpieczna kolejność montażu baterii akumulatorów DC 48V",
    "Jak wykonać reset modułu prostownikowego Enetek ETR+?"
  ];

  const handleSend = async (textToSend = null) => {
    const q = textToSend || inputQuery;
    if (!q.trim() && !selectedImageB64) return;

    const userMsg = {
      sender: 'user',
      text: q || 'Załączono zdjęcie do analizy',
      image: imagePreview
    };

    setMessages(prev => [...prev, userMsg]);
    setInputQuery('');
    const currentImg = selectedImageB64;
    setSelectedImageB64(null);
    setImagePreview(null);
    setLoading(true);

    try {
      const contextInfo = currentProject 
        ? `Zlecenie: ${currentProject.name}, Obiekt: ${currentProject.object_number || '-'}, Klient: ${currentProject.client_name}`
        : '';

      const res = await apiFetch('/api/ai/technical-assistant', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          query: q,
          image_b64: currentImg,
          context_info: contextInfo
        })
      }, token);

      setMessages(prev => [...prev, {
        sender: 'bot',
        text: res.response || 'Brak odpowiedzi.'
      }]);
    } catch (e) {
      setMessages(prev => [...prev, {
        sender: 'bot',
        text: `⚠️ Błąd połączenia z asystentem AI: ${e.message}`
      }]);
    } finally {
      setLoading(false);
    }
  };

  const handleImageUpload = (e) => {
    const file = e.target.files[0];
    if (!file) return;

    setImagePreview(URL.createObjectURL(file));
    const reader = new FileReader();
    reader.onload = () => {
      setSelectedImageB64(reader.result);
    };
    reader.readAsDataURL(file);
  };

  return (
    <div className="modal active">
      <div className="modal-content ai-assistant-modal">
        {/* NAGŁÓWEK */}
        <div className="ai-assistant-header">
          <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
            <span style={{ fontSize: '1.4rem' }}>🤖</span>
            <div>
              <strong style={{ fontSize: '1rem', letterSpacing: '0.3px' }}>Asystent Technika AI Gemini</strong>
              <div style={{ fontSize: '0.72rem', opacity: 0.9 }}>
                {currentProject ? `Kontekst: ${currentProject.name} (${currentProject.object_number || '-'})` : 'Mobilny Doradca Techniczny / DTR / Kody Błędów'}
              </div>
            </div>
          </div>
          <button className="modal-close" style={{ color: '#fff', fontSize: '1.5rem', cursor: 'pointer' }} onClick={onClose}>&times;</button>
        </div>

        {/* HISTORIA CZATU */}
        <div className="ai-assistant-body">
          {messages.map((m, idx) => (
            <div key={idx} className={`ai-message-row ${m.sender}`}>
              <div className={`ai-avatar ${m.sender}`}>
                {m.sender === 'bot' ? '🤖' : '👷'}
              </div>
              <div className={`ai-bubble ${m.sender}`}>
                {m.image && (
                  <img src={m.image} alt="Załącznik" style={{ maxWidth: '100%', maxHeight: '180px', borderRadius: '8px', marginBottom: '8px', display: 'block' }} />
                )}
                {m.text}
              </div>
            </div>
          ))}

          {loading && (
            <div className="ai-message-row bot">
              <div className="ai-avatar bot">🤖</div>
              <div className="ai-bubble bot" style={{ display: 'flex', alignItems: 'center', gap: '8px', color: '#0284c7', fontWeight: 600 }}>
                <span>Analizuję dokumentację techniczną i schematy...</span>
                <span className="animate-spin">⏳</span>
              </div>
            </div>
          )}
          <div ref={messagesEndRef} />
        </div>

        {/* SZYBKIE PODPOWIEDZI / CHIPY */}
        <div className="ai-quick-chips">
          {quickPrompts.map((chip, idx) => (
            <button 
              key={idx} 
              type="button" 
              className="ai-chip-btn"
              onClick={() => handleSend(chip)}
            >
              💡 {chip}
            </button>
          ))}
        </div>

        {/* PODGLĄD ZAŁĄCZONEGO ZDJĘCIA */}
        {imagePreview && (
          <div style={{ padding: '8px 20px', background: '#e0f2fe', display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderTop: '1px solid #bae6fd' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
              <img src={imagePreview} alt="Miniatura" style={{ width: '36px', height: '36px', objectFit: 'cover', borderRadius: '4px' }} />
              <span style={{ fontSize: '0.78rem', color: '#0369a1', fontWeight: 600 }}>Załączono zdjęcie tabliczki / usterki</span>
            </div>
            <button 
              type="button" 
              style={{ background: 'none', border: 'none', color: '#dc2626', cursor: 'pointer', fontWeight: 800, fontSize: '0.9rem' }}
              onClick={() => { setImagePreview(null); setSelectedImageB64(null); }}
            >
              ✕ Usuń
            </button>
          </div>
        )}

        {/* PASEK WPROWADZANIA WIADOMOŚCI */}
        <div className="ai-input-bar">
          <label 
            title="Zrób zdjęcie lub załącz plik do analizy AI" 
            style={{ 
              cursor: 'pointer', 
              padding: '8px 12px', 
              background: '#f1f5f9', 
              borderRadius: '8px', 
              border: '1px solid #cbd5e1', 
              display: 'flex', 
              alignItems: 'center', 
              justifyContent: 'center',
              fontSize: '1.1rem'
            }}
          >
            📷
            <input 
              type="file" 
              accept="image/*" 
              capture="environment" 
              style={{ display: 'none' }} 
              onChange={handleImageUpload} 
            />
          </label>

          <input 
            type="text" 
            className="form-control" 
            placeholder="Zadaj pytanie techniczne, wpisz kod błędu lub opisz usterkę..." 
            style={{ flex: 1, padding: '10px 14px', fontSize: '0.88rem' }}
            value={inputQuery}
            onChange={e => setInputQuery(e.target.value)}
            onKeyDown={e => { if (e.key === 'Enter') handleSend(); }}
            disabled={loading}
          />

          <button 
            type="button" 
            className="btn btn-primary" 
            style={{ padding: '10px 18px', fontWeight: 700, display: 'flex', alignItems: 'center', gap: '6px' }}
            onClick={() => handleSend()}
            disabled={loading || (!inputQuery.trim() && !selectedImageB64)}
          >
            Zapytaj 🚀
          </button>
        </div>
      </div>
    </div>
  );
}

// ─── KOMPONENT: WERYFIKACJA CZĘŚCI W AUCIE PRZED WYJAZDEM (FIRST-TIME FIX) ────────
function VanPartsVerificationModal({ token, project, onClose }) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [addingItemName, setAddingItemName] = useState('');
  const [addingCategory, setAddingCategory] = useState('Moduł');
  const [addingQty, setAddingQty] = useState(1);
  const [isSubmitting, setIsSubmitting] = useState(false);

  const loadVerification = async () => {
    if (!project) return;
    setLoading(true);
    try {
      const res = await apiFetch('/api/van-inventory/verify-job-parts', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ project_id: project.id })
      }, token);
      setData(res);
    } catch (e) {
      showToast(e.message, 'error');
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    loadVerification();
  }, [project, token]);

  const handleAddStock = async (e) => {
    e.preventDefault();
    if (!addingItemName.trim()) return;
    setIsSubmitting(true);
    try {
      await apiFetch('/api/van-inventory/transfer', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          item_name: addingItemName,
          category: addingCategory,
          quantity: parseInt(addingQty) || 1,
          van_plate: 'AUTO-01'
        })
      }, token);
      showToast(`Dodano "${addingItemName}" do magazynu auta!`, 'success');
      setAddingItemName('');
      loadVerification();
    } catch (e) {
      showToast(e.message, 'error');
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <div className="modal active">
      <div className="modal-content" style={{ maxWidth: '640px', padding: '24px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px', borderBottom: '1px solid #e2e8f0', paddingBottom: '12px' }}>
          <div>
            <h3 style={{ margin: 0, fontWeight: 800, color: '#0f172a', fontSize: '1.15rem' }}>
              🚐 Weryfikacja Części w Aucie (First-Time Fix)
            </h3>
            <div style={{ fontSize: '0.78rem', color: '#64748b', marginTop: '2px' }}>
              Zlecenie: <strong>{project?.name}</strong> (Obiekt: {project?.object_number || 'Brak'})
            </div>
          </div>
          <button className="modal-close" onClick={onClose}>&times;</button>
        </div>

        {loading ? (
          <div style={{ textAlign: 'center', padding: '30px', color: '#64748b' }}>
            ⏳ Weryfikacja stanów magazynowych auta...
          </div>
        ) : data ? (
          <div>
            {/* WSKAŹNIK FIRST-TIME FIX */}
            <div style={{ 
              background: data.all_parts_ready ? '#f0fdf4' : '#fef2f2', 
              border: `1px solid ${data.all_parts_ready ? '#bbf7d0' : '#fecaca'}`, 
              borderRadius: '12px', 
              padding: '16px', 
              marginBottom: '20px',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'space-between'
            }}>
              <div>
                <div style={{ fontWeight: 800, fontSize: '1rem', color: data.all_parts_ready ? '#166534' : '#991b1b' }}>
                  {data.all_parts_ready ? '✅ Wszystkie Wymagane Części w Aucie!' : '⚠️ Brak Wymaganych Części do Wykonania Zlecenia!'}
                </div>
                <div style={{ fontSize: '0.76rem', color: '#64748b', marginTop: '4px' }}>
                  Wskaźnik gotowości do naprawy za pierwszym razem (FTF Score)
                </div>
              </div>
              <div style={{ 
                fontSize: '1.4rem', 
                fontWeight: 900, 
                color: data.all_parts_ready ? '#16a34a' : '#dc2626',
                background: '#ffffff',
                padding: '6px 14px',
                borderRadius: '10px',
                boxShadow: '0 1px 4px rgba(0,0,0,0.05)'
              }}>
                {data.first_time_fix_score}%
              </div>
            </div>

            {/* LISTA WYMAGANYCH POZYCJI */}
            <h4 style={{ fontSize: '0.88rem', fontWeight: 700, color: '#334155', marginBottom: '10px' }}>
              📋 Lista kontrolna części dla typu prac:
            </h4>
            <div style={{ display: 'flex', flexDirection: 'column', gap: '8px', marginBottom: '20px' }}>
              {data.items.map((item, idx) => (
                <div 
                  key={idx} 
                  style={{ 
                    display: 'flex', 
                    justifyContent: 'space-between', 
                    alignItems: 'center',
                    padding: '10px 14px',
                    borderRadius: '8px',
                    background: item.is_ready ? '#ffffff' : '#fff1f2',
                    border: `1px solid ${item.is_ready ? '#e2e8f0' : '#fecdd3'}`
                  }}
                >
                  <div>
                    <div style={{ fontWeight: 700, fontSize: '0.85rem', color: '#0f172a' }}>
                      {item.is_ready ? '🟢' : '🔴'} {item.name}
                    </div>
                    <div style={{ fontSize: '0.72rem', color: '#64748b', marginTop: '2px' }}>
                      Wymagane minimum: <strong>{item.required_qty} szt.</strong>
                    </div>
                  </div>
                  <div>
                    <span style={{ 
                      fontSize: '0.78rem', 
                      fontWeight: 800, 
                      padding: '4px 10px', 
                      borderRadius: '6px',
                      background: item.is_ready ? '#dcfce7' : '#fee2e2',
                      color: item.is_ready ? '#15803d' : '#b91c1c'
                    }}>
                      W aucie: {item.in_van_qty} szt.
                    </span>
                  </div>
                </div>
              ))}
            </div>

            {/* SZYBKIE DODANIE CZĘŚCI DO AUTA */}
            <div style={{ background: '#f8fafc', border: '1px solid #e2e8f0', borderRadius: '10px', padding: '14px' }}>
              <strong style={{ fontSize: '0.82rem', color: '#0f172a' }}>➕ Załaduj brakującą część do auta:</strong>
              <form onSubmit={handleAddStock} style={{ display: 'flex', gap: '8px', marginTop: '10px', flexWrap: 'wrap' }}>
                <input 
                  type="text" 
                  className="form-control" 
                  placeholder="Nazwa części (np. Prostownik P48-3000E1)" 
                  style={{ flex: 2, minWidth: '180px', padding: '6px 10px', fontSize: '0.82rem' }}
                  value={addingItemName}
                  onChange={e => setAddingItemName(e.target.value)}
                  required
                />
                <select 
                  className="form-control" 
                  style={{ flex: 1, minWidth: '110px', padding: '6px 10px', fontSize: '0.82rem' }}
                  value={addingCategory}
                  onChange={e => setAddingCategory(e.target.value)}
                >
                  <option value="Moduł">Moduł</option>
                  <option value="Pakiet">Pakiet</option>
                  <option value="Licznik">Licznik</option>
                  <option value="Osprzęt">Osprzęt</option>
                  <option value="Bezpiecznik">Bezpiecznik</option>
                  <option value="Sterownik">Sterownik</option>
                </select>
                <input 
                  type="number" 
                  min="1" 
                  max="50" 
                  className="form-control" 
                  style={{ width: '70px', padding: '6px 10px', fontSize: '0.82rem' }}
                  value={addingQty}
                  onChange={e => setAddingQty(e.target.value)}
                  required
                />
                <button 
                  type="submit" 
                  className="btn btn-primary" 
                  style={{ padding: '6px 14px', fontSize: '0.82rem', fontWeight: 700 }}
                  disabled={isSubmitting}
                >
                  ➕ Dodaj
                </button>
              </form>
            </div>
          </div>
        ) : null}

        <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '16px' }}>
          <button type="button" className="btn btn-secondary" onClick={onClose}>Zamknij</button>
        </div>
      </div>
    </div>
  );
}

// ─── KOMPONENT: HISTORIA OBIEKTU, POPRZEDNICH WIZYT & TIMELINE SPRZĘTU ───────────
function SiteHistoryTimelineModal({ token, project, openLightbox, onClose }) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [activeTab, setActiveTab] = useState('timeline'); // 'timeline' | 'assets' | 'site_info'

  useEffect(() => {
    if (!project) return;
    setLoading(true);
    apiFetch(`/api/projects/${project.id}/site-history`, {}, token)
      .then(res => setData(res))
      .catch(err => showToast(err.message, 'error'))
      .finally(() => setLoading(false));
  }, [project, token]);

  return (
    <div className="modal active">
      <div className="modal-content" style={{ maxWidth: '820px', padding: '24px', maxHeight: '90vh', display: 'flex', flexDirection: 'column' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '16px', borderBottom: '1px solid #e2e8f0', paddingBottom: '14px' }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
              <span style={{ fontSize: '1.4rem' }}>📜</span>
              <h3 style={{ margin: 0, fontWeight: 800, color: '#0f172a', fontSize: '1.2rem' }}>
                Paszportyzacja & Historia Obiektu: {project?.object_number || project?.code || project?.name}
              </h3>
            </div>
            <div style={{ fontSize: '0.8rem', color: '#64748b', marginTop: '4px' }}>
              Zlecenie bieżące: <strong>{project?.name}</strong> • Operator: <strong>{data?.site_info?.operator || 'TMPL'}</strong>
            </div>
          </div>
          <button className="btn btn-secondary" onClick={onClose} style={{ padding: '6px 12px', fontSize: '0.85rem' }}>✕ Zamknij</button>
        </div>

        {/* ZAKŁADKI HISTORII */}
        <div style={{ display: 'flex', gap: '8px', marginBottom: '16px' }}>
          <button 
            type="button" 
            className={`btn ${activeTab === 'timeline' ? 'btn-primary' : 'btn-secondary'}`}
            style={{ padding: '6px 14px', fontSize: '0.82rem', fontWeight: 700 }}
            onClick={() => setActiveTab('timeline')}
          >
            ⏱️ Oś Czasu Wizyt ({data?.history_projects?.length || 0})
          </button>
          <button 
            type="button" 
            className={`btn ${activeTab === 'assets' ? 'btn-primary' : 'btn-secondary'}`}
            style={{ padding: '6px 14px', fontSize: '0.82rem', fontWeight: 700 }}
            onClick={() => setActiveTab('assets')}
          >
            🔌 Zainstalowane Urządzenia & Sprzęt ({data?.site_assets?.length || 0})
          </button>
          <button 
            type="button" 
            className={`btn ${activeTab === 'site_info' ? 'btn-primary' : 'btn-secondary'}`}
            style={{ padding: '6px 14px', fontSize: '0.82rem', fontWeight: 700 }}
            onClick={() => setActiveTab('site_info')}
          >
            📍 Kody Dostępu & Lokalizacja Obiektu
          </button>
        </div>

        {/* ZAWARTOŚĆ MODALA */}
        <div style={{ flex: 1, overflowY: 'auto', paddingRight: '4px' }}>
          {loading ? (
            <div style={{ textAlign: 'center', padding: '40px', color: '#64748b' }}>
              <div style={{ fontSize: '1.8rem', marginBottom: '8px' }}>⏳</div>
              Ładowanie historii wizyt i kartoteki sprzętowej...
            </div>
          ) : !data ? (
            <div style={{ textAlign: 'center', padding: '30px', color: '#ef4444' }}>
              Nie udało się pobrać historii obiektu.
            </div>
          ) : (
            <>
              {/* TAB 1: TIMELINE POPRZEDNICH WIZYT */}
              {activeTab === 'timeline' && (
                <div style={{ display: 'flex', flexDirection: 'column', gap: '14px' }}>
                  {data.history_projects && data.history_projects.length > 0 ? (
                    data.history_projects.map((hp, idx) => {
                      const isCurrent = hp.id === data.current_project_id;
                      return (
                        <div 
                          key={hp.id}
                          style={{
                            display: 'flex',
                            gap: '16px',
                            position: 'relative',
                            paddingBottom: idx === data.history_projects.length - 1 ? 0 : '16px'
                          }}
                        >
                          {/* LINIA I PUNKT TIMELINE */}
                          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', minWidth: '32px' }}>
                            <div style={{
                              width: '28px',
                              height: '28px',
                              borderRadius: '50%',
                              background: isCurrent ? '#0284c7' : '#10b981',
                              color: '#ffffff',
                              display: 'flex',
                              alignItems: 'center',
                              justifyContent: 'center',
                              fontSize: '0.8rem',
                              fontWeight: 800,
                              boxShadow: isCurrent ? '0 0 0 4px rgba(2,132,199,0.2)' : 'none',
                              zIndex: 2
                            }}>
                              {idx + 1}
                            </div>
                            {idx !== data.history_projects.length - 1 && (
                              <div style={{ width: '2px', flex: 1, background: '#cbd5e1', marginTop: '4px' }} />
                            )}
                          </div>

                          {/* KARTA WIZYTY / ZLECENIA */}
                          <div style={{
                            flex: 1,
                            background: isCurrent ? '#f0f9ff' : '#ffffff',
                            border: `1px solid ${isCurrent ? '#bae6fd' : '#e2e8f0'}`,
                            borderRadius: '10px',
                            padding: '14px',
                            boxShadow: '0 1px 4px rgba(0,0,0,0.03)'
                          }}>
                            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', flexWrap: 'wrap', gap: '8px' }}>
                              <div>
                                <div style={{ fontWeight: 800, fontSize: '0.95rem', color: '#0f172a' }}>
                                  {hp.name}
                                  {isCurrent && (
                                    <span style={{ marginLeft: '8px', fontSize: '0.72rem', background: '#0284c7', color: '#fff', padding: '2px 8px', borderRadius: '12px' }}>
                                      Bieżące zlecenie
                                    </span>
                                  )}
                                </div>
                                <div style={{ fontSize: '0.78rem', color: '#64748b', marginTop: '2px' }}>
                                  📅 Data: <strong>{hp.scheduled_date || (hp.created_at ? hp.created_at.substring(0, 10) : '—')}</strong> • Typ: <strong>{hp.project_type || 'Serwis'}</strong> • Technik: <strong>{hp.creator_name || 'Brak'}</strong>
                                </div>
                              </div>
                              <div>
                                <span style={{
                                  fontSize: '0.74rem',
                                  fontWeight: 700,
                                  padding: '3px 8px',
                                  borderRadius: '6px',
                                  background: hp.status === 'COMPLETED' ? '#dcfce7' : hp.status === 'IN_PROGRESS' ? '#e0f2fe' : '#fef3c7',
                                  color: hp.status === 'COMPLETED' ? '#15803d' : hp.status === 'IN_PROGRESS' ? '#0369a1' : '#b45309'
                                }}>
                                  {hp.status || 'DRAFT'}
                                </span>
                              </div>
                            </div>

                            {hp.description && (
                              <div style={{ fontSize: '0.82rem', color: '#334155', marginTop: '8px', background: 'rgba(0,0,0,0.02)', padding: '8px', borderRadius: '6px' }}>
                                <strong>Opis prac:</strong> {hp.description}
                              </div>
                            )}

                            {hp.remarks && (
                              <div style={{ fontSize: '0.78rem', color: '#b45309', marginTop: '6px', background: '#fffbeb', border: '1px solid #fef3c7', padding: '6px 8px', borderRadius: '6px' }}>
                                ⚠️ <strong>Uwagi serwisowe:</strong> {hp.remarks}
                              </div>
                            )}

                            {/* ZDJĘCIA Z TEJ WIZYTY */}
                            {hp.recent_photos && hp.recent_photos.length > 0 && (
                              <div style={{ marginTop: '10px' }}>
                                <div style={{ fontSize: '0.72rem', color: '#64748b', fontWeight: 700, marginBottom: '6px', textTransform: 'uppercase' }}>
                                  📸 Zdjęcia z wizyty ({hp.photo_count || hp.recent_photos.length}):
                                </div>
                                <div style={{ display: 'flex', gap: '8px', overflowX: 'auto', paddingBottom: '4px' }}>
                                  {hp.recent_photos.map(ph => (
                                    <div 
                                      key={ph.id}
                                      onClick={() => openLightbox && openLightbox(`/api/photos/${ph.id}/file?token=${token}`, ph.original_name)}
                                      style={{ cursor: 'pointer', flexShrink: 0 }}
                                    >
                                      <img 
                                        src={`/api/photos/${ph.id}/file?token=${token}`} 
                                        alt={ph.original_name}
                                        style={{ width: '60px', height: '60px', objectFit: 'cover', borderRadius: '6px', border: '1px solid #cbd5e1' }} 
                                      />
                                    </div>
                                  ))}
                                </div>
                              </div>
                            )}
                          </div>
                        </div>
                      );
                    })
                  ) : (
                    <div style={{ textAlign: 'center', padding: '24px', color: '#64748b' }}>
                      Brak zarejestrowanych wcześniejszych wizyt dla tego obiektu.
                    </div>
                  )}
                </div>
              )}

              {/* TAB 2: ZAINSTALOWANY SPRZĘT & PASZPORTYZACJA */}
              {activeTab === 'assets' && (
                <div>
                  <h4 style={{ fontSize: '0.9rem', fontWeight: 800, color: '#0f172a', marginBottom: '12px' }}>
                    📦 Ewidencja Urządzeń i Podzespołów na Stacji:
                  </h4>
                  {data.site_assets && data.site_assets.length > 0 ? (
                    <div style={{ overflowX: 'auto' }}>
                      <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '0.82rem' }}>
                        <thead>
                          <tr style={{ background: '#f8fafc', borderBottom: '2px solid #e2e8f0', textAlign: 'left' }}>
                            <th style={{ padding: '8px 10px', color: '#475569' }}>Kategoria</th>
                            <th style={{ padding: '8px 10px', color: '#475569' }}>Model / Producent</th>
                            <th style={{ padding: '8px 10px', color: '#475569' }}>Numer Seryjny (SN)</th>
                            <th style={{ padding: '8px 10px', color: '#475569' }}>Slot</th>
                            <th style={{ padding: '8px 10px', color: '#475569' }}>Status</th>
                            <th style={{ padding: '8px 10px', color: '#475569' }}>Data Montażu</th>
                          </tr>
                        </thead>
                        <tbody>
                          {data.site_assets.map(asset => (
                            <tr key={asset.id} style={{ borderBottom: '1px solid #f1f5f9' }}>
                              <td style={{ padding: '8px 10px', fontWeight: 700, color: '#0f172a' }}>
                                {asset.category}
                              </td>
                              <td style={{ padding: '8px 10px', color: '#334155' }}>
                                {asset.manufacturer ? `${asset.manufacturer} ` : ''}{asset.model}
                              </td>
                              <td style={{ padding: '8px 10px', fontFamily: 'monospace', fontWeight: 700, color: '#0284c7' }}>
                                {asset.serial_number}
                              </td>
                              <td style={{ padding: '8px 10px', color: '#64748b' }}>
                                {asset.slot_number || '—'}
                              </td>
                              <td style={{ padding: '8px 10px' }}>
                                <span style={{
                                  fontSize: '0.72rem',
                                  fontWeight: 800,
                                  padding: '2px 6px',
                                  borderRadius: '4px',
                                  background: asset.status === 'ACTIVE' ? '#dcfce7' : '#fee2e2',
                                  color: asset.status === 'ACTIVE' ? '#15803d' : '#b91c1c'
                                }}>
                                  {asset.status === 'ACTIVE' ? '🟢 ZAMONTOWANE' : '🔴 ZDEMONTOWANE'}
                                </span>
                              </td>
                              <td style={{ padding: '8px 10px', color: '#64748b' }}>
                                {asset.installed_at ? asset.installed_at.substring(0, 10) : '—'}
                              </td>
                            </tr>
                          ))}
                        </tbody>
                      </table>
                    </div>
                  ) : (
                    <div style={{ background: '#f8fafc', padding: '24px', borderRadius: '10px', textAlign: 'center', color: '#64748b', border: '1px dashed #cbd5e1' }}>
                      <div style={{ fontSize: '1.6rem', marginBottom: '6px' }}>🔍</div>
                      Brak wpisów w paszporcie sprzętowym dla tego obiektu. Numery seryjne zostaną zaktualizowane po zatwierdzeniu protokołu OCR.
                    </div>
                  )}
                </div>
              )}

              {/* TAB 3: KODY DOSTĘPU & DANE OBIEKTU */}
              {activeTab === 'site_info' && (
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: '16px' }}>
                  <div style={{ background: '#f8fafc', padding: '16px', borderRadius: '10px', border: '1px solid #e2e8f0' }}>
                    <h4 style={{ fontSize: '0.85rem', fontWeight: 800, color: '#0f172a', marginBottom: '10px', textTransform: 'uppercase' }}>
                      🔑 Dane Dostępowe & Klucze:
                    </h4>
                    <div style={{ fontSize: '0.82rem', display: 'flex', flexDirection: 'column', gap: '8px' }}>
                      <div>
                        <span style={{ color: '#64748b' }}>Kody do bramy/zamków:</span>
                        <div style={{ fontWeight: 700, color: '#0f172a', fontSize: '0.9rem', marginTop: '2px' }}>
                          {data.site_info?.access_codes || 'Brak danych w bazie (sprawdź zlecenie)'}
                        </div>
                      </div>
                      <div>
                        <span style={{ color: '#64748b' }}>Lokalizacja sejfu na klucze (MasterLock):</span>
                        <div style={{ fontWeight: 700, color: '#0f172a', marginTop: '2px' }}>
                          {data.site_info?.key_safe_info || 'Klucze pobierane u ochrony / brak sejfu'}
                        </div>
                      </div>
                      <div>
                        <span style={{ color: '#64748b' }}>Osoba kontaktowa / Administrator:</span>
                        <div style={{ fontWeight: 700, color: '#0f172a', marginTop: '2px' }}>
                          {data.site_info?.contact_person ? `${data.site_info.contact_person} (${data.site_info.contact_phone || 'brak tel'})` : 'Dyspozytura Centralna MT-PRO'}
                        </div>
                      </div>
                    </div>
                  </div>

                  <div style={{ background: '#f8fafc', padding: '16px', borderRadius: '10px', border: '1px solid #e2e8f0' }}>
                    <h4 style={{ fontSize: '0.85rem', fontWeight: 800, color: '#0f172a', marginBottom: '10px', textTransform: 'uppercase' }}>
                      📍 Lokalizacja & Współrzędne GPS:
                    </h4>
                    <div style={{ fontSize: '0.82rem', display: 'flex', flexDirection: 'column', gap: '8px' }}>
                      <div>
                        <span style={{ color: '#64748b' }}>Adres stacji:</span>
                        <div style={{ fontWeight: 700, color: '#0f172a', marginTop: '2px' }}>
                          {data.site_info?.address ? `${data.site_info.address}, ${data.site_info.city || ''}` : (project?.name || 'Brak dokładnego adresu')}
                        </div>
                      </div>
                      <div>
                        <span style={{ color: '#64748b' }}>Współrzędne geograficzne:</span>
                        <div style={{ fontWeight: 700, color: '#0284c7', fontFamily: 'monospace', marginTop: '2px' }}>
                          {data.site_info?.latitude && data.site_info?.longitude 
                            ? `${data.site_info.latitude.toFixed(5)}°N, ${data.site_info.longitude.toFixed(5)}°E` 
                            : 'Brak koordynatów GPS'}
                        </div>
                      </div>
                      {data.site_info?.latitude && data.site_info?.longitude && (
                        <div style={{ marginTop: '8px' }}>
                          <a 
                            href={`https://www.google.com/maps/dir/?api=1&destination=${data.site_info.latitude},${data.site_info.longitude}`}
                            target="_blank"
                            rel="noreferrer"
                            className="btn btn-primary"
                            style={{ display: 'inline-block', padding: '6px 14px', fontSize: '0.78rem', textDecoration: 'none' }}
                          >
                            🗺️ Nawiguj w Google Maps
                          </a>
                        </div>
                      )}
                    </div>
                  </div>
                </div>
              )}
            </>
          )}
        </div>

        <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '16px', borderTop: '1px solid #e2e8f0', paddingTop: '12px' }}>
          <button type="button" className="btn btn-secondary" onClick={onClose}>Zamknij</button>
        </div>
      </div>
    </div>
  );
}

// ─── KOMPONENT: AUTOMATYCZNE ROZLICZENIE I KOSZTORYS ZLECENIA (JOB COSTING & BILLING) ───
function JobCostingModal({ token, project, onClose }) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    if (!project) return;
    setLoading(true);
    apiFetch(`/api/projects/${project.id}/costing`, {}, token)
      .then(res => setData(res))
      .catch(err => showToast(err.message, 'error'))
      .finally(() => setLoading(false));
  }, [project, token]);

  const handlePrintCosting = () => {
    window.print();
  };

  return (
    <div className="modal active">
      <div className="modal-content" style={{ maxWidth: '780px', padding: '24px', maxHeight: '90vh', display: 'flex', flexDirection: 'column' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '16px', borderBottom: '1px solid #e2e8f0', paddingBottom: '14px' }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
              <span style={{ fontSize: '1.4rem' }}>💰</span>
              <h3 style={{ margin: 0, fontWeight: 800, color: '#0f172a', fontSize: '1.2rem' }}>
                Automatyczny Kosztorys & Rozliczenie Prac (Job Costing)
              </h3>
            </div>
            <div style={{ fontSize: '0.8rem', color: '#64748b', marginTop: '4px' }}>
              Zlecenie: <strong>{project?.name}</strong> • Klient: <strong>{data?.client_name || project?.client_name}</strong> • Obiekt: <strong>{project?.object_number || '—'}</strong>
            </div>
          </div>
          <button className="btn btn-secondary" onClick={onClose} style={{ padding: '6px 12px', fontSize: '0.85rem' }}>✕ Zamknij</button>
        </div>

        <div style={{ flex: 1, overflowY: 'auto', paddingRight: '4px' }}>
          {loading ? (
            <div style={{ textAlign: 'center', padding: '40px', color: '#64748b' }}>
              <div style={{ fontSize: '1.8rem', marginBottom: '8px' }}>⏳</div>
              Kalkulacja kosztorysu, stawek rbh i zużycia materiałowego...
            </div>
          ) : !data ? (
            <div style={{ textAlign: 'center', padding: '30px', color: '#ef4444' }}>
              Nie udało się skalkulować kosztorysu zlecenia.
            </div>
          ) : (
            <div>
              {/* PODSUMOWANIE TELEMETRII CZASOWEJ */}
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(160px, 1fr))', gap: '12px', marginBottom: '18px' }}>
                <div style={{ background: '#f8fafc', padding: '12px', borderRadius: '8px', border: '1px solid #e2e8f0', textAlign: 'center' }}>
                  <div style={{ fontSize: '0.72rem', color: '#64748b', textTransform: 'uppercase', fontWeight: 700 }}>Czas Dojazdu</div>
                  <div style={{ fontSize: '1.25rem', fontWeight: 800, color: '#0284c7', marginTop: '2px' }}>
                    {data.travel_hours} h
                  </div>
                </div>
                <div style={{ background: '#f8fafc', padding: '12px', borderRadius: '8px', border: '1px solid #e2e8f0', textAlign: 'center' }}>
                  <div style={{ fontSize: '0.72rem', color: '#64748b', textTransform: 'uppercase', fontWeight: 700 }}>Czas Prac Serwisowych</div>
                  <div style={{ fontSize: '1.25rem', fontWeight: 800, color: '#16a34a', marginTop: '2px' }}>
                    {data.work_hours} rbh
                  </div>
                </div>
                <div style={{ background: '#f8fafc', padding: '12px', borderRadius: '8px', border: '1px solid #e2e8f0', textAlign: 'center' }}>
                  <div style={{ fontSize: '0.72rem', color: '#64748b', textTransform: 'uppercase', fontWeight: 700 }}>Suma Robocizna Netto</div>
                  <div style={{ fontSize: '1.25rem', fontWeight: 800, color: '#0f172a', marginTop: '2px' }}>
                    {data.total_labor_net.toFixed(2)} PLN
                  </div>
                </div>
                <div style={{ background: '#f8fafc', padding: '12px', borderRadius: '8px', border: '1px solid #e2e8f0', textAlign: 'center' }}>
                  <div style={{ fontSize: '0.72rem', color: '#64748b', textTransform: 'uppercase', fontWeight: 700 }}>Suma Materiały Netto</div>
                  <div style={{ fontSize: '1.25rem', fontWeight: 800, color: '#0f172a', marginTop: '2px' }}>
                    {data.total_material_net.toFixed(2)} PLN
                  </div>
                </div>
              </div>

              {/* TABELA POZYCJI KOSZTORYSU */}
              <h4 style={{ fontSize: '0.88rem', fontWeight: 800, color: '#0f172a', marginBottom: '10px' }}>
                📋 Szczegółowa Specyfikacja Pozycji (Line Items):
              </h4>
              <div style={{ overflowX: 'auto', marginBottom: '18px' }}>
                <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '0.82rem' }}>
                  <thead>
                    <tr style={{ background: '#f8fafc', borderBottom: '2px solid #e2e8f0', textAlign: 'left' }}>
                      <th style={{ padding: '8px 10px', color: '#475569' }}>Lp.</th>
                      <th style={{ padding: '8px 10px', color: '#475569' }}>Opis Pozycji / Komponentu</th>
                      <th style={{ padding: '8px 10px', color: '#475569' }}>Typ</th>
                      <th style={{ padding: '8px 10px', color: '#475569', textAlign: 'right' }}>Ilość</th>
                      <th style={{ padding: '8px 10px', color: '#475569', textAlign: 'right' }}>Cena Jedn. Netto</th>
                      <th style={{ padding: '8px 10px', color: '#475569', textAlign: 'right' }}>Wartość Netto</th>
                    </tr>
                  </thead>
                  <tbody>
                    {data.line_items.map((item, idx) => (
                      <tr key={idx} style={{ borderBottom: '1px solid #f1f5f9' }}>
                        <td style={{ padding: '8px 10px', color: '#64748b' }}>{idx + 1}</td>
                        <td style={{ padding: '8px 10px', fontWeight: 600, color: '#0f172a' }}>
                          {item.item_name}
                        </td>
                        <td style={{ padding: '8px 10px' }}>
                          <span style={{
                            fontSize: '0.7rem',
                            fontWeight: 700,
                            padding: '2px 6px',
                            borderRadius: '4px',
                            background: item.category === 'MATERIAL' ? '#e0f2fe' : item.category === 'TRAVEL' ? '#fef3c7' : '#dcfce7',
                            color: item.category === 'MATERIAL' ? '#0369a1' : item.category === 'TRAVEL' ? '#b45309' : '#15803d'
                          }}>
                            {item.category === 'MATERIAL' ? 'MATERIAŁ' : item.category === 'TRAVEL' ? 'DOJAZD' : 'ROBOCIZNA'}
                          </span>
                        </td>
                        <td style={{ padding: '8px 10px', textAlign: 'right', color: '#334155' }}>
                          {item.quantity} {item.unit}
                        </td>
                        <td style={{ padding: '8px 10px', textAlign: 'right', fontFamily: 'monospace', color: '#475569' }}>
                          {item.unit_price.toFixed(2)} PLN
                        </td>
                        <td style={{ padding: '8px 10px', textAlign: 'right', fontFamily: 'monospace', fontWeight: 700, color: '#0f172a' }}>
                          {item.total_net.toFixed(2)} PLN
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>

              {/* PODSUMOWANIE KWOTOWE RAZEM */}
              <div style={{ background: '#f8fafc', border: '1px solid #e2e8f0', borderRadius: '10px', padding: '16px', display: 'flex', flexDirection: 'column', gap: '8px', maxWidth: '340px', marginLeft: 'auto' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '0.85rem', color: '#475569' }}>
                  <span>Suma Netto:</span>
                  <strong style={{ color: '#0f172a' }}>{data.grand_total_net.toFixed(2)} PLN</strong>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '0.85rem', color: '#475569' }}>
                  <span>VAT ({data.vat_rate}):</span>
                  <span>{data.vat_amount.toFixed(2)} PLN</span>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '1.05rem', fontWeight: 800, color: '#16a34a', borderTop: '2px solid #e2e8f0', paddingTop: '8px', marginTop: '4px' }}>
                  <span>Razem Brutto:</span>
                  <span>{data.grand_total_gross.toFixed(2)} PLN</span>
                </div>
              </div>
            </div>
          )}
        </div>

        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: '16px', borderTop: '1px solid #e2e8f0', paddingTop: '12px' }}>
          <button 
            type="button" 
            className="btn btn-primary" 
            onClick={handlePrintCosting}
            style={{ padding: '6px 14px', fontSize: '0.82rem', display: 'flex', alignItems: 'center', gap: '6px' }}
          >
            🖨️ Drukuj / Eksportuj Kosztorys PDF
          </button>
          <button type="button" className="btn btn-secondary" onClick={onClose}>Zamknij</button>
        </div>
      </div>
    </div>
  );
}


function LightboxModal({ data, onClose }) {
  return (
    <div className="modal active">
      <div className="modal-content" style={{ maxWidth: '800px', textAlign: 'center' }}>
        <button className="modal-close" onClick={onClose}>&times;</button>
        <img src={data.src} alt="Zdjęcie" style={{ maxWidth: '100%', maxHeight: '70vh', borderRadius: '8px', marginBottom: '12px' }} />
        <div style={{ fontSize: '0.9rem', color: 'var(--text-muted)' }}>{data.caption}</div>
      </div>
    </div>
  );
}

function OcrScanModal({ onClose, onAppendText }) {
  const [ocrLoading, setOcrLoading] = useState(false);
  const [ocrProgress, setOcrProgress] = useState('');
  const [ocrResult, setOcrResult] = useState('');
  const [imagePreview, setImagePreview] = useState(null);

  const handleImageSelect = async (e) => {
    const file = e.target.files[0];
    if (!file) return;
    setImagePreview(URL.createObjectURL(file));
    setOcrLoading(true);
    setOcrProgress('Inicjalizacja silnika Tesseract AI...');

    try {
      if (typeof Tesseract === 'undefined') {
        throw new Error('Biblioteka OCR Tesseract nie została załadowana.');
      }
      const worker = await Tesseract.createWorker('pol+eng', 1, {
        logger: m => {
          if (m.status === 'recognizing text') {
            setOcrProgress(`Rozpoznawanie tekstu: ${Math.round(m.progress * 100)}%`);
          }
        }
      });
      const ret = await worker.recognize(file);
      await worker.terminate();

      const text = ret.data.text.trim();
      setOcrResult(text);
      setOcrLoading(false);
      showToast('✅ Odczytano tekst z tabliczki znamionowej!', 'success');
    } catch (err) {
      console.error(err);
      showToast('Nie udało się przeprowadzić OCR tekstu.', 'warning');
      setOcrLoading(false);
    }
  };

  const handleApply = () => {
    if (ocrResult) {
      onAppendText(`[ODCZYT TABLICZKI OCR]:\n${ocrResult}`);
      showToast('Dodano odczytany tekst do uwag zlecenia!', 'success');
      onClose();
    }
  };

  return (
    <div className="modal active" style={{ zIndex: 9999 }}>
      <div className="modal-content" style={{ maxWidth: '600px', textAlign: 'center' }}>
        <button className="modal-close" onClick={onClose}>&times;</button>
        <h3 style={{ color: 'var(--secondary)', marginBottom: '12px', fontWeight: 700 }}>🔍 AI Skaner Tabliczek Znamionowych OCR</h3>
        <p style={{ color: 'var(--text-muted)', fontSize: '0.85rem', marginBottom: '16px' }}>Zrób zdjęcie tabliczki znamionowej lub naklejki S/N aparaty, a AI odczyta symbole i numery seryjne.</p>

        <label className="btn btn-primary" style={{ display: 'inline-block', padding: '10px 20px', cursor: 'pointer', marginBottom: '14px' }}>
          📷 Wybierz / Zrób Zdjęcie Tabliczki
          <input type="file" accept="image/*" style={{ display: 'none' }} onChange={handleImageSelect} />
        </label>

        {imagePreview && (
          <div style={{ marginTop: '10px', marginBottom: '10px' }}>
            <img src={imagePreview} alt="Skan" style={{ maxHeight: '200px', borderRadius: '6px', border: '1px solid var(--card-border)' }} />
          </div>
        )}

        {ocrLoading && (
          <div style={{ padding: '12px', background: 'rgba(37, 99, 235, 0.15)', borderRadius: '6px', color: 'var(--secondary)', fontWeight: 600, fontSize: '0.9rem' }}>
            ⏳ {ocrProgress}
          </div>
        )}

        {ocrResult && (
          <div style={{ marginTop: '12px', textAlign: 'left' }}>
            <label style={{ fontWeight: 700, fontSize: '0.85rem', color: 'var(--success)' }}>✅ Wynik odczytu AI:</label>
            <textarea className="form-control" rows="4" value={ocrResult} onChange={e => setOcrResult(e.target.value)} />
            <button className="btn btn-primary" style={{ width: '100%', marginTop: '10px' }} onClick={handleApply}>
              📝 Wklej Wynik do Uwag Zlecenia
            </button>
          </div>
        )}
      </div>
    </div>
  );
}

function GhostOverlayCameraModal({ ghostPhotoUrl, onCapture, onClose }) {
  const videoRef = React.useRef(null);
  const canvasRef = React.useRef(null);
  const [opacity, setOpacity] = useState(0.4);
  const [stream, setStream] = useState(null);

  React.useEffect(() => {
    navigator.mediaDevices?.getUserMedia({ video: { facingMode: 'environment' } })
      .then(s => {
        setStream(s);
        if (videoRef.current) videoRef.current.srcObject = s;
      })
      .catch(err => {
        console.error('Błąd kamery:', err);
        showToast('Nie można uzyskać dostępu do kamery w urządzeniu.', 'warning');
      });

    return () => {
      if (stream) stream.getTracks().forEach(t => t.stop());
    };
  }, []);

  const takePhoto = () => {
    if (!videoRef.current || !canvasRef.current) return;
    const video = videoRef.current;
    const canvas = canvasRef.current;
    canvas.width = video.videoWidth || 1280;
    canvas.height = video.videoHeight || 720;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
    canvas.toBlob((blob) => {
      if (blob) {
        const file = new File([blob], `ghost_after_${Date.now()}.jpg`, { type: 'image/jpeg' });
        onCapture(file);
        if (stream) stream.getTracks().forEach(t => t.stop());
        onClose();
      }
    }, 'image/jpeg', 0.85);
  };

  return (
    <div className="modal active" style={{ zIndex: 9999 }}>
      <div className="modal-content" style={{ maxWidth: '650px', padding: '16px', background: '#090d16', textAlign: 'center' }}>
        <button className="modal-close" onClick={onClose}>&times;</button>
        <h3 style={{ color: 'var(--secondary)', marginBottom: '12px', fontWeight: 700 }}>👻 Aparat Ghost Overlay (Atrzymanie Kadru Przed/Po)</h3>
        
        <div style={{ position: 'relative', width: '100%', height: '360px', background: '#000', borderRadius: '8px', overflow: 'hidden' }}>
          <video ref={videoRef} autoPlay playsInline style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
          {ghostPhotoUrl && (
            <img 
              src={ghostPhotoUrl} 
              alt="Ghost Before" 
              style={{ 
                position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', 
                objectFit: 'cover', opacity: opacity, pointerEvents: 'none' 
              }} 
            />
          )}
        </div>

        {ghostPhotoUrl && (
          <div style={{ marginTop: '12px', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '10px' }}>
            <span style={{ fontSize: '0.8rem', color: 'var(--text-muted)' }}>Przeźroczystość zdjęcia "Przed":</span>
            <input type="range" min="0.1" max="0.9" step="0.05" value={opacity} onChange={e => setOpacity(parseFloat(e.target.value))} />
            <span style={{ fontSize: '0.8rem', fontWeight: 700 }}>{Math.round(opacity * 100)}%</span>
          </div>
        )}

        <canvas ref={canvasRef} style={{ display: 'none' }} />

        <div style={{ marginTop: '16px', display: 'flex', gap: '12px', justifyContent: 'center' }}>
          <button className="btn btn-primary" style={{ padding: '10px 24px', fontSize: '1rem' }} onClick={takePhoto}>
            📸 Zrób Zdjęcie "Po" w Identycznym Kadrze
          </button>
          <button className="btn btn-secondary" onClick={onClose}>Anuluj</button>
        </div>
      </div>
    </div>
  );
}

// ─── DEDYROWANY MODUŁ "GENEROWANIE DOKUMENTACJI" (SPECYFIKACJA TMPL) ───────────
function NewDocumentationModal({ token, onClose, onCreated }) {
  const [clientName, setClientName] = useState('TMPL');
  const [orderNumber, setOrderNumber] = useState('');
  const [objectNumber, setObjectNumber] = useState('');
  const [tmplName, setTmplName] = useState('');
  const [networksName, setNetworksName] = useState('');
  const [address, setAddress] = useState('');
  const [gpsCoordinates, setGpsCoordinates] = useState('');
  const [executionDate, setExecutionDate] = useState(new Date().toISOString().split('T')[0]);
  const [orderType, setOrderType] = useState('MODERNIZACJA');

  const [existingProjects, setExistingProjects] = useState([]);
  const [selectedProjectId, setSelectedProjectId] = useState('');
  const [loadingProjects, setLoadingProjects] = useState(false);

  const [loadingLookup, setLoadingLookup] = useState(false);
  const [loadingSubmit, setLoadingSubmit] = useState(false);

  // Pobieranie listy wykonanych zleceń z bazy
  useEffect(() => {
    const fetchCompletedProjects = async () => {
      setLoadingProjects(true);
      try {
        const res = await apiFetch('/api/projects', { method: 'GET' }, token);
        setExistingProjects(res || []);
      } catch (err) {
        console.error(err);
      } finally {
        setLoadingProjects(false);
      }
    };
    fetchCompletedProjects();
  }, [token]);

  // Obsługa wyboru wykonanego zlecenia z listy
  const handleSelectExistingProject = (e) => {
    const pid = e.target.value;
    setSelectedProjectId(pid);

    if (!pid) return;
    const prj = existingProjects.find(p => String(p.id) === String(pid));
    if (prj) {
      if (prj.object_number) setObjectNumber(prj.object_number);
      if (prj.client_name) setClientName(prj.client_name);
      if (prj.name) setTmplName(prj.name);
      showToast(`Wybrano zlecenie: ${prj.code} - ${prj.name}. Wszystkie zdjęcia i dane będą trwale powiązane z tym zleceniem!`, 'info');
    }
  };

  // Funkcja "🔍 Pobierz dane" z BTSearch.pl dla wskazanego numeru obiektu
  const handleFetchBtSearchData = async () => {
    if (!objectNumber.trim()) {
      showToast('Wpisz numer obiektu TMPL (np. 51482 lub 57103), aby pobrać dane!', 'error');
      return;
    }

    setLoadingLookup(true);
    try {
      const data = await apiFetch(`/api/btsearch/lookup?code=${encodeURIComponent(objectNumber.trim())}`, { method: 'GET' }, token);
      
      if (data.tmpl_name) setTmplName(data.tmpl_name);
      if (data.networks_name) setNetworksName(data.networks_name);
      if (data.address) setAddress(data.address);
      if (data.gps_coordinates) setGpsCoordinates(data.gps_coordinates);

      showToast(`Pobrano dane z BTSearch.pl dla stacji ${objectNumber}!`, 'success');
    } catch (err) {
      showToast(err.message || 'Nie znaleziono stacji w BTSearch.pl', 'error');
    } finally {
      setLoadingLookup(false);
    }
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!objectNumber.trim()) {
      showToast('Wypełnij numer obiektu TMPL!', 'error');
      return;
    }

    setLoadingSubmit(true);
    try {
      let targetProjectId = selectedProjectId;

      let latVal = null;
      let lngVal = null;
      if (gpsCoordinates) {
        const parts = gpsCoordinates.split(',').map(s => s.trim());
        if (parts.length === 2 && !isNaN(parseFloat(parts[0])) && !isNaN(parseFloat(parts[1]))) {
          latVal = parseFloat(parts[0]);
          lngVal = parseFloat(parts[1]);
        }
      }

      // Jeśli wybrano istniejące zlecenie, zaktualizujmy jego metrykę i dane powykonawcze
      if (targetProjectId) {
        await apiFetch(`/api/projects/${targetProjectId}/update-asbuilt-meta`, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            client_name: clientName,
            object_number: objectNumber,
            order_number: orderNumber,
            tmpl_name: tmplName,
            networks_name: networksName,
            address: address,
            gps_coordinates: gpsCoordinates,
            latitude: latVal,
            longitude: lngVal,
            execution_date: executionDate,
            order_type: orderType
          })
        }, token);
      } else {
        // Utwórzmy nowe dedykowane zlecenie powykonawcze
        const res = await apiFetch('/api/projects', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            name: `${orderType} ${tmplName || objectNumber}`,
            client_name: clientName,
            object_number: objectNumber,
            location: address,
            latitude: latVal,
            longitude: lngVal,
            description: `Dokumentacja Powykonawcza TMPL\nNr zamówienia: ${orderNumber}\nNazwa TMPL: ${tmplName}\nNazwa NetWorkS!: ${networksName}\nAdres: ${address}\nGPS: ${gpsCoordinates}\nTyp: ${orderType}`,
            planned_completion_date: executionDate,
            priority: 'NORMAL'
          })
        }, token);
        targetProjectId = res.projectId || res.id;
      }

      showToast(`✅ Utworzono / Powiązano Dokumentację Powykonawczą z obiektem ${objectNumber}! System będzie trzymał się wyłącznie tego zlecenia.`, 'success');
      if (onCreated) onCreated({ id: targetProjectId });
      onClose();

    } catch(err) {
      showToast(err.message, 'error');
    } finally {
      setLoadingSubmit(false);
    }
  };

  return (
    <div style={{
      position: 'fixed',
      top: 0,
      left: 0,
      width: '100vw',
      height: '100vh',
      backgroundColor: '#090d16',
      zIndex: 999999,
      overflowY: 'auto',
      padding: '24px',
      boxSizing: 'border-box'
    }}>
      <div style={{ maxWidth: '850px', margin: '0 auto', background: '#0f172a', borderRadius: '12px', padding: '24px', border: '1px solid var(--primary)', boxShadow: '0 20px 50px rgba(0,0,0,0.8)' }}>
        <div className="modal-header" style={{ borderBottom: '1px solid var(--border-color)', paddingBottom: '12px', marginBottom: '16px' }}>
          <div>
            <h2 style={{ margin: 0, fontWeight: 900, color: 'var(--secondary)', fontSize: '1.4rem' }}>
              📄 MODUŁ GENEROWANIA DOKUMENTACJI POWYKONAWCZEJ (TMPL)
            </h2>
            <span style={{ fontSize: '0.8rem', color: 'var(--text-muted)' }}>Dedykowane Okno Pracy — Wybór Klienta, Obiektu i Metryki</span>
          </div>
          <button className="btn-close" onClick={onClose} style={{ fontSize: '1.2rem', padding: '6px 12px', background: 'rgba(239,68,68,0.2)', color: 'var(--danger)', border: '1px solid var(--danger)', borderRadius: '6px', cursor: 'pointer' }}>✕ Zamknij Okno</button>
        </div>


        <form onSubmit={handleSubmit} style={{ display: 'grid', gap: '12px', marginTop: '14px' }}>
          
          {/* KROK 0: WYBÓR ZLECENIA ZE ZLECEN WYKONANYCH */}
          <div className="form-group" style={{ background: 'rgba(56,189,248,0.1)', padding: '12px', borderRadius: '8px', border: '1px solid var(--primary)' }}>
            <label style={{ fontWeight: 800, color: 'var(--secondary)', display: 'block', marginBottom: '4px' }}>
              📂 Wybierz Zlecenie z Listy Wykonanych (Opcjonalnie):
            </label>
            <select className="form-control" value={selectedProjectId} onChange={handleSelectExistingProject}>
              <option value="">-- Tworzę nową dokumentację (lub wybierz z listy poniżej) --</option>
              {existingProjects.map(p => (
                <option key={p.id} value={p.id}>
                  {p.code} | {p.client_name} - {p.name} (Obiekt: {p.object_number || 'Brak'}) [{p.status}]
                </option>
              ))}
            </select>
            <div style={{ fontSize: '0.75rem', color: 'var(--text-muted)', marginTop: '4px' }}>
              * Od momentu wyboru zlecenia system trwale zwiąże generowany protokół, zdjęcia oraz unikalny folder powykonawczy wyłącznie z tym wybranym zleceniem!
            </div>
          </div>

          {/* 1. Wybór Klienta */}
          <div className="form-group">
            <label style={{ fontWeight: 700 }}>Wybór Klienta:</label>
            <select className="form-control" value={clientName} onChange={e => setClientName(e.target.value)}>
              <option value="TMPL">TMPL (T-Mobile / NetWorkS!)</option>
              <option value="TELZAS">TELZAS</option>
              <option value="DELTA ELECTRONICS">DELTA ELECTRONICS</option>
              <option value="ELTEK">ELTEK</option>
              <option value="Inny">Inny Klient...</option>
            </select>
          </div>

          {/* 2. Nr Zamówienia */}
          <div className="form-group">
            <label style={{ fontWeight: 700 }}>📌 Nr. Zamówienia:</label>
            <input 
              type="text" 
              className="form-control" 
              placeholder="np. ZAM/TMPL/2026/089"
              value={orderNumber}
              onChange={e => setOrderNumber(e.target.value)}
            />
          </div>

          {/* 3. Nr Obiektu TMPL + Przycisk Pobierz Dane */}
          <div className="form-group">
            <label style={{ fontWeight: 700 }}>🏢 Nr. Obiektu TMPL:</label>
            <div style={{ display: 'flex', gap: '8px' }}>
              <input 
                type="text" 
                className="form-control" 
                placeholder="Wpisz numer obiektu np. 51482 lub 57103"
                value={objectNumber}
                onChange={e => setObjectNumber(e.target.value)}
                required
              />
              <button 
                type="button" 
                className="btn btn-secondary"
                style={{ padding: '0 16px', background: 'linear-gradient(135deg, #0284c7, #2563eb)', color: '#fff', whiteSpace: 'nowrap', fontWeight: 700 }}
                onClick={handleFetchBtSearchData}
                disabled={loadingLookup}
              >
                {loadingLookup ? '⏳ Pobieranie...' : '🔍 Pobierz Dane (BTSearch)'}
              </button>
            </div>
          </div>

          {/* 4. Nazwa TMPL & NetWorkS! (Pobierana Automatycznie) */}
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px' }}>
            <div className="form-group">
              <label style={{ fontSize: '0.8rem', color: 'var(--text-muted)' }}>🏷️ Nazwa TMPL:</label>
              <input 
                type="text" 
                className="form-control" 
                placeholder="np. Skawa_57103_E77 lub Krakow_51482"
                value={tmplName}
                onChange={e => setTmplName(e.target.value)}
              />
            </div>
            <div className="form-group">
              <label style={{ fontSize: '0.8rem', color: 'var(--text-muted)' }}>📡 Nazwa NetWorkS!:</label>
              <input 
                type="text" 
                className="form-control" 
                placeholder="np. KNO_RABAWYZNA_SKAWA"
                value={networksName}
                onChange={e => setNetworksName(e.target.value)}
              />
            </div>
          </div>

          {/* 5. Adres & GPS (Pobierane Automatycznie) */}
          <div className="form-group">
            <label style={{ fontWeight: 700 }}>📍 Adres Obiektu (Miasto, ul. Ulica Numer):</label>
            <input 
              type="text" 
              className="form-control" 
              placeholder="np. Kraków, ul. Drukarska 8 A-C"
              value={address}
              onChange={e => setAddress(e.target.value)}
            />
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px' }}>
            <div className="form-group">
              <label style={{ fontSize: '0.8rem', color: 'var(--text-muted)' }}>🌐 Współrzędne GPS:</label>
              <input 
                type="text" 
                className="form-control" 
                placeholder="Szerokość, Długość GPS"
                value={gpsCoordinates}
                onChange={e => setGpsCoordinates(e.target.value)}
              />
            </div>
            <div className="form-group">
              <label style={{ fontSize: '0.8rem', color: 'var(--text-muted)' }}>📅 Data Wyk. na Obiekcie:</label>
              <input 
                type="date" 
                className="form-control" 
                value={executionDate}
                onChange={e => setExecutionDate(e.target.value)}
              />
            </div>
          </div>

          {/* 6. Typ Zlecenia */}
          <div className="form-group">
            <label style={{ fontWeight: 700 }}>🔧 Typ Zlecenia:</label>
            <select className="form-control" value={orderType} onChange={e => setOrderType(e.target.value)}>
              <option value="MODERNIZACJA">MODERNIZACJA</option>
              <option value="PRZEGLĄD SLA">PRZEGLĄD SLA</option>
              <option value="AWARIA">AWARIA / USUWANE USTERKI</option>
              <option value="MONTAŻ NOWY">MONTAŻ NOWY</option>
            </select>
          </div>

          <div style={{ display: 'flex', gap: '10px', justifyContent: 'flex-end', marginTop: '16px', paddingTop: '12px', borderTop: '1px solid var(--border-color)' }}>
            <button type="button" className="btn btn-secondary" onClick={onClose} style={{ padding: '10px 20px' }}>✕ Zamknij Okno</button>
            <button type="submit" className="btn btn-confirm" disabled={loadingSubmit} style={{ padding: '10px 24px', fontSize: '1rem', fontWeight: 800 }}>
              {loadingSubmit ? '⏳ Zapisywanie...' : '✅ Utwórz / Powiąż Dokumentację Powykonawczą'}
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}



// Renderowanie aplikacji React
const root = ReactDOM.createRoot(document.getElementById('react-root'));

root.render(<App />);