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

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

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

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

    const handleSubmit = () => {
        console.log("Оставить отзыв:", {
            id: request.id,
            status: request.status,
            rating,
            review,
            rejectFeedback,
        });
        onClose();
    };

    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>

                    {/* ВЫПОЛНЕНА: голубой блок с отзывом как было */}
                    {isDone && (
                        <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="Напишите, как прошла помощь"
                            />
                        </div>
                    )}

                    {/* ОТКЛОНЕНА: причина отказа + комментарий, без изменения размеров */}
                    {isRejected && (
                        <>
                            {request.rejectReason && (
                                <div className="bg-[#FF8282] rounded-2xl p-3">
                                    <p className="font-montserrat font-bold text-[12px] text-white mb-1">
                                        Причина отказа
                                    </p>
                                    <p className="font-montserrat text-[12px] text-white">
                                        {request.rejectReason}
                                    </p>
                                </div>
                            )}

                            <div className="flex flex-col gap-1">
                                <p className="font-montserrat font-bold text-[12px] text-black">
                                    Ваш комментарий
                                </p>
                                <textarea
                                    value={rejectFeedback}
                                    onChange={(e) => setRejectFeedback(e.target.value)}
                                    rows={4}
                                    className="w-full rounded-2xl px-3 py-2 text-sm font-montserrat text-black placeholder:text-black/40 outline-none resize-none border border-[#FF8282]"
                                    placeholder="Расскажите, что можно улучшить"
                                />
                            </div>
                        </>
                    )}

                    {/* Оценка волонтёра — только для выполненной */}
                    {/* Оценка волонтера */}
                    {isDone && (
                        <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 || isRejected) && (
                <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">
                        {isRejected ? "Отправить комментарий" : "Оставить отзыв"}
                    </span>
                </button>
            )}
        </div>
    );
};

export default RequestDetailsModal;