"use client"

import { useSteamStore } from "@/store/steam"
import { useEffect, useState } from "react"
export default function Page() {
  const steam = useSteamStore()
  const [steamDir, setSteamDir] = useState(steam.state.steamDir)
  const [cs2Dir, setCs2Dir] = useState(steam.state.cs2Dir)

  useEffect(() => {
    setSteamDir(steam.state.steamDir)
    setCs2Dir(steam.state.cs2Dir)
  }, [steam.state.steamDir, steam.state.cs2Dir])

  return (
    <div
      className="flex flex-col items-center justify-center w-full h-screen gap-6"
      data-tauri-drag-region
    >
      <h1 className="text-4xl font-bold tracking-wide">CS 工具箱</h1>
      <p className="text-sm text-zinc-500">配置页面</p>

      <div className="flex flex-col w-full max-w-2xl gap-4 p-5 border rounded-lg bg-white/40 dark:bg-zinc-800/40">
        <div className="space-y-2">
          <p className="text-sm font-semibold">Steam 安装目录</p>
          <input
            className="w-full px-3 py-2 rounded-lg bg-white dark:bg-zinc-700 border border-zinc-300 dark:border-zinc-600"
            placeholder="请输入 Steam 安装路径"
            value={steamDir}
            onChange={(e) => {
              setSteamDir(e.target.value)
              steam.setDir(e.target.value)
            }}
          />
        </div>
        <div className="space-y-2">
          <p className="text-sm font-semibold">CS2 安装目录</p>
          <input
            className="w-full px-3 py-2 rounded-lg bg-white dark:bg-zinc-700 border border-zinc-300 dark:border-zinc-600"
            placeholder="请输入 CS2 安装路径"
            value={cs2Dir}
            onChange={(e) => {
              setCs2Dir(e.target.value)
              steam.setCsDir(e.target.value)
            }}
          />
        </div>
        {steam.currentUser()?.steam_id64 && (
          <p className="text-xs text-zinc-500">
            当前用户 64 位 Steam ID：{steam.currentUser()?.steam_id64}
          </p>
        )}
      </div>
    </div>
  )
}