git clone https://github.com/Learn-with-Sumit/rnext.git

cd rnext

git switch 5.15

cd backend-server

npm i

npm run dev

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

npm install tailwindcss @tailwindcss/vite

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

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

@import "tailwindcss";

npm install axios react-router

src/
├── actions/
│   └── index.js               ← সব action type এক জায়গায়
├── api/
│   └── api.js                 ← মূল Axios instance
├── context/
│   ├── AuthContext.jsx        ← Login state সবখানে শেয়ার
│   └── ProfileContext.jsx     ← Profile state সবখানে শেয়ার
├── hooks/
│   ├── useAuth.js             ← AuthContext-এর সহজ hook
│   ├── useAxios.js            ← Auth-aware API hook (interceptors সহ)
│   └── useProfile.js          ← ProfileContext-এর সহজ hook
├── reducers/
│   └── profileReducer.js      ← Profile state management
├── services/
│   ├── authService.js         ← register, login, refresh
│   ├── postService.js         ← News Feed-এর সব CRUD
│   └── profileService.js      ← Profile Feed-এর profile ও avatar
├── components/
│   ├── LoginForm.jsx
│   ├── RegisterForm.jsx
│   ├── ProtectedRoute.jsx
│   ├── Navbar.jsx
│   ├── feed/
│   │   ├── PostFeed.jsx
│   │   ├── CreatePostForm.jsx
│   │   └── PostCard.jsx
│   └── profile/
│       ├── ProfileImage.jsx
│       └── ProfileNameEditor.jsx
├── pages/
│   ├── LoginPage.jsx
│   ├── RegisterPage.jsx
│   ├── FeedPage.jsx           ← News Feed
│   └── ProfilePage.jsx        ← Profile Feed
└── App.jsx

VITE_API_BASE_URL=http://localhost:3000

// 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;

// 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;

Component → useAxios() → Service Layer (postService/profileService) → API

