main repo

components/AppointmentBooking.tsx

@@ -0,0 +1,651 @@
+"use client";
+
+import React, { useState } from 'react';
+import { Button } from "@/components/ui/button";
+import { CheckCircle, Calendar, Mail, ArrowLeft } from "lucide-react";
+import { supabase } from '@/lib/supabase';
+import { colors } from '@/lib/colors';
+import AppointmentForm from './AppointmentForm';
+import EmailVerification from './EmailVerification';
+import { useAuth } from '@/hooks/useAuth';
+
+type BookingStep = 'form' | 'verification' | 'success';
+
+interface AppointmentData {
+  name: string;
+  telefon: string;
+  firma: string;
+  email: string;
+  beschreibung: string;
+  termin_datum?: Date;
+  termin_time?: string;
+}
+
+export default function AppointmentBooking() {
+  const { user } = useAuth();
+  const [currentStep, setCurrentStep] = useState<BookingStep>('form');
+  const [appointmentData, setAppointmentData] = useState<AppointmentData | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [testMode, setTestMode] = useState(false); // Production mode - no test indicators
+  const [tableStructure, setTableStructure] = useState<string[]>([]);
+  const [productionMode, setProductionMode] = useState(false); // Enable email verification
+  const [customerAction, setCustomerAction] = useState<'created' | 'updated' | null>(null);
+
+  const handleFormSubmit = async (data: AppointmentData) => {
+    setAppointmentData(data);
+    
+    // Always go to email verification step
+    setCurrentStep('verification');
+  };
+
+  const handleVerificationComplete = async () => {
+    if (!appointmentData) return;
+
+    // Prüfe Authentifizierung nach E-Mail-Bestätigung
+    if (!user) {
+      setError('Bitte bestätige zuerst deine E-Mail-Adresse, um den Termin zu speichern.');
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      // Create the appointment datetime by combining date and time
+      console.log('=== DATE PROCESSING DEBUG ===');
+      console.log('Input termin_datum:', appointmentData.termin_datum);
+      console.log('Input termin_time:', appointmentData.termin_time);
+      console.log('Input termin_datum type:', typeof appointmentData.termin_datum);
+      console.log('Input termin_datum instanceof Date:', appointmentData.termin_datum instanceof Date);
+      
+      // Check if termin_datum is actually a Date object
+      if (!(appointmentData.termin_datum instanceof Date)) {
+        console.error('❌ termin_datum is not a Date object!');
+        setError('Fehler: Ungültiges Datum. Bitte wählen Sie einen Termin aus.');
+        return;
+      }
+      
+      const appointmentDateTime = new Date(appointmentData.termin_datum);
+      console.log('Created appointmentDateTime:', appointmentDateTime);
+      console.log('appointmentDateTime.toISOString():', appointmentDateTime.toISOString());
+      
+      const [hours] = appointmentData.termin_time!.split(':').map(Number);
+      console.log('Extracted hours:', hours);
+      
+      // Create the appointment datetime in local time to avoid timezone issues
+      const year = appointmentDateTime.getFullYear();
+      const month = appointmentDateTime.getMonth();
+      const day = appointmentDateTime.getDate();
+      
+      console.log('Date components:', { year, month, day, hours });
+      
+      // Create the final appointment datetime in local time
+      const finalAppointmentDateTime = new Date(year, month, day, hours, 0, 0, 0);
+      console.log('Final appointmentDateTime (local):', finalAppointmentDateTime);
+      console.log('Final appointmentDateTime.toISOString():', finalAppointmentDateTime.toISOString());
+      console.log('Final appointmentDateTime.getTime():', finalAppointmentDateTime.getTime());
+      console.log('Final appointmentDateTime local string:', finalAppointmentDateTime.toLocaleString('de-DE'));
+      
+      // Store the appointment time in local time format
+      const localTimeString = `${year}-${(month + 1).toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}T${hours.toString().padStart(2, '0')}:00:00`;
+      console.log('Local time string to save:', localTimeString);
+
+      // Check if customer already exists (by email)
+      console.log('=== CUSTOMER CHECK DEBUG ===');
+      console.log('Input email:', appointmentData.email);
+      console.log('Input email type:', typeof appointmentData.email);
+      console.log('Input email length:', appointmentData.email.length);
+      console.log('Input email trimmed:', appointmentData.email.trim());
+      console.log('Input email lowercase:', appointmentData.email.trim().toLowerCase());
+      
+      // First, let's check what's in the database for this email
+      await checkSpecificEmail(appointmentData.email);
+      
+      // Try multiple email variations to find existing customer
+      const emailVariations = [
+        appointmentData.email.trim(),
+        appointmentData.email.trim().toLowerCase(),
+        appointmentData.email.trim().toUpperCase()
+      ];
+      
+      console.log('Checking email variations:', emailVariations);
+      
+      let existingCustomers: any[] = [];
+      let checkError: any = null;
+      
+      // Try each email variation
+      for (const emailVariation of emailVariations) {
+        const { data, error } = await supabase
+          .from('kunden_projekte')
+          .select('*')
+          .eq('email', emailVariation)
+          .order('erstellt_am', { ascending: false });
+        
+        if (error) {
+          console.error(`Error checking email variation "${emailVariation}":`, error);
+          checkError = error;
+          continue;
+        }
+        
+        if (data && data.length > 0) {
+          console.log(`Found ${data.length} customers with email "${emailVariation}"`);
+          existingCustomers = data;
+          break;
+        }
+      }
+
+      console.log('Database query result:', { existingCustomers, checkError });
+      console.log('Number of existing customers found:', existingCustomers?.length || 0);
+      
+      if (existingCustomers && existingCustomers.length > 0) {
+        console.log('All found customers with this email:');
+        existingCustomers.forEach((customer, index) => {
+          console.log(`${index + 1}. ID: ${customer.id}, Email: "${customer.email}", Created: ${customer.erstellt_am}, Termin: ${customer.termin_datum}`);
+        });
+      }
+
+      if (checkError) {
+        console.error('Error checking existing customer:', checkError);
+        setError('Fehler beim Überprüfen der Kundendaten. Bitte versuchen Sie es erneut.');
+        return;
+      }
+
+      const existingCustomer = existingCustomers && existingCustomers.length > 0 ? existingCustomers[0] : null;
+
+      if (existingCustomer) {
+        console.log('✅ Existing customer found:', existingCustomer);
+        console.log('Will UPDATE existing customer with ID:', existingCustomer.id);
+        
+        // Warn if there are multiple entries with the same email
+        if (existingCustomers.length > 1) {
+          console.warn(`⚠️ Found ${existingCustomers.length} entries with email ${appointmentData.email}. Using the most recent one.`);
+        }
+      } else {
+        console.log('❌ No existing customer found - will CREATE new');
+      }
+
+      const appointmentDataToSave = {
+        email: appointmentData.email,
+        beschreibung: `${appointmentData.beschreibung}\n\nTermin: ${formatAppointmentDate(appointmentData.termin_datum!, appointmentData.termin_time!)}\n\nKontakt: ${appointmentData.name} (${appointmentData.telefon})\nFirma: ${appointmentData.firma}`,
+        termin_datum: localTimeString, // Store in local time format
+        ansprechpartner_name: appointmentData.name,
+        telefon: appointmentData.telefon,
+        firma: appointmentData.firma,
+        berater: 'Webklar Team',
+        zielgruppe: 'Terminanfrage'
+      };
+
+      let result;
+
+      if (existingCustomer) {
+        // Use upsert to ensure we update the existing customer
+        console.log('🔄 Starting UPSERT operation for customer ID:', existingCustomer.id);
+        
+        const newDescription = `${existingCustomer.beschreibung || ''}\n\n--- NEUER TERMIN ---\n${appointmentDataToSave.beschreibung}`;
+        
+        console.log('New description:', newDescription);
+        
+        // Use upsert with the existing ID to force update
+        const { data: upsertData, error: upsertError } = await supabase
+          .from('kunden_projekte')
+          .upsert({
+            id: existingCustomer.id, // Use existing ID to force update
+            ...appointmentDataToSave,
+            beschreibung: newDescription,
+            erstellt_am: new Date().toISOString()
+          }, {
+            onConflict: 'id' // Update on ID conflict
+          })
+          .select('*');
+        
+        if (upsertError) {
+          console.error('❌ Error upserting customer:', upsertError);
+          setError('Fehler beim Aktualisieren der Kundendaten. Bitte versuchen Sie es erneut.');
+          return;
+        }
+        
+        if (!upsertData || upsertData.length === 0) {
+          console.error('❌ Upsert operation returned no data');
+          setError('Fehler beim Aktualisieren der Kundendaten. Bitte versuchen Sie es erneut.');
+          return;
+        }
+        
+        result = upsertData[0];
+        console.log('✅ Customer updated via upsert:', result);
+        
+        // Verify the update by fetching the customer again
+        const { data: verifyData, error: verifyError } = await supabase
+          .from('kunden_projekte')
+          .select('*')
+          .eq('id', existingCustomer.id)
+          .single();
+        
+        if (verifyError) {
+          console.warn('⚠️ Could not verify update:', verifyError);
+        } else {
+          console.log('✅ Update verified - customer data:', verifyData);
+        }
+        
+        setCustomerAction('updated');
+      } else {
+        // Create new customer record ONLY if no existing customer found
+        console.log('🆕 Starting CREATE operation for new customer');
+        console.log('Create data:', appointmentDataToSave);
+        
+        const { data, error } = await supabase
+          .from('kunden_projekte')
+          .insert(appointmentDataToSave)
+          .select('*');
+
+        if (error) {
+          console.error('❌ Error creating customer:', error);
+          setError('Fehler beim Erstellen der Kundendaten. Bitte versuchen Sie es erneut.');
+          return;
+        }
+
+        if (!data || data.length === 0) {
+          console.error('❌ Create operation returned no data');
+          setError('Fehler beim Erstellen der Kundendaten. Bitte versuchen Sie es erneut.');
+          return;
+        }
+
+        result = data[0]; // Get the first (and only) created record
+        console.log('✅ Customer created successfully:', result);
+        setCustomerAction('created');
+      }
+
+      setCurrentStep('success');
+    } catch (err) {
+      console.error('Unexpected error saving appointment:', err);
+      setError('Ein unerwarteter Fehler ist aufgetreten. Bitte versuchen Sie es erneut.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleBack = () => {
+    setCurrentStep('form');
+    setError(null);
+  };
+
+  const handleReset = () => {
+    setCurrentStep('form');
+    setAppointmentData(null);
+    setError(null);
+    setLoading(false);
+    setCustomerAction(null);
+  };
+
+  const testDatabaseConnection = async () => {
+    setLoading(true);
+    setError(null);
+    
+    try {
+      // Test basic connection and get table structure
+      const { data, error } = await supabase
+        .from('kunden_projekte')
+        .select('*')
+        .limit(1);
+      
+      if (error) {
+        console.error('Database connection test failed:', error);
+        setError(`Datenbank-Verbindung fehlgeschlagen: ${error.message}`);
+        return;
+      }
+      
+      console.log('Database connection successful:', data);
+      const columns = Object.keys(data[0] || {});
+      console.log('Table structure:', columns);
+      setTableStructure(columns);
+      
+      // Analyze which columns we can use
+      const availableColumns = {
+        email: columns.includes('email'),
+        description: columns.includes('description') || columns.includes('beschreibung'),
+        termin_datum: columns.includes('termin_datum'),
+        name: columns.includes('name') || columns.includes('ansprechpartn'),
+        phone: columns.includes('phone') || columns.includes('telefon'),
+        company: columns.includes('company') || columns.includes('firma')
+      };
+      
+      console.log('Available columns for appointment:', availableColumns);
+      
+      let statusMessage = '✅ Datenbank-Verbindung erfolgreich!\n\n';
+      statusMessage += '📋 Verfügbare Spalten:\n';
+      Object.entries(availableColumns).forEach(([key, available]) => {
+        statusMessage += `${available ? '✅' : '❌'} ${key}\n`;
+      });
+      
+      setError(statusMessage);
+      
+    } catch (err) {
+      console.error('Connection test error:', err);
+      setError('❌ Datenbank-Verbindung fehlgeschlagen');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const cleanupDuplicateCustomers = async () => {
+    setLoading(true);
+    setError(null);
+    
+    try {
+      // Find all customers with duplicate emails
+      const { data: allCustomers, error } = await supabase
+        .from('kunden_projekte')
+        .select('*')
+        .order('erstellt_am', { ascending: true });
+      
+      if (error) {
+        console.error('Error fetching customers:', error);
+        setError('Fehler beim Laden der Kundendaten.');
+        return;
+      }
+      
+      // Group by email
+      const emailGroups: { [email: string]: any[] } = {};
+      allCustomers?.forEach(customer => {
+        if (!emailGroups[customer.email]) {
+          emailGroups[customer.email] = [];
+        }
+        emailGroups[customer.email].push(customer);
+      });
+      
+      // Find duplicates
+      const duplicates = Object.entries(emailGroups)
+        .filter(([email, customers]) => customers.length > 1)
+        .map(([email, customers]) => ({ email, customers }));
+      
+      console.log('Found duplicate customers:', duplicates);
+      
+      if (duplicates.length === 0) {
+        setError('✅ Keine Duplikate gefunden!');
+        return;
+      }
+      
+      let statusMessage = `🔍 ${duplicates.length} E-Mail-Adressen mit Duplikaten gefunden:\n\n`;
+      
+      duplicates.forEach(({ email, customers }) => {
+        statusMessage += `📧 ${email}: ${customers.length} Einträge\n`;
+        customers.forEach((customer, index) => {
+          statusMessage += `  ${index + 1}. ID: ${customer.id} (${customer.erstellt_am})\n`;
+        });
+        statusMessage += '\n';
+      });
+      
+      statusMessage += '💡 Tipp: Der neueste Eintrag wird für neue Termine verwendet.';
+      
+      setError(statusMessage);
+      
+    } catch (err) {
+      console.error('Cleanup error:', err);
+      setError('Fehler beim Bereinigen der Duplikate.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const checkSpecificEmail = async (email: string) => {
+    console.log('🔍 Checking specific email:', email);
+    
+    const { data, error } = await supabase
+      .from('kunden_projekte')
+      .select('*')
+      .eq('email', email)
+      .order('erstellt_am', { ascending: false });
+    
+    if (error) {
+      console.error('Error checking email:', error);
+      return;
+    }
+    
+    console.log(`Found ${data?.length || 0} entries for email "${email}":`);
+    data?.forEach((entry, index) => {
+      console.log(`${index + 1}. ID: ${entry.id}, Email: "${entry.email}", Created: ${entry.erstellt_am}`);
+    });
+    
+    return data;
+  };
+
+  const formatAppointmentDate = (date: Date, time: string) => {
+    return new Intl.DateTimeFormat('de-DE', {
+      weekday: 'long',
+      day: '2-digit',
+      month: '2-digit',
+      year: 'numeric'
+    }).format(date) + ` um ${time} Uhr`;
+  };
+
+  const cleanupIncorrectDates = async () => {
+    setLoading(true);
+    setError(null);
+    
+    try {
+      console.log('🧹 Cleaning up incorrect appointment dates...');
+      
+      // Find all entries with the incorrect date "2025-07-21 07:00:00"
+      const { data: incorrectEntries, error: findError } = await supabase
+        .from('kunden_projekte')
+        .select('*')
+        .eq('termin_datum', '2025-07-21T07:00:00.000Z');
+      
+      if (findError) {
+        console.error('Error finding incorrect entries:', findError);
+        setError('Fehler beim Finden der fehlerhaften Einträge.');
+        return;
+      }
+      
+      console.log(`Found ${incorrectEntries?.length || 0} entries with incorrect date`);
+      
+      if (incorrectEntries && incorrectEntries.length > 0) {
+        // Update all incorrect entries to remove the termin_datum
+        const { error: updateError } = await supabase
+          .from('kunden_projekte')
+          .update({ termin_datum: null })
+          .eq('termin_datum', '2025-07-21T07:00:00.000Z');
+        
+        if (updateError) {
+          console.error('Error updating incorrect entries:', updateError);
+          setError('Fehler beim Bereinigen der fehlerhaften Einträge.');
+          return;
+        }
+        
+        console.log('✅ Successfully cleaned up incorrect appointment dates');
+        alert(`✅ ${incorrectEntries.length} fehlerhafte Termine wurden bereinigt!`);
+      } else {
+        console.log('No incorrect entries found');
+        alert('✅ Keine fehlerhaften Termine gefunden!');
+      }
+      
+    } catch (err) {
+      console.error('Unexpected error cleaning up dates:', err);
+      setError('Ein unerwarteter Fehler ist aufgetreten.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="w-full max-w-4xl mx-auto">
+      {/* Production Mode Indicator */}
+      {productionMode && (
+        <div className="mb-4 p-3 rounded-xl border-2 border-green-500 bg-green-50">
+          <p className="text-sm text-green-700">
+            ✅ <strong>Terminbuchung aktiv:</strong> Ihre Termine werden direkt in unserem System gespeichert.
+          </p>
+          <div className="mt-2 flex space-x-2">
+            <Button 
+              onClick={testDatabaseConnection}
+              disabled={loading}
+              className="text-xs"
+              variant="outline"
+              size="sm"
+            >
+              {loading ? 'Teste...' : '🔍 DB-Verbindung testen'}
+            </Button>
+            <Button 
+              onClick={cleanupDuplicateCustomers}
+              disabled={loading}
+              className="text-xs"
+              variant="outline"
+              size="sm"
+            >
+              {loading ? 'Prüfe...' : '🔍 Duplikate prüfen'}
+            </Button>
+            <Button 
+              onClick={cleanupIncorrectDates}
+              disabled={loading}
+              className="text-xs"
+              variant="outline"
+              size="sm"
+            >
+              {loading ? 'Bereinige...' : '🧹 Fehlerhafte Termine bereinigen'}
+            </Button>
+          </div>
+        </div>
+      )}
+
+      {/* Enhanced Step Indicator */}
+      <div className="mb-8">
+        <div className="flex items-center justify-center space-x-2 sm:space-x-4">
+          {/* Step 1 */}
+          <div className={`flex flex-col items-center space-y-2 ${
+            currentStep === 'form' ? 'text-primary' : 
+            currentStep === 'verification' || currentStep === 'success' ? 'text-primary' : 'text-gray-400'
+          }`}>
+            <div className={`w-10 h-10 rounded-full flex items-center justify-center transition-all duration-300 ${
+              currentStep === 'form' 
+                ? 'bg-primary text-white shadow-lg scale-110' 
+                : currentStep === 'verification' || currentStep === 'success'
+                  ? 'bg-primary text-white shadow-lg'
+                  : 'bg-gray-200 text-gray-500'
+            }`}>
+              <Calendar className="w-5 h-5" />
+            </div>
+            <span className="text-xs sm:text-sm font-medium text-center">Termin auswählen</span>
+          </div>
+          
+          {/* Connector 1 */}
+          <div className={`w-8 sm:w-12 h-1 rounded-full transition-all duration-300 ${
+            currentStep === 'verification' || currentStep === 'success' 
+              ? 'bg-primary' 
+              : 'bg-gray-200'
+          }`}></div>
+          
+          {/* Step 2 */}
+          <div className={`flex flex-col items-center space-y-2 ${
+            currentStep === 'verification' || currentStep === 'success' 
+              ? 'text-primary' 
+              : 'text-gray-400'
+          }`}>
+            <div className={`w-10 h-10 rounded-full flex items-center justify-center transition-all duration-300 ${
+              currentStep === 'verification' 
+                ? 'bg-primary text-white shadow-lg scale-110' 
+                : currentStep === 'success'
+                  ? 'bg-primary text-white shadow-lg'
+                  : 'bg-gray-200 text-gray-500'
+            }`}>
+              <Mail className="w-5 h-5" />
+            </div>
+            <span className="text-xs sm:text-sm font-medium text-center">E-Mail bestätigen</span>
+          </div>
+        </div>
+      </div>
+
+      {/* Error Display */}
+      {error && (
+        <div className="mb-6 p-4 rounded-xl border-2 border-red-500 bg-red-50">
+          <pre className="text-red-600 text-sm whitespace-pre-wrap">{error}</pre>
+        </div>
+      )}
+
+      {/* Step Content */}
+      {currentStep === 'form' && (
+        <AppointmentForm 
+          onSubmit={handleFormSubmit}
+          loading={loading}
+        />
+      )}
+
+      {currentStep === 'verification' && appointmentData && (
+        <EmailVerification 
+          email={appointmentData.email}
+          onVerificationComplete={handleVerificationComplete}
+          onBack={handleBack}
+        />
+      )}
+
+      {currentStep === 'success' && appointmentData && (
+        <div className="w-full max-w-md mx-auto">
+          <div 
+            className="p-6 sm:p-8 rounded-3xl shadow-lg backdrop-blur-sm text-center"
+            style={{ backgroundColor: `${colors.background}F0` }}
+          >
+            <div className="w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6"
+                 style={{ backgroundColor: `${colors.primary}20` }}>
+              <CheckCircle className="w-8 h-8" style={{ color: colors.primary }} />
+            </div>
+            
+            <h3 className="text-2xl font-bold mb-4" style={{ color: colors.primary }}>
+              Termin bestätigt!
+            </h3>
+            
+            <div className="space-y-4 mb-6">
+              <p className="text-sm" style={{ color: colors.secondary }}>
+                {customerAction === 'created' 
+                  ? 'Vielen Dank für Ihre erste Terminanfrage! Ihr Kundenprofil wurde erstellt.'
+                  : 'Vielen Dank für Ihre weitere Terminanfrage! Ihr bestehendes Kundenprofil wurde aktualisiert.'
+                }
+              </p>
+              
+              <div className="p-4 rounded-xl border-2" 
+                   style={{ 
+                     backgroundColor: `${colors.primary}10`,
+                     borderColor: colors.primary 
+                   }}>
+                <p className="font-semibold mb-2" style={{ color: colors.primary }}>
+                  Ihr Termin:
+                </p>
+                <p className="text-sm" style={{ color: colors.secondary }}>
+                  {formatAppointmentDate(appointmentData.termin_datum!, appointmentData.termin_time!)}
+                </p>
+              </div>
+              
+              <div className="p-4 rounded-xl border-2" 
+                   style={{ 
+                     backgroundColor: `${colors.primary}10`,
+                     borderColor: colors.primary 
+                   }}>
+                <p className="font-semibold mb-2" style={{ color: colors.primary }}>
+                  Kontaktdaten:
+                </p>
+                <p className="text-sm" style={{ color: colors.secondary }}>
+                  {appointmentData.name}<br />
+                  {appointmentData.firma}<br />
+                  {appointmentData.email}
+                </p>
+              </div>
+            </div>
+            
+            <p className="text-xs mb-6" style={{ color: colors.secondary }}>
+              Vielen Dank für Ihre Terminanfrage! Wir werden uns in Kürze bei Ihnen melden, um den Termin zu bestätigen.
+            </p>
+            
+            <Button 
+              onClick={handleReset}
+              className="w-full rounded-xl"
+              style={{ 
+                backgroundColor: colors.primary,
+                color: colors.background
+              }}
+            >
+              Neuen Termin buchen
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}