"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { Button } from "@base-ui/react";
import Image from "next/image";
import {
  MdKeyboardArrowLeft,
  MdOutlineKeyboardArrowRight,
} from "react-icons/md";
import editIcon from "@/public/icon/edit-icon.svg";
import { Card } from "@/components/ui/card";
import type { ResumeTemplateId } from "@/types/resume";
import { useResumeProfile } from "./hooks/useResumeProfile";
import { DownloadButton } from "./components/resume/DownloadButton";
import {
  RESUME_PAGE_COUNT,
  ResumePreview,
} from "./components/resume/ResumePreview";
import { TemplateSelector } from "./components/resume/TemplateSelector";
import WaitingPage from "@/components/common/waitingPage/waitingPage";

const sections = [
  "About",
  "Experience",
  "Education",
  "Projects",
  "Certificate & Awards",
  "Links",
  "Contact",
  "Others",
];


export default function ResumeStudio() {
  return <WaitingPage />;
}


// export default function StudioPage() {
//   const [selectedTemplateId, setSelectedTemplateId] =
//     useState<ResumeTemplateId>("modern-portrait");
//   const [currentPage, setCurrentPage] = useState(1);
//   const router = useRouter();
//   const { data: resume, isLoading, isError } = useResumeProfile();

//   return (
//     <div className="bg-expertise-box-bg grid w-full flex-1 grid-cols-[2fr_1fr] gap-5 px-5">
//       <div className="flex w-full flex-col">
//         <div className="font-bricolage flex h-20 w-full items-center justify-between p-4">
//           <div className="text-[24px] font-extrabold">Resume Studio</div>
//           <div className="text-[14px] font-medium">
//             View, change templates & previews, action edits, download and share
//             your professional resume.
//           </div>
//         </div>
//         <div className="flex h-full w-full flex-col gap-5 rounded-2xl bg-[#DDE3E9] p-4">
//           <div className="flex justify-between">
//             <div className="flex">
//               <Button
//                 onClick={() => setCurrentPage((page) => Math.max(1, page - 1))}
//                 disabled={currentPage === 1}
//                 aria-label="Previous page"
//                 className="border-border mr-2 flex h-10 w-10 items-center justify-center rounded-lg border bg-white text-black disabled:opacity-40"
//               >
//                 <MdKeyboardArrowLeft />
//               </Button>
//               <Button
//                 onClick={() =>
//                   setCurrentPage((page) =>
//                     Math.min(RESUME_PAGE_COUNT, page + 1),
//                   )
//                 }
//                 disabled={currentPage === RESUME_PAGE_COUNT}
//                 aria-label="Next page"
//                 className="border-border mr-2 flex h-10 w-10 items-center justify-center rounded-lg border bg-white text-black disabled:opacity-40"
//               >
//                 <MdOutlineKeyboardArrowRight />
//               </Button>
//             </div>
//             <div>
//               Page {currentPage} of {RESUME_PAGE_COUNT}
//             </div>
//           </div>
//           {isLoading && (
//             <div className="flex h-full items-center justify-center rounded-lg bg-white text-sm text-gray-500">
//               Loading your resume…
//             </div>
//           )}
//           {isError && (
//             <div className="flex h-full items-center justify-center rounded-lg bg-white text-sm text-red-600">
//               We could not load your profile. Please try again.
//             </div>
//           )}
//           {resume && (
//             <ResumePreview
//               resume={resume}
//               templateId={selectedTemplateId}
//               page={currentPage}
//             />
//           )}
//         </div>
//       </div>
//       <div className="flex w-full flex-col">
//         <div className="font-bricolage flex h-20 w-full items-center justify-end p-4">
//           {resume && (
//             <div className="text-[14px] font-medium">
//               <DownloadButton
//                 templateId={selectedTemplateId}
//                 filename={`${resume.name.replace(/\s+/g, "-").toLowerCase()}-resume`}
//               />
//             </div>
//           )}
//         </div>
//         <div className="flex flex-col gap-5">
//           <div className="flex w-full flex-col gap-5 rounded-2xl bg-[#DDE3E9] p-4">
//             <div className="font-inter flex items-center justify-between">
//               <div className="flex text-[21px] font-bold">Choose Templates</div>
//             </div>
//             <TemplateSelector
//               selectedTemplateId={selectedTemplateId}
//               onSelect={(template) => {
//                 setSelectedTemplateId(template);
//                 setCurrentPage(1);
//               }}
//             />
//             <div className="font-inter rounded-lg bg-white py-4 text-center text-[14px] font-medium text-gray-500">
//               Upcoming More Templates Soon...
//             </div>
//           </div>
//           <Card className="flex h-full w-full flex-col gap-5 rounded-2xl border-none bg-[#DDE3E9] p-0">
//             <div className="font-inter flex flex-col items-start justify-between gap-1 p-4">
//               <div className="flex text-[21px] font-bold">Manage Contents</div>
//               <div className="text-[14px] font-medium text-gray-400">
//                 Manage your resume content, sections, and visibility settings.
//               </div>
//             </div>
//             <div className="bg-expertise-box-bg h-full w-full rounded-lg">
//               {sections.map((section, index) => (
//                 <div
//                   key={section}
//                   className="border-border flex items-center justify-between border-t p-4 transition-colors duration-200 hover:bg-white/40"
//                 >
//                   <span className="font-medium">{section}</span>
//                   <Button
//                     onClick={() => router.push(`/profile?section=${index + 1}`)}
//                     aria-label={`Edit ${section}`}
//                     className="group cursor-pointer"
//                   >
//                     <Image src={editIcon} alt="Edit" width={20} height={20} />
//                   </Button>
//                 </div>
//               ))}
//             </div>
//           </Card>
//         </div>
//       </div>
//     </div>
//   );
// }