import React, { useState, useEffect, useRef } from 'react';
import {
Menu,
MapPin,
GraduationCap,
Users,
Hourglass,
DollarSign,
Heart,
Info,
Send,
Building2,
Gift,
Home,
Grid,
Moon,
ArrowUp,
Briefcase,
CheckCircle2,
ChevronRight,
ExternalLink,
Sparkles,
FileText,
MessageSquare,
Loader2,
Copy,
ArrowRight,
RefreshCw,
Award,
Keyboard,
HelpCircle,
Settings,
Check,
SendHorizontal
} from 'lucide-react';
// স্ক্রলবার হাইড ও কাস্টম অ্যানিমেশনের স্টাইলশিট
const styles = `
.hide-scrollbar::-webkit-scrollbar {
display: none;
}
.hide-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}
@keyframes pulse-subtle {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.8; transform: scale(0.98); }
}
.pulse-subtle {
animation: pulse-subtle 2s infinite ease-in-out;
}
.tab-snap-container {
scroll-snap-type: x mandatory;
}
.tab-snap-item {
scroll-snap-align: start;
}
`;
export default function JobDetailsApp() {
const [activeTab, setActiveTab] = useState('details');
const [isSaved, setIsSaved] = useState(false);
const [scrollAtRight, setScrollAtRight] = useState(false);
const [scrollAtLeft, setScrollAtLeft] = useState(true);
// সরকারি চাকরির জন্য ডায়নামিক সার্কুলার ডাটা
const [jobTitle, setJobTitle] = useState("ব্যক্তিগত সহকারী (Personal Assistant)");
const [companyName, setCompanyName] = useState("জাতীয় পেনশন কর্তৃপক্ষ (National Pension Authority)");
const [jobGrade, setJobGrade] = useState("১৩তম গ্রেড");
const [jobRequirements, setJobRequirements] = useState(
"স্নাতক ডিগ্রী, কম্পিউটার পরিচালনায় দক্ষতা, প্রতি মিনিটে বাংলায় ২৫ শব্দ ও ইংরেজিতে ৩০ শব্দের টাইপিং স্পিড।"
);
const [isEditingContext, setIsEditingContext] = useState(false);
// এআই ফিচারের স্টেটসমূহ
const [aiLoading, setAiLoading] = useState(false);
const [aiResult, setAiResult] = useState(null);
const [aiError, setAiError] = useState(null);
const [aiTask, setAiTask] = useState(null); // 'syllabus', 'mcq-prep', 'chat'
const [aiCopied, setAiCopied] = useState(false);
// কাস্টম চ্যাটবট স্টেট (Circular Q&A)
const [chatInput, setChatInput] = useState("");
const [chatHistory, setChatHistory] = useState([
{ role: 'assistant', text: "হ্যালো! আমি আপনার এআই জব কোচ। এই সার্কুলার সম্পর্কিত যেকোনো প্রশ্ন আমাকে করতে পারেন। যেমন: বয়সসীমা কত? পরীক্ষার প্রস্তুতি কীভাবে নেব? ইত্যাদি।" }
]);
// এমসিকিউ কুইজ স্টেট
const [mcqQuestions, setMcqQuestions] = useState([]);
const [selectedAnswers, setSelectedAnswers] = useState({});
const [showMcqResults, setShowMcqResults] = useState(false);
// অটো-অ্যাডভান্স ট্রানজিশন নোটিফিকেশন স্টেট
const [transitionToast, setTransitionToast] = useState(null);
// ৫টি ট্যাব + ১টি এআই মেন্টর ট্যাব (মোট ৬টি আকর্ষণীয় ট্যাব)
const TABS = [
{ id: 'details', label: 'চাকরির বিবরণ', icon: Info },
{ id: 'requirements', label: 'যোগ্যতা ও দক্ষতা', icon: GraduationCap },
{ id: 'apply', label: 'আবেদন পদ্ধতি', icon: Send },
{ id: 'company', label: 'প্রতিষ্ঠান পরিচিতি', icon: Building2 },
{ id: 'benefits', label: 'বেতন ও সুযোগ', icon: Gift },
{ id: 'ai-coach', label: 'এআই মেন্টর ✨', icon: Sparkles }
];
const tabContainerRef = useRef(null);
const tabsRef = useRef({});
const tabContentRef = useRef(null); // ট্যাব বডির শুরুর রেফারেন্স
// ট্যাব কন্টেন্টের ঠিক শুরুতে সুন্দর ও নিখুঁত স্মুথ স্ক্রল (অফসেট সহ যাতে স্টিকি ট্যাব বার ঢেকে না যায়)
const scrollToTabBody = () => {
if (tabContentRef.current) {
const elementPosition = tabContentRef.current.getBoundingClientRect().top + window.scrollY;
const offsetPosition = elementPosition - 125; // ১২৫ পিক্সেল অফসেট রাখা হয়েছে
window.scrollTo({
top: offsetPosition,
behavior: 'smooth'
});
}
};
// একদম উপরে যাওয়ার স্ক্রল ফাংশন
const scrollToTop = () => {
window.scrollTo({ top: 0, behavior: 'smooth' });
};
const handleTabChange = (tabId) => {
setActiveTab(tabId);
// ট্যাব চেঞ্জ হলে কন্টেন্টের শুরুতে স্ক্রল করা হবে
setTimeout(() => {
scrollToTabBody();
}, 80);
// অনুভূমিকভাবে স্ক্রল করে ট্যাব বাটনকে মাঝে আনা
const tabEl = tabsRef.current[tabId];
const container = tabContainerRef.current;
if (tabEl && container) {
const containerWidth = container.offsetWidth;
const tabOffsetLeft = tabEl.offsetLeft;
const tabWidth = tabEl.offsetWidth;
container.scrollTo({
left: tabOffsetLeft - (containerWidth / 2) + (tabWidth / 2),
behavior: 'smooth'
});
}
};
const handleTabScroll = () => {
const container = tabContainerRef.current;
if (container) {
const { scrollLeft, scrollWidth, clientWidth } = container;
setScrollAtLeft(scrollLeft <= 10);
setScrollAtRight(scrollLeft + clientWidth >= scrollWidth - 10);
}
};
// স্ক্রল করতে করতে নিচে পৌঁছালে অটোমেটিক পরবর্তী ট্যাব ওপেন হবে
useEffect(() => {
let isTransitioning = false;
const handleScroll = () => {
if (isTransitioning) return;
const threshold = 50;
const totalHeight = document.documentElement.scrollHeight;
const currentScroll = window.innerHeight + window.scrollY;
if (totalHeight - currentScroll <= threshold) {
const currentIndex = TABS.findIndex(t => t.id === activeTab);
if (currentIndex !== -1 && currentIndex < TABS.length - 1) {
isTransitioning = true;
const nextTab = TABS[currentIndex + 1];
setTransitionToast(`সব পড়া শেষ! এবার চালু হচ্ছে: "${nextTab.label}"...`);
setTimeout(() => {
handleTabChange(nextTab.id);
setTransitionToast(null);
isTransitioning = false;
}, 1200);
}
}
};
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
}, [activeTab]);
useEffect(() => {
handleTabScroll();
window.addEventListener('resize', handleTabScroll);
return () => window.removeEventListener('resize', handleTabScroll);
}, []);
// জেমিনি এআই এপিআই সংযোগ (রানিং মডেল: gemini-2.5-flash-preview-09-2025)
const generateWithGemini = async (prompt, isJson = false, responseSchema = null) => {
const apiKey = "";
const url = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${apiKey}`;
const payload = {
contents: [{ parts: [{ text: prompt }] }]
};
if (isJson && responseSchema) {
payload.generationConfig = {
responseMimeType: "application/json",
responseSchema: responseSchema
};
}
let retries = 5;
let delay = 1000;
while (retries > 0) {
try {
const response = await fetch(url, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(payload),
});
if (!response.ok) throw new Error(`HTTP Error! Status: ${response.status}`);
const data = await response.json();
return data.candidates?.[0]?.content?.parts?.[0]?.text || "";
} catch (error) {
retries -= 1;
if (retries === 0) throw error;
await new Promise(res => setTimeout(res, delay));
delay *= 2;
}
}
};
// ১. সিলেবাস ও বিষয়ভিত্তিক বুকলিস্ট জেনারেটর
const generateSyllabus = async () => {
setAiLoading(true);
setAiError(null);
setAiTask('syllabus');
setAiResult(null);
setMcqQuestions([]);
try {
const prompt = `You are a professional BCS & Government Job Coach in Bangladesh.
For the post of "${jobTitle}" at "${companyName}" which is a "${jobGrade}" post, generate:
1. Expected exam marks distribution (MCQ/Written/Viva) based on standard Bangladesh Public Service Commission (PSC) or ministry exam rules.
2. Key topics to study for Bangla, English, Mathematics, General Knowledge, and Technical Computer Skills (based on requirements: ${jobRequirements}).
3. A recommended Booklist (mention popular books like MP3, Professor's, or text-books in Bangladesh context).
Provide output in highly structured, easy-to-read Bengali. Do not mention any markdown except bullets/bold text.`;
const text = await generateWithGemini(prompt);
setAiResult(text);
} catch (err) {
setAiError("সিলেবাস তৈরি করা সম্ভব হয়নি। আবার চেষ্টা করুন।");
} finally {
setAiLoading(false);
}
};
// ২. রিয়েল-টাইম ৩টি প্রাসঙ্গিক MCQ মক কুইজ জেনারেটর
const generateMcqChallenge = async () => {
setAiLoading(true);
setAiError(null);
setAiTask('mcq-prep');
setAiResult(null);
setMcqQuestions([]);
setSelectedAnswers({});
setShowMcqResults(false);
const schema = {
type: "OBJECT",
properties: {
questions: {
type: "ARRAY",
items: {
type: "OBJECT",
properties: {
id: { type: "NUMBER" },
text: { type: "STRING" },
options: { type: "ARRAY", items: { type: "STRING" } },
correctIndex: { type: "NUMBER" },
explanation: { type: "STRING" }
},
required: ["id", "text", "options", "correctIndex", "explanation"]
}
}
},
required: ["questions"]
};
try {
const prompt = `Generate exactly 3 challenging MCQ questions in Bengali for a job test.
The questions must be highly relevant to: "${jobTitle}" at "${companyName}" with requirements: ${jobRequirements}.
Incorporate 1 computer/typing related MCQ, 1 math or analytical MCQ, and 1 general knowledge/organization related MCQ.
Return the output strictly in JSON according to the schema provided. No other wrapper text.`;
const responseText = await generateWithGemini(prompt, true, schema);
const parsed = JSON.parse(responseText);
setMcqQuestions(parsed.questions || []);
} catch (err) {
setAiError("মক টেস্ট জেনারেট করা যায়নি। অনুগ্রহ করে আবার চেষ্টা করুন।");
} finally {
setAiLoading(false);
}
};
// ৩. কাস্টম ইন্টারেক্টিভ চ্যাটবট রেসপন্স
const handleSendChat = async (userMsgText = null) => {
const textToSend = userMsgText || chatInput;
if (!textToSend.trim()) return;
// হিস্টোরিতে ব্যবহারকারীর মেসেজ যোগ করুন
const updatedHistory = [...chatHistory, { role: 'user', text: textToSend }];
setChatHistory(updatedHistory);
setChatInput("");
setAiLoading(true);
try {
const prompt = `You are a supportive, expert Government Job Guide in Bangladesh.
Context: The user is looking at a circular for "${jobTitle}" at "${companyName}" (Grade: ${jobGrade}, Requirements: ${jobRequirements}).
Answer the user's specific query warmly and professionally in Bengali.
User Query: "${textToSend}"
Keep the answer realistic, helpful, and concise (within 3-4 paragraphs), mentioning specific reference points from Bangladeshi government service structures (like age limits, quotas, salary structures etc.) if applicable.`;
const response = await generateWithGemini(prompt);
setChatHistory([...updatedHistory, { role: 'assistant', text: response }]);
} catch (err) {
setChatHistory([...updatedHistory, { role: 'assistant', text: "দুঃখিত, সংযোগে ত্রুটি হয়েছে। অনুগ্রহ করে আপনার প্রশ্নটি আবার পাঠান।" }]);
} finally {
setAiLoading(false);
}
};
const copyToClipboard = (text) => {
if (text) {
const textArea = document.createElement("textarea");
textArea.value = text;
document.body.appendChild(textArea);
textArea.select();
document.execCommand("copy");
document.body.removeChild(textArea);
setAiCopied(true);
setTimeout(() => setAiCopied(false), 2000);
}
};
return (
<>
{/* --- টপ হেডার নেভিগেশন বার --- */}
{/* --- মূল জব কার্ড হিরো সেকশন --- */}
{companyName}
{/* কুইক ইনফো গ্রিড */}
} label={`${jobGrade} বেতন স্কেল`} color="emerald" />
} label="ঢাকা ও অন্যান্য জেলা" color="blue" />
} label="ন্যূনতম স্নাতক ডিগ্রী" color="indigo" />
} label="মোট শূন্যপদ: ৪টি" color="purple" />
} label="আবেদনের ২২ দিন বাকি" color="orange" className="col-span-2 justify-center" />
{/* ডেডলাইন ও সরাসরি অফিসিয়াল লিঙ্ক */}
{/* --- স্টিকি হরাইজন্টাল ট্যাব নেভিগেশন (পিকিং লেআউট) --- */}
{/* চাকরির বিবরণ */}
{activeTab === 'details' && (
)}
{/* যোগ্যতা ও দক্ষতা */}
{activeTab === 'requirements' && (
)}
{/* আবেদন পদ্ধতি */}
{activeTab === 'apply' && (
)}
{/* প্রতিষ্ঠান পরিচিতি */}
{activeTab === 'company' && (
)}
{/* বেতন ও সুযোগ */}
{activeTab === 'benefits' && (
} title="সরকারি বেতন কাঠামো" desc="জাতীয় বেতন স্কেল অনুযায়ী আকর্ষণীয় মূল বেতন ও বার্ষিক ৫% ইনক্রিমেন্ট।" />
} title="উৎসব বোনাস ও ভাতা" desc="বছরে ২টি উৎসব বোনাস, বৈশাখী ভাতা এবং কল্যাণ তহবিল ঋণ সুবিধা।" />
} title="চিকিৎসা সহায়তা" desc="মাসিক চিকিৎসা ভাতা এবং নিয়মানুযায়ী গ্রুপ ইন্স্যুরেন্স কাভারেজ।" />
} title="আবাসন সুবিধা" desc="সরকারি কোয়ার্টার বরাদ্দ সুবিধা অথবা বাড়ি ভাড়া ভাতা।" />
)}
{/* এআই মেন্টর (BCS & Gov Job AI Companion) */}
{activeTab === 'ai-coach' && (
Gemini 2.5 Realtime
{/* ডায়নামিক সার্কুলার এডিটর (যেকোনো চাকরির প্রস্তুতিতে এআইকে রূপান্তর করতে) */}
সার্কুলার কনফিগারেশন
{isEditingContext ? (
৯ম-২০তম গ্রেড
সরকারি চাকরি পোর্টাল{jobTitle}
আবেদনের শেষ সময়সীমা: ২৮ জুলাই, ২০২৬
{/* বামদিকের স্ক্রল ইন্ডিকেটর */}
{!scrollAtLeft && (
{/* --- ট্যাব বডির রেফারেন্স নোড (স্ক্রল টার্গেটের জন্য) --- */}
{/* --- মূল কন্টেন্ট এরিয়া --- */}
◀
)}
{/* ট্যাব বাটন লিস্ট */}
{TABS.map((tab) => (
))}
{/* ডানদিকের স্ক্রল ইন্ডিকেটর */}
{!scrollAtRight && (
আরও আছে ▶
)}
বিস্তারিত পদের বিবরণ
উক্ত পদটি একটি সম্মানজনক জাতীয় বেতন স্কেলের পদ। এই পদে যোগদানের পর নির্বাচিত প্রার্থীকে দাপ্তরিক ফাইল ম্যানেজমেন্ট, উর্ধ্বতন কর্তৃপক্ষের নির্দেশনা মোতাবেক ফাইল প্রক্রিয়াকরণ এবং বিভিন্ন মিটিং এর কর্মসূচি সমন্বয় করতে হবে।
যেহেতু এটি একটি স্বনামধন্য সরকারি প্রতিষ্ঠান, তাই কাজের পরিবেশ অত্যন্ত সুশৃঙ্খল এবং এখানে ভবিষ্যৎ ক্যারিয়ার গঠনের ভালো সুযোগ রয়েছে।
প্রয়োজনীয় শিক্ষাগত যোগ্যতা ও কারিগরি দক্ষতা
আবেদন করার পূর্বে অবশ্যই নিশ্চিত করুন যে আপনার নিচের যোগ্যতাগুলো রয়েছে:
টেলিটক অনলাইনে আবেদনের সহজ ধাপসমূহ
কর্তৃপক্ষের পরিচিতি
{companyName}
এটি একটি স্বায়ত্তশাসিত সরকারি প্রতিষ্ঠান যা জনগণের সামাজিক কল্যাণ ও বার্ধক্যকালীন দীর্ঘমেয়াদী অর্থনৈতিক নিরাপত্তা নিশ্চিতকরণে জাতীয় পেনশন তহবিল পরিচালনা করে থাকে।
মাসিক বেতন ও ভাতাসমূহ
এআই সরকারি চাকরি মেন্টর
Gemini 2.5 Realtime
setJobTitle(e.target.value)}
className="w-full bg-slate-900 border border-slate-800 rounded-xl px-3 py-2 text-sm text-slate-100 focus:outline-none focus:border-blue-500"
/>
setCompanyName(e.target.value)}
className="w-full bg-slate-900 border border-slate-800 rounded-xl px-3 py-2 text-sm text-slate-100 focus:outline-none focus:border-blue-500"
/>
setJobGrade(e.target.value)}
className="w-full bg-slate-900 border border-slate-800 rounded-xl px-3 py-2 text-sm text-slate-100 focus:outline-none focus:border-blue-500"
/>