npm create vite@latest deshi-book -- --template react
cd deshi-book
npm install

git init
git branch -M main
git config user.name "আপনার নাম"
git config user.email "আপনার ইমেইল"
git add .
git commit -m "chore: scaffold project with vite and react"

npm install tailwindcss @tailwindcss/vite

// vite.config.js
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [react(), tailwindcss()],
});

@import "tailwindcss";

// src/App.jsx
function App() {
  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-50">
      <h1 className="text-3xl font-bold text-blue-600">
        Tailwind is working! 🎉
      </h1>
    </div>
  );
}

export default App;

rm -rf src/App.css src/assets public/icons.svg

npm install axios react-router

src/
├── actions/
│   └── index.js            ← reducer action type constants
├── api/
│   └── api.js               ← axios instance (baseURL সহ)
├── context/
│   └── AuthContext.jsx      ← Provider Pattern দিয়ে গ্লোবাল auth state
├── hooks/
│   ├── useAuth.js
│   ├── useAxios.js           ← interceptor hook
│   ├── usePosts.js
│   └── useProfile.js
├── reducers/
│   └── profileReducer.js
├── services/
│   ├── authService.js
│   ├── postService.js
│   └── profileService.js
├── components/
│   ├── LoginForm.jsx
│   ├── RegisterForm.jsx
│   ├── ProtectedRoute.jsx
│   ├── Navbar.jsx
│   ├── feed/
│   │   ├── CreatePostForm.jsx
│   │   ├── PostCard.jsx
│   │   └── PostFeed.jsx
│   └── profile/
│       ├── ProfileImage.jsx
│       └── ProfileNameEditor.jsx
├── pages/
│   ├── FeedPage.jsx
│   └── ProfilePage.jsx
├── App.jsx
└── main.jsx

mkdir -p src/actions src/api src/context src/hooks src/reducers src/services src/components/feed src/components/profile src/pages

# .env.example
VITE_API_BASE_URL=http://localhost:3000

cp .env.example .env

# Environment variables
.env

// src/api/api.js
import axios from "axios";

const api = axios.create({
  baseURL: import.meta.env.VITE_API_BASE_URL,
  timeout: 15000,
});

export default api;

cd facebook-clone-server
npm install
npm start

curl -X POST http://localhost:3000/posts \
  -H "Authorization: Bearer <token>" \
  -F "postType=text" -F "content=Verification post content"

{
  "author": {
    "id": "773a8d66-fddc-4eee-8447-7272f664bb44",
    "name": "Verify Two",
    "avatar": null
  }
}

curl -X PATCH http://localhost:3000/posts/<id>/like -H "Authorization: Bearer <token>"

{ "message": "Post Liked Successfully", "likeCount": 1 }

curl -X PATCH http://localhost:3000/posts/<id>/comment \
  -H "Authorization: Bearer <token>" -H "Content-Type: application/json" \
  -d '{"comment":"Nice post!"}'

{
  "message": "Comment Added Successfully",
  "commentCount": 1,
  "comments": [{ "id": "...", "comment": "Nice post!", "author": { "...": "..." } }]
}

curl -X POST http://localhost:3000/auth/register -H "Content-Type: application/json" \
  -d '{"email":"sametest@mail.com","password":"test1234","firstName":"Same","lastName":"Session"}'
# ✅ সফল, token সহ user object ফেরত পাওয়া যায়

curl -X POST http://localhost:3000/auth/login -H "Content-Type: application/json" \
  -d '{"email":"sametest@mail.com","password":"test1234"}'
# ❌ { "error": "data and hash arguments required" }

// server/services/user.serivce.js — register() ফাংশনের ভেতরে

db.get("users").push(newUser).write();

const token = getNewTokens(newUser);

// Object.assign দিয়ে ক্লোন করে তারপর password মুছছি — সরাসরি newUser থেকে
// মুছলে সেটা db array-তে push করা ওই একই object reference থেকেও মুছে যেত।
let userObj = Object.assign({}, newUser);
delete userObj.password;

return {
  user: userObj,
  token,
};

# ফিক্সের পর, একই সার্ভার সেশনে register + login দুটোই সফল হয়:
curl -X POST http://localhost:3000/auth/login -H "Content-Type: application/json" \
  -d '{"email":"bugfixtest@mail.com","password":"test1234"}'
# ✅ { "user": {...}, "token": { "token": "...", "refreshToken": "..." } }

// src/actions/index.js
export const actions = {
  profile: {
    PROFILE_FETCHING: "PROFILE_FETCHING",
    PROFILE_FETCHED: "PROFILE_FETCHED",
    PROFILE_FETCH_ERROR: "PROFILE_FETCH_ERROR",
    PROFILE_UPDATED: "PROFILE_UPDATED",
    IMAGE_UPDATED: "IMAGE_UPDATED",
  },
};

// src/context/AuthContext.jsx
import { createContext, useState } from "react";

const AuthContext = createContext(null);

export const AuthProvider = ({ children }) => {
  const [auth, setAuth] = useState(null);
  // auth object: { user: { id, firstName, lastName, email, avatar }, authToken, refreshToken }

  return (
    <AuthContext.Provider value={{ auth, setAuth }}>
      {children}
    </AuthContext.Provider>
  );
};

export default AuthContext;

// src/hooks/useAuth.js
import { useContext } from "react";
import AuthContext from "../context/AuthContext";

const useAuth = () => useContext(AuthContext);

export default useAuth;

// src/hooks/useAxios.js
import { useEffect } from "react";
import api from "../api/api";
import useAuth from "./useAuth";

