"use client";
import React, { useState } from "react";
import dynamic from "next/dynamic";
const ApexCharts = dynamic(() => import("react-apexcharts"), { ssr: false });
import { useTranslation } from "react-i18next";
const ApplicationCompletionChart: React.FC = () => {
  const { t } = useTranslation();
  const [tab, setTab] = useState(t("Store Management"));
  const percent = 0;
  const options = {
    chart: { type: "donut" as const },
    labels: [],
    colors: ["#42A5F5", "#e0e0e0"],
    dataLabels: {
      enabled: true,
      formatter: () => `${percent}%`,
      style: { fontSize: "32px", fontWeight: 600, color: "#1976d2" },
    },
    legend: { show: false },
    plotOptions: {
      pie: {
        donut: {
          size: "70%",
          labels: {
            show: false,
          },
        },
      },
    },
    stroke: { show: true, width: 2, colors: ["#fff"] },
  };

  return (
    <div
      style={{
        border: "1px solid #e0e0e0",
        borderRadius: 12,
        padding: 24,
        background: "#fff",
        boxShadow: "0 2px 8px rgba(0,0,0,0.04)",
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
      }}
    >
      <div
        style={{
          width: "100%",
          fontWeight: 600,
          fontSize: 18,
          marginBottom: 12,
          display: "flex",
          alignItems: "center",
        }}
      >
        <span
          style={{
            flex: 1,
            whiteSpace: "nowrap",
            overflow: "hidden",
            textOverflow: "ellipsis",
            textAlign: "left",
          }}
        >
          {t("Application completion")}
        </span>
        <div>
          <button
            style={{
              border:
                tab === t("Raw MA")
                  ? "1px solid #1976d2"
                  : "1px solid #e0e0e0",
              background: tab === t("Store Management") ? "#fff" : "#f5f5f5",
              color: tab === t("Store Management") ? "#1976d2" : "#333",
              borderRadius: 4,
              padding: "2px 12px",
              marginRight: 4,
              cursor: "pointer",
            }}
            onClick={() => setTab(t("Store Management"))}
          >
            {t("Store Management")}
          </button>
          <button
            style={{
              border:
                tab === t("Shipment")
                  ? "1px solid #1976d2"
                  : "1px solid #e0e0e0",
              background: tab === t("Shipment") ? "#fff" : "#f5f5f5",
              color: tab === t("Shipment") ? "#1976d2" : "#333",
              borderRadius: 4,
              padding: "2px 12px",
              cursor: "pointer",
            }}
            onClick={() => setTab(t("Shipment"))}
          >
            {t("Shipment")}
          </button>
        </div>
      </div>
      <div
        style={{
          width: "100%",
          height: 320,
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          margin: "0 auto",
        }}
      >
        <ApexCharts
          options={options}
          series={[0, 100]}
          type="donut"
          width="100%"
          height={280}
        />
      </div>
      <div
        style={{
          marginTop: 16,
          textAlign: "left",
          border: "1px solid #e0e0e0",
          borderRadius: 8,
          padding: 12,
          background: "#fafafa",
        }}
      >
        <div>{t("Processed application")}: 0</div>
        <div>{t("Pending application")}: 0</div>
      </div>
    </div>
  );
};

export default ApplicationCompletionChart;