<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>🐾 펫카페</title>

<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js"></script>

<style>
body {
  margin:0;
  font-family:sans-serif;
  background:#f5f5f5;
}

.topbar {
  background:#f2c24e;
  padding:12px;
  font-weight:bold;
  text-align:center;
}

#authBox {
  background:white;
  margin:20px;
  padding:20px;
  border-radius:15px;
}

#authBox input {
  width:100%;
  padding:10px;
  margin-top:10px;
}

#authBox button {
  width:100%;
  padding:10px;
  margin-top:10px;
  background:#f2c24e;
  border:none;
  border-radius:8px;
  cursor:pointer;
}

.post {
  background:white;
  margin:10px;
  padding:10px;
  border-radius:10px;
}

.profile {
  display:flex;
  align-items:center;
}

.profile img {
  width:40px;
  height:40px;
  border-radius:50%;
}

.name {
  margin-left:10px;
  font-weight:bold;
}

.floating {
  position:fixed;
  bottom:20px;
  right:20px;
  width:60px;
  height:60px;
  background:#f2c24e;
  border-radius:50%;
  font-size:30px;
  display:flex;
  justify-content:center;
  align-items:center;
  cursor:pointer;
}
</style>
</head>

<body>

<div class="topbar">🐾 펫카페 SNS</div>

<div id="authBox">
  <input id="email" placeholder="이메일">
  <input id="password" type="password" placeholder="비밀번호">

  <button onclick="signIn()">로그인</button>
  <button onclick="signUp()">회원가입</button>
  <button onclick="saveProfile()">닉네임 설정</button>
</div>

<div id="feed"></div>

<div class="floating" onclick="addPost()">＋</div>

<script>
const { createClient } = supabase;

const client = createClient(
  "https://nrvxyxbkqylmaoyluhvr.supabase.co",
  "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Im5ydnh5eGJrcXlsbWFveWx1aHZyIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzczNTI0NzcsImV4cCI6MjA5MjkyODQ3N30.GDgPkufBEQ5mXkStJgqtIfWcuLPmvKkuauNMftXZ_KE" // ← 반드시 실제 키로 변경
);

// DOM
const feed = document.getElementById("feed");

// 로그인
async function signIn() {
  const { error } = await client.auth.signInWithPassword({
    email: email.value,
    password: password.value
  });

  if (error) alert(error.message);
  else location.reload();
}

// 회원가입
async function signUp() {
  const { error } = await client.auth.signUp({
    email: email.value,
    password: password.value
  });

  if (error) alert(error.message);
  else alert("회원가입 완료!");
}

// 닉네임 저장
async function saveProfile() {
  const { data: u } = await client.auth.getUser();
  const name = prompt("닉네임 입력");

  await client.from('profiles').upsert([{
    id: u.user.id,
    username: name
  }]);
}

// 글 작성
async function addPost() {
  const text = prompt("내용 입력");
  const { data: u } = await client.auth.getUser();

  await client.from('posts').insert([{
    user_id: u.user.id,
    username: u.user.email,
    content: text
  }]);

  loadPosts();
}

// 댓글 작성
async function addComment(postId) {
  const input = document.getElementById("c-" + postId);
  const { data: u } = await client.auth.getUser();

  await client.from('comments').insert([{
    post_id: postId,
    user_id: u.user.id,
    username: u.user.email,
    content: input.value
  }]);

  loadComments(postId);
}

// 댓글 로드
async function loadComments(postId) {
  const { data } = await client
    .from('comments')
    .select('*')
    .eq('post_id', postId);

  const box = document.getElementById("comments-" + postId);
  if (!box) return;

  box.innerHTML = "";

  data.forEach(c => {
    box.innerHTML += `<div><b>${c.username}</b>: ${c.content}</div>`;
  });
}

// 피드 로드
async function loadPosts() {
  const { data } = await client.from('posts').select('*');

  feed.innerHTML = "";

  data.forEach(p => {
    const div = document.createElement("div");
    div.className = "post";

    div.innerHTML = `
      <div class="profile">
        <img src="https://via.placeholder.com/40">
        <div class="name">${p.username}</div>
      </div>

      <div>${p.content}</div>

      <div style="margin-top:10px;">
        <input id="c-${p.id}" placeholder="댓글">
        <button onclick="addComment('${p.id}')">등록</button>
      </div>

      <div id="comments-${p.id}"></div>
    `;

    feed.appendChild(div);
    loadComments(p.id);
  });
}

loadPosts();
</script>

</body>
</html>