import styles from "./SettingsPanel.module.css";
import inputCSS from "@/styles/login.module.css";
import SimpleSelect from "./SimpleSelect";
import { Settings } from "@/lib/SessionData/Interfaces";
import { useEffect, useState, useContext } from "react";
import { SessionHandlerContext } from "../webpage/Session/Session";
import { SettingsState } from "@/lib/SessionData/Enums";

function SettingsPanel({ settings, canEdit = false }: { settings: Settings; canEdit?: boolean }) {
  const sessionHandler = useContext(SessionHandlerContext);

  const [topic, setTopic] = useState(settings.topic ?? "");
  const [goal, setGoal] = useState(settings.goal ?? "");
  const [roundTime, setRoundTime] = useState(settings.roundTime);
  const [roundsMode, setRoundsMode] = useState<1 | 2 | 3>(settings.roundsMode);
  const [maxPlayers, setMaxPlayers] = useState(settings.maxPlayers);
  const [timerExtendable, setTimerExtendable] = useState(settings.timerExtendable);
  const [writing, setWriting] = useState(settings.writing);
  const [drawing, setDrawing] = useState(settings.drawing);
  const [digitalUpload, setDigitalUpload] = useState(settings.digitalUpload);
  const [readyCheck, setReadyCheck] = useState(settings.readyCheck);
  const [creativeSupport, setCreativeSupport] = useState(settings.creativeSupport);

  // Sync local UI state when settings updates arrive from WS
  useEffect(() => {
    setTopic(settings.topic ?? "");
    setGoal(settings.goal ?? "");
    setRoundTime(settings.roundTime);
    setRoundsMode(settings.roundsMode);
    setMaxPlayers(settings.maxPlayers);
    setTimerExtendable(settings.timerExtendable);
    setWriting(settings.writing);
    setDrawing(settings.drawing);
    setDigitalUpload(settings.digitalUpload);
    setReadyCheck(settings.readyCheck);
    setCreativeSupport(settings.creativeSupport);
  }, [settings]);


  const pushSetting = (key: SettingsState, value: string | number | boolean) => {
    if (!canEdit) return;
    sessionHandler?.lobbyHandler?.pushSetting(key, value);
  }

  return (
    <div className={styles.container}>
      <div className={styles.formStack}>
        <input
          className={`${inputCSS.formInput} ${styles.textInput}`}
          type="text"
          placeholder="Thema eingeben"
          value={topic}
          disabled={!canEdit}
          onChange={(e) => {
            const next = e.target.value;
            setTopic(next);
            pushSetting(SettingsState.Topic, next);
          }}
        />

        <textarea
          className={`${inputCSS.formInput} ${styles.textInput}`}
          rows={3}
          placeholder="Ziel oder Aufgabe kurz beschreiben"
          value={goal}
          disabled={!canEdit}
          onChange={(e) => {
            const next = e.target.value;
            setGoal(next);
            pushSetting(SettingsState.Goal, next);
          }}
        ></textarea>

        <div className={styles.settingsBox}>
          <div className={styles.settingsRow}>
            <SimpleSelect
              value={roundTime}
              onChange={(val) => {
                setRoundTime(Number(val));
                pushSetting(SettingsState.RoundTime, Number(val));
              }}
              ariaLabel="Rundenzeit"
              disabled={!canEdit}
              options={[
                { value: 30, label: "0,5 Minuten" },
                { value: 60, label: "1 Minute" },
                { value: 120, label: "2 Minuten" },
                { value: 180, label: "3 Minuten" },
                { value: 240, label: "4 Minuten" },
                { value: 300, label: "5 Minuten" },
              ]}
            />

            <SimpleSelect
              value={roundsMode}
              onChange={(val) => {
                const numeric = Number(val) as 1 | 2 | 3;
                setRoundsMode(numeric);
                pushSetting(SettingsState.RoundsMode, numeric);
              }}
              ariaLabel="Rundenanzahl"
              disabled={!canEdit}
              options={[
                { value: 1, label: "1 Durchlauf" },
                { value: 2, label: "2 Durchläufe" },
                { value: 3, label: "3 Durchläufe" },
              ]}
            />

            <button
              type="button"
              disabled={!canEdit}
              onClick={() => {
                setTimerExtendable(!timerExtendable);
                pushSetting(SettingsState.TimerExtendable, !timerExtendable);
              }}
              className={`${styles.toggleButton} ${timerExtendable ? styles.active : ""} ${!canEdit ? styles.toggleDisabled : ""}`}
            >
              Timer verlängern
            </button>
          </div>

          <div className={styles.settingsRow}>
            <button
              type="button"
              disabled={!canEdit}
              onClick={() => {
                setWriting(!writing);
                pushSetting(SettingsState.Writing, !writing);
              }}
              className={`${styles.toggleButton} ${writing ? styles.active : ""} ${!canEdit ? styles.toggleDisabled : ""}`}
            >
              Schreiben
            </button>

            <button
              type="button"
              disabled={!canEdit}
              onClick={() => {
                setDrawing(!drawing);
                pushSetting(SettingsState.Drawing, !drawing);
              }}
              className={`${styles.toggleButton} ${drawing ? styles.active : ""} ${!canEdit ? styles.toggleDisabled : ""}`}
            >
              Zeichnen
            </button>

            <button
              type="button"
              disabled={!canEdit}
              onClick={() => {
                setDigitalUpload(!digitalUpload);
                pushSetting(SettingsState.DigitalUpload, !digitalUpload);
              }}
              className={`${styles.toggleButton} ${digitalUpload ? styles.active : ""} ${!canEdit ? styles.toggleDisabled : ""}`}
            >
              Digitaler Upload
            </button>
          </div>

          <div className={styles.settingsRow}>
            <SimpleSelect
              value={maxPlayers}
              onChange={(val) => {
                setMaxPlayers(Number(val));
                pushSetting(SettingsState.MaxPlayers, Number(val));
              }}
              ariaLabel="Maximale Teilnehmer"
              disabled={!canEdit}
              options={[
                { value: 3, label: "3 Teilnehmer" },
                { value: 4, label: "4 Teilnehmer" },
                { value: 5, label: "5 Teilnehmer" },
                { value: 6, label: "6 Teilnehmer" },
                { value: 7, label: "7 Teilnehmer" },
                { value: 8, label: "8 Teilnehmer" },
                { value: 9, label: "9 Teilnehmer" },
                { value: 10, label: "10 Teilnehmer" },
              ]}
            />

            <button
              type="button"
              disabled={!canEdit}
              onClick={() => {
                setReadyCheck(!readyCheck);
                pushSetting(SettingsState.ReadyCheck, !readyCheck);
              }}
              className={`${styles.toggleButton} ${readyCheck ? styles.active : ""} ${!canEdit ? styles.toggleDisabled : ""}`}
            >
              Ready-Check
            </button>

            <button
              type="button"
              disabled={!canEdit}
              onClick={() => {
                setCreativeSupport(!creativeSupport);
                pushSetting(SettingsState.CreativeSupport, !creativeSupport);
              }}
              className={`${styles.toggleButton} ${creativeSupport ? styles.active : ""} ${!canEdit ? styles.toggleDisabled : ""}`}
            >
              Kreativ-Unterstützung
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

export default SettingsPanel;