import React, { useState, useEffect } from "react";
import { BiEdit } from "react-icons/bi";
import Vector9 from "../../assets/icons/Vector9.svg";
import Star1 from "../../assets/icons/Star1.svg";
import Group from "../../assets/icons/Group.svg";
import Pic1 from "../../assets/icons/pic1.svg";
import { Link } from "react-router-dom";
import cafeService from "../../services/cafe";

const CafeManagement = () => {
    const [cafes, setCafes] = useState([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState("");

    // دریافت لیست کافه‌ها از API
    useEffect(() => {
        const fetchCafes = async () => {
            setLoading(true);
            setError("");

            try {
                const res = await cafeService.getCafeList();
                if (res.data.success && res.data.data) {
                    setCafes(res.data.data);
                } else {
                    setError("داده‌های دریافتی معتبر نیست");
                }
                console.log("✅ Cafes loaded successfully:", res.data);
            } catch (error) {
                if (error.response) {
                    setError(error.response.data.message || "خطا در دریافت لیست کافه‌ها");
                } else if (error.request) {
                    setError("خطا در برقراری ارتباط با سرور");
                } else {
                    setError("خطای نامشخص رخ داده است");
                }
                console.error("❌ Error loading cafes:", error);
            } finally {
                setLoading(false);
            }
        };

        fetchCafes();
    }, []);

    return (
        <section dir="rtl" className="-mt-12 w-full max-w-full overflow-x-hidden">
            {/* دکمه افزودن */}
            <div className="flex items-center justify-between">
                <button className="w-45 h-12 bg-[#7F4629] text-white mt-8 rounded-3xl flex items-center justify-center gap-3 hover:bg-amber-950 transition-all cursor-pointer">
                    <p className="-mt-0.5">افزودن شعبه جدید</p>
                    <img src={Vector9} alt="لوگو" />
                </button>
            </div>

            {/* عنوان */}
            <h3 className="text-[#402E32] w-[90%] font-bold mt-10">کافه های شما</h3>

            {/* نمایش خطا */}
            {error && (
                <div className="bg-red-50 border-2 border-red-300 text-red-700 px-4 py-3 rounded-xl mt-4">
                    {error}
                </div>
            )}

            {/* نمایش لودینگ */}
            {loading ? (
                <div className="flex justify-center items-center mt-20">
                    <div className="text-[#7F4629] text-xl font-bold">در حال بارگذاری...</div>
                </div>
            ) : (
                <>
                    {/* هدر جدول */}
                    <div className="mt-10 hidden md:grid grid-cols-6 gap-x-42 bg-[#EFEEEE] px-4 py-3 rounded-xl text-[#402E32] font-medium">
                        <h3>لوگو</h3>
                        <h3>اسم</h3>
                        <h3>آدرس</h3>
                        <h3>ریتینگ</h3>
                        <h3>ساعت کاری</h3>
                        <h3>ادیت</h3>
                    </div>

                    {/* ردیف‌های جدول - دسکتاپ */}
                    {cafes.length > 0 ? (
                        <>
                            {/* نمای دسکتاپ */}
                            <div className="hidden md:grid grid-cols-6 gap-y-9 gap-x-33 mt-10 text-[#402E32] font-medium pl-4">
                                {cafes.map((cafe) => (
                                    <React.Fragment key={cafe._id}>
                                        {/* لوگو */}
                                        <img
                                            src={cafe.photo || Pic1}
                                            className="w-10 h-10 rounded-full object-cover"
                                            alt="لوگو"
                                        />

                                        {/* نام */}
                                        <h3 className="whitespace-nowrap -mr-2">{cafe.Name}</h3>

                                        {/* آدرس */}
                                        <h3 className="whitespace-nowrap -mr-7 overflow-hidden text-ellipsis">
                                            {cafe.address}
                                        </h3>

                                        {/* ریتینگ */}
                                        <div className="flex gap-1 mr-5">
                                            <img className="w-6 h-6" src={Star1} alt="ستاره" />
                                            <h3>{cafe.rating || 0}</h3>
                                        </div>

                                        {/* ساعت کاری */}
                                        <div className="flex gap-1 whitespace-nowrap">
                                            <img className="w-5 h-5" src={Group} alt="لوگو" />
                                            <h3 className="-mt-1">{cafe.openinghour || "نامشخص"}</h3>
                                        </div>

                                        {/* دکمه ادیت */}
                                        <Link
                                            to={`/edit-cafe/${cafe._id}`}
                                            className="flex justify-center whitespace-nowrap gap-2 border-2 border-[#BB8F70] px-10 py-3 rounded-3xl font-light -mt-1.5 -mx-4 hover:bg-[#7F4629] hover:text-white hover:border-none cursor-pointer transition-all duration-500"
                                        >
                                            <h3>ادیت کافه</h3>
                                            <BiEdit className="w-4.5 h-4.5 mt-1.5" />
                                        </Link>
                                    </React.Fragment>
                                ))}
                            </div>

                            {/* نمای موبایل - کارت‌ها */}
                            <div className="md:hidden mt-6 space-y-4">
                                {cafes.map((cafe) => (
                                    <div key={cafe._id} className="bg-white border-2 border-[#8b8886] rounded-xl p-4">
                                        <div className="flex items-start gap-4 mb-4">
                                            <img
                                                src={cafe.photo || Pic1}
                                                className="w-16 h-16 rounded-full object-cover flex-shrink-0"
                                                alt="لوگو"
                                            />
                                            <div className="flex-1">
                                                <h3 className="font-bold text-[#402E32] mb-1">{cafe.Name}</h3>
                                                <p className="text-sm text-gray-600">{cafe.address}</p>
                                            </div>
                                        </div>

                                        <div className="flex items-center justify-between mb-3 text-sm">
                                            <div className="flex items-center gap-1">
                                                <img className="w-5 h-5" src={Star1} alt="ستاره" />
                                                <span>{cafe.rating || 0}</span>
                                            </div>
                                            <div className="flex items-center gap-1">
                                                <img className="w-4 h-4" src={Group} alt="لوگو" />
                                                <span>{cafe.openinghour || "نامشخص"}</span>
                                            </div>
                                        </div>

                                        <Link
                                            to={`/edit-cafe/${cafe._id}`}
                                            className="flex justify-center items-center gap-2 w-full border-2 border-[#BB8F70] py-2 rounded-full font-medium hover:bg-[#7F4629] hover:text-white hover:border-[#7F4629] transition-all duration-300"
                                        >
                                            <span>ادیت کافه</span>
                                            <BiEdit className="w-4 h-4" />
                                        </Link>
                                    </div>
                                ))}
                            </div>
                        </>
                    ) : (
                        <div className="text-center mt-20 text-gray-500">
                            هیچ کافه‌ای یافت نشد
                        </div>
                    )}
                </>
            )}
        </section>
    );
};

export default CafeManagement;