// app/profile/[id]/ClientProfile.tsx

'use client';

import React, { useState } from 'react';
import { Button } from "@/components/ui/button";
import QRCode from 'qrcode.react';
import { CustomerWithLoyaltyPass } from '@/hooks/getCustomer';

export default function ClientProfile({ initialCustomer }: ClientProfileProps ) {
  const [customerInfo, setCustomerInfo] = useState<CustomerWithLoyaltyPass>(initialCustomer);
  const [qrCodeData, setQRCodeData] = useState<string | null>(initialCustomer.loyaltyPass?.qrCode || null);
  const [error, setError] = useState<string | null>(null);

  const generateQRCode = async () => {
    try {
      const response = await fetch(`/api/loyalty/generate-qr`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ customerId: customerInfo.id }),
      });

      if (!response.ok) {
        throw new Error('Failed to generate QR code');
      }

      const data = await response.json();
      setQRCodeData(data.qrCode);
      setCustomerInfo(prev => ({
        ...prev,
        loyaltyPass: prev.loyaltyPass ? {
          ...prev.loyaltyPass,
          qrCode: data.qrCode
        } : null
      }));
    } catch (err) {
      setError('Error generating QR code');
      console.error(err);
    }
  };

  return (
    <div >
      <h1 >Customer Profile</h1>
      
      <div className="mt-4">
        <h2 c>{customerInfo.name}</h2>
        <p>{customerInfo.id}</p>
{qrCodeData && (
        <div className="mt-4">
          <h3 className="text-lg font-semibold mb-2">Loyalty Pass QR Code</h3>
          <QRCode value={qrCodeData} size={200} />
        </div>
      )}
        {customerInfo.loyaltyPass && (
          <p>Total Stamps: {customerInfo.loyaltyPass.points}</p>
        )}
      </div>
    </div>
  );
}