"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { useGenerateResponse } from "@/modules/openai/hooks";
import { useToast } from "@/hooks/use-toast";
import { Brain, Sparkles } from "lucide-react";

export default function OpenAIPage() {
    const { toast } = useToast();
    const generateMutation = useGenerateResponse();
    const [response, setResponse] = useState<any>(null);

    const handleGenerate = async () => {
        const samplePrompt = {
            prompt: {
                user_id: "USR78910",
                recent_activities: [
                    {
                        type: "login",
                        platform: "Android",
                        timestamp: new Date().toISOString(),
                    },
                ],
            },
        };

        try {
            const result = await generateMutation.mutateAsync(samplePrompt);
            setResponse(result);
            toast({ title: "Response generated", description: "AI response generated successfully" });
        } catch (error) {
            toast({ title: "Generation failed", variant: "destructive" });
        }
    };

    return (
        <div className="space-y-6">
            <div>
                <h1 className="text-3xl font-bold">OpenAI Integration</h1>
                <p className="text-muted-foreground">Generate AI-powered responses</p>
            </div>

            <div className="grid gap-4 md:grid-cols-2">
                <Card>
                    <CardHeader>
                        <CardTitle>AI Response Generator</CardTitle>
                        <CardDescription>Generate intelligent responses using OpenAI</CardDescription>
                    </CardHeader>
                    <CardContent className="space-y-4">
                        <Button onClick={handleGenerate} disabled={generateMutation.isPending}>
                            <Sparkles className="mr-2 h-4 w-4" />
                            {generateMutation.isPending ? "Generating..." : "Generate Response"}
                        </Button>
                    </CardContent>
                </Card>

                {response && (
                    <Card>
                        <CardHeader>
                            <CardTitle>AI Response</CardTitle>
                        </CardHeader>
                        <CardContent>
                            <pre className="rounded-lg bg-muted p-4 text-sm overflow-auto">
                                {JSON.stringify(response, null, 2)}
                            </pre>
                        </CardContent>
                    </Card>
                )}
            </div>
        </div>
    );
}