Create Post

setTitle(e.target.value)} placeholder="Title" className="w-full p-2 border rounded mb-2" />

setContent(e.target.value)}
        placeholder="Write your blog or daily update..."
        rows={5}
        className="w-full p-2 border rounded mb-2"
      />
      <div className="flex items-center gap-3 mb-2">
        <input
          type="file"
          accept="image/*"
          onChange={(e) => setFile(e.target.files[0])}
        />
        <select value={tag} onChange={(e) => setTag(e.target.value)} className="p-2 border rounded">
          <option value="weekly">weekly</option>
          <option value="portfolio">portfolio</option>
          <option value="daily">daily</option>
        </select>
        <div className="ml-auto text-xs text-gray-500">images saved to Firebase Storage</div>
      </div>
      <div className="flex gap-2">
        <Button
          onClick={publish}
          className="bg-indigo-600 text-white hover:opacity-95"
          disabled={publishing}
        >
          {publishing ? 'Publishing...' : 'Publish'}
        </Button>
        <Button onClick={() => { setTitle(''); setContent(''); setFile(null); setTag('weekly') }} className="border">Clear</Button>
      </div>
    </div>
  )
}

// -------------------- PostCard --------------------
function PostCard({ postId }) {
  const [post, setPost] = useState(null)
  const [likesCount, setLikesCount] = useState(0)
  const [comments, setComments] = useState([])
  const [commentsOpen, setCommentsOpen] = useState(false)
  const [newComment, setNewComment] = useState('')
  const [liked, setLiked] = useState(false)
  const user = auth.currentUser

useEffect(() => {
    const unsub = db.collection('posts').doc(postId).onSnapshot((snap) => {
      if (!snap.exists) return
      setPost({ id: snap.id, ...snap.data() })
    })
    return unsub
  }, [postId])

// subscribe to likes subcollection and comments subcollection
  useEffect(() => {
    const likesUnsub = db.collection('posts').doc(postId).collection('likes').onSnapshot((s) => {
      setLikesCount(s.size)
      if (user) setLiked(!!s.docs.find((d) => d.id === user.uid))
    })
    const commUnsub = db.collection('posts').doc(postId).collection('comments').orderBy('ts', 'desc').onSnapshot((s) => {
      setComments(s.docs.map(d => ({ id: d.id, ...d.data() })))
    })
    return () => {
      likesUnsub(); commUnsub()
    }
  }, [postId, user])

// increment views (non-atomic exactness is OK for this app)
  useEffect(() => {
    // delay a bit to avoid inflated quick reloads
    const t = setTimeout(() => {
      db.collection('posts').doc(postId).update({ views: firebase.firestore.FieldValue.increment(1) }).catch(() => {})
    }, 800)
    return () => clearTimeout(t)
  }, [postId])

async function toggleLike() {
    if (!auth.currentUser) return alert('Sign in to like or comment.')
    const likeRef = db.collection('posts').doc(postId).collection('likes').doc(auth.currentUser.uid)
    const doc = await likeRef.get()
    if (doc.exists) {
      await likeRef.delete()
    } else {
      await likeRef.set({ ts: firebase.firestore.FieldValue.serverTimestamp() })
    }
  }

async function postComment() {
    if (!auth.currentUser) return alert('Sign in to comment.')
    const text = newComment.trim()
    if (!text) return
    await db.collection('posts').doc(postId).collection('comments').add({
      uid: auth.currentUser.uid,
      text,
      ts: firebase.firestore.FieldValue.serverTimestamp()
    })
    setNewComment('')
    setCommentsOpen(true)
  }

if (!post) return null

return (
    <article className="bg-white/95 text-black rounded-2xl p-4 shadow-sm">
      <header className="flex justify-between items-start">
        <div>
          <h4 className="font-semibold text-lg">{post.title}</h4>
          <div className="text-xs text-gray-600">{post.tag} • {post.timestamp?.toDate ? post.timestamp.toDate().toLocaleString() : ''}</div>
        </div>
        <div className="text-sm text-gray-600">Views: {post.views || 0}</div>
      </header>

<p className="my-3 whitespace-pre-line">{post.content}</p>

{post.imageUrl && (
        <img src={post.imageUrl} alt="post" className="w-full max-h-96 object-cover rounded mb-3" />
      )}

<div className="flex gap-3 items-center">
        <Button onClick={toggleLike} className={`border ${liked ? 'bg-indigo-600 text-white' : ''}`}>
          ❤ {likesCount}
        </Button>

<Button onClick={() => setCommentsOpen(c => !c)} className="border">
          Comments {comments.length ? `(${comments.length})` : ''}
        </Button>
      </div>

{commentsOpen && (
        <div className="mt-3">
          <div className="space-y-2 max-h-48 overflow-auto pb-2">
            {comments.length === 0 && <div className="text-sm text-gray-600">No comments yet — be the first!</div>}
            {comments.map(c => (
              <div key={c.id} className="text-sm border-b py-1">
                {c.text}
              </div>
            ))}
          </div>

<div className="flex gap-2 mt-2">
            <input
              value={newComment}
              onChange={(e) => setNewComment(e.target.value)}
              className="flex-1 p-2 border rounded"
              placeholder="Write a comment..."
            />
            <Button onClick={postComment} className="bg-brown-600 text-white" >
              Post
            </Button>
          </div>
        </div>
      )}
    </article>
  )
}

