"use client";

import { useState } from "react";

// ======================================================
// 🔥 김선주 대리 — 일본 SEO 특화 블로그 자동 생성 시스템
// - 버튼 클릭 시 AI 실행
// - 일본 SEO 최적화 구조
// - 이미지 프롬프트 개별 복사 가능
// - 블로그 전체 복사 버튼
// ======================================================

const API_ENDPOINT = "/api/research";

export default function Page() {
  const [jpBlog, setJpBlog] = useState("");
  const [dailyTopic, setDailyTopic] = useState("");
  const [images, setImages] = useState<string[]>([]);
  const [seoScore, setSeoScore] = useState("0 / 100");
  const [generatedAt, setGeneratedAt] = useState("");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");

    // 🔥 Canvas 미리보기 전용 버전
  // ChatGPT 오른쪽 미리보기에서는 Next 서버 API가 존재하지 않음
  // 따라서 여기서는 직접 AI 호출 대신 브라우저 내부에서 바로 생성

    // 🔥 로컬 서버 호출 버전 (실제 OpenAI + 파일 저장)
  const startResearch = async () => {
    setLoading(true);
    setError("");

    try {
      const res = await fetch(API_ENDPOINT, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ periodMonths: 3 }),
      });

      const data = await res.json();

      if (!res.ok) {
        throw new Error(data.error || `서버 오류 ${res.status}`);
      }

      setDailyTopic(data.topic || "");
      setJpBlog(data.blog || "");
      setImages(data.images || []);
      setSeoScore(data.seo_score || "0 / 100");
      setGeneratedAt(data.generatedAt || "");

    } catch (e: any) {
      setError(e.message);
    } finally {
      setLoading(false);
    }
  };

  const copyToClipboard = (text: string) => {
    navigator.clipboard.writeText(text);
    alert("복사 완료");
  };

  // 🔥 Gemini Canvas로 넘길 작업 지시서 자동 생성
    // 🔥 Gemini Canvas로 넘길 일본 SEO 강화 작업 지시서
  const generateGeminiInstruction = () => {
    return `당신은 일본 Yahoo・Google 검색 상위 노출을 목표로 하는 SEO 전문 콘텐츠 에디터입니다.

아래 정보를 기반으로 일본 독자를 위한 한국 관광·한방·문화·음식 체험 블로그를 작성하세요.

[오늘의 주제]
${dailyTopic}

[검색 트렌드 반영 지침]
최근 3개월 일본 검색 트렌드를 반영하여 다음 유형의 키워드를 자연스럽게 포함하세요:
- 韓国旅行
- 韓国ヒーリング
- ソウル旅行 おすすめ
- 漢方体験 韓国
- 韓国カフェ巡り
- 韓国グルメ 体験
- 韓国ウェルネス旅行

단, 과도한 반복 없이 자연스럽게 문맥에 녹여 작성하세요.

[작성 조건]
1. 1,500자 이상 2,000자 이하 일본어
2. H2 / H3 구조 사용
3. 도입부에 검색 의도 해결 문장 포함
4. 중간에 체험 가치 강조 단락 포함
5. 마지막에 행동 유도 문장(CTA) 포함 (브랜드명 언급 금지)

[SEO 강화 요소]
- 검색 의도형 질문 문장 1개 포함
- 지역 키워드 최소 2개 포함 (例: ソウル, 釜山, 景福宮 등)
- 감성 표현 + 정보형 설명 균형 유지

[이미지 제작 가이드]
아래 1:1 실사 프롬프트를 활용하여 블로그용 이미지 제작:
${images.join("
")}

[출력 형식]
1. SEO 최적화 제목
2. 본문 (H2/H3 구조 유지)
3. SEO 키워드 목록
4. 메타 설명 (120자 이내)

위 조건을 모두 충족하여 완성된 일본어 블로그를 작성하세요.`;
  };

  return (
    <div style={{ padding: 40, fontFamily: "sans-serif", maxWidth: 1000, margin: "0 auto" }}>
      <h1 style={{ fontSize: 26, marginBottom: 20 }}>
        김선주 대리 — 일본 SEO 특화 블로그 생성 시스템
      </h1>

      <button
        onClick={startResearch}
        style={{
          padding: "15px 25px",
          background: "#0f172a",
          color: "white",
          borderRadius: "12px",
          cursor: loading ? "not-allowed" : "pointer",
          border: "none",
          fontSize: 16,
          marginBottom: 20
        }}
        disabled={loading}
      >
        {loading ? "김선주 대리 업무 진행 중..." : "시장 조사 시작"}
      </button>

      {generatedAt && (
        <div style={{ marginBottom: 20, color: "green" }}>
          생성 완료: {generatedAt}
        </div>
      )}

      {error && (
        <div style={{ marginBottom: 20, color: "red" }}>{error}</div>
      )}

      <section style={{ marginBottom: 30 }}>
        <h2>오늘의 주제</h2>
        <div style={{ display: "flex", gap: 10 }}>
          <textarea value={dailyTopic} readOnly rows={3} style={{ width: "100%" }} />
          <button onClick={() => copyToClipboard(dailyTopic)}>복사</button>
        </div>
      </section>

      <section style={{ marginBottom: 30 }}>
        <h2>일본 SEO 최적화 블로그</h2>
        <div style={{ display: "flex", gap: 10 }}>
          <textarea value={jpBlog} readOnly rows={14} style={{ width: "100%" }} />
          <button onClick={() => copyToClipboard(jpBlog)}>전체 복사</button>
        </div>
      </section>

      <section style={{ marginBottom: 30 }}>
        <h2>이미지 프롬프트 (1:1 실사 블로그용)</h2>
        {images.map((img, idx) => (
          <div key={idx} style={{ display: "flex", marginBottom: 8, gap: 10 }}>
            <input value={img} readOnly style={{ flex: 1 }} />
            <button onClick={() => copyToClipboard(img)}>복사</button>
          </div>
        ))}
      </section>

      <section>
        <h2>SEO 점수</h2>
        <p style={{ fontSize: 18, fontWeight: "bold" }}>{seoScore}</p>
      </section>
    </div>
  );
}