import { useTranslation } from "react-i18next";
import { SettingsToggle } from "@/components/shared/SettingsToggle";
import { useSettingsStore } from "@/store/useSettingsStore";
import { AppExclusions } from "@/features/AppExclusions";

export function Settings() {
  const { t } = useTranslation();

  const {
    killSwitch,
    setKillSwitch,
    excludedApps,
    setExcludedApps,
    excludedDomains,
    setExcludedDomains,
    reduceMotion,
    setReduceMotion,
  } = useSettingsStore();

  return (
    <div className="w-full max-w-[320px] flex flex-col gap-8 p-6 z-5">
      <h2 className="text-xl font-bold">{t("settings")}</h2>

      {/* Секция: Сеть */}
      <div className="space-y-4">
        <h3 className="text-[10px] font-bold text-muted-foreground uppercase tracking-wider">
          {t("section_network")}
        </h3>

        <SettingsToggle
          label={t("kill_switch")}
          description={t("kill_switch_desc")}
          checked={killSwitch}
          onCheckedChange={setKillSwitch}
        />

        <div className="space-y-2 pt-2">
          <label className="text-xs font-medium text-foreground">
            {t("excluded_domains")}
          </label>
          <textarea
            className="w-full h-20 p-2 text-xs rounded-xl bg-white/5 border border-white/10 text-foreground resize-none focus:outline-none focus:ring-1 focus:ring-primary custom-scrollbar"
            placeholder={t("excluded_domains_placeholder")}
            value={excludedDomains.join(", ")}
            onChange={(e) =>
              setExcludedDomains(
                e.target.value
                  .split(",")
                  .map((s) => s.trim())
                  .filter(Boolean),
              )
            }
          />
        </div>

        <div className="space-y-2">
          <label className="text-xs font-medium text-foreground">
            {t("excluded_apps_desc")}
          </label>
          <AppExclusions />
        </div>
      </div>

      {/* Секция: Интерфейс */}
      <div className="space-y-4">
        <h3 className="text-[10px] font-bold text-muted-foreground uppercase tracking-wider">
          {t("section_interface")}
        </h3>

        <SettingsToggle
          label={t("reduce_motion")}
          description={t("reduce_motion_desc")}
          checked={reduceMotion}
          onCheckedChange={setReduceMotion}
        />
      </div>
    </div>
  );
}