// -------------------- Feed + Follow --------------------
function Feed() {
  const [postIds, setPostIds] = useState([])
  const [showEditor, setShowEditor] = useState(false)
  const [isAdmin, setIsAdmin] = useState(false)
  const [followEmail, setFollowEmail] = useState('')

useEffect(() => {
    const unsub = db.collection('posts').orderBy('timestamp', 'desc').onSnapshot(s => {
      setPostIds(s.docs.map(d => d.id))
    })
    return unsub
  }, [])

useEffect(() => {
    const unsub = auth.onAuthStateChanged(u => {
      setIsAdmin(!!(u && u.email && u.email.toLowerCase() === ADMIN_EMAIL.toLowerCase()))
    })
    return unsub
  }, [])

async function follow() {
    const email = followEmail.trim()
    if (!email) return alert('Enter your email to follow.')
    await db.collection('followers').add({ email, ts: firebase.firestore.FieldValue.serverTimestamp() })
    setFollowEmail('')
    alert('Thanks — you will receive an email when a new post is published (once email-sending is set up).')
  }

return (
    <div className="space-y-6">
      <div className="bg-white/95 text-black rounded-2xl p-4 flex gap-3 items-center">
        <input value={followEmail} onChange={e => setFollowEmail(e.target.value)} placeholder="Enter your email to follow" className="p-2 border rounded flex-1" />
        <Button className="bg-indigo-600 text-white" onClick={follow}>Follow</Button>
        {isAdmin && <Button onClick={() => setShowEditor(s => !s)} className="border ml-2">{showEditor ? 'Close editor' : 'New Post'}</Button>}
      </div>

{showEditor && <PostEditor onDone={() => setShowEditor(false)} />}

<div className="space-y-4">
        {postIds.length === 0 && <div className="text-white/80">No posts yet — publish your first post!</div>}
        {postIds.map(id => <PostCard key={id} postId={id} />)}
      </div>
    </div>
  )
}

