import {
  Box,
  Paper,
  Typography,
  Divider,
  Card,
  CardContent,
  TextField,
  Chip,
  Button,
} from "@mui/material";
import { Grid } from "../components/grid/Grid";
import { BackButton } from "../components/back-button/BackButton";
import { ButtonWithIcon } from "../components/button-with-icon/ButtonWithIcon";
import { Timer } from "../components/timer/Timer";
import { LineWithText } from "../components/line-with-text/LineWithText";
import CustomCard from "../components/custom-card/CustomCard";
import Captcha from "../components/captcha/Captcha";
import { DialogAlert } from "../components/dialog-alert/DialogAlert";
import { SimpleTable } from "../components/simple-table/SimpleTable";
import ResponsiveTable from "../components/responsive-table/ResponsiveTable";
import ChartBar from "../components/chart-bar/ChartBar";
import ChartPie from "../components/chart-pie/ChartPie";
import ChartLinear from "../components/chart-linear/ChartLenear";
import ChartDoughnut from "../components/chart-doughnut/ChartDoughnut";

// Icons
import HomeIcon from "@mui/icons-material/Home";
import AddIcon from "@mui/icons-material/Add";
import SearchIcon from "@mui/icons-material/Search";
import DeleteIcon from "@mui/icons-material/Delete";
import EditIcon from "@mui/icons-material/Edit";
import SaveIcon from "@mui/icons-material/Save";
import SettingsIcon from "@mui/icons-material/Settings";
import PersonIcon from "@mui/icons-material/Person";

import { useState, useContext } from "react";
import { AppContext } from "../contexts/AppContext";
import { useDispatch } from "react-redux";
import { OPEN_MODAL } from "../lib/redux/slices/appSlice";

