"use client";

import React from "react";
import { FaTimesCircle } from "react-icons/fa";

const AcceptPopup = ({ request, isOpen, onClose, onAccept }) => {
  if (!isOpen || !request) return null;

  return (
    <div className="fixed inset-0  z-50 flex items-center justify-center">
      {/* затемнение */}
      <div
        className="absolute inset-0 bg-black/40"
        onClick={onClose}
      />

      {/* карточка на всю страницу */}
      <div className="relative z-10 w-full h-250px  bg-white rounded-2xl px-4 pt-4 pb-6 flex flex-col">
        {/* крестик */}
        <button
          type="button"
          onClick={onClose}
          className="absolute top-4 right-4 text-[#FF9494]"
        >
          <FaTimesCircle className="w-5 h-5" />
        </button>

        {/* Заголовок */}
        <h2 className="font-montserrat font-extrabold text-[20px] leading-[22px] text-[#90D2F9] mb-1">
          Задача
        </h2>
        <p className="text-[20px] leading-[14px] mt-5 font-montserrat mb-5">
          {request.title}
        </p>

        {/* Сумма и время */}
        <div className="flex items-center gap-3 mb-3">
          <div className="w-full h-[40px] bg-[#90D2F9] rounded-full flex flex-col items-center justify-center">
            <span className="text-[12px] leading-[11px] text-white font-semibold mb-2">
              Сумма
            </span>
            <span className="text-[15px] leading-[13px] text-white font-semibold">
              {request.amount || "2000 ₽"}
            </span>
          </div>
          <div className="w-full h-[40px] bg-[#90D2F9] rounded-full flex flex-col items-center justify-center">
            <span className="text-[12px] leading-[11px] text-white font-semibold mb-2">
              Выполнить до
            </span>
            <span className="text-[15px] leading-[13px] text-white font-semibold">
              {request.deadline || "17:00"}
            </span>
          </div>
        </div>

        {/* Список покупок / описание */}
        <div className="w-full bg-[#E4E4E4] rounded-[20px] px-3 py-3 mb-3 max-h-[40vh] overflow-y-auto">
          <p className="text-[15px] leading-[20px] font-montserrat text-black whitespace-pre-line">
            {request.description ||
              "Необходимо приобрести:\n1. Белый хлеб\n2. Молоко\n3. Колбаса\n4. Фрукты"}
          </p>
        </div>

        {/* Данные человека */}
        <div className="w-full flex flex-col gap-3 mb-4">
          <p className="font-montserrat text-[20px] leading-[19px] font-medium">
            Данные:
          </p>
          <p className="text-[20px] leading-[12px] font-montserrat">
            ФИО: {request.fullName || "Клавдия Березова"}
          </p>
          <p className="text-[15px] leading-[12px] font-montserrat">
            Место: {request.address}
          </p>
          {request.flat && (
            <p className="text-[10px] leading-[12px] font-montserrat">
              кв: {request.flat}
            </p>
          )}
          {request.floor && (
            <p className="text-[10px] leading-[12px] font-montserrat">
              Этаж: {request.floor}
            </p>
          )}
        </div>

        {/* Кнопка отклика внизу */}
        <button
          type="button"
          onClick={() => onAccept(request)}
          className="mt-auto w-full h-[40px] bg-[#94E067] rounded-[10px] flex items-center justify-center"
        >
          <span className="font-montserrat font-bold text-[16px] leading-[19px] text-white">
            Откликнуться
          </span>
        </button>
      </div>
    </div>
  );
};

export default AcceptPopup;