// -------------------- Auth UI --------------------
function AuthUI() {
  const [email, setEmail] = useState('')
  const [pw, setPw] = useState('')
  const [user, setUser] = useState(null)

useEffect(() => {
    const unsub = auth.onAuthStateChanged(u => setUser(u))
    return unsub
  }, [])

async function signIn() {
    try {
      await auth.signInWithEmailAndPassword(email, pw)
      setEmail(''); setPw('')
    } catch (err) {
      alert(err.message)
    }
  }

async function signUp() {
    try {
      await auth.createUserWithEmailAndPassword(email, pw)
      alert('Account created. Use this account only for admin if intended.')
    } catch (err) {
      alert(err.message)
    }
  }

async function signOut() {
    await auth.signOut()
  }

return (
    <div className="bg-white/95 text-black rounded-2xl p-3 flex items-center gap-3">
      {user ? (
        <>
          <div className="text-sm">Signed in: {user.email || user.uid}</div>
          <Button onClick={signOut} className="border">Sign out</Button>
        </>
      ) : (
        <>
          <input value={email} onChange={e => setEmail(e.target.value)} className="p-2 border rounded" placeholder="admin email" />
          <input value={pw} onChange={e => setPw(e.target.value)} type="password" className="p-2 border rounded" placeholder="password" />
          <Button onClick={signIn} className="bg-indigo-600 text-white">Sign In</Button>
          <Button onClick={signUp} className="border">Sign Up</Button>
        </>
      )}
    </div>
  )
}

// -------------------- App --------------------
export default function App() {
  return (
    <div className="min-h-screen bg-gradient-to-b from-indigo-900 via-indigo-800 to-[#1f1720] text-white p-6">
      <div className="max-w-4xl mx-auto">
        <header className="mb-6">
          <h1 className="text-4xl font-extrabold">SAHRA M SHIRLEY</h1>
          <p className="text-neutral-200">Portfolio • Feed • Weekly Recaps</p>
        </header>

<footer className="mt-8 text-sm text-white/70">© {new Date().getFullYear()} Sahra M Shirley</footer>
      </div>
    </div>
  )
}

// -------------------- Render (for quick dev) --------------------
const rootEl = document.getElementById('root') || document.createElement('div')
if (!rootEl.id) {
  rootEl.id = 'root'
  document.body.appendChild(rootEl)
}
ReactDOM.createRoot(rootEl).render(<App />)

/*
----------------- Next steps & notes -----------------

1) Firebase:
   - Create a Firebase project and add a Web app.
   - Replace firebaseConfig above with your project's values.
   - In console -> Authentication -> enable Email/Password sign-in.
   - In console -> Firestore -> create a database (start locked; set rules below).
   - In console -> Storage -> create a bucket (default).

2) Recommended Firestore Security Rules (starter):
   - Important: restrict writes so only admin can create posts.
   Example (use the Rules tab in Firebase console):
     rules_version = '2';
     service cloud.firestore {
       match /databases/{database}/documents {
         match /posts/{postId} {
           allow read: if true;
           allow create: if request.auth != null && request.auth.token.email == "YOUR_ADMIN_EMAIL@example.com";
           allow update, delete: if request.auth != null && request.auth.token.email == "YOUR_ADMIN_EMAIL@example.com";
         }
         match /posts/{postId}/comments/{commentId} {
           allow create: if request.auth != null;
           allow read: if true;
         }
         match /posts/{postId}/likes/{likeId} {
           allow create, delete: if request.auth != null;
           allow read: if true;
         }
         match /followers/{followerId} {
           allow create: if true;
           allow read: if request.auth != null && request.auth.token.email == "YOUR_ADMIN_EMAIL@example.com";
         }
       }
     }

- Alternatively, use custom claims or an admins collection to check admin UIDs.

3) Email notifications:
   - Use Firebase Cloud Functions + SendGrid (or Mailgun) to send follower emails on post creation.
   - In the canvas starter I left a sample Cloud Function snippet — I can provide a ready-to-deploy function if you want.

4) Deployment:
   - Build & host on Vercel or Netlify (static React). Put Firebase config in client; it's fine as these keys are public identifiers.
   - Protect production Firestore with correct rules (very important).

5) Improvements you may want:
   - CAPTCHA for follower sign-ups to prevent spam.
   - Rate-limiting like/comment actions.
   - Pagination/virtualized feed for performance.
   - Admin dashboard to manage followers, remove spam comments, delete posts.

If you want, I can:
- Generate the Firebase Cloud Function for sending emails (SendGrid) and step-by-step deploy commands.
- Create a `package.json`, `tailwind.config.js`, and `styles.css` starter so you can `npm install` and run locally.
- Lock down Firestore rules using custom claims (I can show how to set a custom admin claim).

Which of those should I do next? */