// 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 } from "react-router";
import useAuth from "../hooks/useAuth";
import { loginUser } from "../services/authService";

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

  const [form, setForm] = useState({ 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 (
    <form
      onSubmit={handleSubmit}
      className="max-w-sm mx-auto mt-10 space-y-3 bg-white p-6 rounded-lg shadow border"
    >
      <h2 className="text-xl font-bold mb-2">লগইন করুন</h2>
      <input
        name="email"
        type="email"
        placeholder="ইমেইল"
        value={form.email}
        onChange={handleChange}
        className="w-full border rounded p-2"
        required
      />
      <input
        name="password"
        type="password"
        placeholder="পাসওয়ার্ড"
        value={form.password}
        onChange={handleChange}
        className="w-full border rounded p-2"
        required
      />
      {error && <p className="text-red-600 text-sm">{error}</p>}
      <button
        type="submit"
        disabled={loading}
        className="w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700 disabled:opacity-60"
      >
        {loading ? "লগইন হচ্ছে..." : "লগইন করুন"}
      </button>
    </form>
  );
}

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

export default function RegisterForm() {
  const { setAuth } = useAuth();
  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 {
      // প্রথমে register — এই route auto-login response দেয় কিনা কনফার্ম নেই,
      // তাই safe approach: register-এর পর আলাদা করে login call করা
      await registerUser(form);

      const loginRes = await loginUser(form.email, form.password);
      const { user, token } = loginRes.data;
      const { token: authToken, refreshToken } = token;

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

  return (
    <form
      onSubmit={handleSubmit}
      className="max-w-sm mx-auto mt-10 space-y-3 bg-white p-6 rounded-lg shadow border"
    >
      <h2 className="text-xl font-bold mb-2">নতুন একাউন্ট খুলুন</h2>
      <input
        name="firstName"
        placeholder="প্রথম নাম"
        value={form.firstName}
        onChange={handleChange}
        className="w-full border rounded p-2"
        required
      />
      <input
        name="lastName"
        placeholder="শেষ নাম"
        value={form.lastName}
        onChange={handleChange}
        className="w-full border rounded p-2"
        required
      />
      <input
        name="email"
        type="email"
        placeholder="ইমেইল"
        value={form.email}
        onChange={handleChange}
        className="w-full border rounded p-2"
        required
      />
      <input
        name="password"
        type="password"
        placeholder="পাসওয়ার্ড"
        value={form.password}
        onChange={handleChange}
        className="w-full border rounded p-2"
        required
      />
      {error && <p className="text-red-600 text-sm">{error}</p>}
      <button
        type="submit"
        disabled={loading}
        className="w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700 disabled:opacity-60"
      >
        {loading ? "একাউন্ট তৈরি হচ্ছে..." : "রেজিস্ট্রেশন করুন"}
      </button>
    </form>
  );
}

// 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/services/postService.js
import api from "../api/api";

// সব পোস্ট আনা (News Feed)
export const getPosts = () => api.get("/posts");

// একটা পোস্ট আনা
export const getPost = (id) => api.get(`/posts/${id}`);

// নতুন পোস্ট তৈরি (টেক্সট, ছবি, অথবা দুইটাই)
export const createPost = ({ content, image }, onUploadProgress) => {
  const formData = new FormData();

  // postType তিন রকম হতে পারে: 'text' | 'image' | 'both'
  const postType = image && content ? "both" : image ? "image" : "text";
  formData.append("postType", postType);
  formData.append("content", content);
  if (image) {
    formData.append("image", image);
  }

  return api.post("/posts", formData, {
    onUploadProgress: (progressEvent) => {
      if (!onUploadProgress) return;
      const percent = Math.round(
        (progressEvent.loaded * 100) / (progressEvent.total || 1),
      );
      onUploadProgress(percent);
    },
  });
};

// পোস্ট আপডেট (শুধু টেক্সট — ছবি বদলানো এই endpoint সাপোর্ট করে না)
export const updatePost = (id, { content }) => {
  const formData = new FormData();
  formData.append("content", content);
  return api.patch(`/posts/${id}`, formData);
};

// পোস্ট ডিলিট
export const deletePost = (id) => api.delete(`/posts/${id}`);

// লাইক / আনলাইক — toggle, body লাগে না
export const toggleLike = (id) => api.patch(`/posts/${id}/like`);

// কমেন্ট করা
export const addComment = (postId, comment) =>
  api.patch(`/posts/${postId}/comment`, { comment });

// কমেন্ট ডিলিট
export const deleteComment = (postId, commentId) =>
  api.delete(`/posts/${postId}/comment/${commentId}`);

// src/components/feed/PostFeed.jsx
import { useEffect, useState } from "react";
import useAxios from "../../hooks/useAxios";
import { getPosts } from "../../services/postService";
import PostCard from "./PostCard";

export default function PostFeed() {
  useAxios(); // interceptor activate করতে হবে — return value এখানে দরকার নেই
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");

  useEffect(() => {
    let isMounted = true;

    const fetchPosts = async () => {
      try {
        const res = await getPosts();
        if (isMounted) setPosts(res.data);
      } catch {
        if (isMounted) setError("পোস্ট লোড করা যায়নি। পরে আবার চেষ্টা করুন।");
      } finally {
        if (isMounted) setLoading(false);
      }
    };

    fetchPosts();
    return () => {
      isMounted = false;
    };
  }, []);

  if (loading) return <p className="text-center mt-10">পোস্ট লোড হচ্ছে...</p>;
  if (error) return <p className="text-red-600 text-center mt-10">{error}</p>;
  if (posts.length === 0)
    return <p className="text-center mt-10">এখনো কোনো পোস্ট নেই।</p>;

  return (
    <div className="space-y-4">
      {posts.map((post) => (
        <PostCard key={post.id} post={post} onListChange={setPosts} />
      ))}
    </div>
  );
}

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

export default function CreatePostForm({ onCreated }) {
  useAxios();
  const [content, setContent] = useState("");
  const [image, setImage] = useState(null);
  const [progress, setProgress] = useState(0);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");

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

    setLoading(true);
    setProgress(0);
    setError("");

    try {
      const res = await createPost({ content, image }, setProgress);
      onCreated?.(res.data);
      setContent("");
      setImage(null);
    } catch (err) {
      setError(
        err.response?.data?.error || "পোস্ট তৈরি হয়নি। আবার চেষ্টা করুন।",
      );
    } finally {
      setLoading(false);
    }
  };

  return (
    <form
      onSubmit={handleSubmit}
      className="bg-white border rounded-lg p-4 shadow-sm space-y-3"
    >
      <textarea
        rows={3}
        value={content}
        onChange={(e) => setContent(e.target.value)}
        placeholder="আপনি কী ভাবছেন?"
        className="w-full border rounded p-2 resize-none"
      />
      <input
        type="file"
        accept="image/*"
        onChange={(e) => setImage(e.target.files?.[0] ?? null)}
      />
      {loading && (
        <div className="flex items-center gap-2">
          <progress value={progress} max="100" className="w-full" />
          <span className="text-sm text-gray-500">{progress}%</span>
        </div>
      )}
      {error && <p className="text-red-600 text-sm">{error}</p>}
      <div className="text-right">
        <button
          type="submit"
          disabled={loading}
          className="bg-blue-600 text-white px-5 py-2 rounded hover:bg-blue-700 disabled:opacity-60"
        >
          {loading ? "পোস্ট হচ্ছে..." : "পোস্ট করুন"}
        </button>
      </div>
    </form>
  );
}

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

export default function PostCard({ post, onListChange }) {
  useAxios();
  const { auth } = useAuth();

  const [editing, setEditing] = useState(false);
  // ⚠️ কোন field নাম response-এ আসবে (content নাকি body) নিশ্চিত না —
  // তাই দুটোই fallback হিসেবে চেক করা হচ্ছে
  const [content, setContent] = useState(post.content ?? post.body ?? "");
  const [commentText, setCommentText] = useState("");

  const removeFromList = (id) =>
    onListChange((prev) => prev.filter((p) => p.id !== id));

  // পুরো list re-fetch না করে শুধু একটা পোস্ট update করা
  const replaceInList = (updated) =>
    onListChange((prev) =>
      prev.map((p) => (p.id === updated.id ? updated : p)),
    );

  const handleUpdate = async () => {
    try {
      const res = await updatePost(post.id, { content });
      replaceInList(res.data);
      setEditing(false);
    } catch (err) {
      console.error("আপডেট ব্যর্থ:", err.message);
    }
  };

  const handleDelete = async () => {
    if (!window.confirm("পোস্টটা কি সত্যিই মুছবে?")) return;
    try {
      await deletePost(post.id);
      removeFromList(post.id);
    } catch (err) {
      console.error("ডিলিট ব্যর্থ:", err.message);
    }
  };

  const handleLike = async () => {
    try {
      const res = await toggleLike(post.id);
      replaceInList(res.data);
    } catch (err) {
      console.error("লাইক ব্যর্থ:", err.message);
    }
  };

  const handleComment = async (e) => {
    e.preventDefault();
    if (!commentText.trim()) return;
    try {
      const res = await addComment(post.id, commentText);
      replaceInList(res.data);
      setCommentText("");
    } catch (err) {
      console.error("কমেন্ট ব্যর্থ:", err.message);
    }
  };

  const handleDeleteComment = async (commentId) => {
    try {
      const res = await deleteComment(post.id, commentId);
      replaceInList(res.data);
    } catch (err) {
      console.error("কমেন্ট ডিলিট ব্যর্থ:", err.message);
    }
  };

  // post.author-এ firstname/lastname (ছোট হাতের অক্ষর) — Postman
  // collection-এর Create Post example response থেকে confirmed
  const authorName =
    `${post.author?.firstname ?? ""} ${post.author?.lastname ?? ""}`.trim() ||
    "Deshi Book User";

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

  // likes array-এ id বা object — কোন shape আসবে নিশ্চিত না, দুটোই handle করা হচ্ছে
  const likedByMe = post.likes?.some((l) => (l?.id ?? l) === auth?.user?.id);

  return (
    <div className="bg-white p-4 rounded-lg shadow border space-y-3">
      <div className="flex items-center gap-3">
        <div className="w-10 h-10 rounded-full bg-gray-300" />
        <div>
          <h3 className="font-semibold">{authorName}</h3>
          <p className="text-xs text-gray-500">
            {post.createAt
              ? new Date(post.createAt).toLocaleString()
              : "Just now"}
          </p>
        </div>
      </div>

      {editing ? (
        <div className="space-y-2">
          <textarea
            value={content}
            onChange={(e) => setContent(e.target.value)}
            className="w-full border rounded p-2"
            rows={3}
          />
          <div className="flex gap-2">
            <button
              onClick={handleUpdate}
              className="bg-blue-600 text-white px-3 py-1 rounded"
            >
              সেভ করুন
            </button>
            <button
              onClick={() => setEditing(false)}
              className="px-3 py-1 rounded border"
            >
              বাতিল
            </button>
          </div>
        </div>
      ) : (
        <div className="space-y-2">
          <p className="whitespace-pre-wrap">{post.content ?? post.body}</p>
          {post.image && (
            <img
              src={`${import.meta.env.VITE_API_BASE_URL}/${post.image}`}
              alt="পোস্টের ছবি"
              className="rounded-lg max-h-96 object-cover"
            />
          )}
          {isOwner && (
            <div className="flex gap-3 text-sm">
              <button
                onClick={() => setEditing(true)}
                className="text-blue-600"
              >
                এডিট
              </button>
              <button onClick={handleDelete} className="text-red-600">
                ডিলিট
              </button>
            </div>
          )}
        </div>
      )}

      <div className="flex items-center gap-4 border-t pt-2 text-sm">
        <button
          onClick={handleLike}
          className={
            likedByMe ? "text-blue-600 font-semibold" : "text-gray-600"
          }
        >
          👍 লাইক ({post.likes?.length ?? 0})
        </button>
        <span className="text-gray-500">
          💬 {post.comments?.length ?? 0} কমেন্ট
        </span>
      </div>

      <ul className="space-y-1 text-sm">
        {post.comments?.map((c) => (
          <li key={c.id} className="flex justify-between items-start">
            <span>
              <strong>
                {c.author?.firstname ?? c.author?.firstName ?? "User"}:
              </strong>{" "}
              {c.comment}
            </span>
            <button
              onClick={() => handleDeleteComment(c.id)}
              className="text-gray-400 hover:text-red-600 ml-2"
              title="কমেন্ট ডিলিট করুন"
            >
              ✕
            </button>
          </li>
        ))}
      </ul>

      <form onSubmit={handleComment} className="flex gap-2">
        <input
          value={commentText}
          onChange={(e) => setCommentText(e.target.value)}
          placeholder="একটা কমেন্ট লিখুন..."
          className="flex-1 border rounded p-2 text-sm"
        />
        <button
          type="submit"
          className="bg-gray-800 text-white px-3 rounded text-sm"
        >
          কমেন্ট
        </button>
      </form>
    </div>
  );
}

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

export const initialState = {
  user: null,
  posts: [],
  loading: false,
  error: null,
};

const profileReducer = (state, action) => {
  switch (action.type) {
    case actions.profile.PROFILE_FETCHING:
      return { ...state, loading: true, error: null };

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

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

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

    case actions.profile.IMAGE_UPDATED:
      // শুধু avatar বদলাও, বাকি user data ঠিক রাখো
      return {
        ...state,
        user: { ...state.user, avatar: action.data.avatar },
        loading: false,
      };

    default:
      return state;
  }
};

export default profileReducer;

// src/context/ProfileContext.jsx
import { createContext, useReducer } from "react";
import profileReducer, { initialState } from "../reducers/profileReducer";

const ProfileContext = createContext(null);

export const ProfileProvider = ({ children }) => {
  const [state, dispatch] = useReducer(profileReducer, initialState);

  return (
    <ProfileContext.Provider value={{ state, dispatch }}>
      {children}
    </ProfileContext.Provider>
  );
};

export default ProfileContext;

// src/hooks/useProfile.js
import { useContext } from "react";
import ProfileContext from "../context/ProfileContext";

const useProfile = () => useContext(ProfileContext);

export default useProfile;

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

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

// ⚠️ Real backend quirk (Postman collection থেকে confirmed) —
// field নাম "firstname" (ছোট হাতের n), কিন্তু "lastName" (বড় হাতের N)।
// দুটো ভিন্ন casing একই request body-তে! নিজের বুদ্ধিতে "ঠিক" করবেন না —
// backend যেভাবে আশা করে, ঠিক সেভাবেই পাঠাতে হবে।
export const updateProfile = (id, { firstname, lastName }) =>
  api.patch(`/profile/${id}`, { firstname, lastName });

export const uploadAvatar = (id, file, onUploadProgress) => {
  const formData = new FormData();
  formData.append("avatar", file);

  return api.post(`/profile/${id}/avatar`, formData, {
    onUploadProgress: (progressEvent) => {
      if (!onUploadProgress) return;
      const percent = Math.round(
        (progressEvent.loaded * 100) / (progressEvent.total || 1),
      );
      onUploadProgress(percent);
    },
  });
};

// src/pages/ProfilePage.jsx
import { useEffect } from "react";
import { actions } from "../actions";
import useAuth from "../hooks/useAuth";
import useAxios from "../hooks/useAxios";
import useProfile from "../hooks/useProfile";
import { getProfile } from "../services/profileService";
import { getPosts } from "../services/postService";
import ProfileImage from "../components/profile/ProfileImage";
import ProfileNameEditor from "../components/profile/ProfileNameEditor";
import PostCard from "../components/feed/PostCard";

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

  useEffect(() => {
    if (!auth?.user?.id) return;

    const fetchProfileAndPosts = async () => {
      dispatch({ type: actions.profile.PROFILE_FETCHING });

      try {
        // ✅ দ্রুত: দুইটা independent request parallel-এ পাঠানো হচ্ছে
        const [profileRes, postsRes] = await Promise.all([
          getProfile(auth.user.id),
          getPosts(),
        ]);

        // News Feed API-তে filter নেই, তাই client-side-এ নিজের পোস্ট আলাদা করছি
        const ownPosts = postsRes.data.filter(
          (post) => post.author?.id === auth.user.id,
        );

        dispatch({
          type: actions.profile.PROFILE_FETCHED,
          data: { user: profileRes.data, posts: ownPosts },
        });
      } catch (error) {
        dispatch({
          type: actions.profile.PROFILE_FETCH_ERROR,
          error: error.response?.data?.message || error.message,
        });
      }
    };

    fetchProfileAndPosts();
  }, [auth?.user?.id]);

  if (state.loading)
    return <p className="text-center mt-10">প্রোফাইল লোড হচ্ছে...</p>;
  if (state.error)
    return <p className="text-red-600 text-center mt-10">এরর: {state.error}</p>;
  if (!state.user) return null;

  return (
    <div className="max-w-2xl mx-auto p-5 space-y-6">
      <div className="bg-white rounded-lg shadow border p-6 flex flex-col items-center text-center">
        <ProfileImage />
        <ProfileNameEditor />
      </div>

      <div>
        <h2 className="font-semibold mb-3">
          আমার পোস্ট ({state.posts.length})
        </h2>
        <div className="space-y-4">
          {state.posts.length === 0 ? (
            <p className="text-gray-500">এখনো কোনো পোস্ট করেননি।</p>
          ) : (
            state.posts.map((post) => (
              <PostCard key={post.id} post={post} onListChange={() => {}} />
            ))
          )}
        </div>
      </div>
    </div>
  );
}

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

