import { useState } from "react";
import layout from "./SettingsLayout.module.css";
import styles from "./LicenseTab.module.css";

type LicenseTabProps = {
  isLicensed: boolean;
  hwid: string;
  keyInput: string;
  isActivating: boolean;
  error: string;
  onKeyInputChange: (val: string) => void;
  onActivate: () => void;
  onOfflineActivate: (token: string) => void;
};

export function LicenseTab({
  isLicensed,
  hwid,
  keyInput,
  isActivating,
  error,
  onKeyInputChange,
  onActivate,
  onOfflineActivate,
}: LicenseTabProps) {
  const [isOfflineMode, setIsOfflineMode] = useState(false);
  const [offlineToken, setOfflineToken] = useState("");

  const handleOfflineSubmit = () => {
    const token = offlineToken.trim();

    if (!token) {
      return;
    }

    onOfflineActivate(token);
  };

  return (
    <div className="tab-content">
      <div className={layout["section"]}>
        <div className={layout["section-title"]}>License status</div>
        <div className={layout["settings-list"]}>
          <div className={layout["settings-row"]}>
            <div className={layout["settings-info"]}>
              <div className={layout["settings-name"]}>CleanCopy License</div>
              <div className={layout["settings-desc"]}>
                Status:{" "}
                <span
                  className={
                    isLicensed
                      ? styles["license-active"]
                      : styles["license-unregistered"]
                  }
                >
                  {isLicensed ? "Active" : "Unregistered"}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>

      {!isLicensed && (
        <div className={layout["section"]}>
          <div className={layout["section-title"]}>Activation</div>
          <div className={styles["license-activation-area"]}>
            {isOfflineMode ? (
              <>
                <div className={styles["license-input-group"]}>
                  <input
                    type="text"
                    className={styles["license-input"]}
                    placeholder="Paste offline token..."
                    value={offlineToken}
                    onChange={(e) => setOfflineToken(e.target.value)}
                    disabled={isActivating}
                  />
                  <button
                    className={styles["activate-btn"]}
                    onClick={handleOfflineSubmit}
                    disabled={isActivating}
                  >
                    {isActivating ? (
                      <span className={styles["spinner-container"]}>
                        <span className={styles["spinner"]}></span>
                        <span>Verifying...</span>
                      </span>
                    ) : (
                      "Verify Token"
                    )}
                  </button>
                </div>
                <button
                  className={styles["offline-toggle"]}
                  onClick={() => {
                    setIsOfflineMode(false);
                    setOfflineToken("");
                  }}
                >
                  Activate with license key instead
                </button>
              </>
            ) : (
              <>
                <div className={styles["license-input-group"]}>
                  <input
                    type="text"
                    className={styles["license-input"]}
                    placeholder="Enter license key..."
                    value={keyInput}
                    onChange={(e) => onKeyInputChange(e.target.value)}
                    disabled={isActivating}
                  />
                  <button
                    className={styles["activate-btn"]}
                    onClick={onActivate}
                    disabled={isActivating}
                  >
                    {isActivating ? (
                      <span className={styles["spinner-container"]}>
                        <span className={styles["spinner"]}></span>
                        <span>Activating...</span>
                      </span>
                    ) : (
                      "Activate"
                    )}
                  </button>
                </div>
                <button
                  className={styles["offline-toggle"]}
                  onClick={() => setIsOfflineMode(true)}
                >
                  Have an offline token?
                </button>
              </>
            )}
            {error && <div className={styles["error-text"]}>{error}</div>}
          </div>
        </div>
      )}

      <div className={styles["hwid-container"]}>
        <div className={styles["hwid-label"]}>Hardware ID:</div>
        <div className={styles["hwid-val"]}>{hwid}</div>
      </div>
    </div>
  );
}