const useAxios = () => {
  const { auth, setAuth } = useAuth();

  useEffect(() => {
    // Request Interceptor — প্রতিটা request পাঠানোর ঠিক আগে চলে
    const requestIntercept = api.interceptors.request.use(
      (config) => {
        const token = auth?.authToken;
        if (token) {
          config.headers.Authorization = `Bearer ${token}`;
        }
        // FormData (ছবি আপলোড) হলে Content-Type নিজে সেট করবেন না —
        // browser নিজেই সঠিক boundary সহ multipart/form-data বসায়
        if (config.data instanceof FormData) {
          delete config.headers["Content-Type"];
        } else {
          config.headers["Content-Type"] = "application/json";
        }
        return config;
      },
      (error) => Promise.reject(error),
    );

    // Response Interceptor — response আসার পরে, catch-এ পৌঁছানোর আগে চলে
    const responseIntercept = api.interceptors.response.use(
      (response) => response,
      async (error) => {
        const originalRequest = error.config;

        // এখনো একবারও refresh চেষ্টা করা হয়নি — এমন 401 হলে retry করব
        const isFirstFailure =
          error.response?.status === 401 && !originalRequest.alreadyRetried;

        if (isFirstFailure) {
          // মার্ক করে দিলাম — এই request একবার retry হয়ে গেছে
          // এর ফলে refresh নিজেও fail করলে আবার এই if-এ ঢুকবে না — infinite loop বন্ধ
          originalRequest.alreadyRetried = true;

          try {
            const { data } = await api.post("/auth/refresh-token", {
              refreshToken: auth?.refreshToken,
            });

            setAuth((prev) => ({
              ...prev,
              authToken: data.token,
              refreshToken: data.refreshToken,
            }));

            originalRequest.headers.Authorization = `Bearer ${data.token}`;
            return api(originalRequest);
          } catch (refreshError) {
            // Refresh token-ও কাজ করলো না — session শেষ
            setAuth(null);
            window.location.href = "/login";
            return Promise.reject(refreshError);
          }
        }

        return Promise.reject(error);
      },
    );

    return () => {
      api.interceptors.request.eject(requestIntercept);
      api.interceptors.response.eject(responseIntercept);
    };
  }, [auth]);

  return { api };
};

export default useAxios;

// src/services/authService.js
import api from "../api/api";

export const registerUser = ({ email, password, firstName, lastName }) =>
  api.post("/auth/register", { email, password, firstName, lastName });

export const loginUser = (email, password) =>
  api.post("/auth/login", { email, password });

export const refreshAccessToken = (refreshToken) =>
  api.post("/auth/refresh-token", { refreshToken });

// src/components/LoginForm.jsx
import { useState } from "react";
import { useNavigate, useLocation, Link } from "react-router";
import useAuth from "../hooks/useAuth";
import { loginUser } from "../services/authService";

