// src/app/api/chat/route.ts
import { OpenAI } from 'openai';
import { OpenAIStream, StreamingTextResponse } from 'ai';

// Create OpenAI client from .env.local
const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
});

// Key: Switch Vercel deployment to Edge runtime
// This makes responses extremely fast as it runs on global edge nodes
export const runtime = 'edge';

export async function POST(req: Request) {
  try {
    // Parse messages from the `useChat` Hook's request
    const { messages } = await req.json();

    // Check credits (from Chapter 12)
    // (Pseudo-code: you need a method to get userId from request)
    // const userId = ...;
    // const creditResult = await consumeCredits(userId, 1, 'AI Chat Completion');
    // if (creditResult.error) {
    //   return new Response(JSON.stringify(creditResult), { status: 402 }); // 402 Payment Required
    // }

    // 1. Call OpenAI API
    const response = await openai.chat.completions.create({
      model: 'gpt-4o-mini',
      stream: true, // Key: enable streaming response
      messages: messages,
    });

    // 2. Convert OpenAI's response to Vercel AI SDK's stream
    const stream = OpenAIStream(response);

    // 3. Return streaming response to frontend
    // This automatically handles all chunked transfer complexity
    return new StreamingTextResponse(stream);

  } catch (error) {
    console.error('Chat API Error:', error);
    return new Response(JSON.stringify({ error: 'Failed to get response' }), { status: 500 });
  }
}

// src/components/chat/ChatInterface.tsx
'use client';

import { useChat } from 'ai/react';
import { useEffect } from 'react';
import { toast } from 'sonner'; // (Assuming using sonner for toasts)

export function ChatInterface() {
  const { messages, input, handleInputChange, handleSubmit, isLoading, error } = useChat({
    // `useChat` automatically sends POST requests to this API
    api: '/api/chat',

    // (Optional) When streaming response completes
    onFinish: (message) => {
      console.log('Stream finished. Final message:', message);
      // You can trigger "final confirmation" of credit consumption here
    },

    // (Optional) Handle errors
    onError: (err) => {
      if (err.message.includes('402')) {
        toast.error('Insufficient credits. Please upgrade your plan.');
      } else {
        toast.error('An error occurred. Please try again.');
      }
    }
  });

  return (
    <div className="flex flex-col h-[500px] border rounded-lg">
      {/* Message display area */}
      <div className="flex-1 overflow-y-auto p-4 space-y-2">
        {messages.map((m) => (
          <div key={m.id} className={`p-2 rounded-lg ${
            m.role === 'user' ? 'bg-blue-100 text-right' : 'bg-gray-100'
          }`}>
            <span className="font-bold">
              {m.role === 'user' ? 'You' : 'AI'}:
            </span>
            <span className="whitespace-pre-wrap">{m.content}</span>
          </div>
        ))}
        {isLoading && <div className="text-gray-500">AI is typing...</div>}
      </div>

      {/* Input form */}
      {/* `handleSubmit` automatically handles form submission,
          adds user message to `messages` list,
          and calls the API
      */}
      <form onSubmit={handleSubmit} className="flex p-2 border-t">
        <input
          value={input}
          onChange={handleInputChange}
          placeholder="Ask me anything..."
          className="flex-1 p-2 border rounded-lg"
          disabled={isLoading}
        />
        <button type="submit" disabled={isLoading} className="ml-2 p-2 bg-blue-500 text-white rounded-lg">
          Send
        </button>
      </form>
    </div>
  );
}

// src/lib/ai-provider.ts
import { OpenAI } from 'openai';
import { GoogleGenerativeAI } from '@google/generative-ai';
import { OpenAIStream, GoogleGenerativeAIStream, StreamData } from 'ai';
import { ChatCompletionMessageParam } from 'openai/resources';

// 1. Define a unified provider interface
interface IAiChatProvider {
  // Accept a generic message array, return a generic readable stream
  createChatStream(
    messages: ChatCompletionMessageParam[]
  ): Promise<ReadableStream<StreamData>>;
}

// 2. Implement OpenAI provider
class OpenAiProvider implements IAiChatProvider {
  private openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });

  async createChatStream(messages: ChatCompletionMessageParam[]) {
    const response = await this.openai.chat.completions.create({
      model: 'gpt-4o-mini',
      stream: true,
      messages: messages,
    });
    return OpenAIStream(response);
  }
}

// 3. Implement Google Gemini provider
class GoogleGeminiProvider implements IAiChatProvider {
  private genAI = new GoogleGenerativeAI(process.env.GOOGLE_API_KEY!);

  // (Note: Gemini's message format differs from OpenAI, we need a converter)
  private convertMessagesToGemini(messages: ChatCompletionMessageParam[]) {
    // ... conversion logic ...
    return messages.map(m => ({ role: m.role, parts: [{ text: m.content as string }] }));
  }

  async createChatStream(messages: ChatCompletionMessageParam[]) {
    const model = this.genAI.getGenerativeModel({ model: 'gemini-1.5-pro' });

    // Gemini needs message format conversion
    const geminiMessages = this.convertMessagesToGemini(messages);

    const stream = await model.generateContentStream({
      contents: geminiMessages,
    });

    // Use Vercel AI SDK's Google stream converter
    return GoogleGenerativeAIStream(stream);
  }
}

// 4. (Optional) Implement Replicate provider (for images)
// ... Similarly, can define a `createImageStream` interface for image generation ...

// 5. Create a factory function to select provider
function getAiProvider(): IAiChatProvider {
  const provider = process.env.AI_PROVIDER || 'openai';

  if (provider === 'google') {
    return new GoogleGeminiProvider();
  }
  // Default to OpenAI
  return new OpenAiProvider();
}

// 6. Export our main AI interface
export const ai = {
  chat: getAiProvider(),
  // image: getImageProvider(), // (For image features)
};

// src/app/api/chat/route.ts (refactored)
import { StreamingTextResponse } from 'ai';
import { ai } from '@/lib/ai-provider'; // Import our abstraction layer

export const runtime = 'edge';

export async function POST(req: Request) {
  try {
    const { messages } = await req.json();

    // ... (credit check logic) ...

    // 1. Call abstraction interface, not OpenAI
    // ai.chat might be OpenAI or Google, this API doesn't care
    const stream = await ai.chat.createChatStream(messages);

    // 2. Return stream to frontend
    return new StreamingTextResponse(stream);

  } catch (error) {
    console.error('Chat API Error:', error);
    return new Response(JSON.stringify({ error: 'Failed to get response' }), { status: 500 });
  }
}