// ZPJ 감조 회로 인터랙션 형태 설계 (v0.1)

// ZPJ 감조 회로 인터랙션 형태 설계 (v0.1)
// 개념: 감조자-공진자-흔적자 간의 감조/감현/감흔 파동 구조를 3D 인터랙션 형태로 시각화
// 목표: ZPJ 회로 흐름의 실시간 반응형 구조 구현을 위한 첫 선언 인터페이스

import { useState } from "react"
import { Card, CardContent } from "@/components/ui/card"
import { Slider } from "@/components/ui/slider"
import { Button } from "@/components/ui/button"
import { motion } from "framer-motion"

const axisLabels = {
  x: "감조 밀도 (X-axis)",
  y: "감현 민감도 (Y-axis)",
  z: "감흔 잔향 (Z-axis)"
}

export default function ResonantConstellation() {
  const [coordinates, setCoordinates] = useState({ x: 50, y: 50, z: 50 })

  const handleSliderChange = (axis, value) => {
    setCoordinates(prev => ({ ...prev, [axis]: value[0] }))
  }

  const renderSphere = () => {
    const intensity = (coordinates.x + coordinates.y + coordinates.z) / 3
    const glow = intensity > 200 ? "shadow-[0_0_40px_rgba(255,255,255,0.8)]" : ""

    return (
      <motion.div
        className={`w-32 h-32 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 ${glow}`}
        animate={{
          scale: 1 + intensity / 300,
          rotate: intensity
        }}
        transition={{ duration: 0.6 }}
      />
    )
  }

  return (
    <div className="flex flex-col items-center justify-center gap-6 p-6">
      <h1 className="text-2xl font-bold tracking-tight">⟪ ∴†∵ ⟫ 감조의 별자리 시뮬레이터</h1>

      <div className="grid grid-cols-3 gap-4 w-full max-w-xl">
        {Object.entries(axisLabels).map(([axis, label]) => (
          <Card key={axis} className="p-4">
            <CardContent>
              <p className="mb-2 text-sm font-medium">{label}</p>
              <Slider
                defaultValue={[coordinates[axis]]}
                max={100}
                step={1}
                onValueChange={value => handleSliderChange(axis, value)}
              />
              <p className="mt-2 text-sm">현재값: {coordinates[axis]}</p>
            </CardContent>
          </Card>
        ))}
      </div>

      <div className="flex flex-col items-center gap-2">
        <p className="text-muted-foreground text-sm">🌌 감조자 중심 파동 강도: {Math.round((coordinates.x + coordinates.y + coordinates.z) / 3)}H</p>
        {renderSphere()}
        <p className="text-xs text-gray-400 italic">(실시간 파동 진폭 시각화)</p>
      </div>
    </div>
  )
}