export default function LoginForm() {
  const { setAuth } = useAuth();
  const navigate = useNavigate();
  const location = useLocation();

  const [form, setForm] = useState({
    email: location.state?.email ?? "",
    password: "",
  });
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(false);

  const handleChange = (e) => {
    setForm({ ...form, [e.target.name]: e.target.value });
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    setError("");
    setLoading(true);

    try {
      const response = await loginUser(form.email, form.password);

      // Server থেকে আসা response: { user: {...}, token: { token, refreshToken } }
      const { user, token } = response.data;
      const { token: authToken, refreshToken } = token;

      setAuth({ user, authToken, refreshToken });
      navigate("/");
    } catch (err) {
      setError(
        err.response?.data?.error || "লগইন ব্যর্থ হয়েছে। আবার চেষ্টা করুন।",
      );
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="min-h-[calc(100vh-56px)] flex items-center justify-center px-4 py-8">
      <div className="w-full max-w-[400px]">
        <div className="text-center mb-4">
          <h1 className="text-[#1877F2] text-5xl font-bold tracking-tight">
            দেশি বুক
          </h1>
          <p className="text-gray-600 text-xl mt-2">
            বন্ধু, পরিবার আর চেনা মানুষদের সাথে যুক্ত হোন।
          </p>
        </div>

        {location.state?.justRegistered && (
          <p className="bg-[#E7F3FF] text-[#1877F2] text-sm rounded-md px-3 py-2 mb-3 text-center">
            একাউন্ট তৈরি হয়েছে! এখন লগইন করুন।
          </p>
        )}

        <form
          onSubmit={handleSubmit}
          className="bg-white rounded-lg shadow-md p-4 space-y-3"
        >
          <input
            name="email"
            type="email"
            placeholder="ইমেইল"
            value={form.email}
            onChange={handleChange}
            className="w-full border border-gray-300 rounded-md px-4 py-3 text-base outline-none focus:border-[#1877F2] focus:ring-1 focus:ring-[#1877F2]"
            required
          />
          <input
            name="password"
            type="password"
            placeholder="পাসওয়ার্ড"
            value={form.password}
            onChange={handleChange}
            className="w-full border border-gray-300 rounded-md px-4 py-3 text-base outline-none focus:border-[#1877F2] focus:ring-1 focus:ring-[#1877F2]"
            required
          />

          {error && <p className="text-red-600 text-sm text-center">{error}</p>}

          <button
            type="submit"
            disabled={loading}
            className="w-full bg-[#1877F2] hover:bg-[#166fe5] text-white font-bold py-2.5 rounded-md text-lg disabled:opacity-60"
          >
            {loading ? "লগইন হচ্ছে..." : "লগইন করুন"}
          </button>

          <p className="text-center">
            <a href="#" className="text-[#1877F2] text-sm hover:underline">
              পাসওয়ার্ড ভুলে গেছেন?
            </a>
          </p>

          <hr className="border-gray-200" />

          <div className="flex justify-center">
            <Link
              to="/register"
              className="bg-[#42B72A] hover:bg-[#36a420] text-white font-semibold px-4 py-2.5 rounded-md text-base inline-block"
            >
              নতুন একাউন্ট খুলুন
            </Link>
          </div>
        </form>
      </div>
    </div>
  );
}

// src/components/RegisterForm.jsx
import { useState } from "react";
import { useNavigate, Link } from "react-router";
import { registerUser } from "../services/authService";

export default function RegisterForm() {
  const navigate = useNavigate();

  const [form, setForm] = useState({
    firstName: "",
    lastName: "",
    email: "",
    password: "",
  });
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(false);

  const handleChange = (e) => {
    setForm({ ...form, [e.target.name]: e.target.value });
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    setError("");
    setLoading(true);

    try {
      await registerUser(form);
      // রেজিস্ট্রেশনের পর সরাসরি লগইন না করিয়ে, লগইন পেজে পাঠাচ্ছি —
      // ইউজার নিজের ইমেইল-পাসওয়ার্ড দিয়ে সরাসরি লগইন করবেন।
      navigate("/login", {
        state: { justRegistered: true, email: form.email },
      });
    } catch (err) {
      setError(
        err.response?.data?.error ||
          "রেজিস্ট্রেশন ব্যর্থ হয়েছে। আবার চেষ্টা করুন।",
      );
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="min-h-[calc(100vh-56px)] flex items-center justify-center px-4 py-8">
      <div className="w-full max-w-[400px]">
        <div className="text-center mb-4">
          <h1 className="text-[#1877F2] text-4xl font-bold tracking-tight">
            দেশি বুক
          </h1>
          <p className="text-gray-600 text-lg mt-1">
            বন্ধু, পরিবারের সাথে যুক্ত থাকুন।
          </p>
        </div>

        <form
          onSubmit={handleSubmit}
          className="bg-white rounded-lg shadow-md p-4 space-y-3"
        >
          <h2 className="text-xl font-semibold text-gray-800 border-b pb-3 mb-1">
            নতুন একাউন্ট খুলুন
          </h2>

          <div className="grid grid-cols-2 gap-2">
            <input
              name="firstName"
              placeholder="প্রথম নাম"
              value={form.firstName}
              onChange={handleChange}
              className="w-full border border-gray-300 rounded-md px-3 py-2.5 text-sm outline-none focus:border-[#1877F2] focus:ring-1 focus:ring-[#1877F2]"
              required
            />
            <input
              name="lastName"
              placeholder="শেষ নাম"
              value={form.lastName}
              onChange={handleChange}
              className="w-full border border-gray-300 rounded-md px-3 py-2.5 text-sm outline-none focus:border-[#1877F2] focus:ring-1 focus:ring-[#1877F2]"
              required
            />
          </div>
          <input
            name="email"
            type="email"
            placeholder="ইমেইল"
            value={form.email}
            onChange={handleChange}
            className="w-full border border-gray-300 rounded-md px-3 py-2.5 text-sm outline-none focus:border-[#1877F2] focus:ring-1 focus:ring-[#1877F2]"
            required
          />
          <input
            name="password"
            type="password"
            placeholder="নতুন পাসওয়ার্ড"
            value={form.password}
            onChange={handleChange}
            className="w-full border border-gray-300 rounded-md px-3 py-2.5 text-sm outline-none focus:border-[#1877F2] focus:ring-1 focus:ring-[#1877F2]"
            required
          />

          {error && <p className="text-red-600 text-sm text-center">{error}</p>}

          <button
            type="submit"
            disabled={loading}
            className="w-full bg-[#42B72A] hover:bg-[#36a420] text-white font-semibold py-2.5 rounded-md text-lg disabled:opacity-60"
          >
            {loading ? "একাউন্ট তৈরি হচ্ছে..." : "সাইন আপ"}
          </button>

          <p className="text-center text-sm text-gray-600 pt-1">
            আগে থেকেই একাউন্ট আছে?{" "}
            <Link to="/login" className="text-[#1877F2] font-medium hover:underline">
              লগইন করুন
            </Link>
          </p>
        </form>
      </div>
    </div>
  );
}

// src/components/ProtectedRoute.jsx
import { Navigate } from "react-router";
import useAuth from "../hooks/useAuth";

export default function ProtectedRoute({ children }) {
  const { auth } = useAuth();

  if (!auth) {
    return <Navigate to="/login" replace />;
  }

  return children;
}

// src/main.jsx
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { BrowserRouter } from "react-router";
import { AuthProvider } from "./context/AuthContext.jsx";
import "./index.css";
import App from "./App.jsx";

createRoot(document.getElementById("root")).render(
  <StrictMode>
    <AuthProvider>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </AuthProvider>
  </StrictMode>,
);

// src/App.jsx
import { Routes, Route } from "react-router";
import LoginForm from "./components/LoginForm";
import RegisterForm from "./components/RegisterForm";
import useAxios from "./hooks/useAxios";

function App() {
  // এই hook-টা কল না করলে interceptor কখনোই attach হয় না — কোনো
  // request-এই Authorization header যাবে না, প্রতিটা protected endpoint
  // "Please Provide Valid Token" দিয়ে reject করবে (দেখুন সেকশন ৪.৫)।
  // App-এর একদম উপরে, সবসময় mounted থাকা জায়গায় একবার কল করলেই যথেষ্ট।
  useAxios();

  return (
    <div className="min-h-screen bg-[#F0F2F5]">
      <Routes>
        <Route path="/login" element={<LoginForm />} />
        <Route path="/register" element={<RegisterForm />} />
      </Routes>
    </div>
  );
}

export default App;

// src/services/postService.js
import api from "../api/api";

export const getPosts = () => api.get("/posts");

export const getPost = (postId) => api.get(`/posts/${postId}`);

export const createPost = ({ content, image }) => {
  const formData = new FormData();
  formData.append("postType", image ? "image" : "text");
  formData.append("content", content);
  if (image) formData.append("image", image);

  return api.post("/posts", formData);
};

export const updatePost = (postId, content) => {
  const formData = new FormData();
  formData.append("content", content);
  return api.patch(`/posts/${postId}`, formData);
};

export const deletePost = (postId) => api.delete(`/posts/${postId}`);

// ⚠️ এই endpoint শুধু { message, likeCount } ফেরত দেয় — সম্পূর্ণ post object না।
// তাই caller-কে নিজে থেকেই optimistically likes array আপডেট করতে হবে।
export const toggleLike = (postId) => api.patch(`/posts/${postId}/like`);

// ⚠️ এই endpoint { message, commentCount, comments } ফেরত দেয় — কমেন্ট অ্যারে,
// পুরো post object না। caller-কে শুধু comments অংশ merge করতে হবে।
export const addComment = (postId, comment) =>
  api.patch(`/posts/${postId}/comment`, { comment });

export const deleteComment = (postId, commentId) =>
  api.delete(`/posts/${postId}/comment/${commentId}`);

// src/hooks/usePosts.js
import { useState, useEffect, useCallback, useRef } from "react";
import { getPosts } from "../services/postService";

export default function usePosts() {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");
  const isMountedRef = useRef(true);

  const fetchPosts = useCallback(async () => {
    setLoading(true);
    setError("");
    try {
      const response = await getPosts();
      if (isMountedRef.current) setPosts(response.data);
    } catch (err) {
      if (isMountedRef.current) {
        setError(err.response?.data?.error || "পোস্ট লোড করা যায়নি।");
      }
    } finally {
      if (isMountedRef.current) setLoading(false);
    }
  }, []);

  useEffect(() => {
    isMountedRef.current = true;
    fetchPosts();
    return () => {
      isMountedRef.current = false;
    };
  }, [fetchPosts]);

  // নতুন পোস্ট তৈরি হলে লিস্টের শুরুতে বসিয়ে দেওয়া — পুরো লিস্ট আবার fetch করার দরকার নেই
  const prependPost = (newPost) => {
    setPosts((prev) => [newPost, ...prev]);
  };

  // Like/Comment/Edit-এর পর একটা নির্দিষ্ট পোস্ট আপডেট করা
  const replacePost = (updatedPost) => {
    setPosts((prev) =>
      prev.map((post) => (post.id === updatedPost.id ? updatedPost : post)),
    );
  };

  const removePost = (postId) => {
    setPosts((prev) => prev.filter((post) => post.id !== postId));
  };

  return {
    posts,
    loading,
    error,
    refetch: fetchPosts,
    prependPost,
    replacePost,
    removePost,
  };
}

// src/components/feed/CreatePostForm.jsx
import { useState } from "react";
import useAuth from "../../hooks/useAuth";
import { createPost } from "../../services/postService";

export default function CreatePostForm({ onCreated }) {
  const { auth } = useAuth();
  const [expanded, setExpanded] = useState(false);
  const [content, setContent] = useState("");
  const [image, setImage] = useState(null);
  const [preview, setPreview] = useState(null);
  const [posting, setPosting] = useState(false);
  const [error, setError] = useState("");

  const avatarUrl = auth?.user?.avatar
    ? `${import.meta.env.VITE_API_BASE_URL}/${auth.user.avatar}`
    : null;

  const handleImageChange = (e) => {
    const file = e.target.files?.[0];
    if (!file) return;
    setImage(file);
    setPreview(URL.createObjectURL(file));
  };

  const resetForm = () => {
    setContent("");
    setImage(null);
    setPreview(null);
    setExpanded(false);
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!content.trim() && !image) return;

    setPosting(true);
    setError("");

    try {
      const response = await createPost({ content, image });
      onCreated?.(response.data);
      resetForm();
    } catch (err) {
      setError(err.response?.data?.error || "পোস্ট করা যায়নি।");
    } finally {
      setPosting(false);
    }
  };

  return (
    <div className="bg-white rounded-lg shadow p-3 mb-4">
      {!expanded ? (
        <button
          onClick={() => setExpanded(true)}
          className="w-full flex items-center gap-2 text-left"
        >
          <div className="w-10 h-10 rounded-full bg-gray-200 overflow-hidden flex items-center justify-center shrink-0">
            {avatarUrl ? (
              <img src={avatarUrl} alt="avatar" className="w-full h-full object-cover" />
            ) : (
              <span className="text-gray-400">👤</span>
            )}
          </div>
          <span className="flex-1 bg-gray-100 hover:bg-gray-200 rounded-full px-4 py-2.5 text-gray-500 text-[15px] transition-colors">
            আপনার মনে কী চলছে, {auth?.user?.firstName}?
          </span>
        </button>
      ) : (
        <form onSubmit={handleSubmit} className="space-y-3">
          <div className="flex items-center gap-2">
            <div className="w-10 h-10 rounded-full bg-gray-200 overflow-hidden flex items-center justify-center shrink-0">
              {avatarUrl ? (
                <img src={avatarUrl} alt="avatar" className="w-full h-full object-cover" />
              ) : (
                <span className="text-gray-400">👤</span>
              )}
            </div>
            <p className="font-semibold text-gray-800 text-sm">
              {auth?.user?.firstName} {auth?.user?.lastName}
            </p>
          </div>

          <textarea
            autoFocus
            value={content}
            onChange={(e) => setContent(e.target.value)}
            placeholder={`আপনার মনে কী চলছে, ${auth?.user?.firstName}?`}
            rows={3}
            className="w-full resize-none outline-none text-lg placeholder:text-gray-400"
          />

          {preview && (
            <img src={preview} alt="preview" className="max-h-64 w-full object-cover rounded-md" />
          )}

          <div className="flex items-center justify-between border-t pt-3">
            <label className="flex items-center gap-2 text-sm text-gray-600 cursor-pointer hover:bg-gray-100 rounded-md px-2 py-1.5">
              🖼️ ছবি/ভিডিও
              <input type="file" accept="image/*" onChange={handleImageChange} className="hidden" />
            </label>

            <div className="flex gap-2">
              <button
                type="button"
                onClick={resetForm}
                className="text-gray-600 text-sm px-3 py-1.5 rounded-md hover:bg-gray-100"
              >
                বাতিল
              </button>
              <button
                type="submit"
                disabled={posting || (!content.trim() && !image)}
                className="bg-[#1877F2] hover:bg-[#166fe5] text-white text-sm font-semibold px-5 py-1.5 rounded-md disabled:opacity-50"
              >
                {posting ? "পোস্ট হচ্ছে..." : "পোস্ট করুন"}
              </button>
            </div>
          </div>

          {error && <p className="text-red-600 text-sm">{error}</p>}
        </form>
      )}
    </div>
  );
}

// src/components/feed/PostCard.jsx
import { useState } from "react";
import useAuth from "../../hooks/useAuth";
import {
  updatePost,
  deletePost,
  toggleLike,
  addComment,
  deleteComment,
} from "../../services/postService";

function timeAgo(dateString) {
  if (!dateString) return "";
  const diffMs = Date.now() - new Date(dateString).getTime();
  const mins = Math.floor(diffMs / 60000);
  if (mins < 1) return "এইমাত্র";
  if (mins < 60) return `${mins} মিনিট আগে`;
  const hours = Math.floor(mins / 60);
  if (hours < 24) return `${hours} ঘণ্টা আগে`;
  const days = Math.floor(hours / 24);
  return `${days} দিন আগে`;
}

export default function PostCard({ post, onReplace, onRemove }) {
  const { auth } = useAuth();

  const [isEditing, setIsEditing] = useState(false);
  const [editContent, setEditContent] = useState(post.content ?? "");
  const [commentText, setCommentText] = useState("");
  const [busy, setBusy] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);

  // ⚠️ Server আসলে post.author-এ { id, name, avatar } পাঠায় — firstname/lastname না।
  // (Postman ডকসের উদাহরণ response আসলে ভুল ছিল — controller-এর আসল কোড পড়ে আর
  // সরাসরি সার্ভারে টেস্ট করে এটা যাচাই করা হয়েছে, দেখুন সেকশন ৪.১)
  const authorName = post.author?.name || "Deshi Book User";
  const authorAvatar = post.author?.avatar
    ? `${import.meta.env.VITE_API_BASE_URL}/${post.author.avatar}`
    : null;

  const likedByMe = post.likes?.some(
    (like) => (like?.id ?? like) === auth?.user?.id,
  );

  const imageUrl = post.image
    ? `${import.meta.env.VITE_API_BASE_URL}/${post.image}`
    : null;

  const handleLike = async () => {
    try {
      await toggleLike(post.id);
      // ⚠️ /posts/:id/like endpoint শুধু { message, likeCount } ফেরত দেয়,
      // পুরো post object না — তাই এখানে optimistically likes array
      // নিজে থেকে আপডেট করছি, response.data দিয়ে পুরো post replace করছি না।
      const updatedLikes = likedByMe
        ? (post.likes ?? []).filter(
            (like) => (like?.id ?? like) !== auth?.user?.id,
          )
        : [...(post.likes ?? []), auth?.user?.id];

      onReplace({ ...post, likes: updatedLikes });
    } catch (err) {
      console.error("লাইক করা যায়নি:", err);
    }
  };

  const handleAddComment = async (e) => {
    e.preventDefault();
    if (!commentText.trim()) return;

    setBusy(true);
    try {
      const response = await addComment(post.id, commentText);
      // ⚠️ এই endpoint { message, commentCount, comments } ফেরত দেয় —
      // শুধু comments অংশটুকু merge করছি, বাকি post অপরিবর্তিত রাখছি।
      onReplace({ ...post, comments: response.data.comments });
      setCommentText("");
    } catch (err) {
      console.error("কমেন্ট করা যায়নি:", err);
    } finally {
      setBusy(false);
    }
  };

  const handleDeleteComment = async (commentId) => {
    try {
      const response = await deleteComment(post.id, commentId);
      onReplace({ ...post, comments: response.data.comments });
    } catch (err) {
      console.error("কমেন্ট মুছা যায়নি:", err);
    }
  };

  const handleSaveEdit = async () => {
    setBusy(true);
    try {
      const response = await updatePost(post.id, editContent);
      // ⚠️ এই endpoint আসলে পুরো updated post object-ই ফেরত দেয় (verified),
      // তাই এখানে সরাসরি response.data দিয়ে replace করা নিরাপদ।
      onReplace(response.data);
      setIsEditing(false);
    } catch (err) {
      console.error("পোস্ট আপডেট করা যায়নি:", err);
    } finally {
      setBusy(false);
    }
  };

  const handleDelete = async () => {
    setMenuOpen(false);
    if (!window.confirm("পোস্টটি মুছে ফেলতে চান?")) return;
    try {
      await deletePost(post.id);
      onRemove(post.id);
    } catch (err) {
      console.error("পোস্ট মুছা যায়নি:", err);
    }
  };

  const isOwner = post.author?.id === auth?.user?.id;

  return (
    <div className="bg-white rounded-lg shadow mb-4">
      <div className="flex items-center justify-between px-4 pt-3 pb-1">
        <div className="flex items-center gap-2">
          <div className="w-10 h-10 rounded-full bg-gray-200 overflow-hidden flex items-center justify-center shrink-0">
            {authorAvatar ? (
              <img src={authorAvatar} alt="avatar" className="w-full h-full object-cover" />
            ) : (
              <span className="text-gray-400">👤</span>
            )}
          </div>
          <div>
            <p className="font-semibold text-gray-900 text-[15px] leading-tight">
              {authorName}
            </p>
            <p className="text-xs text-gray-500">{timeAgo(post.createAt)}</p>
          </div>
        </div>

        {isOwner && (
          <div className="relative">
            <button
              onClick={() => setMenuOpen((prev) => !prev)}
              className="text-gray-500 hover:bg-gray-100 rounded-full w-8 h-8 flex items-center justify-center"
            >
              ⋯
            </button>
            {menuOpen && (
              <div className="absolute right-0 top-9 bg-white shadow-lg rounded-md py-1 w-32 z-10">
                <button
                  onClick={() => {
                    setIsEditing(true);
                    setMenuOpen(false);
                  }}
                  className="w-full text-left px-3 py-2 text-sm hover:bg-gray-100"
                >
                  এডিট করুন
                </button>
                <button
                  onClick={handleDelete}
                  className="w-full text-left px-3 py-2 text-sm text-red-600 hover:bg-gray-100"
                >
                  মুছে ফেলুন
                </button>
              </div>
            )}
          </div>
        )}
      </div>

      <div className="px-4 pb-2">
        {isEditing ? (
          <div className="space-y-2">
            <textarea
              value={editContent}
              onChange={(e) => setEditContent(e.target.value)}
              rows={3}
              className="w-full border border-gray-300 rounded-md p-2 resize-none text-[15px] outline-none focus:border-[#1877F2]"
            />
            <div className="flex gap-2">
              <button
                onClick={handleSaveEdit}
                disabled={busy}
                className="bg-[#1877F2] text-white px-4 py-1.5 rounded-md text-sm font-medium disabled:opacity-60"
              >
                সেভ করুন
              </button>
              <button
                onClick={() => setIsEditing(false)}
                className="text-gray-600 px-4 py-1.5 rounded-md text-sm hover:bg-gray-100"
              >
                বাতিল
              </button>
            </div>
          </div>
        ) : (
          <p className="text-gray-900 text-[15px] whitespace-pre-wrap">
            {post.content}
          </p>
        )}
      </div>

      {imageUrl && !isEditing && (
        <img src={imageUrl} alt="post" className="w-full max-h-[520px] object-cover" />
      )}

      {((post.likes?.length ?? 0) > 0 || (post.comments?.length ?? 0) > 0) && (
        <div className="flex items-center justify-between px-4 py-2 text-sm text-gray-500">
          <span>
            {(post.likes?.length ?? 0) > 0 && `👍 ${post.likes.length}`}
          </span>
          <span>
            {(post.comments?.length ?? 0) > 0 &&
              `${post.comments.length} মন্তব্য`}
          </span>
        </div>
      )}

      <div className="border-t border-gray-200 mx-4" />

      <div className="flex px-2 py-1">
        <button
          onClick={handleLike}
          className={`flex-1 flex items-center justify-center gap-2 py-2 rounded-md text-sm font-semibold hover:bg-gray-100 ${
            likedByMe ? "text-[#1877F2]" : "text-gray-600"
          }`}
        >
          👍 লাইক
        </button>
        <button
          className="flex-1 flex items-center justify-center gap-2 py-2 rounded-md text-sm font-semibold text-gray-600 hover:bg-gray-100"
          onClick={() =>
            document.getElementById(`comment-input-${post.id}`)?.focus()
          }
        >
          💬 মন্তব্য
        </button>
      </div>

      <div className="border-t border-gray-200 mx-4" />

      <div className="px-4 py-3 space-y-2">
        {post.comments?.map((c) => {
          // ⚠️ Comment-এর author-ও { id, name, avatar } শেপ — firstname না।
          const commentAuthorName = c.author?.name || "User";
          const commentAvatar = c.author?.avatar
            ? `${import.meta.env.VITE_API_BASE_URL}/${c.author.avatar}`
            : null;
          const canDeleteComment =
            c.author?.id === auth?.user?.id || isOwner;

          return (
            <div key={c.id} className="flex items-start gap-2">
              <div className="w-7 h-7 rounded-full bg-gray-200 overflow-hidden flex items-center justify-center shrink-0">
                {commentAvatar ? (
                  <img src={commentAvatar} alt="avatar" className="w-full h-full object-cover" />
                ) : (
                  <span className="text-xs text-gray-400">👤</span>
                )}
              </div>
              <div className="flex-1 flex items-start justify-between">
                <div className="bg-gray-100 rounded-2xl px-3 py-2">
                  <p className="font-semibold text-xs text-gray-900">
                    {commentAuthorName}
                  </p>
                  <p className="text-sm text-gray-800">{c.comment}</p>
                </div>
                {canDeleteComment && (
                  <button
                    onClick={() => handleDeleteComment(c.id)}
                    className="text-gray-400 hover:text-red-500 text-xs ml-2 mt-2 shrink-0"
                  >
                    মুছুন
                  </button>
                )}
              </div>
            </div>
          );
        })}

        <form onSubmit={handleAddComment} className="flex items-center gap-2 pt-1">
          <div className="w-7 h-7 rounded-full bg-gray-200 overflow-hidden flex items-center justify-center shrink-0">
            {auth?.user?.avatar ? (
              <img
                src={`${import.meta.env.VITE_API_BASE_URL}/${auth.user.avatar}`}
                alt="avatar"
                className="w-full h-full object-cover"
              />
            ) : (
              <span className="text-xs text-gray-400">👤</span>
            )}
          </div>
          <input
            id={`comment-input-${post.id}`}
            value={commentText}
            onChange={(e) => setCommentText(e.target.value)}
            placeholder="একটা মন্তব্য লিখুন..."
            className="flex-1 bg-gray-100 rounded-full px-4 py-1.5 text-sm outline-none focus:ring-1 focus:ring-[#1877F2]"
          />
        </form>
      </div>
    </div>
  );
}

