feat: implement tenant OAuth flow and guest achievements

resources/js/guest/pages/HomePage.tsx

@@ -1,37 +1,186 @@
-import React from 'react';
-import { Page } from './_util';
-import { useParams, Link } from 'react-router-dom';
-import { usePollStats } from '../polling/usePollStats';
+import React from 'react';
+import { Link, useParams } from 'react-router-dom';
 import { Button } from '@/components/ui/button';
-import Header from '../components/Header';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Separator } from '@/components/ui/separator';
 import EmotionPicker from '../components/EmotionPicker';
 import GalleryPreview from '../components/GalleryPreview';
-import BottomNav from '../components/BottomNav';
+import { useGuestIdentity } from '../context/GuestIdentityContext';
+import { useEventStats } from '../context/EventStatsContext';
+import { useEventData } from '../hooks/useEventData';
+import { useGuestTaskProgress } from '../hooks/useGuestTaskProgress';
+import { Sparkles, UploadCloud, Images, CheckCircle2, Users, TimerReset } from 'lucide-react';
 
 export default function HomePage() {
-  const { slug } = useParams();
-  const stats = usePollStats(slug!);
+  const { slug } = useParams<{ slug: string }>();
+  const { name, hydrated } = useGuestIdentity();
+  const stats = useEventStats();
+  const { event } = useEventData();
+  const { completedCount } = useGuestTaskProgress(slug);
+
+  if (!slug) return null;
+
+  const displayName = hydrated && name ? name : 'Gast';
+  const latestUploadText = formatLatestUpload(stats.latestPhotoAt);
+
+  const primaryActions: Array<{ to: string; label: string; description: string; icon: React.ReactNode }> = [
+    {
+      to: 'tasks',
+      label: 'Aufgabe ziehen',
+      description: 'Hol dir deine naechste Challenge',
+      icon: <Sparkles className="h-5 w-5" />,
+    },
+    {
+      to: 'upload',
+      label: 'Direkt hochladen',
+      description: 'Teile deine neuesten Fotos',
+      icon: <UploadCloud className="h-5 w-5" />,
+    },
+    {
+      to: 'gallery',
+      label: 'Galerie ansehen',
+      description: 'Lass dich von anderen inspirieren',
+      icon: <Images className="h-5 w-5" />,
+    },
+  ];
+
+  const checklistItems = [
+    'Aufgabe auswaehlen oder starten',
+    'Emotion festhalten und Foto schiessen',
+    'Bild hochladen und Credits sammeln',
+  ];
+
   return (
-    <Page title={`Event: ${slug}`}>
-      <Header slug={slug!} title={`Event: ${slug}`} />
-      <div className="px-4 py-6 pb-20 space-y-6"> {/* Consistent spacing */}
-        {/* Prominent Draw Task Button */}
-        <Link to="tasks">
-          <Button className="w-full bg-gradient-to-r from-pink-500 to-pink-600 hover:from-pink-600 hover:to-pink-700 text-white py-4 rounded-xl text-base font-semibold mb-6 shadow-lg hover:shadow-xl transition-all duration-200">
-            <span className="flex items-center gap-2">
-              🎲 Aufgabe ziehen
-            </span>
-          </Button>
-        </Link>
+    <div className="space-y-6 pb-24">
+      <HeroCard name={displayName} eventName={event?.name ?? 'Dein Event'} tasksCompleted={completedCount} />
 
-        {/* How do you feel? Section */}
-        <EmotionPicker />
+      <Card>
+        <CardContent className="grid grid-cols-1 gap-4 py-4 sm:grid-cols-4">
+          <StatTile
+            icon={<Users className="h-4 w-4" />}
+            label="Gleichzeitig online"
+            value={`${stats.onlineGuests}`}
+          />
+          <StatTile
+            icon={<Sparkles className="h-4 w-4" />}
+            label="Aufgaben gelöst"
+            value={`${stats.tasksSolved}`}
+          />
+          <StatTile
+            icon={<TimerReset className="h-4 w-4" />}
+            label="Letzter Upload"
+            value={latestUploadText}
+          />
+          <StatTile
+            icon={<CheckCircle2 className="h-4 w-4" />}
+            label="Deine erledigten Aufgaben"
+            value={`${completedCount}`}
+          />
+        </CardContent>
+      </Card>
 
-        <GalleryPreview slug={slug!} />
-      </div>
-      
-      {/* Bottom Navigation */}
-      <BottomNav />
-    </Page>
+      <section className="space-y-3">
+        <div className="flex items-center justify-between">
+          <h2 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">Deine Aktionen</h2>
+          <span className="text-xs text-muted-foreground">Waehle aus, womit du starten willst</span>
+        </div>
+        <div className="grid gap-3 sm:grid-cols-2">
+          {primaryActions.map((action) => (
+            <Link to={action.to} key={action.to} className="block">
+              <Card className="transition-all hover:shadow-lg">
+                <CardContent className="flex items-center gap-3 py-4">
+                  <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-pink-100 text-pink-600">
+                    {action.icon}
+                  </div>
+                  <div className="flex flex-col">
+                    <span className="text-base font-semibold">{action.label}</span>
+                    <span className="text-sm text-muted-foreground">{action.description}</span>
+                  </div>
+                </CardContent>
+              </Card>
+            </Link>
+          ))}
+        </div>
+        <Button variant="outline" asChild className="w-full">
+          <Link to="queue">Uploads in Warteschlange ansehen</Link>
+        </Button>
+      </section>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Dein Fortschritt</CardTitle>
+          <CardDescription>Halte dich an diese drei kurzen Schritte fuer die besten Ergebnisse.</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-3">
+          {checklistItems.map((item) => (
+            <div key={item} className="flex items-start gap-3">
+              <CheckCircle2 className="mt-0.5 h-5 w-5 text-green-500" />
+              <span className="text-sm leading-relaxed text-muted-foreground">{item}</span>
+            </div>
+          ))}
+        </CardContent>
+      </Card>
+
+      <Separator />
+
+      <EmotionPicker />
+
+      <GalleryPreview slug={slug} />
+    </div>
   );
 }
