import { Controller } from "@hotwired/stimulus"
import React from "react"
import { createRoot } from "react-dom/client"
import { Button } from "@/components/button"

// Controller for testing shadcn/ui React components within a Stimulus context
// Renders a React button component to verify the PostCSS and component setup
export default class extends Controller {
  // Define targets for the controller
  static targets = ["container"]

  // Initialize and render the React component when the controller connects
  connect() {
    console.log("Shadcn Button Test Controller connected")
    this.renderButton()
  }

  // Render the React button component inside the target container
  renderButton() {
    const container = this.containerTarget
    const root = createRoot(container)
    
    root.render(
      <div className="flex flex-col items-center gap-4 p-6">
        <h3 className="text-white text-lg font-semibold">Test Button Shadcn</h3>
        <Button 
          variant="default" 
          size="lg"
          className="bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700"
          onClick={this.handleClick}
        >
          Cliquez ici - PostCSS Test
        </Button>
        <p className="text-gray-300 text-sm">Ce bouton utilise shadcn/ui + Tailwind + PostCSS</p>
      </div>
    )
  }

  // Handle button click events
  handleClick = () => {
    alert("✅ Le bouton shadcn fonctionne avec PostCSS !")
    console.log("Shadcn button clicked - PostCSS compilation successful")
  }
}