/* eslint-disable @typescript-eslint/no-explicit-any */
import { ShortCodeProps } from "@/Constant/types";
import { ErrorMessage, Field } from "formik";
import React from "react";

const ShortCode: React.FC<ShortCodeProps> = ({
  toggleSection,
  openSections,
  showShortCodeSection,
  shortCodeDisabled,
  handleShortCodeDisabled,
  shortCodeError,
  shortCodeSuggestions,
  generateShortCodeSuggestions,
  setShortCodeSuggestions,
  setFieldValue,
  setShortCodeError,
}) => {
  return (
    <>
      {showShortCodeSection && (
        <div className="accordion-section mb-4">
          <div
            className="accordion-header"
            onClick={() => toggleSection("shortCode")}
            style={{
              cursor: "pointer",
              display: "flex",
              alignItems: "center",
              justifyContent: "space-between",
              padding: "1rem",
              background: "#fff",
              borderRadius: "10px 10px 0 0",
              border: "1px solid #eee",
              borderBottom: openSections.shortCode ? "none" : "1px solid #eee",
            }}
          >
            <div className="d-float-center justify-content-start gap-lg-3">
              <h4>Short Code</h4>
              {shortCodeDisabled ? (
                <a
                  href="#"
                  onClick={(e) => {
                    e.preventDefault();
                    handleShortCodeDisabled();
                  }}
                >
                  <i className="fa fa-edit" aria-hidden="true"></i> Edit
                </a>
              ) : (
                <button
                  type="submit"
                  className="close-menu btn btn-m shadow-l rounded-s font-600 delybell-primary mt-0 font-16"
                >
                  <i className="fa fa-save" aria-hidden="true"></i> Save
                </button>
              )}
            </div>
            <i
              className={`fa ${
                openSections.shortCode ? "fa-chevron-up" : "fa-chevron-down"
              }`}
            ></i>
          </div>
          {openSections.shortCode && (
            <div
              className="card card-style ms-lg-0 short-code-card"
              id="short-code"
            >
              <div className="content mb-3">
                <p className="mb-0">
                  Create a unique 3-character short code for quick
                  identification.
                </p>
                <div
                  className={`row mt-4 mb-0 ${
                    shortCodeDisabled ? "disabled-box" : "save-box"
                  }`}
                >
                  <div className="col-12 col-sm-12 col-lg-12 input-style has-borders no-icon input-style-always-active validate-field mb-4">
                    <Field
                      name="short_code"
                      className="form-control"
                      placeholder="Enter Short Code (e.g., ABC)"
                      disabled={shortCodeDisabled}
                      maxLength={3}
                      style={{ textTransform: "uppercase" }}
                    />
                    <label htmlFor="short_code" className="color-highlight">
                      Short Code
                    </label>
                    {shortCodeError && (
                      <div className="text-danger small mt-1">
                        {shortCodeError}
                      </div>
                    )}
                    <div className="d-flex justify-content-start">
                      <small className="text-muted">
                        Must be 3 characters (A-Z, 0-9)
                      </small>
                    </div>

                    {/* Short Code Suggestions */}
                    {!shortCodeDisabled && (
                      <div className="mt-3 short-code-suggestions">
                        {shortCodeSuggestions.length > 0 ? (
                          <>
                            <div className="d-flex justify-content-start align-items-center mb-3 gap-20">
                              <small className="text-muted">
                                Suggested short codes:
                              </small>
                              <button
                                type="button"
                                className="btn btn-xs border border-secondary color-secondary rounded-s text-dark"
                                onClick={() => {
                                  const newSuggestions: any =
                                    generateShortCodeSuggestions();
                                  setShortCodeSuggestions(newSuggestions);
                                }}
                                style={{
                                  fontSize: "10px",
                                  padding: "2px 6px",
                                }}
                              >
                                <i className="fa fa-refresh me-1"></i>
                                New
                              </button>
                            </div>
                            <div className="d-flex flex-wrap gap-2">
                              {shortCodeSuggestions.map(
                                (suggestion: string, index: number) => (
                                  <button
                                    key={index}
                                    type="button"
                                    className="btn btn-xs border border-primary color-primary rounded-s"
                                    onClick={() => {
                                      setFieldValue("short_code", suggestion);
                                      setShortCodeError("");
                                    }}
                                    style={{
                                      fontSize: "12px",
                                      padding: "4px 8px",
                                    }}
                                    title={`Click to use "${suggestion}"`}
                                  >
                                    {suggestion}
                                  </button>
                                )
                              )}
                            </div>
                          </>
                        ) : (
                          <small className="text-muted">
                            <i className="fa fa-info-circle me-1"></i>
                            Generating suggestions...
                          </small>
                        )}
                      </div>
                    )}

                    <ErrorMessage
                      name="short_code"
                      component="div"
                      className="text-danger small"
                    />
                  </div>
                </div>
              </div>
            </div>
          )}
        </div>
      )}
    </>
  );
};

export default ShortCode;