'use client';

import { useEffect, useState } from 'react';
import Link from 'next/link';
import { useTranslation } from '@/lib/i18n/context';
import { usePageTitle } from '@/lib/use-page-title';
import { LanguageSwitch } from '@/components/language-switch';
import { getStoredDisplayName, setStoredDisplayName } from '@/lib/storage';
import {
  isHapticsEnabled,
  setHapticsEnabled,
  isSoundEnabled,
  setSoundEnabled,
} from '@/lib/feedback';

function ToggleRow({
  title,
  description,
  enabled,
  onToggle,
}: {
  title: string;
  description: string;
  enabled: boolean;
  onToggle: () => void;
}) {
  return (
    <div className="flex items-center justify-between">
      <div className="pr-3">
        <span className="text-sm text-neutral-200 block">{title}</span>
        <span className="text-xs text-neutral-500">{description}</span>
      </div>
      <button
        type="button"
        aria-pressed={enabled}
        onClick={onToggle}
        className={`relative h-6 w-11 shrink-0 rounded-full transition-colors ${
          enabled ? 'bg-yumder-pink' : 'bg-neutral-700'
        }`}
      >
        <span
          className={`absolute top-0.5 left-0.5 h-5 w-5 rounded-full bg-white shadow transition-transform ${
            enabled ? 'translate-x-5' : ''
          }`}
        />
      </button>
    </div>
  );
}

export function SettingsClient() {
  const { t } = useTranslation();
  usePageTitle(t.settings.pageTitle);

  const [name, setName] = useState(getStoredDisplayName() ?? '');
  const [haptics, setHaptics] = useState(true);
  const [sound, setSound] = useState(true);

  useEffect(() => {
    setHaptics(isHapticsEnabled());
    setSound(isSoundEnabled());
  }, []);

  const SUPPORT_EMAIL = 'hello@yumder.de';
  const feedbackMailto = `mailto:${SUPPORT_EMAIL}?subject=${encodeURIComponent(
    t.settings.feedbackSubject
  )}&body=${encodeURIComponent(t.settings.feedbackBody)}`;

  function handleNameChange(value: string) {
    setName(value);
    setStoredDisplayName(value);
  }

  function toggleHaptics() {
    const next = !haptics;
    setHaptics(next);
    setHapticsEnabled(next);
  }

  function toggleSound() {
    const next = !sound;
    setSound(next);
    setSoundEnabled(next);
  }

  return (
    <main className="relative flex flex-col min-h-dvh-safe px-6 overflow-x-hidden overflow-y-auto bg-neutral-950 safe-top safe-bottom">
      <div
        aria-hidden
        className="pointer-events-none absolute -top-1/4 left-1/2 -translate-x-1/2 h-[500px] w-[500px] rounded-full opacity-25 blur-3xl"
        style={{
          background:
            'radial-gradient(circle, rgba(254,60,114,0.45) 0%, rgba(0,194,168,0.2) 45%, transparent 75%)',
        }}
      />

      <div className="relative z-10 w-full max-w-sm mx-auto flex flex-col gap-6 pt-28 pb-24">
        <h1 className="text-3xl font-extrabold tracking-tight bg-gradient-to-r from-yumder-pink via-pink-400 to-yumder-teal bg-clip-text text-transparent">
          {t.settings.title}
        </h1>

        <section className="rounded-2xl border border-white/10 bg-neutral-900 p-5 flex flex-col gap-3">
          <label className="text-sm text-neutral-400">{t.settings.nameLabel}</label>
          <input
            value={name}
            onChange={(e) => handleNameChange(e.target.value)}
            placeholder={t.common.namePlaceholderOptional}
            autoComplete="nickname"
            className="bg-neutral-800 rounded-xl px-4 py-3 border border-white/5 focus:border-yumder-pink/60 outline-none transition-colors"
          />
          <p className="text-xs text-neutral-500">{t.settings.nameHint}</p>
        </section>

        <section className="rounded-2xl border border-white/10 bg-neutral-900 p-5 flex flex-col gap-3">
          <label className="text-sm text-neutral-400">{t.settings.languageLabel}</label>
          <LanguageSwitch />
        </section>

        <section className="rounded-2xl border border-white/10 bg-neutral-900 p-5 flex flex-col gap-4">
          <h2 className="text-lg font-semibold text-white">{t.settings.experienceSectionTitle}</h2>
          <ToggleRow
            title={t.settings.hapticsTitle}
            description={t.settings.hapticsDescription}
            enabled={haptics}
            onToggle={toggleHaptics}
          />
          <ToggleRow
            title={t.settings.soundTitle}
            description={t.settings.soundDescription}
            enabled={sound}
            onToggle={toggleSound}
          />
        </section>

        <section className="rounded-2xl border border-white/10 bg-neutral-900 p-5 flex flex-col gap-3">
          <h2 className="text-lg font-semibold text-white">{t.settings.dataSectionTitle}</h2>
          <p className="text-sm text-neutral-400">{t.settings.dataSectionDescription}</p>
          <Link
            href="/delete-data"
            className="rounded-xl px-4 py-3.5 text-sm font-semibold text-center bg-yumder-pink text-white hover:bg-pink-500 transition-colors"
          >
            {t.settings.dataResetButton}
          </Link>
        </section>

        <section className="rounded-2xl border border-white/10 bg-neutral-900 p-5 flex flex-col gap-3">
          <h2 className="text-lg font-semibold text-white">{t.settings.feedbackTitle}</h2>
          <p className="text-sm text-neutral-400">{t.settings.feedbackDescription}</p>
          <a
            href={feedbackMailto}
            className="rounded-xl px-4 py-3.5 text-sm font-semibold text-center bg-yumder-teal text-neutral-900 hover:bg-teal-400 transition-colors"
          >
            {t.settings.feedbackButton}
          </a>
        </section>
      </div>
    </main>
  );
}