"use client";

import React, { useState } from "react";
import { FaBell, FaUser, FaStar } from "react-icons/fa";
import TabBar from "../components/TabBar";
import RequestDetailsModal from "../components/ValounterRequestDetailsModal";

const requests = [
  {
    id: 4,
    title: "Приобрести продукты пенсионерке",
    status: "Выполнена",
    statusColor: "#71A5E9",
    date: "До 28.11.2025",
    time: "13:00",
    createdAt: "28.11.2025",
    description: "Купить продукты и принести по адресу.",
  },
  {
    id: 5,
    title: "Приобрести продукты пенсионерке",
    status: "В процессе",
    statusColor: "#E971E1",
    date: "До 28.11.2025",
    time: "13:00",
    createdAt: "28.11.2025",
    description: "Купить продукты и принести по адресу.",
  },
  {
    id: 6,
    title: "Приобрести продукты пенсионерке",
    status: "В процессе",
    statusColor: "#E971E1",
    date: "До 28.11.2025",
    time: "13:00",
    createdAt: "28.11.2025",
    description: "Купить продукты и принести по адресу.",
  },
  {
    id: 7,
    title: "Приобрести продукты пенсионерке",
    status: "В процессе",
    statusColor: "#E971E1",
    date: "До 28.11.2025",
    time: "13:00",
    createdAt: "28.11.2025",
    description: "Купить продукты и принести по адресу.",
  },
];

const HistoryRequestPage = () => {
  const [selectedRequest, setSelectedRequest] = useState(null);

  const handleOpen = (req) => {
    setSelectedRequest(req);
  };

  const handleClose = () => {
    setSelectedRequest(null);
  };

  return (
    <div className="min-h-screen w-full bg-[#90D2F9] flex justify-center px-4">
      <div className="relative w-full max-w-md flex flex-col pb-20 pt-4">
        {/* Header */}
        <header className="flex items-center justify-between mb-4">
          <div className="flex items-center gap-2">
            <div className="w-8 h-8 rounded-full border border-white flex items-center justify-center">
              <FaUser className="text-white text-sm" />
            </div>
            <p className="font-montserrat font-extrabold text-[20px] leading-[11px] text-white">
              Александр
            </p>
          </div>
          <button
            type="button"
            className="w-8 h-8 rounded-full border border-white flex items-center justify-center"
          >
            <FaBell className="text-white text-sm" />
          </button>
        </header>

        <h1 className="font-montserrat font-extrabold text-[20px] leading-[22px] text-white mb-3">
          История заявок
        </h1>

        {/* Список заявок */}
        <main className="space-y-3 overflow-y-auto pr-1 max-h-[80vh]">
          {requests.map((req) => (
            <button
              key={req.id}
              type="button"
              onClick={() => handleOpen(req)}
              className="w-full text-left bg-white rounded-xl px-3 py-2 flex flex-col gap-1"
            >
              {/* верхняя строка: статус + дата/время */}
              <div className="flex items-center justify-between gap-2">
                <span
                  className="inline-flex items-center justify-center px-2 py-0.5 rounded-full font-montserrat text-[12px] font-light text-black"
                  style={{ backgroundColor: req.statusColor }}
                >
                  {req.status}
                </span>
                <div className="text-right leading-tight">
                  <p className="font-montserrat text-[10px] text-black">
                    {req.date}
                  </p>
                  <p className="font-montserrat text-[10px] text-black">
                    {req.time}
                  </p>
                </div>
              </div>

              {/* Заголовок заявки */}
              <p className="font-montserrat font-semibold text-[15px] leading-[18px] text-black mt-1">
                {req.title}
              </p>

              {/* Кнопка "Развернуть" */}
              <div className="mt-2 w-full bg-[#94E067] rounded-lg py-3 flex items-center justify-center">
                <span className="font-montserrat font-bold text-[15px] leading-[18px] text-white">
                  Развернуть
                </span>
              </div>
            </button>
          ))}
        </main>

        {/* Попап */}
        {selectedRequest && (
          <RequestDetailsModal request={selectedRequest} onClose={handleClose} />
        )}

        <TabBar />
      </div>
    </div>
  );
};

export default HistoryRequestPage;

// const RequestDetailsModal = ({ request, onClose }) => {
//   const isDone = request.status === "Выполнена";

//   return (
//     <div className="fixed inset-0 z-40 flex items-center justify-center bg-black/40 px-4">
//       <div className="w-full max-w-sm bg-[#90D2F9] rounded-2xl p-3 relative">
//         {/* Белая карточка */}
//         <div className="bg-white rounded-xl p-3 flex flex-col gap-3">
//           {/* Шапка попапа */}
//           <div className="flex items-center justify-between mb-1">
//             <button
//               type="button"
//               onClick={onClose}
//               className="text-white bg-[#90D2F9] w-7 h-7 rounded-full flex items-center justify-center text-sm"
//             >
//               ←
//             </button>
//             <p className="flex-1 text-center font-montserrat font-extrabold text-[15px] text-white">
//               Заявка от {request.createdAt}
//             </p>
//             <span className="w-7" />
//           </div>

//           {/* Статус + срок */}
//           <div className="flex items-center justify-between">
//             <span
//               className="inline-flex items-center justify-center px-2 py-0.5 rounded-full font-montserrat text-[8px] font-light text-black"
//               style={{ backgroundColor: "#71A5E9" }}
//             >
//               Выполнена
//             </span>
//             <div className="text-right leading-tight">
//               <p className="font-montserrat text-[8px] text-black">
//                 До {request.date.replace("До ", "")}
//               </p>
//               <p className="font-montserrat text-[8px] text-black">
//                 {request.time}
//               </p>
//             </div>
//           </div>

//           {/* Название задачи */}
//           <p className="font-montserrat font-semibold text-[12px] leading-[15px] text-black">
//             {request.title}
//           </p>

//           {/* Блок отзыва */}
//           {isDone && (
//             <div className="bg-[#72B8E2] rounded-lg p-2 flex flex-col gap-2">
//               <p className="font-montserrat font-bold text-[10px] text-white">
//                 Отзыв
//               </p>
//               <p className="font-montserrat text-[10px] text-white">
//                 Здесь будет текст отзыва с бэка.
//               </p>
//             </div>
//           )}

//           {/* Оценка волонтера */}
//           <div className="mt-1">
//             <p className="font-montserrat font-semibold text-[12px] text-black mb-1">
//               Оценить волонтера
//             </p>
//             <div className="flex gap-1">
//               {[1, 2, 3, 4, 5].map((star) => (
//                 <FaStar key={star} className="text-[#F6E168]" size={20} />
//               ))}
//             </div>
//           </div>

//           {/* Кнопка оставить отзыв */}
//           {isDone && (
//             <button
//               type="button"
//               className="mt-3 w-full bg-[#94E067] rounded-lg py-2 flex items-center justify-center"
//             >
//               <span className="font-montserrat font-bold text-[14px] text-white">
//                 Оставить отзыв
//               </span>
//             </button>
//           )}
//         </div>
//       </div>
//     </div>
//   );
// };