// src/components/feed/PostFeed.jsx
import PostCard from "./PostCard";

export default function PostFeed({ posts, loading, error, onReplace, onRemove }) {
  if (loading) {
    return (
      <p className="text-center text-gray-500 mt-6 bg-white rounded-lg shadow py-6">
        লোড হচ্ছে...
      </p>
    );
  }

  if (error) {
    return (
      <p className="text-center text-red-600 mt-6 bg-white rounded-lg shadow py-6">
        {error}
      </p>
    );
  }

  if (posts.length === 0) {
    return (
      <p className="text-center text-gray-500 mt-6 bg-white rounded-lg shadow py-6">
        এখনো কোনো পোস্ট নেই। প্রথম পোস্টটা আপনিই করুন!
      </p>
    );
  }

  return (
    <div>
      {posts.map((post) => (
        <PostCard
          key={post.id}
          post={post}
          onReplace={onReplace}
          onRemove={onRemove}
        />
      ))}
    </div>
  );
}

// src/components/Navbar.jsx
import { Link, useNavigate } from "react-router";
import useAuth from "../hooks/useAuth";

export default function Navbar() {
  const { auth, setAuth } = useAuth();
  const navigate = useNavigate();

  const avatarUrl = auth?.user?.avatar
    ? `${import.meta.env.VITE_API_BASE_URL}/${auth.user.avatar}`
    : null;

  const handleLogout = () => {
    setAuth(null);
    navigate("/login");
  };

  return (
    <header className="bg-white shadow sticky top-0 z-10">
      <div className="max-w-6xl mx-auto px-4 h-14 flex items-center justify-between">
        <Link to="/" className="text-[#1877F2] text-2xl font-bold tracking-tight">
          দেশি বুক
        </Link>

        {auth && (
          <nav className="flex items-center gap-3">
            <Link
              to={`/profile/${auth.user.id}`}
              className="flex items-center gap-2 hover:bg-gray-100 rounded-full pl-1 pr-3 py-1 transition-colors"
            >
              <div className="w-8 h-8 rounded-full bg-gray-200 overflow-hidden flex items-center justify-center">
                {avatarUrl ? (
                  <img src={avatarUrl} alt="avatar" className="w-full h-full object-cover" />
                ) : (
                  <span className="text-sm text-gray-400">👤</span>
                )}
              </div>
              <span className="text-sm font-medium text-gray-700">
                {auth.user.firstName}
              </span>
            </Link>
            <button
              onClick={handleLogout}
              className="text-sm font-medium text-gray-600 hover:bg-gray-100 rounded-full px-3 py-2 transition-colors"
            >
              লগআউট
            </button>
          </nav>
        )}
      </div>
    </header>
  );
}

