import { NextResponse } from 'next/server';
import Pusher from 'pusher';

const pusher = new Pusher({
  appId: process.env.PUSHER_APP_ID!,
  key: process.env.PUSHER_KEY!,
  secret: process.env.PUSHER_SECRET!,
  cluster: process.env.PUSHER_CLUSTER!,
  useTLS: true,
});

export async function POST(request: Request) {
  const { message } = await request.json();

  await pusher.trigger('chat-channel', 'new-message', {
    message,
    timestamp: new Date().toISOString(),
  });

  return NextResponse.json({ success: true });
}

'use client';

import { useEffect, useState } from 'react';
import Pusher from 'pusher-js';

export default function Chat() {
  const [messages, setMessages] = useState<string[]>([]);

  useEffect(() => {
    // Initialize Pusher
    const pusher = new Pusher(process.env.NEXT_PUBLIC_PUSHER_KEY!, {
      cluster: process.env.NEXT_PUBLIC_PUSHER_CLUSTER!,
    });

    // Subscribe to channel
    const channel = pusher.subscribe('chat-channel');

    // Bind to event
    channel.bind('new-message', (data: { message: string }) => {
      setMessages((prev) => [...prev, data.message]);
    });

    // Cleanup
    return () => {
      pusher.unsubscribe('chat-channel');
    };
  }, []);

  return (
    <div>
      <h2>Live Chat</h2>
      <ul>
        {messages.map((msg, i) => (
          <li key={i}>{msg}</li>
        ))}
      </ul>
    </div>
  );
}