"use client";

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

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

  const title = request.title;
  const description =
    request.description ||
    "Описание недоступно. Откройте заявку для подробностей.";

  const baseAddress = request.address || "Адрес не указан";
  const city = request.city ? `, ${request.city}` : "";
  const place = `${baseAddress}${city}`;

  const deadline = request.desired_completion_date
    ? new Date(request.desired_completion_date).toLocaleString("ru-RU", {
        day: "2-digit",
        month: "2-digit",
        hour: "2-digit",
        minute: "2-digit",
      })
    : "Не указано";

  const phone = request.contact_phone || request.phone;
  const contactNotes = request.contact_notes || request.contactNotes;

  const urgencyText = (() => {
    switch (request.urgency) {
      case "low":
        return "Низкая";
      case "medium":
        return "Средняя";
      case "high":
        return "Высокая";
      case "urgent":
        return "Срочно";
      default:
        return null;
    }
  })();

  const handleClick = () => {
    // здесь видно, с каким id ты стучишься в /requests/{id}/responses
    console.log("Отклик на заявку из попапа:", {
      id: request.id,
      title: request.title,
      raw: request,
    });
    onAccept(request);
  };

  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">
          {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">
              {deadline}
            </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">
            {description}
          </p>

          {urgencyText && (
            <p className="mt-2 text-[12px] leading-[16px] font-montserrat text-black">
              <span className="font-semibold">Срочность: </span>
              {urgencyText}
            </p>
          )}
          {phone && (
            <p className="text-[12px] leading-[16px] font-montserrat text-black">
              <span className="font-semibold">Телефон: </span>
              {phone}
            </p>
          )}
          {contactNotes && (
            <p className="text-[12px] leading-[16px] font-montserrat text-black">
              <span className="font-semibold">Комментарий к контакту: </span>
              {contactNotes}
            </p>
          )}
          {error && (
            <p className="mt-2 text-[12px] leading-[16px] font-montserrat text-red-500">
              {error}
            </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-[15px] leading-[12px] font-montserrat">
            Место: {place}
          </p>
        </div>

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

export default AcceptPopup;