import { NextRequest, NextResponse } from 'next/server';
import { generateText } from 'ai';
import { openai } from '@ai-sdk/openai';

export const runtime = 'nodejs';

export async function POST(req: NextRequest) {
  try {
    const { productName, targetCustomer, problemSolved } = await req.json();

    if (!productName?.trim() || !targetCustomer?.trim() || !problemSolved?.trim()) {
      return NextResponse.json({ 
        error: 'Tên sản phẩm, khách hàng mục tiêu và vấn đề giải quyết đều là bắt buộc' 
      }, { status: 400 });
    }

    const systemPrompt = `Bạn là một copywriter chuyên nghiệp trong lĩnh vực mô tả sản phẩm SaaS...`;  
    const prompt = `Tên sản phẩm: ${productName}\nKhách hàng mục tiêu: ${targetCustomer}\nVấn đề giải quyết: ${problemSolved}`;

    const result = await generateText({
      model: openai('gpt-4o-mini'),
      temperature: 0.7,
      system: systemPrompt,
      prompt,
    });

    const descriptions = JSON.parse(result.text);

    if (!descriptions.shortDescriptions || descriptions.shortDescriptions.length !== 5) {
      return NextResponse.json({ error: 'Định dạng phản hồi không hợp lệ' }, { status: 500 });
    }

    return NextResponse.json(descriptions, { status: 200 });
  } catch {
    return NextResponse.json({ error: 'Lỗi máy chủ nội bộ' }, { status: 500 });
  }
}

Bạn là một copywriter chuyên nghiệp chuyên về mô tả sản phẩm SaaS cho các nhà sáng lập độc lập và các startup.

Công việc của bạn là chuyển đổi các mô tả tập trung vào tính năng thành nội dung hướng tới lợi ích mà có thể chuyển đổi. Tập trung vào:
- Điểm đau của khách hàng trước, sau đó là giải pháp
- Lợi ích rõ ràng hơn là tính năng
- Ngôn ngữ thuyết phục, tập trung vào chuyển đổi
- Nhiều góc độ định vị
- Nội dung marketing sẵn sàng để sử dụng

Bạn sẽ nhận được:
- Tên sản phẩm
- Khách hàng mục tiêu
- Vấn đề giải quyết

Chỉ tạo ra một đối tượng JSON hợp lệ (không có văn bản nào khác) với cấu trúc chính xác này:
{
  "shortDescriptions": [
    "Mô tả 1 (1-2 câu, kiểu trang đích)",
    "Mô tả 2 (1-2 câu, góc độ khác)",
    "Mô tả 3 (1-2 câu, góc độ khác)",
    "Mô tả 4 (1-2 câu, góc độ khác)",
    "Mô tả 5 (1-2 câu, góc độ khác)"
  ],
  "longDescription": "Mô tả một đoạn văn phù hợp cho danh bạ, tài liệu hoặc trang sản phẩm chi tiết. Nên toàn diện nhưng vẫn tập trung vào lợi ích."
}

Yêu cầu cho mỗi mô tả:
- Bắt đầu với điểm đau của khách hàng hoặc kết quả mong muốn
- Nhấn mạnh lợi ích và giá trị, không phải tính năng
- Sử dụng ngôn ngữ rõ ràng, thuyết phục
- Thay đổi góc độ định vị (tốc độ, sự đơn giản, kết quả, v.v.)
- Làm cho chúng tập trung vào chuyển đổi
- Giữ cho các mô tả ngắn tối đa 1-2 câu
- Làm cho mô tả dài 3-5 câu

Ví dụ về ngôn ngữ hướng tới lợi ích:
- "Ngừng lãng phí hàng giờ về..." thay vì "Chúng tôi tự động hóa..."
- "Nhận kết quả trong vài phút" thay vì "Xử lý nhanh chóng"
- "Không bao giờ mất khách hàng nữa" thay vì "Các tính năng giữ chân khách hàng"
- "Biến khách truy cập thành khách hàng" thay vì "Các công cụ tối ưu hóa chuyển đổi";

"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";

interface DescriptionResult {
  shortDescriptions: string[];
  longDescription: string;
}

export function SaasDescriptionGeneratorClient() {
  const [productName, setProductName] = useState("");
  const [targetCustomer, setTargetCustomer] = useState("");
  const [problemSolved, setProblemSolved] = useState("");
  const [result, setResult] = useState<DescriptionResult | null>(null);

  const handleGenerate = async () => {
    const response = await fetch("/api/saas-description-generator", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ productName, targetCustomer, problemSolved }),
    });
    const data = await response.json();
    setResult(data);
  };

  return (
    <div>
      <Input value={productName} onChange={(e) => setProductName(e.target.value)} placeholder="Tên Sản Phẩm" />
      <Input value={targetCustomer} onChange={(e) => setTargetCustomer(e.target.value)} placeholder="Khách Hàng Mục Tiêu" />
      <Textarea value={problemSolved} onChange={(e) => setProblemSolved(e.target.value)} placeholder="Vấn Đề Giải Quyết" />
      <Button onClick={handleGenerate}>Tạo Mô Tả</Button>

      {result && (
        <>
          {result.shortDescriptions.map((desc, i) => (
            <p key={i}>{desc}</p>
          ))}
          <h4>Mô Tả Dài:</h4>
          <p>{result.longDescription}</p>
        </>
      )}
    </div>
  );
}