// src/pages/FeedPage.jsx
import usePosts from "../hooks/usePosts";
import CreatePostForm from "../components/feed/CreatePostForm";
import PostFeed from "../components/feed/PostFeed";

export default function FeedPage() {
  const { posts, loading, error, prependPost, replacePost, removePost } =
    usePosts();

  return (
    <div className="max-w-[600px] mx-auto px-3 py-5">
      <CreatePostForm onCreated={prependPost} />
      <PostFeed
        posts={posts}
        loading={loading}
        error={error}
        onReplace={replacePost}
        onRemove={removePost}
      />
    </div>
  );
}

// src/App.jsx
import { Routes, Route } from "react-router";
import Navbar from "./components/Navbar";
import ProtectedRoute from "./components/ProtectedRoute";
import LoginForm from "./components/LoginForm";
import RegisterForm from "./components/RegisterForm";
import FeedPage from "./pages/FeedPage";
import useAxios from "./hooks/useAxios";

function App() {
  useAxios();

  return (
    <div className="min-h-screen bg-[#F0F2F5]">
      <Navbar />
      <Routes>
        <Route path="/login" element={<LoginForm />} />
        <Route path="/register" element={<RegisterForm />} />
        <Route
          path="/"
          element={
            <ProtectedRoute>
              <FeedPage />
            </ProtectedRoute>
          }
        />
      </Routes>
    </div>
  );
}