export default function ProfileImage() {
  const { auth } = useAuth();
  useAxios();
  const { state, dispatch } = useProfile();
  const fileInputRef = useRef(null);
  const [uploading, setUploading] = useState(false);

  // Edit বাটনে ক্লিক করলে লুকানো file input খুলবে
  const handleEditClick = (e) => {
    e.preventDefault();
    fileInputRef.current.click();
  };

  // ফাইল select হলে সাথে সাথে upload হবে
  const handleFileChange = async (e) => {
    const file = e.target.files?.[0];
    if (!file) return;

    setUploading(true);
    try {
      const response = await uploadAvatar(auth.user.id, file);
      dispatch({
        type: actions.profile.IMAGE_UPDATED,
        data: response.data,
      });
    } catch (err) {
      dispatch({
        type: actions.profile.PROFILE_FETCH_ERROR,
        error: err.message,
      });
    } finally {
      setUploading(false);
    }
  };

  // Server avatar path হিসেবে একটা relative path দেয় (যেমন "uploads/avatar.jpg")
  // পুরো URL বানাতে base URL যোগ করতে হয়
  const avatarUrl = state.user?.avatar
    ? `${import.meta.env.VITE_API_BASE_URL}/${state.user.avatar}`
    : "https://placehold.co/180x180?text=Avatar";

  return (
    <div className="relative w-[140px] h-[140px] mb-3">
      <img
        src={avatarUrl}
        alt={state.user?.firstname ?? state.user?.firstName}
        className="w-full h-full rounded-full object-cover border"
      />

      <button
        onClick={handleEditClick}
        disabled={uploading}
        className="absolute bottom-1 right-1 bg-black/60 text-white rounded-full p-2"
        title="ছবি বদলান"
      >
        {uploading ? "..." : "✏️"}
      </button>

      <input
        ref={fileInputRef}
        type="file"
        accept="image/*"
        onChange={handleFileChange}
        className="hidden"
      />
    </div>
  );
}

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

