'use client';

import Link from 'next/link';
import { useState } from 'react';
import {
  DEFAULT_PRESET_OPTIONS,
  NOTIFICATION_INTENSITY_OPTIONS,
} from '@/shared/config/settingsOptions';
import { cn } from '@/shared/lib/cn';

export const SettingsPanelWidget = () => {
  const [reduceMotion, setReduceMotion] = useState(false);
  const [notificationIntensity, setNotificationIntensity] =
    useState<(typeof NOTIFICATION_INTENSITY_OPTIONS)[number]>('기본');
  const [defaultPresetId, setDefaultPresetId] = useState<
    (typeof DEFAULT_PRESET_OPTIONS)[number]['id']
  >(DEFAULT_PRESET_OPTIONS[0].id);

  return (
    <div className="min-h-screen bg-[radial-gradient(circle_at_82%_0%,rgba(167,204,237,0.42),transparent_50%),radial-gradient(circle_at_12%_8%,rgba(191,219,254,0.4),transparent_46%),linear-gradient(170deg,#f8fafc_0%,#eef4fb_54%,#e8f1fa_100%)] text-brand-dark">
      <div className="mx-auto w-full max-w-4xl px-4 pb-10 pt-6 sm:px-6">
        <header className="mb-6 flex items-center justify-between rounded-xl border border-brand-dark/12 bg-white/72 px-4 py-3 backdrop-blur-sm">
          <h1 className="text-xl font-semibold">Settings</h1>
          <Link
            href="/app"
            className="rounded-lg border border-brand-dark/16 px-3 py-1.5 text-xs text-brand-dark/82 transition hover:bg-white/90"
          >
            허브로
          </Link>
        </header>

        <div className="space-y-4">
          <section className="rounded-xl border border-brand-dark/12 bg-white/78 p-4 backdrop-blur-sm">
            <div className="flex items-center justify-between gap-3">
              <div>
                <h2 className="text-base font-semibold text-brand-dark">Reduce Motion</h2>
                <p className="mt-1 text-sm text-brand-dark/64">
                  전환 애니메이션을 최소화합니다. (UI 토글 목업)
                </p>
              </div>
              <button
                type="button"
                role="switch"
                aria-checked={reduceMotion}
                onClick={() => setReduceMotion((current) => !current)}
                className={cn(
                  'inline-flex w-16 items-center rounded-full border px-1 py-1 transition-colors',
                  reduceMotion
                    ? 'border-brand-primary/45 bg-brand-soft/60'
                    : 'border-brand-dark/20 bg-white/85',
                )}
              >
                <span
                  className={cn(
                    'h-5 w-5 rounded-full bg-white shadow-sm transition-transform duration-200 motion-reduce:transition-none',
                    reduceMotion ? 'translate-x-9' : 'translate-x-0',
                  )}
                />
              </button>
            </div>
          </section>

          <section className="rounded-xl border border-brand-dark/12 bg-white/78 p-4 backdrop-blur-sm">
            <h2 className="text-base font-semibold text-brand-dark">알림 강도</h2>
            <p className="mt-1 text-sm text-brand-dark/64">집중 시작/종료 신호의 존재감을 선택합니다.</p>
            <div className="mt-3 flex flex-wrap gap-2">
              {NOTIFICATION_INTENSITY_OPTIONS.map((option) => (
                <button
                  key={option}
                  type="button"
                  onClick={() => setNotificationIntensity(option)}
                  className={cn(
                    'rounded-full border px-3 py-1.5 text-xs transition-colors',
                    notificationIntensity === option
                      ? 'border-brand-primary/45 bg-brand-soft/60 text-brand-dark'
                      : 'border-brand-dark/18 bg-white/75 text-brand-dark/78 hover:bg-white',
                  )}
                >
                  {option}
                </button>
              ))}
            </div>
          </section>

          <section className="rounded-xl border border-brand-dark/12 bg-white/78 p-4 backdrop-blur-sm">
            <h2 className="text-base font-semibold text-brand-dark">기본 프리셋</h2>
            <p className="mt-1 text-sm text-brand-dark/64">입장 시 자동 선택될 추천 세트를 고릅니다.</p>
            <div className="mt-3 space-y-2">
              {DEFAULT_PRESET_OPTIONS.map((preset) => (
                <button
                  key={preset.id}
                  type="button"
                  onClick={() => setDefaultPresetId(preset.id)}
                  className={cn(
                    'w-full rounded-lg border px-3 py-2 text-left text-sm transition-colors',
                    defaultPresetId === preset.id
                      ? 'border-brand-primary/45 bg-brand-soft/58 text-brand-dark'
                      : 'border-brand-dark/16 bg-white/72 text-brand-dark/82 hover:bg-white',
                  )}
                >
                  {preset.label}
                </button>
              ))}
            </div>
          </section>
        </div>
      </div>
    </div>
  );
};