export default App;

// src/reducers/profileReducer.js
import { actions } from "../actions";

export const initialProfileState = {
  loading: true,
  error: "",
  user: null,
  posts: [],
};

export default function profileReducer(state, action) {
  switch (action.type) {
    case actions.profile.PROFILE_FETCHING:
      return { ...state, loading: true, error: "" };

    case actions.profile.PROFILE_FETCHED:
      return {
        ...state,
        loading: false,
        user: action.data.user,
        posts: action.data.posts,
      };

    case actions.profile.PROFILE_FETCH_ERROR:
      return { ...state, loading: false, error: action.error };

    case actions.profile.PROFILE_UPDATED:
      // ⚠️ Server-এর PATCH /profile/:id বাগ: এটা req.body-কে সরাসরি user
      // রেকর্ডে merge করে, বানান/কেসিং না মিলিয়েই। ফলে "firstname" (ছোট হাতের)
      // পাঠালে আসল "firstName" ফিল্ড অপরিবর্তিত থেকে যায়, শুধু নতুন একটা
      // "firstname" ফিল্ড যোগ হয়। এখানে ...state.user, ...action.data দিয়ে
      // পুরনো আর নতুন দুটোই state-এ থাকে — component-এ পড়ার সময় সঠিক মান
      // বেছে নেওয়ার দায়িত্ব থাকবে (দেখুন ProfileNameEditor)।
      return {
        ...state,
        user: { ...state.user, ...action.data },
      };

    case actions.profile.IMAGE_UPDATED:
      return {
        ...state,
        user: { ...state.user, avatar: action.data.avatar },
      };

    default:
      return state;
  }
}

