"use client";

import React, { useState } from "react";

const ModeratorRequestModal = ({ request, onClose, onApprove, onReject }) => {
    const [showRejectPopup, setShowRejectPopup] = useState(false);
    const [rejectReason, setRejectReason] = useState("");

    const isApproved = request.status === "Принята";
    const isRejected = request.status === "Отклонена";
    const isPending = !isApproved && !isRejected; // на модерации

    const handleApprove = () => {
        onApprove?.({ ...request, status: "Принята" });
        onClose();
    };

    const handleRejectConfirm = () => {
        onReject?.({
            ...request,
            status: "Отклонена",
            rejectReason: rejectReason,
        });
        setShowRejectPopup(false);
        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-8 h-8 rounded-full flex items-center justify-center text-xl"
                    >
                        ←
                    </button>
                    <p className="flex-1 text-center font-montserrat font-extrabold text-[20px] leading-[24px] text-white">
                        Заявка от {request.date || "28.11.25"}
                    </p>
                    <span className="w-8" />
                </div>

                {/* белая карточка во всю ширину контейнера */}
                <div className="flex-1 flex items-start justify-center">
                    <div className="w-full max-w-[400px] bg-white rounded-2xl p-4 flex flex-col gap-4 shadow-lg">
                        {/* верхняя полоса: Описание + Дата + Время */}
                        <div className="flex flex-col gap-2">
                            <div className="w-full bg-[#72B8E2] rounded-[10px] px-3 py-2 flex items-center justify-between">
                                <span className="text-[14px] font-montserrat font-bold text-white">
                                    Описание
                                </span>
                                <div className="flex gap-2">
                                    <div className="min-w-[80px] bg-[#72B8E2] rounded-[10px] flex flex-col items-center justify-center border border-white/30 px-2 py-1">
                                        <span className="text-[12px] font-montserrat font-bold text-white">
                                            Дата
                                        </span>
                                        <span className="text-[10px] font-montserrat text-white">
                                            {request.date || "28.11.2025"}
                                        </span>
                                    </div>
                                    <div className="min-w-[80px] bg-[#72B8E2] rounded-[10px] flex flex-col items-center justify-center border border-white/30 px-2 py-1">
                                        <span className="text-[12px] font-montserrat font-bold text-white">
                                            Время
                                        </span>
                                        <span className="text-[10px] font-montserrat text-white">
                                            {request.time || "13:00"}
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {/* блок ФИО / адрес */}
                        <div className="w-full bg-[#72B8E2] rounded-[10px] px-3 py-2 flex flex-col gap-1">
                            <span className="text-[14px] font-montserrat font-bold text-white">
                                ФИО
                            </span>
                            <p className="text-[12px] font-montserrat text-white leading-[16px]">
                                {request.fullName || "Клавдия Березова"}
                            </p>
                            <p className="text-[12px] font-montserrat text-white leading-[14px]">
                                {request.address || "г. Пермь, ул. Ленина 50"}
                            </p>
                        </div>

                        {/* статус + сроки */}
                        <div className="flex items-center justify-between">
                            <div
                                className={`px-3 py-1 rounded-[10px] flex items-center justify-center ${isApproved
                                        ? "bg-[#94E067]"
                                        : isRejected
                                            ? "bg-[#E06767]"
                                            : "bg-[#E9D171]"
                                    }`}
                            >
                                <span className="text-[12px] font-montserrat font-semibold text-black">
                                    {isApproved
                                        ? "Принята"
                                        : isRejected
                                            ? "Отклонена"
                                            : "Модерация"}
                                </span>
                            </div>
                            <div className="flex flex-col items-end text-[12px] font-montserrat font-light text-black leading-[14px]">
                                <span>До {request.deadline || "28.11.2025"}</span>
                                <span>{request.deadlineTime || "13:00"}</span>
                            </div>
                        </div>

                        {/* Заголовок задачи */}
                        <p className="text-[16px] leading-[20px] font-montserrat font-semibold text-black">
                            {request.title || "Приобрести продукты пенсионерке"}
                        </p>

                        {/* краткое описание / товары */}
                        {request.description && (
                            <div className="flex-1 bg-[#F2F2F2] rounded-[10px] px-3 py-2 overflow-y-auto">
                                <p className="text-[12px] leading-[16px] font-montserrat text-black whitespace-pre-line">
                                    {request.description}
                                </p>
                            </div>
                        )}

                        {/* если заявка уже отклонена — показать причину */}
                        {isRejected && (
                            <div className="w-full bg-[#FFE2E2] rounded-[10px] px-3 py-2">
                                <p className="text-[14px] font-montserrat font-bold text-[#E06767] mb-1">
                                    Причина отклонения
                                </p>
                                <p className="text-[12px] font-montserrat text-black whitespace-pre-line">
                                    {request.rejectReason && request.rejectReason.trim().length > 0
                                        ? request.rejectReason
                                        : "Причина не указана"}
                                </p>
                            </div>
                        )}
                    </div>
                </div>

                {/* нижняя панель с кнопками — только если заявка ещё на модерации */}
                {isPending && (
                    <div className="mt-4 w-full max-w-[400px] mx-auto flex items-center justify-between gap-3">
                        <button
                            type="button"
                            onClick={handleApprove}
                            className="flex-1 h-10 bg-[#94E067] rounded-[10px] flex items-center justify-center"
                        >
                            <span className="text-[14px] font-montserrat font-bold text-white">
                                Принять
                            </span>
                        </button>
                        <button
                            type="button"
                            onClick={() => setShowRejectPopup(true)}
                            className="flex-1 h-10 bg-[#E06767] rounded-[10px] flex items-center justify-center"
                        >
                            <span className="text-[14px] font-montserrat font-bold text-white">
                                Отклонить
                            </span>
                        </button>
                    </div>
                )}
            </div>

            {/* попап причины отказа во весь экран */}
            {showRejectPopup && (
                <div className="fixed inset-0 z-50 flex flex-col bg-[rgba(101,101,101,0.72)] px-4 pt-8 pb-6">
                    <div className="w-full max-w-[400px] mx-auto bg-white rounded-t-[15px] flex flex-col items-center px-4 pt-4 pb-4">
                        {/* заголовок */}
                        <p className="font-montserrat font-bold text-[20px] leading-[24px] text-black mb-3">
                            Причина
                        </p>

                        {/* голубой блок с текстом */}
                        <div className="w-full bg-[#72B8E2] rounded-[10px] px-3 py-3 mb-4 max-h-[50vh]">
                            <textarea
                                value={rejectReason}
                                onChange={(e) => setRejectReason(e.target.value)}
                                className="w-full h-full bg-transparent text-[14px] leading-[18px] font-montserrat text-black placeholder:text-black/60 outline-none resize-none"
                                placeholder="Опишите причину отклонения заявки"
                            />
                        </div>

                        {/* кнопки */}
                        <div className="w-full flex flex-col gap-2">
                            <button
                                type="button"
                                onClick={handleRejectConfirm}
                                className="w-full h-10 bg-[#E06767] rounded-[10px] flex items-center justify-center"
                            >
                                <span className="text-[16px] font-montserrat font-bold text-white">
                                    Подтвердить
                                </span>
                            </button>
                            <button
                                type="button"
                                onClick={() => setShowRejectPopup(false)}
                                className="w-full h-10 bg-white rounded-[10px] border border-[#E06767] flex items-center justify-center"
                            >
                                <span className="text-[14px] font-montserrat font-semibold text-[#E06767]">
                                    Отмена
                                </span>
                            </button>
                        </div>
                    </div>
                </div>
            )}
        </>
    );
};

export default ModeratorRequestModal;