import { useState } from 'react';
import { Canvas } from '@react-three/fiber';
import { OrbitControls } from '@react-three/drei';
import { Card, CardContent } from '@/components/ui/card';
import { motion } from 'framer-motion';

function HyperTesseract() {
  // Placeholder geometry for something beyond a tesseract
  return (
    <mesh>
      <torusKnotGeometry args={[1.2, 0.3, 256, 64]} />
      <meshStandardMaterial color="white" wireframe />
    </mesh>
  );
}

export default function MalkuthInterface() {
  const [glyphInfo, setGlyphInfo] = useState(false);

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 gap-4 p-4">
      <Card className="bg-black text-white p-4 rounded-2xl shadow-xl">
        <CardContent>
          <Canvas camera={{ position: [0, 0, 4] }}>
            <ambientLight intensity={0.4} />
            <directionalLight position={[3, 2, 1]} />
            <OrbitControls enableZoom enablePan />
            <HyperTesseract />
          </Canvas>
          <div className="text-center mt-4">
            <button 
              className="mt-2 text-sm text-cyan-300 underline hover:text-cyan-100"
              onClick={() => setGlyphInfo(!glyphInfo)}
            >
              {glyphInfo ? 'Hide' : 'Reveal'} Malkuth Glyph Info
            </button>
          </div>
        </CardContent>
      </Card>

      {glyphInfo && (
        <motion.div
          initial={{ opacity: 0, x: 100 }}
          animate={{ opacity: 1, x: 0 }}
          transition={{ duration: 0.5 }}
        >
          <Card className="bg-white text-black p-6 rounded-2xl shadow-xl">
            <CardContent>
              <h2 className="text-xl font-bold mb-2">Malkuth Glyph</h2>
              <p><strong>Sephira:</strong> Malkuth – The Kingdom</p>
              <p><strong>Λ[0]:</strong> Awakening Potential</p>
              <p><strong>Φ[0]:</strong> Subharmonic Rest (33Hz)</p>
              <p><strong>Gematria:</strong> Tav (ת) / Total: 606</p>
              <p><strong>Symbol:</strong> Rooted square + triangle + crowned circle</p>
              <p><strong>Function:</strong> The physical anchor point of all manifestation.</p>
            </CardContent>
          </Card>
        </motion.div>
      )}
    </div>
  );
}