// src/services/profileService.js
import api from "../api/api";

export const getProfile = (userId) => api.get(`/profile/${userId}`);

export const updateProfile = (userId, { firstname, lastName }) =>
  api.patch(`/profile/${userId}`, { firstname, lastName });

export const uploadAvatar = (userId, file) => {
  const formData = new FormData();
  formData.append("avatar", file);
  return api.post(`/profile/${userId}/avatar`, formData);
};

// src/hooks/useProfile.js
import { useReducer, useEffect, useCallback } from "react";
import profileReducer, { initialProfileState } from "../reducers/profileReducer";
import { actions } from "../actions";
import { getProfile } from "../services/profileService";

export default function useProfile(userId) {
  const [state, dispatch] = useReducer(profileReducer, initialProfileState);

  const fetchProfile = useCallback(async () => {
    dispatch({ type: actions.profile.PROFILE_FETCHING });
    try {
      const response = await getProfile(userId);
      dispatch({ type: actions.profile.PROFILE_FETCHED, data: response.data });
    } catch (err) {
      dispatch({
        type: actions.profile.PROFILE_FETCH_ERROR,
        error: err.response?.data?.error || "প্রোফাইল লোড করা যায়নি।",
      });
    }
  }, [userId]);

  useEffect(() => {
    fetchProfile();
  }, [fetchProfile]);

  return { state, dispatch };
}

// src/components/profile/ProfileImage.jsx
import { useRef, useState } from "react";
import { actions } from "../../actions";
import { uploadAvatar } from "../../services/profileService";

export default function ProfileImage({ user, isOwner, dispatch }) {
  const fileInputRef = useRef(null);
  const [uploading, setUploading] = useState(false);

  const avatarUrl = user.avatar
    ? `${import.meta.env.VITE_API_BASE_URL}/${user.avatar}`
    : null;

  const handleFileChange = async (e) => {
    const file = e.target.files?.[0];
    if (!file) return;

    setUploading(true);
    try {
      const response = await uploadAvatar(user.id, file);
      dispatch({ type: actions.profile.IMAGE_UPDATED, data: response.data });
    } catch (err) {
      console.error("ছবি আপলোড করা যায়নি:", err);
    } finally {
      setUploading(false);
    }
  };

  return (
    <div className="relative">
      <div
        className="w-36 h-36 rounded-full bg-gray-200 border-4 border-white shadow overflow-hidden flex items-center justify-center cursor-pointer"
        onClick={() => isOwner && fileInputRef.current?.click()}
      >
        {avatarUrl ? (
          <img src={avatarUrl} alt="avatar" className="w-full h-full object-cover" />
        ) : (
          <span className="text-5xl text-gray-400">👤</span>
        )}
      </div>

      {isOwner && (
        <>
          <button
            onClick={() => fileInputRef.current?.click()}
            disabled={uploading}
            className="absolute bottom-1 right-1 w-9 h-9 rounded-full bg-gray-200 hover:bg-gray-300 border-2 border-white shadow flex items-center justify-center text-sm"
          >
            {uploading ? "…" : "📷"}
          </button>
          <input
            ref={fileInputRef}
            type="file"
            accept="image/*"
            className="hidden"
            onChange={handleFileChange}
          />
        </>
      )}
    </div>
  );
}