export default function ProfileNameEditor() {
  const { auth } = useAuth();
  useAxios();
  const { state, dispatch } = useProfile();

  const [editMode, setEditMode] = useState(false);
  const [firstname, setFirstname] = useState(
    state.user?.firstname ?? state.user?.firstName ?? "",
  );
  const [lastName, setLastName] = useState(
    state.user?.lastName ?? state.user?.lastname ?? "",
  );

  const handleSave = async () => {
    try {
      // ⚠️ backend quirk মনে আছে তো? এখানে firstname (ছোট n) + lastName (বড় N)
      const response = await updateProfile(auth.user.id, {
        firstname,
        lastName,
      });
      dispatch({
        type: actions.profile.PROFILE_UPDATED,
        data: response.data,
      });
      setEditMode(false);
    } catch (error) {
      dispatch({
        type: actions.profile.PROFILE_FETCH_ERROR,
        error: error.message,
      });
    }
  };

  if (editMode) {
    return (
      <div className="space-y-2 w-full max-w-xs">
        <input
          value={firstname}
          onChange={(e) => setFirstname(e.target.value)}
          placeholder="প্রথম নাম"
          className="w-full border rounded p-2 text-center"
        />
        <input
          value={lastName}
          onChange={(e) => setLastName(e.target.value)}
          placeholder="শেষ নাম"
          className="w-full border rounded p-2 text-center"
        />
        <div className="flex gap-2 justify-center">
          <button
            onClick={handleSave}
            className="bg-blue-600 text-white px-4 py-1 rounded"
          >
            সেভ করুন
          </button>
          <button
            onClick={() => setEditMode(false)}
            className="px-4 py-1 rounded border"
          >
            বাতিল
          </button>
        </div>
      </div>
    );
  }

  return (
    <div>
      <h1 className="text-xl font-bold">
        {state.user?.firstname ?? state.user?.firstName}{" "}
        {state.user?.lastName ?? state.user?.lastname}
      </h1>
      <button
        onClick={() => setEditMode(true)}
        className="text-blue-600 text-sm mt-1"
      >
        ✏️ নাম এডিট করুন
      </button>
    </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 handleLogout = () => {
    setAuth(null);
    navigate("/login");
  };

  return (
    <nav className="bg-white border-b p-4 flex justify-between items-center max-w-2xl mx-auto">
      <Link to="/" className="font-bold text-lg text-blue-600">
        Deshi Book
      </Link>
      <div className="flex items-center gap-4 text-sm">
        <Link to="/">News Feed</Link>
        <Link to="/profile">আমার প্রোফাইল</Link>
        <span className="text-gray-500">
          {auth?.user?.firstName ?? auth?.user?.firstname}
        </span>
        <button onClick={handleLogout} className="text-red-600">
          লগআউট
        </button>
      </div>
    </nav>
  );
}

// src/pages/FeedPage.jsx
import { useState } from "react";
import CreatePostForm from "../components/feed/CreatePostForm";
import PostFeed from "../components/feed/PostFeed";

export default function FeedPage() {
  const [refreshKey, setRefreshKey] = useState(0);

  return (
    <div className="max-w-2xl mx-auto p-5 space-y-4">
      <CreatePostForm onCreated={() => setRefreshKey((k) => k + 1)} />
      {/* key বদলালে PostFeed নতুন করে mount হয়, useEffect আবার চলে */}
      <PostFeed key={refreshKey} />
    </div>
  );
}

// src/pages/LoginPage.jsx
import { Link } from "react-router";
import LoginForm from "../components/LoginForm";

export default function LoginPage() {
  return (
    <div>
      <LoginForm />
      <p className="text-center mt-4 text-sm">
        একাউন্ট নেই?{" "}
        <Link to="/register" className="text-blue-600">
          রেজিস্ট্রেশন করুন
        </Link>
      </p>
    </div>
  );
}

// src/pages/RegisterPage.jsx
import { Link } from "react-router";
import RegisterForm from "../components/RegisterForm";

export default function RegisterPage() {
  return (
    <div>
      <RegisterForm />
      <p className="text-center mt-4 text-sm">
        আগে থেকে একাউন্ট আছে?{" "}
        <Link to="/login" className="text-blue-600">
          লগইন করুন
        </Link>
      </p>
    </div>
  );
}

// src/App.jsx
import { BrowserRouter, Routes, Route } from "react-router";
import { AuthProvider } from "./context/AuthContext";
import { ProfileProvider } from "./context/ProfileContext";
import ProtectedRoute from "./components/ProtectedRoute";
import Navbar from "./components/Navbar";
import LoginPage from "./pages/LoginPage";
import RegisterPage from "./pages/RegisterPage";
import FeedPage from "./pages/FeedPage";
import ProfilePage from "./pages/ProfilePage";

function Layout({ children }) {
  return (
    <div className="min-h-screen bg-gray-50">
      <Navbar />
      {children}
    </div>
  );
}

export default function App() {
  return (
    // AuthProvider সবার বাইরে — সব component-এ auth দরকার হতে পারে
    <AuthProvider>
      <BrowserRouter>
        <Routes>
          {/* Public routes */}
          <Route path="/login" element={<LoginPage />} />
          <Route path="/register" element={<RegisterPage />} />

          {/* Protected: News Feed */}
          <Route
            path="/"
            element={
              <ProtectedRoute>
                <Layout>
                  <FeedPage />
                </Layout>
              </ProtectedRoute>
            }
          />

          {/* Protected: Profile Feed */}
          <Route
            path="/profile"
            element={
              <ProtectedRoute>
                {/* ProfileProvider শুধু ProfilePage-এর জন্য দরকার */}
                <ProfileProvider>
                  <Layout>
                    <ProfilePage />
                  </Layout>
                </ProfileProvider>
              </ProtectedRoute>
            }
          />
        </Routes>
      </BrowserRouter>
    </AuthProvider>
  );
}

npm run dev

import { useEffect, useState } from "react";
import api from "../api/api";

function useSearchPosts(query) {
  const [results, setResults] = useState([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (!query.trim()) {
      setResults([]);
      return;
    }

    const controller = new AbortController();
    setLoading(true);

    api
      .get("/posts", { signal: controller.signal })
      .then((res) => {
        const filtered = res.data.filter((p) =>
          (p.content ?? p.body ?? "")
            .toLowerCase()
            .includes(query.toLowerCase()),
        );
        setResults(filtered);
        setLoading(false);
      })
      .catch((err) => {
        // "CanceledError" মানে আমরাই cancel করেছি — real error না
        if (err.name !== "CanceledError") {
          console.error("সার্চ এরর:", err.message);
          setLoading(false);
        }
      });

    return () => {
      controller.abort(); // পরের keystroke-এ আগের request cancel হবে
    };
  }, [query]);

  return { results, loading };
}