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

function SettingTagUpdatePage() {
  return (
    <UIXThemeProvider>
      <SettingTagUpdatePageContent />
    </UIXThemeProvider>
  );
}

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

  // Define form fields
  const formFields = [
    {
      name: "text",
      label: "Tag Text",
      type: "text",
      placeholder: "Enter tag text",
      required: true,
      maxLength: 100,
    },
    {
      name: "description",
      label: "Description",
      type: "textarea",
      placeholder: "Enter description (optional)",
      rows: 4,
      maxLength: 500,
    },
    {
      name: "status",
      label: "Status",
      type: "select",
      required: true,
    }
  ];

  // Define validation rules
  const validationRules = {
    text: {
      maxLength: 100,
      minLength: 1,
    },
    description: {
      maxLength: 500,
    },
  };

  // Define status options
  const statusOptions = [
    { value: TAG_STATUS.ACTIVE, label: TAG_STATUS_LABELS[TAG_STATUS.ACTIVE] },
    { value: TAG_STATUS.INACTIVE, label: TAG_STATUS_LABELS[TAG_STATUS.INACTIVE] },
  ];

  // Custom info note
  const customInfoNote = (
    <div className={`p-4 ${getThemeClasses('alert-info-bg')} border ${getThemeClasses('border-primary')} rounded-lg`}>
      <p className={`text-sm ${getThemeClasses('text-primary')} flex items-start`}>
        <InformationCircleIcon className="w-5 h-5 mr-2 flex-shrink-0 mt-0.5" />
        <span>
          <strong>Note:</strong> Tags are used to categorize and organize content within the system.
          Changes will be visible immediately after updating.
        </span>
      </p>
    </div>
  );

  return (
    <SettingsFormView
      entityType="tag"
      entityTypePlural="Tags"
      entityIcon={TagIcon}
      entityManager={tagManager}
      basePath="/admin/settings/tag"
      listPath="/admin/settings/tags"
      mode="update"
      formFields={formFields}
      validationRules={validationRules}
      statusOptions={statusOptions}
      title="Edit Tag"
      subtitle="Update tag details and configuration"
      customInfoNote={customInfoNote}
    />
  );
}

export default SettingTagUpdatePage;