import React from "react";

import TableAdmin from "@pages/admin/TableAdmin";
import TableUser from "@pages/admin/TableUser";

import "@assets/style/global.css";
import "../../pages/_index/charts.css";
import {Divider} from "@mui/material"; // Import the CSS file
import { useTranslation } from "@/hooks/useTranslation";

const Adminhome = () => {
  const { t } = useTranslation();
  return (
    <>
        <div className="cards-container" style={{ flexWrap: "nowrap" }}>
            {[
                { title: t("home.admin.panelistCount"), count: 630, img: process.env.PUBLIC_URL + "/Panelist.png" },
                { title: t("home.admin.customerCount"), count: 10, img: process.env.PUBLIC_URL + "/Customer.png" },
                { title: t("home.admin.ongoingSurveys"), count: 2, img: process.env.PUBLIC_URL + "/Survey en cours.png" },
                { title: t("home.admin.completedSurveys"), count: 2, img: process.env.PUBLIC_URL + "/Survey terminee.png" },
            ].map((e, i) => (
                <div key={i} className="stats-card">
                    <img
                        src={e.img}
                        alt="Stats card"
                        style={{ width: "68px", height: "68px", padding: 20, borderRadius: "40%" }}
                        className="bg-tale-business-light"
                    />
                    <div style={{ display: "flex", flexDirection: "column" }} className="items-end">
                        <p className="points-text" style={{ fontWeight: 600, fontSize: 16, lineHeight: "32px", color: "#666666" }}>
                            {e.title}
                        </p>
                        <h3 className="points-title">{e.count}</h3>
                    </div>
                </div>
            ))}
        </div>
      <div style={{ textAlign: "justify", margin: 20 }}>
        <div
          style={{
            color: "Black",
            fontSize: 24,
            fontFamily: "revert",
            fontWeight: "700",
            wordWrap: "break-word",
            whiteSpace: "nowrap",
          }}
        >
          {t("home.admin.keyFigures")}
        </div>
        <div
          style={{
            color: "#333333",
            fontSize: 14,
            fontFamily: "revert",
            fontWeight: "400",
            wordWrap: "break-word",
          }}
        >
          {t("home.admin.realTimeAnalysis")}
        </div>
      </div>
        <div className="grid grid-cols-6 gap-4">
            <div className="bg-white flex flex-col justify-between p-4 col-span-4 row-span-4 rounded-2xl">
                <div className="chart-title">{t("home.admin.totalParticipants", { count: 5000 })}</div>
                <div className="chart-image" style={{ backgroundImage: `url(${process.env.PUBLIC_URL + "/G1.png"})` }} />
            </div>

            <div className="bg-white flex flex-col justify-between p-4 col-span-2 row-span-4 rounded-2xl">
                <div className="chart-title">{t("home.admin.participantsDistribution")}</div>
                <div className="chart-image" style={{ backgroundImage: `url(${process.env.PUBLIC_URL + "/G2.png"})` }} />
            </div>

            <div className="bg-white flex flex-col justify-between col-span-2 row-span-6 rounded-2xl">
                <div className="flex flex-col gap-1">
                    <div className="flex items-center justify-between p-4">
                        <div className="flex flex-col">
                            <div className="chart-title">{t("home.admin.satisfaction")}</div>
                            <span className="text-base">{t("home.admin.secondaryText")}</span>
                        </div>
                        <img alt="Users Group" src="/assets/users-group.svg" />
                    </div>
                    <Divider />
                </div>
                <div className="chart-image" style={{ backgroundImage: `url(${process.env.PUBLIC_URL + "/B6.png"})` }} />
                <div className="flex flex-wrap gap-3 justify-between items-start p-4">
                    {[
                        { cls: "disagree", label: t("home.admin.disagree") },
                        { cls: "agree", label: t("home.admin.agree") },
                        { cls: "strongly-agree", label: t("home.admin.stronglyAgree") },
                        { cls: "strongly-disagree", label: t("home.admin.stronglyDisagree") },
                        { cls: "neutral", label: t("home.admin.neutral") },
                        { cls: "no-comment", label: t("home.admin.noComment") },
                    ].map(({ cls, label }) => (
                        <div key={cls} className="flex gap-2 items-start justify-start basis-1/4">
                            <div className={`rating-item ${cls}`} />
                            <div>{label}</div>
                        </div>
                    ))}
                </div>
            </div>

            <div className="bg-white flex flex-col justify-between p-4 col-span-2 row-span-6 rounded-2xl">
                <div className="chart-title">{t("home.admin.demographicDistribution")}</div>
                <div className="chart-image" style={{ backgroundImage: `url(${process.env.PUBLIC_URL + "/B5.png"})` }} />
                <div className="demographic-data">
                    <div className="location-title">{t("home.admin.northAmerica")}</div>
                    <div className="location-count">7.25K</div>
                </div>
            </div>

            <div className="bg-white flex flex-col justify-between p-4 col-span-2 row-span-6 rounded-2xl">
                <div className="chart-title">{t("home.admin.avgResponseRate")}</div>
                <div className="chart-image" style={{ backgroundImage: `url(${process.env.PUBLIC_URL + "/B7.png"})` }} />
                <div className="average-response">
                    <div className="response-rate">3986</div>
                    <div className="product-title">{t("home.admin.products")}</div>
                </div>
            </div>
        </div>
      <div style={{ textAlign: "justify", margin: 20 }}>
        <div
          style={{
            color: "Black",
            fontSize: 24,
            fontFamily: "revert",
            fontWeight: "700",
            wordWrap: "break-word",
            whiteSpace: "nowrap",
          }}
        >
          {t("home.admin.keyFigures")}
        </div>
        <div
          style={{
            color: "#333333",
            fontSize: 14,
            fontFamily: "revert",
            fontWeight: "400",
            wordWrap: "break-word",
          }}
        >
          {t("home.admin.realTimeAnalysis")}
        </div>
      </div>
      <TableAdmin />
      <div style={{ textAlign: "justify", margin: 20 }}>
        <div
          style={{
            color: "Black",
            fontSize: 24,
            fontFamily: "revert",
            fontWeight: "700",
            wordWrap: "break-word",
            whiteSpace: "nowrap",
          }}
        >
          {t("home.admin.keyFigures")}
        </div>
        <div
          style={{
            color: "#333333",
            fontSize: 14,
            fontFamily: "revert",
            fontWeight: "400",
            wordWrap: "break-word",
          }}
        >
          {t("home.admin.realTimeAnalysis")}
        </div>
      </div>
      <TableUser />
    </>
  );
};
export default Adminhome;