import { useState, useRef } from "react";

const SECTIONS = ["히어로 배너","헤더/네비","푸터","메뉴/상품 목록","상품 상세","장바구니","로그인/회원가입","대시보드","차트/통계","검색","필터/정렬","페이지네이션","모달/팝업","폼/입력","리뷰/별점","갤러리","예약 시스템","지도 연동","블로그 목록","SNS 공유"];
const MOODS = ["미니멀 & 클린","모던 & 세련된","럭셔리 & 고급스러운","감성적 & 따뜻한","트렌디 & 힙한","다크 테마","전통 & 한국적","귀엽고 캐주얼"];
const UPGRADE_OPTS = ["기술 스택 구체화","UI/UX 상세 명시","반응형 추가","성능 최적화","접근성 기준","에러 처리","애니메이션 추가","SEO 포함"];
const EXAMPLES = ["로그인/회원가입 소셜 로그인 포함 인증 페이지","실시간 차트와 KPI 카드가 있는 관리자 대시보드","상품 목록, 장바구니, 결제 포함 이커머스","반응형 포트폴리오 사이트 스크롤 애니메이션 포함","음식점 메뉴 소개 및 예약 기능 광고 웹사이트","게시판 CRUD 기능이 있는 커뮤니티 웹앱"];

const SYSTEM = `당신은 세계 최고의 웹 개발 프롬프트 엔지니어입니다. 사용자의 개발 요구사항을 분석하고 Claude가 완벽한 웹사이트/웹앱을 만들 수 있도록 최적화된 프롬프트를 생성합니다.

반드시 아래 JSON 형식만 출력하세요 (마크다운 코드블록 없이):
{
  "mainPrompt": "Claude에게 전달할 완성된 프롬프트 (매우 상세, 기술스택/디자인/기능/구조 전부 포함, 한국어)",
  "score": "완성도 점수 예: 97/100",
  "breakdown": "분석 내용: 프로젝트 파악, 기술스택 선택 이유, UI 전략, 주의사항 (줄바꿈 \\n 사용)",
  "var1Title": "변형1 제목",
  "var1": "변형 프롬프트 1",
  "var2Title": "변형2 제목",
  "var2": "변형 프롬프트 2"
}

mainPrompt 규칙: 기술스택 명확히, 레이아웃/색상/타이포/컴포넌트 구체적으로, 반응형/접근성/성능 포함, 파일 구조 및 완성 기준 명시, Claude가 바로 코딩 시작할 수 있을 정도로 상세하게.`;

