import React from "react";
import { useTagManager } from "../../../../../services/Services";
import { SettingsDetailView } from "../../../../../components/business/views";
import { UIXThemeProvider, useUIXTheme } from "../../../../../components/UIX";
import { TagIcon } from "@heroicons/react/24/outline";
import { TAG_STATUS_LABELS } from "../../../../../constants/Settings";

function SettingTagDetailPage() {
  return (
    <UIXThemeProvider>
      <SettingTagDetailPageContent />
    </UIXThemeProvider>
  );
}

function SettingTagDetailPageContent() {
  const tagManager = useTagManager();
  const { getThemeClasses } = useUIXTheme();

  // Define detail fields
  const fields = [
    {
      name: "text",
      label: "Tag Text",
      required: true,
    },
    {
      name: "description",
      label: "Description",
      type: "multiline",
      emptyMessage: "No description provided",
    },
    {
      name: "status",
      label: "Status",
      type: "status",
      render: (value) => {
        const isActive = value === 1;
        return (
          <span
            className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
              isActive ? getThemeClasses('status-active') : getThemeClasses('status-inactive')
            }`}
          >
            {TAG_STATUS_LABELS[value] || "Unknown"}
          </span>
        );
      }
    },
  ];

  return (
    <SettingsDetailView
      entityType="tag"
      entityTypePlural="Tags"
      entityIcon={TagIcon}
      entityManager={tagManager}
      basePath="/admin/settings/tag"
      listPath="/admin/settings/tags"
      title="Tag Details"
      subtitle="View tag information and configuration"
      fields={fields}
    />
  );
}

export default SettingTagDetailPage;