import React, { useState, useEffect } from "react";
import Bg1 from "../../assets/icons/bg1.svg";
import {GrLocation} from "react-icons/gr";
import {BiEdit} from "react-icons/bi";
import {FaRegStar} from "react-icons/fa";
import {PiCoffee} from "react-icons/pi";
import {IoMdTime} from "react-icons/io";
import {LuCalendar1} from "react-icons/lu";
import Vector11 from "../../assets/icons/Vector11.svg";
import Vector12 from "../../assets/icons/Vector12.svg";
import Vector13 from "../../assets/icons/Vector13.svg";
import Vector14 from "../../assets/icons/Vector14.svg";
import Vector15 from "../../assets/icons/Vector15.svg";
import Vector9 from "../../assets/icons/Vector9.svg";
import Vector16 from "../../assets/icons/Vector16.svg";
import Sperso from "../../assets/icons/sperso.svg";
import Coffee2 from "../../assets/icons/coffee2.svg";
import Coffee1 from "../../assets/icons/coffee1.svg";
import Coffee3 from "../../assets/icons/coffee3.svg";
import Edit from "../../assets/icons/edit.svg";
import { MdDelete } from "react-icons/md";
import { IoMdCheckmark, IoMdClose } from "react-icons/io";

const EditCafe = () => {
    // State برای نگهداری عنوان‌ها با localStorage
    const [categories, setCategories] = useState(() => {
        const saved = localStorage.getItem('cafeCategories');
        return saved ? JSON.parse(saved) : [
            "نوشیدنی سرد",
            "نوشیدنی گرم",
            "کیک و دسر",
            "صبحانه",
            "ساندویچ و برگر",
            "سالاد و پیش غذا",
        ];
    });

    // ذخیره تغییرات در localStorage
    useEffect(() => {
        localStorage.setItem('cafeCategories', JSON.stringify(categories));
    }, [categories]);

    // State برای فعال کردن حالت ویرایش
    const [isEditMode, setIsEditMode] = useState(false);

    // State برای مدیریت حالت اضافه کردن
    const [isAdding, setIsAdding] = useState(false);
    const [newCategory, setNewCategory] = useState("");

    // State برای مدیریت حالت ویرایش
    const [editingIndex, setEditingIndex] = useState(null);
    const [editValue, setEditValue] = useState("");

    // تابع اضافه کردن عنوان جدید
    const handleAddCategory = () => {
        if (newCategory.trim()) {
            setCategories([...categories, newCategory.trim()]);
            setNewCategory("");
            setIsAdding(false);
            // اسکرول رو به ابتدا (راست برای RTL) برمی‌گردونیم
            setTimeout(() => {
                const scrollContainer = document.querySelector('.categories-scroll');
                if (scrollContainer) {
                    // برای RTL باید scrollLeft رو به حداکثر ببریم
                    scrollContainer.scrollLeft = scrollContainer.scrollWidth;
                }
            }, 0);
        }
    };

    // تابع حذف عنوان
    const handleDeleteCategory = (index) => {
        const newCategories = categories.filter((_, i) => i !== index);
        setCategories(newCategories);
    };

    // تابع شروع ویرایش
    const handleStartEdit = (index) => {
        setEditingIndex(index);
        setEditValue(categories[index]);
    };

    // تابع ذخیره ویرایش
    const handleSaveEdit = () => {
        if (editValue.trim()) {
            const newCategories = [...categories];
            newCategories[editingIndex] = editValue.trim();
            setCategories(newCategories);
            setEditingIndex(null);
            setEditValue("");
        }
    };

    // تابع لغو ویرایش
    const handleCancelEdit = () => {
        setEditingIndex(null);
        setEditValue("");
    };

    return (
        <>
            <style>
                {`
                    .scrollbar-hide::-webkit-scrollbar {
                        display: none;
                    }
                    .scrollbar-hide {
                        -ms-overflow-style: none;
                        scrollbar-width: none;
                    }
                    body::-webkit-scrollbar {
                        display: none;
                    }
                    body {
                        -ms-overflow-style: none;
                        scrollbar-width: none;
                    }
                `}
            </style>
            <section dir="rtl">
                <h3 className="text-[#402E32] font-bold">ادیت کافه ترنج</h3>

                <div className="mt-9 border-2 border-[#8b8886] p-10 rounded-2xl flex gap-4">
                    <div>
                        <img className="w-[461px]" src={Bg1} alt="Logo"/>
                    </div>

                    <div className="relative flex flex-col gap-4.5">
                        <div className="absolute top-2 left-0 -mt-5">
                            <button
                                className="border-2 border-[#bb8f70] w-25 h-10 rounded-3xl text-[#402e32] hover:bg-[#7f4629] hover:text-white transition-all duration-300 hover:border-none">
                                انصراف
                            </button>
                            <button
                                className="border-2 border-[#bb8f70] bg-[#7f4629] text-white w-25 h-10 rounded-3xl mr-4 hover:bg-[#5f494f] transition-all duration-300 hover:border-none">
                                تایید
                            </button>
                        </div>
                        <BiEdit className="w-4.5 h-4.5 -mt-1"/>
                        <h3 className="font-bold text-base">کافه ترنج</h3>
                        <hr className="w-38 -mt-3 border-1 text-[#80931e]"/>
                        <div className="flex items-center gap-2">
                            <GrLocation/>
                            <span className="text-base">اصفهان - خیابان آذر </span>
                        </div>
                        <hr className="w-38 -mt-3 border-1 text-[#80931e]"/>

                        <div className="flex items-center gap-2">
                            <FaRegStar/>
                            <span className="text-base">3.9</span>
                        </div>
                        <h3 className="font-bold text-base">درباره کافه</h3>
                        <span className="text-base">
                        کافه ترنج، یک کافی شاپ با محیطی دنج و دلچسب در شهر اصفهان و یکی از
                        ممتازترین کافی‌ شاپ‌های ابن شهر است. از جمله خدمات این کافه می‌توان
                        به اینترنت رایگان و ارائه کتاب‌هایی برای مطالعه در داخل کافه اشاره
                        کرد.
                    </span>
                        <hr className="w-[104%] -mt-3 border-1 text-[#80931e]"/>

                        <h3 className="text-[#402E32] font-bold mt-10 relative -right-64">
                            ویژگی ها
                        </h3>

                        <div className="relative -mr-71 -ml-7 mt-5 flex gap-3">
                            <div
                                className="bg-[#e1d5c2] w-[140px] h-[137.6px] flex flex-col items-center gap-8 text-center rounded-4xl transform hover:-translate-y-1 transition-all duration-300 hover:shadow-md">
                                <img src={Coffee3} className="w-6 h-6 text-[#402E32] mt-5"/>
                                <span className="text-[#402E32] font-medium whitespace-nowrap">
                                منو کافه:
                            </span>
                            </div>

                            <div
                                className="flex flex-col gap-4 text-[#402E32] font-medium w-[161.5px] h-[137.6px] bg-[#e1d5c2] rounded-4xl pr-3 transform hover:-translate-y-1 transition-all duration-300 hover:shadow-md">
                                <img src={Vector15} className="w-6 h-6 text-[#402E32] mt-5"/>
                                <span>ساعت کاری:</span>
                                <span> 23 - 8</span>
                            </div>

                            <div
                                className="flex flex-col gap-4 text-[#402E32] font-medium w-[161.5px] h-[137.6px] bg-[#e1d5c2] rounded-4xl pr-3 transform hover:-translate-y-1 transition-all duration-300 hover:shadow-md">
                                <img src={Vector14} className="w-6 h-6 text-[#402E32] mt-5"/>
                                <span>رزرو :</span>
                                <span>رزرو آنلاین</span>
                            </div>
                            <div
                                className="flex flex-col gap-4 text-[#402E32] font-medium w-[170.5px] h-[137.6px] bg-[#e1d5c2] rounded-4xl pr-3 transform hover:-translate-y-1 transition-all duration-300 hover:shadow-md">
                                <img src={Vector11} className="w-6 h-6 text-[#402E32] mt-5"/>
                                <span>موسیقی :</span>
                                <span>موسیقی زنده آخر هفته</span>
                            </div>

                            <div
                                className="flex flex-col gap-4 text-[#402E32] font-medium w-[161.5px] h-[137.6px] bg-[#e1d5c2] rounded-4xl pr-3 transform hover:-translate-y-1 transition-all duration-300 hover:shadow-md">
                                <img src={Vector13} className="w-6 h-6 text-[#402E32] mt-5"/>
                                <span>پارکینگ :</span>
                                <span>عمومی</span>
                            </div>

                            <div
                                className="flex flex-col gap-4 text-[#402E32] font-medium w-[161.5px] h-[137.6px] bg-[#e1d5c2] rounded-4xl pr-3 transform hover:-translate-y-1 transition-all duration-300 hover:shadow-md">
                                <img src={Vector12} className="w-6 h-6 text-[#402E32] mt-5"/>
                                <span>دسترسی آسان :</span>
                                <span>مناسب افراد ناتوان</span>
                            </div>

                            <div
                                className="flex justify-center items-center w-[150.5px] h-[137.6px] bg-[#5e5450] rounded-4xl transform hover:-translate-y-1 transition-all duration-300 hover:shadow-md">
                                <img src={Vector9} className="w-6 h-6 text-[#402E32]"/>
                            </div>
                        </div>
                        <div>
                            <div className="mt-10 -mr-64 text-[#402E32] font-medium w-[132%]">
                                <div className="flex items-center gap-4">
                                    <div className="max-w-[930px] overflow-hidden flex-1">
                                        <div className="categories-scroll flex gap-10 overflow-x-auto scrollbar-hide">
                                            <div className="flex items-center gap-2 justify-center flex-shrink-0">
                                                <img
                                                    src={Vector16}
                                                    alt="Logo"
                                                    className="cursor-pointer hover:opacity-70 transition-opacity"
                                                    onClick={() => setIsEditMode(!isEditMode)}
                                                    title={isEditMode ? "خروج از حالت ویرایش" : "ویرایش عنوان‌ها"}
                                                />
                                                <span className="whitespace-nowrap">عنوان</span>
                                            </div>

                                            {!isEditMode ? (
                                                // حالت عادی - فقط نمایش عنوان‌ها
                                                <>
                                                    {categories.map((category, index) => (
                                                        <span key={index} className="whitespace-nowrap flex-shrink-0">{category}</span>
                                                    ))}
                                                </>
                                            ) : (
                                                // حالت ویرایش - نمایش دکمه‌های ویرایش و حذف بالای عنوان
                                                <>
                                                    {categories.map((category, index) => (
                                                        <div key={index} className="flex flex-col items-center gap-1 flex-shrink-0">
                                                            {editingIndex === index ? (
                                                                // حالت ویرایش
                                                                <>
                                                                    <div className="flex items-center gap-1 mb-1">
                                                                        <IoMdCheckmark
                                                                            className="text-green-600 cursor-pointer hover:text-green-800 w-4 h-4 flex-shrink-0"
                                                                            onClick={handleSaveEdit}
                                                                            title="ذخیره"
                                                                        />
                                                                        <IoMdClose
                                                                            className="text-red-600 cursor-pointer hover:text-red-800 w-4 h-4 flex-shrink-0"
                                                                            onClick={handleCancelEdit}
                                                                            title="لغو"
                                                                        />
                                                                    </div>
                                                                    <input
                                                                        type="text"
                                                                        value={editValue}
                                                                        onChange={(e) => setEditValue(e.target.value)}
                                                                        className="border-2 border-[#bb8f70] rounded-lg px-2 py-1 text-sm focus:outline-none focus:border-[#7f4629] w-[100px] text-center"
                                                                        autoFocus
                                                                    />
                                                                </>
                                                            ) : (
                                                                // حالت عادی - آیکن‌ها بالای عنوان
                                                                <>
                                                                    <div className="flex items-center gap-1 mb-1">
                                                                        <BiEdit
                                                                            className="text-[#7f4629] cursor-pointer hover:text-[#5f494f] w-4 h-4 flex-shrink-0"
                                                                            onClick={() => handleStartEdit(index)}
                                                                            title="ویرایش"
                                                                        />
                                                                        <MdDelete
                                                                            className="text-red-600 cursor-pointer hover:text-red-800 w-4 h-4 flex-shrink-0"
                                                                            onClick={() => handleDeleteCategory(index)}
                                                                            title="حذف"
                                                                        />
                                                                    </div>
                                                                    <span className="whitespace-nowrap">{category}</span>
                                                                </>
                                                            )}
                                                        </div>
                                                    ))}
                                                </>
                                            )}
                                        </div>
                                    </div>

                                    {/* دکمه اضافه کردن عنوان جدید - بیرون از container اسکرول */}
                                    {isEditMode && (
                                        <div className="flex-shrink-0" style={{minWidth: '120px'}}>
                                            {!isAdding ? (
                                                <button
                                                    onClick={() => setIsAdding(true)}
                                                    className="text-[#7f4629] hover:text-[#5f494f] font-bold transition-colors whitespace-nowrap w-full"
                                                    title="اضافه کردن عنوان جدید"
                                                >
                                                    + افزودن
                                                </button>
                                            ) : (
                                                <div className="flex flex-col items-center gap-1">
                                                    <div className="flex items-center gap-1 mb-1">
                                                        <IoMdCheckmark
                                                            className="text-green-600 cursor-pointer hover:text-green-800 w-4 h-4 flex-shrink-0"
                                                            onClick={handleAddCategory}
                                                            title="ذخیره"
                                                        />
                                                        <IoMdClose
                                                            className="text-red-600 cursor-pointer hover:text-red-800 w-4 h-4 flex-shrink-0"
                                                            onClick={() => {
                                                                setIsAdding(false);
                                                                setNewCategory("");
                                                            }}
                                                            title="لغو"
                                                        />
                                                    </div>
                                                    <input
                                                        type="text"
                                                        value={newCategory}
                                                        onChange={(e) => setNewCategory(e.target.value)}
                                                        placeholder="عنوان جدید"
                                                        className="border-2 border-[#bb8f70] rounded-lg px-2 py-1 text-sm focus:outline-none focus:border-[#7f4629] w-[100px] text-center"
                                                        autoFocus
                                                    />
                                                </div>
                                            )}
                                        </div>
                                    )}
                                </div>
                            </div>
                            <hr className="w-[132%] -mr-66 mt-3 border-2 rounded-3xl  text-[#939393]"/>

                            <div className="mt-9 flex items-center gap-2 -mr-64 text-[#a79fa1] font-bold">
                                <img src={Vector16} alt="Logo"/>
                                <h3>افزودن زیر عنوان</h3>
                            </div>

                            <div className="mt-9 flex items-center gap-2 -mr-64 text-[#66585b] font-bold">
                                <img className="w-5.5 h-5.5" src={Edit} alt="Logo"/>
                                <img className="w-6 h-6" src={Coffee3} alt="Logo"/>
                                <h3>قهوه ها</h3>
                                <hr className="mt-9 -mr-15 w-[5%] border-1 text-[#80931e]"/>
                            </div>

                            <div className="mt-9 flex items-center gap-2 -mr-64 text-[#66585b] font-bold">
                                <img src={Vector16} alt="Logo"/>
                                <h3>آیتم</h3>
                            </div>

                            <div className="grid grid-cols-3 gap-5 -mr-64">
                                <div
                                    className="mt-13 flex items-center flex-col justify-center w-[320px] h-[391px] transform hover:-translate-y-1 transition-all duration-300 hover:shadow-md">
                                    <h1 className="text-[#402E32] font-bold  -mr-50">اسپرسو100%</h1>
                                    <img src={Sperso} alt="Logo" className="mt-5"/>
                                    <div className="flex justify-between gap-50 mt-3 text-[#66585b] font-medium">
                                        <span>قیمت</span>
                                        <span>118.000</span>
                                    </div>
                                    <span className="font-light text-[#66585b] mt-2 break-words mr-4 text-[14.90px]">
                                  45 میلی لیتر، قهوه، 100% عربیکا، دم شده با دستگاه اسپرسو ساز،
                                  به همراه یک عدد آب معدنی مینی
                                </span>
                                    <hr className="mt-5 w-[90%] border-3 rounded-4xl text-[#e6e2de]"/>
                                </div>

                                <div
                                    className="mt-10 flex items-center flex-col justify-center w-[320px] h-[391px] transform hover:-translate-y-1 transition-all duration-300 hover:shadow-md">
                                    <h1 className="text-[#402E32] font-bold  -mr-50">
                                        کارامل ماکیاتو
                                    </h1>
                                    <img src={Coffee1} alt="Logo" className="mt-5"/>
                                    <div className="flex justify-between gap-50 mt-3 text-[#66585b] font-medium">
                                        <span>قیمت</span>
                                        <span>149.000</span>
                                    </div>
                                    <span className="font-light text-[#66585b] mt-2 break-words mr-4 text-[14.90px]">
                                  220 میلی لیتر، 2 شات اسپرسو 30% روبوستا، 70% عربیکا، یک لکه
                                  فوم شیر، سیروپ کارامل
                                </span>
                                    <hr className="mt-5 w-[90%] border-3 rounded-4xl text-[#e6e2de]"/>
                                </div>

                                <div
                                    className="mt-10 flex items-center flex-col justify-center w-[320px] h-[391px] transform hover:-translate-y-1 transition-all duration-300 hover:shadow-md">
                                    <h1 className="text-[#402E32] font-bold  -mr-47">
                                        اسپرسو آفوگاتو
                                    </h1>
                                    <img src={Coffee2} alt="Logo" className="mt-5"/>
                                    <div className="flex justify-between gap-50 mt-3 text-[#66585b] font-medium">
                                        <span>قیمت</span>
                                        <span>118.000</span>
                                    </div>
                                    <span
                                        className="font-light text-[#66585b] mt-2 mb-10 break-words -mr-23 text-[14.90px]">
                                  اسپرسو، یک اسکوپ بستنی وانیلی
                                </span>
                                    <hr className=" mt- w-[90%] border-3 rounded-4xl text-[#e6e2de]"/>
                                </div>

                                <div
                                    className="mt-10 flex items-center flex-col justify-center w-[320px] h-[391px] transform hover:-translate-y-1 transition-all duration-300 hover:shadow-md">
                                    <h1 className="text-[#402E32] font-bold  -mr-47">
                                        اسپرسو آفوگاتو
                                    </h1>
                                    <img src={Coffee2} alt="Logo" className="mt-5"/>
                                    <div className="flex justify-between gap-50 mt-3 text-[#66585b] font-medium">
                                        <span>قیمت</span>
                                        <span>118.000</span>
                                    </div>
                                    <span
                                        className="font-light text-[#66585b] mt-2 mb-10 break-words -mr-23 text-[14.90px]">
                                  اسپرسو، یک اسکوپ بستنی وانیلی
                                </span>
                                    <hr className=" mt- w-[90%] border-3 rounded-4xl text-[#e6e2de]"/>
                                </div>

                                <div
                                    className="mt-10 flex items-center flex-col justify-center w-[320px] h-[391px] transform hover:-translate-y-1 transition-all duration-300 hover:shadow-md">
                                    <h1 className="text-[#402E32] font-bold  -mr-47">
                                        اسپرسو آفوگاتو
                                    </h1>
                                    <img src={Coffee2} alt="Logo" className="mt-5"/>
                                    <div className="flex justify-between gap-50 mt-3 text-[#66585b] font-medium">
                                        <span>قیمت</span>
                                        <span>118.000</span>
                                    </div>
                                    <span
                                        className="font-light text-[#66585b] mt-2 mb-10 break-words -mr-23 text-[14.90px]">
                                    اسپرسو، یک اسکوپ بستنی وانیلی
                                </span>
                                    <hr className=" mt- w-[90%] border-3 rounded-4xl text-[#e6e2de]"/>
                                </div>

                                <div
                                    className="mt-10 flex items-center flex-col justify-center w-[320px] h-[391px] transform hover:-translate-y-1 transition-all duration-300 hover:shadow-md">
                                    <h1 className="text-[#402E32] font-bold  -mr-47">
                                        اسپرسو آفوگاتو
                                    </h1>
                                    <img src={Coffee2} alt="Logo" className="mt-5"/>
                                    <div className="flex justify-between gap-50 mt-3 text-[#66585b] font-medium">
                                        <span>قیمت</span>
                                        <span>118.000</span>
                                    </div>

                                    <span
                                        className="font-light text-[#66585b] mt-2 mb-10 break-words -mr-23 text-[14.90px]">
                                    اسپرسو، یک اسکوپ بستنی وانیلی
                                </span>
                                    <hr className=" mt- w-[90%] border-3 rounded-4xl text-[#e6e2de]"/>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </>
    );
};

export default EditCafe;