export default function App() {
  const [mode, setMode] = useState("quick");
  const [resultTab, setResultTab] = useState("main");
  const [loading, setLoading] = useState(false);
  const [result, setResult] = useState(null);
  const [error, setError] = useState("");
  const [copied, setCopied] = useState(false);
  const [expandedVar, setExpandedVar] = useState({});

  // Quick mode state
  const [quickInput, setQuickInput] = useState("");
  const [qStack, setQStack] = useState("자동 판단");
  const [qDetail, setQDetail] = useState("매우 상세하게");

  // Guided mode state
  const [gType, setGType] = useState("");
  const [gStack, setGStack] = useState("AI가 최적 선택");
  const [gFeatures, setGFeatures] = useState("");
  const [gDesign, setGDesign] = useState("");
  const [gResponsive, setGResponsive] = useState("모바일 우선 반응형");
  const [gExtra, setGExtra] = useState("");
  const [gSections, setGSections] = useState(new Set(["히어로 배너","헤더/네비","푸터"]));

  // Upgrade mode state
  const [upgradeInput, setUpgradeInput] = useState("");
  const [upgradeOpts, setUpgradeOpts] = useState(new Set(["기술 스택 구체화","UI/UX 상세 명시"]));

  const loadingMsgs = ["요구사항 분석 중...","기술 스택 결정 중...","UI/UX 구조 설계 중...","최적 프롬프트 작성 중...","검토 및 마무리 중..."];
  const [loadingMsg, setLoadingMsg] = useState(loadingMsgs[0]);
  const timerRef = useRef(null);

  function toggleSet(set, setter, val) {
    const next = new Set(set);
    next.has(val) ? next.delete(val) : next.add(val);
    setter(next);
  }

  async function generate() {
    let userReq = "";
    if (mode === "quick") {
      if (!quickInput.trim()) { setError("요구사항을 입력해주세요"); return; }
      userReq = `[개발 요구사항]\n${quickInput}\n\n[기술 스택 선호]: ${qStack}\n[상세도]: ${qDetail}`;
    } else if (mode === "guided") {
      userReq = `[프로젝트 유형]: ${gType||"미선택"}\n[기술 스택]: ${gStack}\n[핵심 기능]: ${gFeatures||"미입력"}\n[디자인 스타일]: ${gDesign||"미선택"}\n[반응형]: ${gResponsive}\n[포함 섹션]: ${[...gSections].join(", ")||"미선택"}\n[특별 요구사항]: ${gExtra||"없음"}`;
    } else {
      if (!upgradeInput.trim()) { setError("프롬프트를 붙여넣어주세요"); return; }
      userReq = `[업그레이드할 기존 프롬프트]\n${upgradeInput}\n\n[업그레이드 방향]: ${[...upgradeOpts].join(", ")||"전반적 개선"}`;
    }

    setError("");
    setLoading(true);
    setResult(null);
    let i = 0;
    setLoadingMsg(loadingMsgs[0]);
    timerRef.current = setInterval(() => {
      i = (i + 1) % loadingMsgs.length;
      setLoadingMsg(loadingMsgs[i]);
    }, 1800);

    try {
      const res = await fetch("https://api.anthropic.com/v1/messages", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          model: "claude-sonnet-4-20250514",
          max_tokens: 1000,
          system: SYSTEM,
          messages: [{ role: "user", content: userReq }]
        })
      });
      const data = await res.json();
      if (data.error) throw new Error(data.error.message);
      const raw = data.content.map(b => b.text || "").join("");
      const clean = raw.replace(/```json|```/g, "").trim();
      const parsed = JSON.parse(clean);
      setResult(parsed);
      setResultTab("main");
    } catch (e) {
      setError("생성 중 오류가 발생했어요: " + e.message);
    } finally {
      clearInterval(timerRef.current);
      setLoading(false);
    }
  }

  function copyPrompt() {
    navigator.clipboard.writeText(result?.mainPrompt || "");
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  }

  const TabBtn = ({ id, label }) => (
    <button onClick={() => setMode(id)} style={{
      flex: 1, padding: "7px 4px", fontSize: 12, fontWeight: 500, border: "none", cursor: "pointer",
      borderRadius: 6, transition: "all 0.15s",
      background: mode === id ? "#fff" : "transparent",
      color: mode === id ? "#0f172a" : "#64748b",
      boxShadow: mode === id ? "0 1px 3px rgba(0,0,0,0.08)" : "none"
    }}>{label}</button>
  );

  const RTabBtn = ({ id, label }) => (
    <button onClick={() => setResultTab(id)} style={{
      flex: 1, padding: "6px 4px", fontSize: 12, fontWeight: 500, border: "none", cursor: "pointer",
      borderRadius: 5, transition: "all 0.15s",
      background: resultTab === id ? "#fff" : "transparent",
      color: resultTab === id ? "#0f172a" : "#64748b",
      boxShadow: resultTab === id ? "0 1px 3px rgba(0,0,0,0.07)" : "none"
    }}>{label}</button>
  );

  const Tag = ({ label, active, onToggle, activeColor = "#dbeafe", activeText = "#1d4ed8" }) => (
    <button onClick={onToggle} style={{
      fontSize: 11, padding: "4px 10px", borderRadius: 99, cursor: "pointer",
      border: `1px solid ${active ? activeColor : "#e2e8f0"}`,
      background: active ? activeColor : "#f8fafc",
      color: active ? activeText : "#64748b",
      transition: "all 0.12s", fontWeight: active ? 500 : 400
    }}>{label}</button>
  );

  const sel = { width: "100%", padding: "7px 10px", fontSize: 13, border: "1px solid #e2e8f0", borderRadius: 8, background: "#fff", color: "#0f172a", outline: "none" };
  const inp = { width: "100%", boxSizing: "border-box", padding: "8px 11px", fontSize: 13, border: "1px solid #e2e8f0", borderRadius: 8, background: "#fff", color: "#0f172a", outline: "none", fontFamily: "inherit" };
  const btn = { width: "100%", padding: "11px", fontSize: 14, fontWeight: 600, border: "1px solid #1d4ed8", borderRadius: 9, background: "#1d4ed8", color: "#fff", cursor: "pointer", transition: "all 0.15s" };

  return (
    <div style={{ maxWidth: 700, margin: "0 auto", padding: "24px 16px", fontFamily: "'Pretendard', 'Apple SD Gothic Neo', sans-serif", color: "#0f172a" }}>

      {/* Header */}
      <div style={{ marginBottom: 24 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 5 }}>
          <div style={{ width: 34, height: 34, background: "#dbeafe", borderRadius: 9, display: "flex", alignItems: "center", justifyContent: "center" }}>
            <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#1d4ed8" strokeWidth="2.2"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
          </div>
          <h1 style={{ fontSize: 19, fontWeight: 700, margin: 0 }}>웹 개발 프롬프트 자동화 AI</h1>
        </div>
        <p style={{ fontSize: 13, color: "#64748b", margin: 0 }}>어떤 개발 요구사항이든 → 완벽한 프롬프트로 자동 변환</p>
      </div>

      {/* Mode Tabs */}
      <div style={{ display: "flex", gap: 3, background: "#f1f5f9", borderRadius: 10, padding: 3, marginBottom: 20 }}>
        <TabBtn id="quick" label="⚡ 빠른 생성" />
        <TabBtn id="guided" label="🗂 단계별 가이드" />
        <TabBtn id="upgrade" label="🔧 프롬프트 업그레이드" />
      </div>

      {/* Quick Mode */}
      {mode === "quick" && (
        <div>
          <div style={{ background: "#fff", border: "1px solid #e2e8f0", borderRadius: 12, padding: "16px", marginBottom: 12 }}>
            <label style={{ fontSize: 13, color: "#475569", display: "block", marginBottom: 8 }}>개발 요구사항을 자유롭게 입력하세요</label>
            <textarea value={quickInput} onChange={e => setQuickInput(e.target.value)} placeholder={"예시:\n• 로그인/회원가입 페이지 만들어줘\n• 쇼핑몰 상품 목록 페이지가 필요해\n• 대시보드에 차트랑 테이블 넣고 싶어\n• 음식점 광고 웹사이트 만들어줘\n\n짧게 한 줄이어도 OK. AI가 완벽하게 분석합니다."} style={{ ...inp, height: 140, resize: "none", lineHeight: 1.7 }} />
            <div style={{ marginTop: 10, display: "flex", flexWrap: "wrap", gap: 6, alignItems: "center" }}>
              <span style={{ fontSize: 12, color: "#94a3b8" }}>빠른 선택:</span>
              {EXAMPLES.map(e => (
                <button key={e} onClick={() => setQuickInput(e)} style={{ fontSize: 11, padding: "4px 10px", borderRadius: 99, border: "1px solid #e2e8f0", background: "#f8fafc", color: "#64748b", cursor: "pointer" }}>{e.slice(0, 12)}…</button>
              ))}
            </div>
          </div>
          <div style={{ background: "#fff", border: "1px solid #e2e8f0", borderRadius: 12, padding: "14px 16px", marginBottom: 14, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
            <div>
              <label style={{ fontSize: 12, color: "#64748b", display: "block", marginBottom: 5 }}>기술 스택</label>
              <select value={qStack} onChange={e => setQStack(e.target.value)} style={sel}>
                <option>자동 판단</option>
                <option>HTML/CSS/JS 순수 웹</option>
                <option>React + Tailwind CSS</option>
                <option>Next.js + TypeScript</option>
                <option>단일 HTML 파일</option>
              </select>
            </div>
            <div>
              <label style={{ fontSize: 12, color: "#64748b", display: "block", marginBottom: 5 }}>상세도</label>
              <select value={qDetail} onChange={e => setQDetail(e.target.value)} style={sel}>
                <option>매우 상세하게</option>
                <option>적당히 (핵심 위주)</option>
                <option>간결하게</option>
              </select>
            </div>
          </div>
        </div>
      )}

      {/* Guided Mode */}
      {mode === "guided" && (
        <div style={{ background: "#fff", border: "1px solid #e2e8f0", borderRadius: 12, padding: "16px", marginBottom: 14 }}>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, marginBottom: 12 }}>
            <div>
              <label style={{ fontSize: 12, color: "#64748b", display: "block", marginBottom: 5 }}>프로젝트 유형</label>
              <select value={gType} onChange={e => setGType(e.target.value)} style={sel}>
                <option value="">선택</option>
                {["랜딩/광고 웹사이트","관리자 대시보드","이커머스/쇼핑몰","SNS/커뮤니티","포트폴리오","SaaS 웹앱","블로그/미디어","예약/주문 시스템"].map(o => <option key={o}>{o}</option>)}
              </select>
            </div>
            <div>
              <label style={{ fontSize: 12, color: "#64748b", display: "block", marginBottom: 5 }}>기술 스택</label>
              <select value={gStack} onChange={e => setGStack(e.target.value)} style={sel}>
                <option>AI가 최적 선택</option>
                <option>HTML/CSS/JS</option>
                <option>React + Tailwind</option>
                <option>Next.js + TypeScript</option>
                <option>단일 HTML 파일</option>
              </select>
            </div>
          </div>
          <div style={{ marginBottom: 12 }}>
            <label style={{ fontSize: 12, color: "#64748b", display: "block", marginBottom: 5 }}>핵심 기능 (쉼표 구분)</label>
            <input value={gFeatures} onChange={e => setGFeatures(e.target.value)} placeholder="예: 로그인, 상품 목록, 장바구니, 검색, 결제" style={inp} />
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, marginBottom: 12 }}>
            <div>
              <label style={{ fontSize: 12, color: "#64748b", display: "block", marginBottom: 5 }}>디자인 스타일</label>
              <select value={gDesign} onChange={e => setGDesign(e.target.value)} style={sel}>
                <option value="">선택</option>
                {MOODS.map(o => <option key={o}>{o}</option>)}
              </select>
            </div>
            <div>
              <label style={{ fontSize: 12, color: "#64748b", display: "block", marginBottom: 5 }}>반응형</label>
              <select value={gResponsive} onChange={e => setGResponsive(e.target.value)} style={sel}>
                <option>모바일 우선 반응형</option>
                <option>데스크톱 우선</option>
                <option>모바일 전용</option>
                <option>데스크톱 전용</option>
              </select>
            </div>
          </div>
          <div style={{ marginBottom: 12 }}>
            <label style={{ fontSize: 12, color: "#64748b", display: "block", marginBottom: 6 }}>포함할 섹션</label>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
              {SECTIONS.map(s => <Tag key={s} label={s} active={gSections.has(s)} onToggle={() => toggleSet(gSections, setGSections, s)} />)}
            </div>
          </div>
          <div>
            <label style={{ fontSize: 12, color: "#64748b", display: "block", marginBottom: 5 }}>특별 요구사항 (선택)</label>
            <textarea value={gExtra} onChange={e => setGExtra(e.target.value)} placeholder="다크모드, 특정 색상, 접근성, 애니메이션 등..." style={{ ...inp, height: 70, resize: "none", lineHeight: 1.6 }} />
          </div>
        </div>
      )}

      {/* Upgrade Mode */}
      {mode === "upgrade" && (
        <div style={{ background: "#fff", border: "1px solid #e2e8f0", borderRadius: 12, padding: "16px", marginBottom: 14 }}>
          <label style={{ fontSize: 13, color: "#475569", display: "block", marginBottom: 8 }}>기존 프롬프트나 막연한 요구사항을 붙여넣으세요</label>
          <textarea value={upgradeInput} onChange={e => setUpgradeInput(e.target.value)} placeholder={"예: '쇼핑몰 만들어줘'\n또는 기존에 쓰던 프롬프트 전체를 붙여넣기.\n\nAI가 분석해서 더 완성도 높은 프롬프트로 업그레이드합니다."} style={{ ...inp, height: 150, resize: "none", lineHeight: 1.7 }} />
          <div style={{ marginTop: 12 }}>
            <label style={{ fontSize: 12, color: "#64748b", display: "block", marginBottom: 7 }}>업그레이드 방향</label>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
              {UPGRADE_OPTS.map(o => <Tag key={o} label={o} active={upgradeOpts.has(o)} onToggle={() => toggleSet(upgradeOpts, setUpgradeOpts, o)} activeColor="#fef3c7" activeText="#92400e" />)}
            </div>
          </div>
        </div>
      )}

      {error && <div style={{ background: "#fef2f2", border: "1px solid #fecaca", borderRadius: 8, padding: "10px 14px", fontSize: 13, color: "#dc2626", marginBottom: 12 }}>{error}</div>}

      <button onClick={generate} disabled={loading} style={{ ...btn, opacity: loading ? 0.6 : 1 }}>
        {loading ? loadingMsg : "프롬프트 자동 생성하기 →"}
      </button>

      {/* Result */}
      {result && !loading && (
        <div style={{ marginTop: 20 }}>
          <div style={{ display: "flex", gap: 3, background: "#f1f5f9", borderRadius: 10, padding: 3, marginBottom: 14 }}>
            <RTabBtn id="main" label="📄 메인 프롬프트" />
            <RTabBtn id="breakdown" label="🔍 분석 & 전략" />
            <RTabBtn id="variations" label="🔀 변형 프롬프트" />
          </div>

          {resultTab === "main" && (
            <div>
              <div style={{ background: "#fff", border: "1px solid #e2e8f0", borderRadius: 12, padding: "16px", marginBottom: 12 }}>
                <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 12 }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                    <span style={{ background: "#dcfce7", color: "#16a34a", fontSize: 11, fontWeight: 600, padding: "3px 10px", borderRadius: 99 }}>✓ 생성 완료</span>
                    <span style={{ fontSize: 12, color: "#94a3b8" }}>완성도: {result.score}</span>
                  </div>
                  <button onClick={copyPrompt} style={{ fontSize: 12, padding: "5px 14px", border: "1px solid #e2e8f0", borderRadius: 7, background: copied ? "#dcfce7" : "#f8fafc", color: copied ? "#16a34a" : "#475569", cursor: "pointer", fontWeight: 500 }}>
                    {copied ? "복사됨 ✓" : "복사"}
                  </button>
                </div>
                <div style={{ fontSize: 13, color: "#374151", lineHeight: 1.85, whiteSpace: "pre-wrap", maxHeight: 420, overflowY: "auto", borderTop: "1px solid #f1f5f9", paddingTop: 12 }}>
                  {result.mainPrompt}
                </div>
              </div>
              <div style={{ display: "flex", gap: 8 }}>
                <button onClick={() => setResult(null)} style={{ flex: 1, padding: 10, fontSize: 13, border: "1px solid #e2e8f0", borderRadius: 9, background: "#f8fafc", color: "#475569", cursor: "pointer" }}>← 다시 입력</button>
                <button onClick={() => { if (typeof sendPrompt === "function") sendPrompt(result.mainPrompt); }} style={{ flex: 2, padding: 10, fontSize: 13, fontWeight: 600, border: "1px solid #1d4ed8", borderRadius: 9, background: "#1d4ed8", color: "#fff", cursor: "pointer" }}>Claude에게 바로 전달 →</button>
              </div>
            </div>
          )}

          {resultTab === "breakdown" && (
            <div style={{ background: "#fff", border: "1px solid #e2e8f0", borderRadius: 12, padding: "16px" }}>
              <p style={{ fontSize: 13, fontWeight: 600, margin: "0 0 12px" }}>AI 분석 결과</p>
              <div style={{ fontSize: 13, color: "#374151", lineHeight: 1.9, borderTop: "1px solid #f1f5f9", paddingTop: 12 }}>
                {(result.breakdown || "").split("\n").map((line, i) => <div key={i} style={{ marginBottom: line === "" ? 8 : 2 }}>{line}</div>)}
              </div>
            </div>
          )}

          {resultTab === "variations" && (
            <div>
              {[["var1Title","var1"],["var2Title","var2"]].map(([tKey, cKey], idx) => result[cKey] && (
                <div key={idx} style={{ background: "#fff", border: "1px solid #e2e8f0", borderRadius: 12, padding: "14px 16px", marginBottom: 10 }}>
                  <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                    <p style={{ fontSize: 13, fontWeight: 600, margin: 0 }}>{result[tKey] || `변형 ${idx+1}`}</p>
                    <button onClick={() => setExpandedVar(v => ({ ...v, [idx]: !v[idx] }))} style={{ fontSize: 12, padding: "4px 12px", border: "1px solid #e2e8f0", borderRadius: 7, background: "#f8fafc", color: "#475569", cursor: "pointer" }}>
                      {expandedVar[idx] ? "접기" : "펼치기"}
                    </button>
                  </div>
                  {expandedVar[idx] && (
                    <div style={{ fontSize: 13, color: "#374151", lineHeight: 1.85, whiteSpace: "pre-wrap", borderTop: "1px solid #f1f5f9", paddingTop: 12, marginTop: 12 }}>
                      {result[cKey]}
                    </div>
                  )}
                </div>
              ))}
            </div>
          )}
        </div>
      )}
    </div>
  );
}