const ComponentsCatalog = () => {
  const [searchTerm, setSearchTerm] = useState("");
  const [captchaValid, setCaptchaValid] = useState(false);
  const [openNotif] = useContext(AppContext);
  const dispatch = useDispatch();

  // Sample data for charts
  const chartBarData = {
    labels: ["فروردین", "اردیبهشت", "خرداد", "تیر", "مرداد", "شهریور"],
    datasets: [
      {
        label: "فروش",
        backgroundColor: ["rgba(33, 72, 214, 0.7)"],
        data: [65, 59, 80, 81, 56, 55],
        borderRadius: 5,
      },
      {
        label: "خرید",
        backgroundColor: ["rgba(100, 130, 160, 0.7)"],
        data: [45, 49, 60, 71, 46, 35],
        borderRadius: 5,
      },
    ],
  };

  const chartPieData = {
    labels: ["فعال", "غیرفعال", "در حال بررسی", "رد شده"],
    datasets: [
      {
        label: "تعداد",
        data: [300, 50, 100, 40],
        backgroundColor: [
          "rgba(75, 192, 192, 0.7)",
          "rgba(255, 99, 132, 0.7)",
          "rgba(255, 205, 86, 0.7)",
          "rgba(201, 203, 207, 0.7)",
        ],
      },
    ],
  };

  const chartLineData = {
    labels: ["هفته 1", "هفته 2", "هفته 3", "هفته 4"],
    datasets: [
      {
        label: "روند رشد",
        fill: false,
        borderColor: "rgb(75, 192, 192)",
        tension: 0.1,
        data: [12, 19, 13, 25],
      },
    ],
  };

  // Sample data for table
  const tableColumns = ["ردیف", "نام", "نام خانوادگی", "شهر", "وضعیت"];
  const tableData = [
    [1, "احمد", "محمدی", "تهران", "فعال"],
    [2, "فاطمه", "رضایی", "اصفهان", "فعال"],
    [3, "حسین", "کریمی", "مشهد", "غیرفعال"],
    [4, "مریم", "احمدی", "شیراز", "فعال"],
    [5, "علی", "حسینی", "تبریز", "در حال بررسی"],
  ];

  // Sample data for responsive table
  const responsiveTableColumns = [
    "ردیف",
    "کد درخواست",
    "نام متقاضی",
    "تاریخ ثبت",
    "مقدار (کیلوگرم)",
    "قیمت کل (ریال)",
    "وضعیت",
  ];
  const responsiveTableData = [
    [
      1,
      "REQ-1001",
      "احمد محمدی",
      "1402/09/15",
      "1,250",
      "62,500,000",
      "تایید شده",
    ],
    [
      2,
      "REQ-1002",
      "فاطمه رضایی",
      "1402/09/16",
      "2,100",
      "105,000,000",
      "در انتظار",
    ],
    [3, "REQ-1003", "حسین کریمی", "1402/09/17", "850", "42,500,000", "رد شده"],
    [
      4,
      "REQ-1004",
      "مریم احمدی",
      "1402/09/18",
      "3,200",
      "160,000,000",
      "تایید شده",
    ],
    [
      5,
      "REQ-1005",
      "علی حسینی",
      "1402/09/19",
      "1,750",
      "87,500,000",
      "در انتظار",
    ],
    [
      6,
      "REQ-1006",
      "زهرا کاظمی",
      "1402/09/20",
      "950",
      "47,500,000",
      "تایید شده",
    ],
    [
      7,
      "REQ-1007",
      "محمد تقی‌زاده",
      "1402/09/21",
      "2,450",
      "122,500,000",
      "تایید شده",
    ],
    [
      8,
      "REQ-1008",
      "سارا موسوی",
      "1402/09/22",
      "1,100",
      "55,000,000",
      "در انتظار",
    ],
    [
      9,
      "REQ-1009",
      "رضا نوری",
      "1402/09/23",
      "3,800",
      "190,000,000",
      "تایید شده",
    ],
    [
      10,
      "REQ-1010",
      "نرگس احمدی",
      "1402/09/24",
      "1,450",
      "72,500,000",
      "رد شده",
    ],
    [
      11,
      "REQ-1011",
      "امیر حسینی",
      "1402/09/25",
      "2,650",
      "132,500,000",
      "تایید شده",
    ],
    [
      12,
      "REQ-1012",
      "لیلا کریمی",
      "1402/09/26",
      "890",
      "44,500,000",
      "در انتظار",
    ],
  ];

  const components = [
    {
      category: "🧭 Navigation",
      items: [
        {
          name: "BackButton",
          description: "دکمه بازگشت با آیکون",
          path: "components/back-button/BackButton.js",
          component: <BackButton />,
        },
      ],
    },
    {
      category: "🔘 Buttons & Actions",
      items: [
        {
          name: "ButtonWithIcon",
          description: "دکمه با آیکون - انواع مختلف",
          path: "components/button-with-icon/ButtonWithIcon.js",
          component: (
            <Grid container gap={2} flexWrap="wrap">
              <ButtonWithIcon
                Icon={HomeIcon}
                title="صفحه اصلی"
                onClick={() => alert("کلیک روی صفحه اصلی")}
              />
              <ButtonWithIcon
                Icon={AddIcon}
                title="افزودن"
                onClick={() => alert("کلیک روی افزودن")}
              />
              <ButtonWithIcon
                Icon={SearchIcon}
                title="جستجو"
                onClick={() => alert("کلیک روی جستجو")}
              />
              <ButtonWithIcon
                Icon={DeleteIcon}
                title="حذف"
                onClick={() => alert("کلیک روی حذف")}
              />
              <ButtonWithIcon
                Icon={EditIcon}
                title="ویرایش"
                onClick={() => alert("کلیک روی ویرایش")}
              />
              <ButtonWithIcon
                Icon={SaveIcon}
                title="ذخیره"
                onClick={() => alert("کلیک روی ذخیره")}
              />
              <ButtonWithIcon
                Icon={SettingsIcon}
                title="تنظیمات"
                onClick={() => alert("کلیک روی تنظیمات")}
              />
              <ButtonWithIcon
                Icon={PersonIcon}
                title="پروفایل"
                onClick={() => alert("کلیک روی پروفایل")}
              />
            </Grid>
          ),
        },
      ],
    },
    {
      category: "🎴 Cards & Display",
      items: [
        {
          name: "CustomCard",
          description: "کارت سفارشی با گرادیانت و تصویر پس‌زمینه",
          path: "components/custom-card/CustomCard.js",
          component: (
            <Grid container gap={2} flexWrap="wrap">
              <CustomCard title="آمار کل درخواست‌ها" value="۱,۲۳۴" />
              <CustomCard title="کاربران فعال" value="۵۶۷" />
              <CustomCard title="پرونده‌های باز" value="۸۹" />
              <CustomCard title="تراکنش‌های امروز" value="۱۲۳" />
            </Grid>
          ),
        },
      ],
    },
    {
      category: "📐 Layout & Structure",
      items: [
        {
          name: "LineWithText",
          description: "خط تقسیم کننده با متن و گرادیانت رنگی",
          path: "components/line-with-text/LineWithText.js",
          component: (
            <Box>
              <LineWithText text="بخش اطلاعات کاربری" />
              <Typography variant="body2" mb={2}>
                محتوای بخش اول
              </Typography>
              <LineWithText text="بخش تنظیمات" />
              <Typography variant="body2" mb={2}>
                محتوای بخش دوم
              </Typography>
              <LineWithText text="بخش گزارش‌ها" />
            </Box>
          ),
        },
      ],
    },
    {
      category: "⏱️ Time & Counters",
      items: [
        {
          name: "Timer",
          description: "تایمر شمارش معکوس با فرمت‌های مختلف",
          path: "components/timer/Timer.js",
          component: (
            <Grid container gap={3} direction="column">
              <Box>
                <Typography variant="subtitle2" mb={1}>
                  تایمر ساعتی (HH:MM:SS):
                </Typography>
                <Paper sx={{ p: 2, display: "inline-block" }}>
                  <Timer seconds={3665} />
                </Paper>
              </Box>
              <Box>
                <Typography variant="subtitle2" mb={1}>
                  تایمر روزانه (DD:HH:MM:SS):
                </Typography>
                <Paper sx={{ p: 2, display: "inline-block" }}>
                  <Timer seconds={186400} isFilePaymentTime={true} />
                </Paper>
              </Box>
            </Grid>
          ),
        },
      ],
    },
    {
      category: "📝 Forms & Inputs",
      items: [
        {
          name: "Captcha",
          description: "کد امنیتی (کپچا) با قابلیت تولید مجدد و پخش صوتی",
          path: "components/captcha/Captcha.js",
          component: (
            <Box>
              <Captcha onChange={(isValid) => setCaptchaValid(isValid)} />
              <Typography variant="caption" color="text.secondary" mt={1}>
                وضعیت: {captchaValid ? "✅ معتبر" : "❌ نامعتبر"}
              </Typography>
            </Box>
          ),
        },
      ],
    },
    {
      category: "🔔 Modals & Dialogs",
      items: [
        {
          name: "Modal (Global)",
          description: "سیستم مودال سراسری با Redux",
          path: "components/modal/Modal.js",
          component: (
            <Box>
              <Grid container gap={2} direction="column">
                <Button
                  variant="contained"
                  onClick={() =>
                    dispatch(
                      OPEN_MODAL({
                        title: "عنوان مودال",
                        content: (
                          <Box p={2}>
                            <Typography>
                              این یک مودال سراسری است که از Redux استفاده می‌کند
                            </Typography>
                          </Box>
                        ),
                      })
                    )
                  }
                >
                  باز کردن مودال معمولی
                </Button>
                <Button
                  variant="contained"
                  color="success"
                  onClick={() =>
                    dispatch(
                      OPEN_MODAL({
                        title: "success",
                        content: null,
                      })
                    )
                  }
                >
                  مودال موفقیت
                </Button>
                <Button
                  variant="contained"
                  color="error"
                  onClick={() =>
                    dispatch(
                      OPEN_MODAL({
                        title: "error",
                        content: null,
                      })
                    )
                  }
                >
                  مودال خطا
                </Button>
              </Grid>
              <Typography variant="caption" color="text.secondary" mt={2}>
                این کامپوننت از Redux (appSlice) استفاده می‌کند
              </Typography>
            </Box>
          ),
        },
        {
          name: "DialogAlert",
          description: "دیالوگ با دکمه تریگر داخلی",
          path: "components/dialog-alert/DialogAlert.js",
          component: (
            <Box>
              <DialogAlert
                btnTitle="مشاهده قوانین و مقررات"
                title="قوانین و مقررات سیستم"
                content="لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است."
                isAccepted={false}
                actions={[
                  <Button key="accept" variant="contained" color="primary">
                    پذیرفتم
                  </Button>,
                  <Button key="reject" variant="outlined">
                    نمی‌پذیرم
                  </Button>,
                ]}
              />
              <Typography variant="caption" color="text.secondary" mt={2}>
                این کامپوننت دکمه تریگر خود را دارد (چک‌باکس + متن)
              </Typography>
            </Box>
          ),
        },
      ],
    },
    {
      category: "📢 Notifications",
      items: [
        {
          name: "Notif (Global)",
          description: "سیستم نوتیفیکیشن سراسری",
          path: "components/notif/Notif.js",
          component: (
            <Grid container gap={2} direction="column">
              <Button
                variant="contained"
                color="success"
                onClick={() =>
                  openNotif({
                    vertical: "top",
                    horizontal: "center",
                    msg: "عملیات با موفقیت انجام شد!",
                    severity: "success",
                  })
                }
              >
                نوتیفیکیشن موفقیت
              </Button>
              <Button
                variant="contained"
                color="error"
                onClick={() =>
                  openNotif({
                    vertical: "top",
                    horizontal: "center",
                    msg: "خطایی رخ داده است!",
                    severity: "error",
                  })
                }
              >
                نوتیفیکیشن خطا
              </Button>
              <Button
                variant="contained"
                color="warning"
                onClick={() =>
                  openNotif({
                    vertical: "top",
                    horizontal: "center",
                    msg: "توجه: این یک هشدار است",
                    severity: "warning",
                  })
                }
              >
                نوتیفیکیشن هشدار
              </Button>
              <Button
                variant="contained"
                color="info"
                onClick={() =>
                  openNotif({
                    vertical: "top",
                    horizontal: "center",
                    msg: "این یک پیام اطلاعاتی است",
                    severity: "info",
                  })
                }
              >
                نوتیفیکیشن اطلاعات
              </Button>
              <Typography variant="caption" color="text.secondary">
                این کامپوننت از AppContext استفاده می‌کند
              </Typography>
            </Grid>
          ),
        },
      ],
    },
    {
      category: "📊 Charts",
      items: [
        {
          name: "ChartBar",
          description: "نمودار میله‌ای با داده‌های واقعی",
          path: "components/chart-bar/ChartBar.js",
          component: (
            <Box sx={{ height: 300, width: "100%" }}>
              <ChartBar
                chartData={chartBarData}
                options={{
                  responsive: true,
                  maintainAspectRatio: false,
                  plugins: {
                    legend: {
                      position: "top",
                    },
                    title: {
                      display: true,
                      text: "نمودار فروش و خرید ماهانه",
                    },
                  },
                }}
              />
            </Box>
          ),
        },
        {
          name: "ChartPie",
          description: "نمودار دایره‌ای",
          path: "components/chart-pie/ChartPie.js",
          component: (
            <Box sx={{ height: 300, width: "100%" }}>
              <ChartPie
                chartData={chartPieData}
                options={{
                  responsive: true,
                  maintainAspectRatio: false,
                  plugins: {
                    legend: {
                      position: "top",
                    },
                    title: {
                      display: true,
                      text: "توزیع وضعیت درخواست‌ها",
                    },
                  },
                }}
              />
            </Box>
          ),
        },
        {
          name: "ChartLinear",
          description: "نمودار خطی",
          path: "components/chart-linear/ChartLinear.js",
          component: (
            <Box sx={{ height: 300, width: "100%" }}>
              <ChartLinear
                chartData={chartLineData}
                options={{
                  responsive: true,
                  maintainAspectRatio: false,
                  plugins: {
                    legend: {
                      position: "top",
                    },
                    title: {
                      display: true,
                      text: "روند رشد هفتگی",
                    },
                  },
                }}
              />
            </Box>
          ),
        },
        {
          name: "ChartDoughnut",
          description: "نمودار دونات",
          path: "components/chart-doughnut/ChartDoughnut.js",
          component: (
            <Box sx={{ height: 300, width: "100%" }}>
              <ChartDoughnut
                chartData={chartPieData}
                options={{
                  responsive: true,
                  maintainAspectRatio: false,
                  plugins: {
                    legend: {
                      position: "top",
                    },
                    title: {
                      display: true,
                      text: "نمودار دونات وضعیت‌ها",
                    },
                  },
                }}
              />
            </Box>
          ),
        },
        {
          name: "Other Charts",
          description: "سایر نمودارهای موجود",
          path: "components/chart-*/",
          component: (
            <Box>
              <Typography variant="body2" mb={2}>
                نمودارهای دیگر موجود:
              </Typography>
              <Grid container gap={1} flexWrap="wrap">
                {[
                  "ChartRadar",
                  "ChartPolarArea",
                  "ChartBubble",
                  "ChartScatter",
                  "AdvancedChart",
                ].map((name) => (
                  <Chip
                    key={name}
                    label={name}
                    variant="outlined"
                    color="primary"
                  />
                ))}
              </Grid>
            </Box>
          ),
        },
      ],
    },
    {
      category: "📋 Tables",
      items: [
        {
          name: "SimpleTable",
          description: "جدول ساده با داده‌های واقعی",
          path: "components/simple-table/SimpleTable.js",
          component: (
            <Box sx={{ width: "100%" }}>
              <SimpleTable
                name="لیست کاربران"
                columns={tableColumns}
                data={tableData}
              />
            </Box>
          ),
        },
        {
          name: "ResponsiveTable",
          description: "جدول پیشرفته با فیلتر، مرتب‌سازی و صفحه‌بندی",
          path: "components/responsive-table/ResponsiveTable.js",
          component: (
            <Box sx={{ width: "100%", overflowX: "auto" }}>
              <ResponsiveTable
                title="لیست درخواست‌های خرید"
                columns={responsiveTableColumns}
                data={responsiveTableData}
                paginated={true}
                customColors={[
                  { name: "ردیف", color: "#e8f4f8" },
                  { name: "کد درخواست", color: "#e1f5e1" },
                  { name: "وضعیت", color: "#fff4e6" },
                  { rest: true, color: "#f5f5f5" },
                ]}
              />
              <Typography variant="caption" color="text.secondary" mt={2}>
                قابلیت‌ها: مرتب‌سازی کلیک روی هدر، فیلتر ستون‌ها، جستجو،
                صفحه‌بندی، و محاسبه مجموع
              </Typography>
            </Box>
          ),
        },
        {
          name: "Other Tables",
          description: "سایر جداول موجود در سیستم",
          path: "components/table-*/",
          component: (
            <Box>
              <Typography variant="body2" mb={2}>
                کامپوننت‌های جدول موجود:
              </Typography>
              <Grid container gap={1} flexWrap="wrap">
                {[
                  "ModernTable",
                  "AdvancedTable",
                  "ResponsiveTable",
                  "MuiTable",
                  "MyTable",
                  "FlexTable",
                  "PageTable",
                  "PageTableApi",
                  "AdvancedTablePage",
                ].map((name) => (
                  <Chip
                    key={name}
                    label={name}
                    variant="outlined"
                    color="secondary"
                  />
                ))}
              </Grid>
              <Typography variant="caption" color="text.secondary" mt={2}>
                این کامپوننت‌ها نیاز به داده‌های جدولی دارند
              </Typography>
            </Box>
          ),
        },
      ],
    },
    {
      category: "📤 File Upload (Documentation Only)",
      items: [
        {
          name: "Upload Components",
          description: "کامپوننت‌های آپلود فایل",
          path: "components/file-uploader/",
          component: (
            <Box>
              <Typography variant="body2" mb={2}>
                کامپوننت‌های آپلود موجود:
              </Typography>
              <Grid container gap={1} flexWrap="wrap">
                {[
                  "FileUploader",
                  "ImageUpload",
                  "ImgUploader",
                  "ExcelUploadButton",
                ].map((name) => (
                  <Chip
                    key={name}
                    label={name}
                    variant="outlined"
                    color="info"
                  />
                ))}
              </Grid>
              <Typography variant="caption" color="text.secondary" mt={2}>
                این کامپوننت‌ها برای آپلود فایل‌های مختلف استفاده می‌شوند
              </Typography>
            </Box>
          ),
        },
      ],
    },
    {
      category: "🎯 Specialized (Documentation Only)",
      items: [
        {
          name: "Other Components",
          description: "سایر کامپوننت‌های تخصصی سیستم",
          path: "components/",
          component: (
            <Box>
              <Typography variant="body2" mb={2}>
                کامپوننت‌های تخصصی:
              </Typography>
              <Grid container gap={1} flexWrap="wrap">
                {[
                  "StateStepper",
                  "ChatSystem",
                  "TicketSummary",
                  "Dashboard",
                  "Map",
                  "ShowImage",
                  "ExcelLink",
                  "CheckClearanceCode",
                  "BoxList",
                  "LinkItem",
                  "BankCard",
                  "CarPelak",
                  "DatePicker",
                  "SelectCheck",
                  "AutocompleteSelect",
                  "TextInput",
                  "NumberFormatCustom",
                  "RequestsAwaitingPayment",
                  "RequestsAwaitingInspections",
                  "Drawer",
                  "Backdrop",
                  "ErrorFallback",
                  "TimeToLogout",
                ].map((name) => (
                  <Chip
                    key={name}
                    label={name}
                    variant="outlined"
                    size="small"
                  />
                ))}
              </Grid>
              <Typography variant="caption" color="text.secondary" mt={2}>
                این کامپوننت‌ها برای موارد خاص سیستم طراحی شده‌اند
              </Typography>
            </Box>
          ),
        },
      ],
    },
  ];

  const filteredComponents = components
    .map((category) => ({
      ...category,
      items: category.items.filter(
        (item) =>
          item.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
          item.description.includes(searchTerm)
      ),
    }))
    .filter((category) => category.items.length > 0);

  return (
    <Box sx={{ minHeight: "100vh", backgroundColor: "#f5f5f5", py: 4 }}>
      <Grid container justifyContent="center">
        <Grid xs={11} md={10} lg={9}>
          {/* Header */}
          <Paper elevation={3} sx={{ p: 3, mb: 3 }}>
            <Typography
              variant="h4"
              gutterBottom
              sx={{ fontWeight: 700, color: "primary.main" }}
            >
              📚 کاتالوگ کامپوننت‌های سیستم رصدیار
            </Typography>
            <Typography variant="body1" color="text.secondary" gutterBottom>
              نمایش زنده و تعاملی تمامی کامپوننت‌های قابل استفاده در پروژه
            </Typography>
            <Divider sx={{ my: 2 }} />

            {/* Search Box */}
            <TextField
              fullWidth
              placeholder="جستجوی کامپوننت..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              InputProps={{
                startAdornment: (
                  <SearchIcon sx={{ mr: 1, color: "text.secondary" }} />
                ),
              }}
            />

            {/* Stats */}
            <Grid container gap={2} mt={2}>
              <Chip
                label={`تعداد کل: ${components.reduce(
                  (acc, cat) => acc + cat.items.length,
                  0
                )} کامپوننت`}
                color="primary"
                variant="outlined"
              />
              <Chip
                label={`${components.length} دسته‌بندی`}
                color="secondary"
                variant="outlined"
              />
            </Grid>
          </Paper>

          {/* Components List */}
          {filteredComponents.map((category, catIndex) => (
            <Paper key={catIndex} elevation={2} sx={{ p: 3, mb: 3 }}>
              <Typography
                variant="h5"
                gutterBottom
                sx={{ fontWeight: 600, color: "secondary.main", mb: 3 }}
              >
                {category.category}
              </Typography>

              {category.items.map((component, compIndex) => (
                <Card
                  key={compIndex}
                  sx={{ mb: 3, border: "1px solid #e0e0e0" }}
                >
                  <CardContent>
                    <Grid container spacing={2}>
                      {/* Component Info */}
                      <Grid xs={12}>
                        <Typography
                          variant="h6"
                          sx={{ fontWeight: 600, color: "primary.main" }}
                        >
                          {component.name}
                        </Typography>
                        <Typography
                          variant="body2"
                          color="text.secondary"
                          gutterBottom
                        >
                          {component.description}
                        </Typography>
                        <Typography
                          variant="caption"
                          sx={{
                            color: "text.disabled",
                            fontFamily: "monospace",
                          }}
                        >
                          📁 {component.path}
                        </Typography>
                      </Grid>

                      {/* Live Component Render */}
                      <Grid xs={12}>
                        <Divider sx={{ my: 2 }} />
                        <Typography
                          variant="subtitle2"
                          sx={{ mb: 2, fontWeight: 600 }}
                        >
                          🎨 نمایش زنده:
                        </Typography>
                        <Box
                          sx={{
                            p: 3,
                            backgroundColor: "#ffffff",
                            borderRadius: 2,
                            border: "2px dashed #1976d2",
                            minHeight: "80px",
                            display: "flex",
                            alignItems: "center",
                            justifyContent: "center",
                          }}
                        >
                          {component.component}
                        </Box>
                      </Grid>
                    </Grid>
                  </CardContent>
                </Card>
              ))}
            </Paper>
          ))}

          {filteredComponents.length === 0 && (
            <Paper elevation={2} sx={{ p: 5, textAlign: "center" }}>
              <Typography variant="h6" color="text.secondary">
                کامپوننتی با این عبارت جستجو پیدا نشد
              </Typography>
            </Paper>
          )}
        </Grid>
      </Grid>
    </Box>
  );
};

export default ComponentsCatalog;
