import { CleanConfig } from "../types";
import layout from "./SettingsLayout.module.css";
import styles from "./GeneralTab.module.css";
import { ToggleSwitch } from "./ToggleSwitch";

type GeneralTabProps = {
  config: CleanConfig;
  isConflict: boolean;
  isRecording: boolean;
  onToggleRecording: () => void;
  onUpdateConfig: (newConfig: Partial<CleanConfig>) => void;
};

export function GeneralTab({
  config,
  isConflict,
  isRecording,
  onToggleRecording,
  onUpdateConfig,
}: GeneralTabProps) {
  const renderHotkeyKeys = () => {
    if (isRecording) {
      return (
        <span style={{ color: "var(--color-error)" }}>
          Press keys to record...
        </span>
      );
    }

    return config.hotkey.split("+").map((key, i, arr) => (
      <span key={key}>
        <kbd className={styles["key-cap"]}>{key}</kbd>
        {i < arr.length - 1 && <span className={styles["key-plus"]}>+</span>}
      </span>
    ));
  };

  const hotkeyGroupClass = [
    styles["hotkey-display-group"],
    isConflict ? styles["disabled"] : "",
    isRecording ? styles["recording"] : "",
  ]
    .filter(Boolean)
    .join(" ");

  return (
    <div className="tab-content">
      <div className={layout["section"]}>
        <div className={layout["section-title"]}>Keyboard settings</div>
        <div className={layout["settings-list"]}>
          <div className={layout["settings-row"]}>
            <div className={layout["settings-info"]}>
              <div className={layout["settings-name"]}>
                Global Keyboard Shortcut
              </div>
              <div className={layout["settings-desc"]}>
                Press shortcut to clean clipboard.
              </div>
            </div>
            <button
              data-testid="hotkey-display"
              className={hotkeyGroupClass}
              onClick={onToggleRecording}
              onKeyDown={(e) => {
                if (e.key === "Enter" || e.key === " ") {
                  e.preventDefault();
                  onToggleRecording();
                }
              }}
            >
              {renderHotkeyKeys()}
            </button>
          </div>
        </div>
        {isConflict && (
          <div className={styles["conflict-warning"]}>
            Shortcut registration conflict! It may already be in use.
          </div>
        )}
      </div>

      <div className={layout["section"]}>
        <div className={layout["section-title"]}>General settings</div>
        <div className={layout["settings-list"]}>
          <div className={layout["settings-row"]}>
            <div className={layout["settings-info"]}>
              <div className={layout["settings-name"]}>Play sound on clean</div>
              <div className={layout["settings-desc"]}>
                Play sound confirmation when clipboard is cleaned.
              </div>
            </div>
            <ToggleSwitch
              checked={config.play_sound}
              onChange={(checked) => onUpdateConfig({ play_sound: checked })}
            />
          </div>

          <div className={layout["settings-row"]}>
            <div className={layout["settings-info"]}>
              <div className={layout["settings-name"]}>Start automatically</div>
              <div className={layout["settings-desc"]}>
                Launch CleanCopy automatically when starting Windows.
              </div>
            </div>
            <ToggleSwitch
              checked={config.autostart}
              onChange={(checked) => onUpdateConfig({ autostart: checked })}
            />
          </div>
        </div>
      </div>
    </div>
  );
}