+
+function HeroCard({ name, eventName, tasksCompleted }: { name: string; eventName: string; tasksCompleted: number }) {
+  const progressMessage = tasksCompleted > 0
+    ? `Schon ${tasksCompleted} Aufgaben erledigt - weiter so!`
+    : 'Starte mit deiner ersten Aufgabe - wir zählen auf dich!';
+
+  return (
+    <Card className="overflow-hidden border-0 bg-gradient-to-r from-pink-500 via-fuchsia-500 to-purple-500 text-white shadow-md">
+      <CardHeader className="space-y-1">
+        <CardDescription className="text-sm text-white/80">Willkommen zur Party</CardDescription>
+        <CardTitle className="text-2xl font-bold">Hey {name}!</CardTitle>
+        <p className="text-sm text-white/80">Du bist bereit für "{eventName}". Fang die Highlights des Events ein und teile sie mit allen Gästen.</p>
+        <p className="text-sm font-medium text-white/90">{progressMessage}</p>
+      </CardHeader>
+    </Card>
+  );
+}
+
+function StatTile({ icon, label, value }: { icon: React.ReactNode; label: string; value: string }) {
+  return (
+    <div className="flex items-center gap-3 rounded-lg border bg-muted/30 px-3 py-2">
+      <div className="flex h-10 w-10 items-center justify-center rounded-full bg-white text-pink-600 shadow-sm">
+        {icon}
+      </div>
+      <div className="flex flex-col">
+        <span className="text-xs uppercase tracking-wide text-muted-foreground">{label}</span>
+        <span className="text-lg font-semibold text-foreground">{value}</span>
+      </div>
+    </div>
+  );
+}
+
+function formatLatestUpload(isoDate: string | null) {
+  if (!isoDate) {
+    return 'Noch kein Upload';
+  }
+  const date = new Date(isoDate);
+  if (Number.isNaN(date.getTime())) {
+    return 'Noch kein Upload';
+  }
+  const diffMs = Date.now() - date.getTime();
+  const diffMinutes = Math.round(diffMs / 60000);
+  if (diffMinutes < 1) {
+    return 'Gerade eben';
+  }
+  if (diffMinutes < 60) {
+    return `vor ${diffMinutes} Min`;
+  }
+  const diffHours = Math.round(diffMinutes / 60);
+  if (diffHours < 24) {
+    return `vor ${diffHours} Std`;
+  }
+  const diffDays = Math.round(diffHours / 24);
+  return `vor ${diffDays} Tagen`;
+}