ember-market-frontend/components/dashboard/ChatList.tsx

"use client"

import React, { useState, useEffect, useRef } from "react";
import { useRouter } from "next/navigation";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { formatDistanceToNow } from "date-fns";
import { 
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { 
  Plus, 
  MessageCircle, 
  Loader2, 
  RefreshCw
} from "lucide-react";
import axios from "axios";
import { toast } from "sonner";
import { getCookie } from "@/lib/client-utils";

interface Chat {
  _id: string;
  buyerId: string;
  vendorId: string;
  storeId: string;
  lastUpdated: string;
  orderId?: string;
}

interface UnreadCounts {
  totalUnread: number;
  chatCounts: Record<string, number>;
}

export default function ChatList() {
  const router = useRouter();
  const [chats, setChats] = useState<Chat[]>([]);
  const [loading, setLoading] = useState(true);
  const [unreadCounts, setUnreadCounts] = useState<UnreadCounts>({ totalUnread: 0, chatCounts: {} });
  const [previousTotalUnread, setPreviousTotalUnread] = useState<number>(0);
  const [selectedStore, setSelectedStore] = useState<string>("");
  const [vendorStores, setVendorStores] = useState<{ _id: string, name: string }[]>([]);
  const audioRef = useRef<HTMLAudioElement | null>(null);
  
  // Initialize audio element
  useEffect(() => {
    // Create audio element for notification sound
    audioRef.current = new Audio('/notification.mp3');
    
    // Fallback if notification.mp3 doesn't exist - use browser API for a simple beep
    audioRef.current.addEventListener('error', () => {
      audioRef.current = null;
    });
    
    return () => {
      if (audioRef.current) {
        audioRef.current = null;
      }
    };
  }, []);
  
  // Function to play notification sound
  const playNotificationSound = () => {
    if (audioRef.current) {
      audioRef.current.currentTime = 0;
      audioRef.current.play().catch(err => {
        console.log('Error playing sound:', err);
        // Fallback to simple beep if audio file fails
        try {
          const context = new (window.AudioContext || (window as any).webkitAudioContext)();
          const oscillator = context.createOscillator();
          oscillator.type = 'sine';
          oscillator.frequency.setValueAtTime(800, context.currentTime);
          oscillator.connect(context.destination);
          oscillator.start();
          oscillator.stop(context.currentTime + 0.2);
        } catch (e) {
          console.error('Could not play fallback audio', e);
        }
      });
    } else {
      // Fallback to simple beep if audio element is not available
      try {
        const context = new (window.AudioContext || (window as any).webkitAudioContext)();
        const oscillator = context.createOscillator();
        oscillator.type = 'sine';
        oscillator.frequency.setValueAtTime(800, context.currentTime);
        oscillator.connect(context.destination);
        oscillator.start();
        oscillator.stop(context.currentTime + 0.2);
      } catch (e) {
        console.error('Could not play fallback audio', e);
      }
    }
  };
  
  // Fetch vendor ID and stores
  useEffect(() => {
    const fetchVendorData = async () => {
      try {
        // Get auth token from cookies
        const authToken = getCookie("Authorization");
        
        if (!authToken) {
          toast.error("You need to be logged in to view chats");
          router.push("/auth/login");
          return;
        }
        
        // Set up axios with the auth token
        const authAxios = axios.create({
          baseURL: process.env.NEXT_PUBLIC_API_URL,
          headers: {
            Authorization: `Bearer ${authToken}`
          }
        });

        // First, get vendor info using the /auth/me endpoint
        const vendorResponse = await authAxios.get('/auth/me');
        console.log("Vendor auth response:", vendorResponse.data);
        
        // Access correct property - the vendor ID is in vendor._id
        const vendorId = vendorResponse.data.vendor?._id;
        
        if (!vendorId) {
          console.error("Vendor ID not found in profile response:", vendorResponse.data);
          toast.error("Could not retrieve vendor information");
          return;
        }
        
        // Fetch vendor's store using storefront endpoint
        const storeResponse = await authAxios.get(`/storefront`);
        console.log("Store response:", storeResponse.data);
        
        // Handle both array and single object responses
        if (Array.isArray(storeResponse.data)) {
          // If it's an array, use it as is
          setVendorStores(storeResponse.data);
          
          if (storeResponse.data.length > 0) {
            setSelectedStore(storeResponse.data[0]._id);
          }
        } else if (storeResponse.data && typeof storeResponse.data === 'object' && storeResponse.data._id) {
          // If it's a single store object, convert it to an array with one element
          const singleStore = [storeResponse.data];
          setVendorStores(singleStore);
          setSelectedStore(storeResponse.data._id);
        } else {
          console.error("Expected store data but received:", storeResponse.data);
          setVendorStores([]);
          toast.error("Failed to load store data in expected format");
        }
      } catch (error) {
        console.error("Error fetching vendor data:", error);
        toast.error("Failed to load vendor data");
        setVendorStores([]);
      }
    };
    
    fetchVendorData();
  }, [router]);
  
  // Fetch chats and unread counts when store is selected
  const fetchChats = async () => {
    if (!selectedStore && vendorStores.length > 0) {
      setSelectedStore("all");  // Set default "all" if we have stores but none selected
    }
    
    setLoading(true);
    
    try {
      const endpoint = selectedStore && selectedStore !== "all" 
        ? `/chats?storeId=${selectedStore}` 
        : "/chats";
        
      const response = await axios.get(`${process.env.NEXT_PUBLIC_API_URL}/api${endpoint}`, {
        headers: {
          Authorization: getCookie("Authorization") || "",
          "Content-Type": "application/json",
        },
      });
      
      setChats(response.data || []);
      
      // Fetch unread counts after loading chats
      await fetchUnreadCounts();
    } catch (error) {
      console.error("Failed to fetch chats:", error);
      toast.error("Failed to load chat conversations");
      setChats([]);
    } finally {
      setLoading(false);
    }
  };
  
  // Add polling effect
  useEffect(() => {
    if (selectedStore) {
      fetchChats();
      
      // Poll for updates every 10 seconds
      const intervalId = setInterval(fetchChats, 10000);
      
      return () => clearInterval(intervalId);
    }
  }, [selectedStore]);
  
  // Handle chat selection
  const handleChatClick = (chatId: string) => {
    router.push(`/dashboard/chats/${chatId}`);
  };
  
  // Handle store change
  const handleStoreChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    setSelectedStore(e.target.value);
  };
  
  // Create a new chat
  const handleCreateChat = () => {
    router.push("/dashboard/chats/new");
  };
  
  if (loading) {
    return (
      <Card className="w-full">
        <CardHeader>
          <CardTitle className="flex justify-between items-center">
            <span>Loading chats...</span>
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="animate-pulse space-y-4">
            {[1, 2, 3].map((n) => (
              <div key={n} className="h-16 bg-muted rounded-md"></div>
            ))}
          </div>
        </CardContent>
      </Card>
    );
  }
  
  return (
    <div className="space-y-4">
      <div className="flex justify-between items-center">
        <div className="flex items-center space-x-4">
          <Select
            value={selectedStore || "all"}
            onValueChange={(value) => setSelectedStore(value)}
          >
            <SelectTrigger className="w-48">
              <SelectValue placeholder="All Stores" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All Stores</SelectItem>
              {vendorStores.map((store) => (
                <SelectItem key={store._id} value={store._id}>
                  {store.name}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
          
          <Button
            variant="outline"
            size="sm"
            onClick={() => fetchChats()}
            disabled={loading}
          >
            {loading ? (
              <Loader2 className="h-4 w-4 animate-spin" />
            ) : (
              <RefreshCw className="h-4 w-4" />
            )}
            <span className="ml-2">Refresh</span>
          </Button>
        </div>
        
        <Button onClick={handleCreateChat} size="sm">
          <Plus className="h-4 w-4 mr-2" />
          New Chat
        </Button>
      </div>

      <div className="rounded-md border">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead className="w-[200px]">Customer</TableHead>
              <TableHead>Last Activity</TableHead>
              <TableHead>Status</TableHead>
              <TableHead className="text-right">Actions</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {loading ? (
              <TableRow>
                <TableCell colSpan={4} className="h-24 text-center">
                  <Loader2 className="h-6 w-6 animate-spin mx-auto" />
                </TableCell>
              </TableRow>
            ) : chats.length === 0 ? (
              <TableRow>
                <TableCell colSpan={4} className="h-24 text-center">
                  <div className="flex flex-col items-center justify-center">
                    <MessageCircle className="h-8 w-8 text-muted-foreground mb-2" />
                    <p className="text-muted-foreground">No chats found</p>
                  </div>
                </TableCell>
              </TableRow>
            ) : (
              chats.map((chat) => (
                <TableRow 
                  key={chat._id}
                  className="cursor-pointer hover:bg-muted/50"
                  onClick={() => handleChatClick(chat._id)}
                >
                  <TableCell>
                    <div className="flex items-center space-x-3">
                      <Avatar>
                        <AvatarFallback>
                          {chat.buyerId?.slice(0, 2).toUpperCase() || 'CU'}
                        </AvatarFallback>
                      </Avatar>
                      <div>
                        <div className="font-medium">Customer {chat.buyerId.slice(0, 4)}</div>
                        {chat.orderId && (
                          <div className="text-xs text-muted-foreground">
                            Order #{chat.orderId}
                          </div>
                        )}
                      </div>
                    </div>
                  </TableCell>
                  <TableCell>
                    {formatDistanceToNow(new Date(chat.lastUpdated), { addSuffix: true })}
                  </TableCell>
                  <TableCell>
                    {unreadCounts.chatCounts[chat._id] > 0 ? (
                      <Badge variant="destructive" className="ml-1">
                        {unreadCounts.chatCounts[chat._id]} new
                      </Badge>
                    ) : (
                      <Badge variant="outline">Read</Badge>
                    )}
                  </TableCell>
                  <TableCell className="text-right">
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={(e) => {
                        e.stopPropagation();
                        handleChatClick(chat._id);
                      }}
                    >
                      View
                    </Button>
                  </TableCell>
                </TableRow>
              ))
            )}
          </TableBody>
        </Table>
      </div>
    </div>
  );
}