frontend/app/components/ValounterRequestDetailsModal.jsx

"use client";

import React, { useState } from "react";
import { FaStar } from "react-icons/fa";

const RequestDetailsModal = ({ request, onClose }) => {
  const isDone = request.rawStatus === "completed" || request.status === "Выполнена";
  const isInProgress =
    request.rawStatus === "in_progress" || request.status === "В процессе";

  const [rating, setRating] = useState(0);
  const [review, setReview] = useState("");

  const handleStarClick = (value) => {
    setRating(value);
  };

  const handleSubmit = () => {
    console.log("Отправить отзыв волонтёра:", {
      id: request.id,
      status: request.rawStatus,
      rating,
      review,
    });
    onClose();
  };

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

  const place = [request.address, request.city].filter(Boolean).join(", ");
  const requesterName = request.requesterName || "Заявитель";

  return (
    <div className="fixed inset-0 z-40 flex flex-col bg-[#90D2F9] px-4 pt-4 pb-20">
      {/* Хедер */}
      <div className="flex items-center gap-2 mb-3">
        <button
          type="button"
          onClick={onClose}
          className="text-white w-7 h-7 rounded-full flex items-center justify-center text-lg"
        >
          ←
        </button>
        <p className="flex-1 text-center font-montserrat font-extrabold text-[20px] leading-[24px] text-white">
          Заявка от {request.createdAt}
        </p>
        <span className="w-7" />
      </div>

      {/* Карточка */}
      <div className="flex-1 flex items-start justify-center">
        <div className="w-full max-w-[360px] bg-white rounded-2xl p-4 flex flex-col gap-4 shadow-lg">
          {/* Статус + дата/время */}
          <div className="flex items-start justify-between">
            <span
              className="inline-flex items-center justify-center px-3 py-1 rounded-full font-montserrat text-[10px] font-semibold text-white"
              style={{ backgroundColor: request.statusColor }}
            >
              {request.status}
            </span>
            <div className="text-right leading-tight">
              <p className="font-montserrat text-[10px] text-black">
                {request.date}
              </p>
              <p className="font-montserrat text-[10px] text-black">
                {request.time}
              </p>
            </div>
          </div>

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

          {/* Полная информация о заявке */}
          <div className="flex flex-col gap-1 text-[12px] font-montserrat text-black">
            <p>Тип: {request.requestTypeName || "Не указан"}</p>
            <p>Заявитель: {request.requesterName || requesterName}</p>
            <p>Адрес: {place || "Не указан"}</p>
            {urgencyText && <p>Срочность: {urgencyText}</p>}
          </div>

          {/* Описание / список покупок */}
          {request.description && (
            <div className="bg-[#E4E4E4] rounded-2xl px-3 py-2 max-h-[140px] overflow-y-auto">
              <p className="text-[11px] leading-[13px] font-montserrat whitespace-pre-line">
                {request.description}
              </p>
            </div>
          )}

          {/* Блок отзыва + рейтинг — и для Выполнена, и для В процессе */}
          {(isDone || isInProgress) && (
            <>
              <div className="bg-[#72B8E2] rounded-3xl p-3 flex flex-col gap-2">
                <p className="font-montserrat font-bold text-[12px] text-white">
                  Отзыв
                </p>
                <textarea
                  value={review}
                  onChange={(e) => setReview(e.target.value)}
                  rows={4}
                  className="w-full bg-[#72B8E2] rounded-2xl px-3 py-2 text-sm font-montserrat text-white placeholder:text.white/70 outline-none resize-none border border-white/20"
                  placeholder={
                    isDone
                      ? "Напишите, как прошла помощь"
                      : "Напишите, как сейчас идёт выполнение"
                  }
                />
              </div>

              <div className="mt-1 flex flex-col items-center gap-2">
                <p className="font-montserrat font-semibold text-[14px] text-black">
                  Оценить заявителя
                </p>
                <div className="flex gap-2">
                  {[1, 2, 3, 4, 5].map((star) => (
                    <button
                      key={star}
                      type="button"
                      onClick={() => handleStarClick(star)}
                      className="text-[#F6E168]"
                    >
                      <FaStar
                        size={26}
                        className={
                          star <= rating ? "fill-[#F6E168]" : "fill-[#F6E168]/40"
                        }
                      />
                    </button>
                  ))}
                </div>
              </div>
            </>
          )}
        </div>
      </div>

      {/* Кнопка внизу */}
      {(isDone || isInProgress) && (
        <button
          type="button"
          onClick={handleSubmit}
          className="mt-4 w-full max-w-[360px] mx-auto bg-[#94E067] rounded-2xl py-3 flex.items-center justify-center"
        >
          <span className="font-montserrat font-extrabold text-[16px] text-white">
            {isDone ? "Оставить отзыв" : "Сохранить прогресс"}
          </span>
        </button>
      )}
    </div>
  );
};

export default RequestDetailsModal;