'use client';
import { useState, useEffect, useMemo } from 'react';
import { useRouter } from 'next/navigation';
import { apiFetch } from '@/lib/api';
import {
MapPin,
Bell,
Home,
Clock,
Calendar,
MessageSquare,
LogIn,
LogOut,
Check,
Smartphone,
Share2,
AlertTriangle,
Loader,
ChevronRight,
} from 'lucide-react';
// ─── Hjälpare ───────────────────────────────────────────────────────────────
function urlBase64ToUint8Array(base64String) {
const padding = '='.repeat((4 - (base64String.length % 4)) % 4);
const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/');
const raw = atob(base64);
return new Uint8Array([...raw].map(c => c.charCodeAt(0)));
}
function detectStandalone() {
if (typeof window === 'undefined') return false;
if (window.matchMedia && window.matchMedia('(display-mode: standalone)').matches) return true;
// iOS Safari
if (window.navigator && window.navigator.standalone === true) return true;
return false;
}
function detectPlatform() {
if (typeof navigator === 'undefined') return 'other';
const ua = navigator.userAgent || '';
if (/iPhone|iPad|iPod/i.test(ua)) return 'ios';
if (/Android/i.test(ua)) return 'android';
return 'other';
}
// ─── Steg-definition ────────────────────────────────────────────────────────
// 'welcome' → 'pwa-intro' (om ej standalone) → 'pwa-howto' (om valt) →
// 'location-prime' → 'notifications-prime' → 'checkin-intro' → 'auto-alarm' → 'done'
const STEPS = {
WELCOME: 'welcome',
PWA_INTRO: 'pwa-intro',
PWA_HOWTO: 'pwa-howto',
LOCATION_PRIME: 'location-prime',
NOTIFICATIONS_PRIME: 'notifications-prime',
CHECKIN_INTRO: 'checkin-intro',
AUTO_ALARM: 'auto-alarm',
};
// Progress-procent per steg (välkomsten har ingen progressbar)
const PROGRESS = {
[STEPS.PWA_INTRO]: 15,
[STEPS.PWA_HOWTO]: 25,
[STEPS.LOCATION_PRIME]: 45,
[STEPS.NOTIFICATIONS_PRIME]: 60,
[STEPS.CHECKIN_INTRO]: 85,
[STEPS.AUTO_ALARM]: 100,
};
// Steg-etikett (1 av 3 etc.) — mappar huvudfaser
const STEP_LABEL = {
[STEPS.PWA_INTRO]: 'Steg 1 av 3',
[STEPS.PWA_HOWTO]: 'Steg 1 av 3',
[STEPS.LOCATION_PRIME]: 'Steg 2 av 3',
[STEPS.NOTIFICATIONS_PRIME]: 'Steg 2 av 3',
[STEPS.CHECKIN_INTRO]: 'Steg 3 av 3',
[STEPS.AUTO_ALARM]: 'Steg 3 av 3',
};
export default function OnboardingPage() {
const router = useRouter();
const [user, setUser] = useState(null);
const [isLoading, setIsLoading] = useState(true);
const [step, setStep] = useState(STEPS.WELCOME);
const [finishing, setFinishing] = useState(false);
// PWA
const [isStandalone, setIsStandalone] = useState(false);
const [platform, setPlatform] = useState('other');
// Auth + onboarding-status — vid mount
useEffect(() => {
let cancelled = false;
const init = async () => {
try {
const r = await apiFetch('/api/auth/session');
if (!r.ok) { router.replace('/login'); return; }
const d = await r.json();
if (!d.authenticated || d.user?.portalRole !== 'handlaggare') {
router.replace('/login');
return;
}
if (cancelled) return;
setUser(d.user);
// Om redan slutförd → skicka direkt till appen
try {
const or = await apiFetch('/api/handlaggare/onboarding');
if (or.ok) {
const od = await or.json();
if (od.completed) { router.replace('/handlaggare'); return; }
}
} catch { /* tyst — fortsätt visa onboarding */ }
setIsStandalone(detectStandalone());
setPlatform(detectPlatform());
} catch {
router.replace('/login');
} finally {
if (!cancelled) setIsLoading(false);
}
};
init();
return () => { cancelled = true; };
}, [router]);
const firstName = useMemo(() => (user?.name || '').split(' ')[0] || '', [user]);
// ─── Stegnavigation ───────────────────────────────────────────────────────
const goToNextAfterPwa = () => setStep(STEPS.LOCATION_PRIME);
const handleStart = () => {
// Om appen redan körs som installerad PWA — hoppa över hela PWA-fasen
if (isStandalone) setStep(STEPS.LOCATION_PRIME);
else setStep(STEPS.PWA_INTRO);
};
// ─── Platsbehörighet ──────────────────────────────────────────────────────
const requestLocation = async () => {
if (typeof navigator === 'undefined' || !navigator.geolocation) {
setStep(STEPS.NOTIFICATIONS_PRIME);
return;
}
navigator.geolocation.getCurrentPosition(
() => setStep(STEPS.NOTIFICATIONS_PRIME),
() => setStep(STEPS.NOTIFICATIONS_PRIME), // användaren kan aktivera senare i inställningarna
{ enableHighAccuracy: false, timeout: 10000, maximumAge: 60000 }
);
};
// ─── Notisbehörighet + push-prenumeration ────────────────────────────────
const requestNotifications = async () => {
try {
if (typeof window === 'undefined' || !('Notification' in window)) {
setStep(STEPS.CHECKIN_INTRO);
return;
}
const permission = await Notification.requestPermission();
if (permission === 'granted'
&& 'serviceWorker' in navigator
&& 'PushManager' in window) {
try {
const basePath = process.env.NEXT_PUBLIC_BASE_PATH || '';
const reg = await navigator.serviceWorker.register(`${basePath}/sw.js`);
const existing = await reg.pushManager.getSubscription();
if (!existing) {
const vapidKey = process.env.NEXT_PUBLIC_VAPID_PUBLIC_KEY || '';
if (vapidKey) {
const sub = await reg.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: urlBase64ToUint8Array(vapidKey),
});
await apiFetch('/api/push/subscribe', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ subscription: sub.toJSON() }),
});
}
}
} catch (err) {
console.error('Push-prenumeration misslyckades:', err);
}
}
} finally {
setStep(STEPS.CHECKIN_INTRO);
}
};
// ─── Slutför onboarding ───────────────────────────────────────────────────
const finishOnboarding = async () => {
setFinishing(true);
try {
await apiFetch('/api/handlaggare/onboarding', { method: 'POST' });
} catch (e) {
console.error('Kunde inte markera onboarding som slutförd:', e);
}
router.replace('/handlaggare');
};
// ─── Rendering ────────────────────────────────────────────────────────────
if (isLoading) {
return (
);
}
// Välkomstskärmen har egen bakgrund (matchar login)
if (step === STEPS.WELCOME) {
return
{step === STEPS.PWA_INTRO && (
setStep(STEPS.PWA_HOWTO)}
onSkip={goToNextAfterPwa}
/>
)}
{step === STEPS.PWA_HOWTO && (
setStep(STEPS.NOTIFICATIONS_PRIME)}
/>
)}
{step === STEPS.NOTIFICATIONS_PRIME && (
setStep(STEPS.CHECKIN_INTRO)}
/>
)}
{step === STEPS.CHECKIN_INTRO && (
setStep(STEPS.AUTO_ALARM)} />
)}
{step === STEPS.AUTO_ALARM && (
);
}
// ─── Delade komponenter ─────────────────────────────────────────────────────
function StepHeader({ step }) {
const pct = PROGRESS[step] ?? 0;
const label = STEP_LABEL[step] ?? '';
return (
{/* Liten brand-wordmark — håller kvar den känsla av "samma app som login" som
välkomstskärmen etablerade, även när bakgrunden växlar till ljust. */}
{label && (
{label}
)}
{children}
);
}
function FeatureRow({ icon, title, body, variant = 'indigo' }) {
const bg = variant === 'warn' ? 'bg-amber-50' : 'bg-indigo-50';
const fg = variant === 'warn' ? 'text-amber-700' : 'text-indigo-600';
return (
);
}
function PrimaryButton({ children, onClick, disabled = false }) {
return (
{children}
);
}
function SecondaryButton({ children, onClick }) {
return (
{children}
);
}
// ─── Skärmar ────────────────────────────────────────────────────────────────
// Liten logo för welcome-skärmen — samma SVG-clipboard som login men i mindre format,
// utan den fulla 3D-animationen. Knyter visuellt till login som man precis kom från.
function WelcomeLogo() {
const iconSize = 80;
return (
TILLSYNS APPEN .
För en tryggare myndighetsutövning
);
}
function WelcomeScreen({ firstName, onStart }) {
return (
{firstName ? `Välkommen, ${firstName}` : 'Välkommen'}
Kul att ha dig ombord. Innan du börjar jobba behöver vi göra några
snabba inställningar — det tar cirka 3 minuter.
Kom igång
);
}
function PwaIntroScreen({ onContinue, onSkip }) {
return (
<>
Lägg till på hemskärmen
Tillsynsappen fungerar bäst som en installerad app — snabbare start,
färre distraktioner och möjlighet att ta emot notiser i fält.
Visa hur jag gör
Jag har redan installerat
);
}
function PwaHowtoScreen({ platform, onDone, onSkip }) {
const [tab, setTab] = useState(platform === 'android' ? 'android' : 'ios');
return (
<>
Så installerar du
setTab('ios')}
className={`flex-1 py-2 text-sm font-semibold rounded-lg transition ${tab === 'ios' ? 'bg-white text-slate-900 shadow-sm' : 'text-slate-500'}`}
>iPhone
setTab('android')}
className={`flex-1 py-2 text-sm font-semibold rounded-lg transition ${tab === 'android' ? 'bg-white text-slate-900 shadow-sm' : 'text-slate-500'}`}
>Android
{tab === 'ios' ? (
Tryck på delningsikonen
Välj "Lägg till på hemskärmen"
Tryck "Lägg till" uppe till höger
) : (
Tryck på menyn (tre prickar) uppe till höger i Chrome
Välj "Installera app" eller "Lägg till på startskärmen"
Bekräfta "Installera"
)}
Starta appen från hemskärmen nästa gång så hamnar du rakt där du slutade.
Jag har installerat
Hoppa över (rekommenderas ej)
);
}
function HowtoStep({ n, children }) {
return (
);
}
function LocationPrimeScreen({ onEnable, onSkip }) {
return (
<>
Aktivera platsdata
Vi använder din plats i två situationer — båda för att stötta din
arbetsdag.
Aktivera platsdata
Senare
);
}
function NotificationsPrimeScreen({ onEnable, onSkip }) {
return (
<>
Aktivera notiser
Få vänliga påminnelser och viktig information direkt i telefonen.
);
}
function CheckinIntroScreen({ onNext }) {
return (
<>
Checka in och ut
På varje tillsyn trycker du "Checka in" när du är på plats och
"Checka ut" när du lämnar. Din chef ser realtidsstatus under
tiden.
);
}
function AutoAlarmScreen({ onFinish, finishing }) {
return (
<>
Automatiskt larm
Om du inte checkar in inom utsatt tid utlöses ett larm hos din chef.
Det är din säkerhet ifall något oförutsett händer på vägen.
Om något akut händer i fält:
Använd telefonens inbyggda SOS-funktion (tryck sidoknappen 5 gånger
på iPhone).
Glöm inte att checka ut efter tillsynen.
{finishing ? (
) : (
'Slutför onboarding'
)}
);
}