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

const RequestDetailsModal = ({ request, onClose }) => {
    const isDone = request.status === "Выполнена";
    const isInProgress = 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.status,
            rating,
            review,
        });
        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>

                    {/* Полная информация о заявке */}
                    <div className="flex flex-col gap-1 text-[12px] font-montserrat text-black">
                        <p>ФИО: {request.fullName}</p>
                        <p>Адрес: {request.address}</p>
                        {request.flat && <p>Квартира: {request.flat}</p>}
                        {request.floor && <p>Этаж: {request.floor}</p>}
                        {request.phone && <p>Телефон: {request.phone}</p>}
                        {request.amount && <p>Сумма: {request.amount}</p>}
                        {request.deadline && <p>Выполнить до: {request.deadline}</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;