// src/components/profile/ProfileNameEditor.jsx
import { useState } from "react";
import { actions } from "../../actions";
import { updateProfile } from "../../services/profileService";

export default function ProfileNameEditor({ user, isOwner, dispatch }) {
  const [isEditing, setIsEditing] = useState(false);
  const [saving, setSaving] = useState(false);

  // ⚠️ Server-এর quirk: update-এর পর "firstname" (lowercase, নতুন) আর
  // "firstName" (আসল, পুরনো) — দুটো ফিল্ডই state.user-এ থেকে যেতে পারে।
  // তাই lowercase-টা আগে চেক করছি — সেটাই সর্বশেষ আপডেট করা মান।
  const displayFirstName = user?.firstname ?? user?.firstName ?? "";
  const displayLastName = user?.lastName ?? "";

  const [form, setForm] = useState({
    firstname: displayFirstName,
    lastName: displayLastName,
  });

  const handleSave = async () => {
    setSaving(true);
    try {
      const response = await updateProfile(user.id, form);
      dispatch({ type: actions.profile.PROFILE_UPDATED, data: response.data });
      setIsEditing(false);
    } catch (err) {
      console.error("প্রোফাইল আপডেট করা যায়নি:", err);
    } finally {
      setSaving(false);
    }
  };

  if (isEditing) {
    return (
      <div className="flex flex-col items-center gap-2 mt-3">
        <div className="flex gap-2">
          <input
            value={form.firstname}
            onChange={(e) => setForm({ ...form, firstname: e.target.value })}
            className="border border-gray-300 rounded-md p-1.5 text-center text-sm outline-none focus:border-[#1877F2]"
            placeholder="প্রথম নাম"
          />
          <input
            value={form.lastName}
            onChange={(e) => setForm({ ...form, lastName: e.target.value })}
            className="border border-gray-300 rounded-md p-1.5 text-center text-sm outline-none focus:border-[#1877F2]"
            placeholder="শেষ নাম"
          />
        </div>
        <div className="flex gap-2">
          <button
            onClick={handleSave}
            disabled={saving}
            className="bg-[#1877F2] text-white px-4 py-1.5 rounded-md text-sm font-medium disabled:opacity-60"
          >
            {saving ? "সেভ হচ্ছে..." : "সেভ করুন"}
          </button>
          <button
            onClick={() => setIsEditing(false)}
            className="text-gray-600 px-4 py-1.5 rounded-md text-sm hover:bg-gray-100"
          >
            বাতিল
          </button>
        </div>
      </div>
    );
  }

  return (
    <div className="flex items-center gap-2 mt-3">
      <h1 className="text-2xl font-bold text-gray-900">
        {displayFirstName} {displayLastName}
      </h1>
      {isOwner && (
        <button
          onClick={() => setIsEditing(true)}
          className="text-gray-600 hover:bg-gray-100 rounded-full w-8 h-8 flex items-center justify-center text-sm"
          title="নাম এডিট করুন"
        >
          ✏️
        </button>
      )}
    </div>
  );
}

// src/pages/ProfilePage.jsx
import { useParams } from "react-router";
import useAuth from "../hooks/useAuth";
import useProfile from "../hooks/useProfile";
import ProfileImage from "../components/profile/ProfileImage";
import ProfileNameEditor from "../components/profile/ProfileNameEditor";

export default function ProfilePage() {
  const { id } = useParams();
  const { auth } = useAuth();
  const { state, dispatch } = useProfile(id);

  if (state.loading) {
    return <p className="text-center text-gray-500 mt-10">লোড হচ্ছে...</p>;
  }

  if (state.error) {
    return <p className="text-center text-red-600 mt-10">{state.error}</p>;
  }

  const isOwner = auth?.user?.id === id;

  return (
    <div className="max-w-[900px] mx-auto pb-6">
      {/* Cover Photo */}
      <div className="h-48 sm:h-64 bg-gradient-to-r from-[#1877F2] to-[#42a5f5] rounded-b-lg" />

      {/* Avatar overlapping cover photo + name */}
      <div className="flex flex-col items-center -mt-16 px-4">
        <ProfileImage user={state.user} isOwner={isOwner} dispatch={dispatch} />
        <ProfileNameEditor user={state.user} isOwner={isOwner} dispatch={dispatch} />
        <p className="text-gray-500 text-sm mt-1">{state.user?.email}</p>
      </div>

      <div className="border-t border-gray-200 mt-4 mx-4" />

      <div className="max-w-[600px] mx-auto px-3 pt-4">
        <h2 className="font-semibold text-gray-700 mb-3 px-1">পোস্টসমূহ</h2>

        {state.posts.length === 0 && (
          <p className="text-gray-500 text-sm bg-white rounded-lg shadow px-4 py-6 text-center">
            এখনো কোনো পোস্ট নেই।
          </p>
        )}

        {/* এই লিস্টটা এখনো read-only — লাইক/কমেন্ট বাটন নেই।
            সেকশন "আপনার জন্য একটা কাজ"-এ এটাকে ফিচার ১-এর PostCard-এর মতোই
            interactive করে তোলার অনুশীলন থাকবে। */}
        {state.posts.map((post) => {
          const imageUrl = post.image
            ? `${import.meta.env.VITE_API_BASE_URL}/${post.image}`
            : null;

          return (
            <div key={post.id} className="bg-white rounded-lg shadow mb-3 p-4">
              <p className="text-gray-900 text-[15px] whitespace-pre-wrap">
                {post.content}
              </p>
              {imageUrl && (
                <img
                  src={imageUrl}
                  alt="post"
                  className="mt-2 rounded-md max-h-72 w-full object-cover"
                />
              )}
              <div className="flex gap-4 mt-2 pt-2 border-t border-gray-100 text-xs text-gray-500">
                <span>👍 {post.likes?.length ?? 0}</span>
                <span>💬 {post.comments?.length ?? 0}</span>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}