"use client";

import { useFocusRoomViewModel } from "../hooks/useFocusRoomViewModel";

export const FocusRoomScreen = () => {
  const { goal, leaveRoom } = useFocusRoomViewModel();

  return (
    <div className="relative min-h-screen overflow-hidden bg-slate-900 text-white">
      <div
        aria-hidden
        className="absolute inset-0 bg-[radial-gradient(circle_at_20%_20%,rgba(90,149,201,0.35),transparent_45%),radial-gradient(circle_at_80%_30%,rgba(150,185,150,0.3),transparent_45%),linear-gradient(160deg,#223040,#17212e_50%,#121a24)]"
      />

      <div className="relative z-10 flex min-h-screen flex-col">
        <header className="flex items-center justify-between px-5 py-4 sm:px-8 md:px-12">
          <div className="flex items-center gap-2">
            <span className="inline-flex h-7 w-7 items-center justify-center rounded-full border border-white/30 bg-white/10 text-xs font-bold">
              V
            </span>
            <p className="text-sm font-semibold tracking-tight">VibeRoom</p>
          </div>

          <button
            type="button"
            onClick={leaveRoom}
            className="rounded-lg border border-white/25 px-3 py-1.5 text-xs font-semibold text-white/85 transition hover:border-white/40 hover:text-white"
          >
            나가기
          </button>
        </header>

        <main className="relative flex flex-1">
          <section className="flex flex-1 flex-col px-5 pb-24 pt-6 sm:px-8 md:px-12">
            <div className="mx-auto mt-6 w-full max-w-2xl rounded-2xl border border-white/20 bg-black/25 px-5 py-4 text-center backdrop-blur-sm">
              <p className="text-xs uppercase tracking-[0.14em] text-white/60">현재 목표</p>
              <p className="mt-2 text-lg font-semibold text-white">{goal}</p>
            </div>

            <div className="mt-auto w-full max-w-sm rounded-2xl border border-white/20 bg-black/30 p-4 backdrop-blur-sm">
              <p className="text-xs font-semibold uppercase tracking-[0.14em] text-white/60">
                Distraction Dump
              </p>
              <textarea
                placeholder="떠오른 생각을 잠깐 기록..."
                className="mt-3 h-24 w-full resize-none rounded-xl border border-white/20 bg-white/10 px-3 py-2 text-sm text-white placeholder:text-white/45 focus:border-white/40 focus:outline-none"
              />
            </div>
          </section>

          <aside className="mr-5 hidden w-80 self-center rounded-2xl border border-white/20 bg-black/30 p-5 backdrop-blur-sm lg:mr-8 lg:block">
            <p className="text-xs font-semibold uppercase tracking-[0.14em] text-white/60">
              설정 패널
            </p>
            <ul className="mt-4 space-y-3 text-sm text-white/85">
              <li>배경 선택</li>
              <li>사운드 선택</li>
              <li>볼륨 슬라이더</li>
              <li>타이머(옵션)</li>
            </ul>
          </aside>
        </main>

        <footer className="border-t border-white/15 bg-black/30 px-5 py-3 backdrop-blur-sm sm:px-8 md:px-12">
          <div className="flex flex-wrap items-center gap-2 text-xs sm:text-sm">
            <button className="rounded-lg border border-white/25 px-3 py-2 text-white/90 transition hover:border-white/40">
              시작/일시정지
            </button>
            <button className="rounded-lg border border-white/25 px-3 py-2 text-white/90 transition hover:border-white/40">
              타이머 ON/OFF
            </button>
            <button className="rounded-lg border border-white/25 px-3 py-2 text-white/90 transition hover:border-white/40">
              목표 수정
            </button>
            <button className="rounded-lg border border-white/25 px-3 py-2 text-white/90 transition hover:border-white/40">
              전체화면
            </button>
          </div>
        </footer>
      </div>
    </div>
  );
};