import { useState } from "react"
import Button from "../../components/Buttons/Button"
import InputBox from "../../components/Inputs/InputBox"
import PopUp from "../../components/PopUp/PopUp"
import Logo from "../../assets/pictures/Logo.jsx"
import Navbar from "../../components/Navbar/Navbar"
import Footer from "../../components/Footer/Footer.jsx"
import UserProfile from "../../components/Userdetails/Userdetails.jsx"
import CompanyHub from "../Contacts/Contacts.jsx"

import RatingSet from "../../components/PopUp/RatingSet" // <- statisztikai komponens

export default function Test() {
  const [showRegistrationPopup, setShowRegistrationPopup] = useState(false)
  const [showPreviewPopup, setShowPreviewPopup] = useState(false) // <- új state
  const [inputValue, setInputValue] = useState("")

  return (
    <div className="w-full h-screen flex flex-col">
      <Navbar />
      <UserProfile />
      <CompanyHub />

      <div className="flex-1 flex flex-col items-center justify-center space-y-6">
        <InputBox
          placeholder="E-mail cím"
          type="text"
          width="w-1/2"
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
        />

        <div className="flex flex-col sm:flex-row sm:space-x-4 space-y-4 sm:space-y-0 w-1/2">
          <Button
            text="Regisztráció"
            type="button"
            width="w-full"
            onClick={() => setShowRegistrationPopup(true)}
          />
          <Button
            text="Előnézet"
            type="button"
            width="w-full"
            onClick={() => setShowPreviewPopup(true)} // <- másik state trigger
          />
        </div>

        {/* Regisztrációs popup */}
        {showRegistrationPopup && (
          <PopUp onClose={() => setShowRegistrationPopup(false)}>
            <div className="flex flex-col items-center space-y-4">
              {/* <Logo size={120} /> */}
              <h1 className="text-2xl font-bold text-center">Sikeres regisztráció!</h1>
              <p className="text-center text-gray-600">
                Kérjük, erősítsd meg az e-mail címedet!
                <br />
                Egy megerősítő linket küldtünk az általad megadott e-mail címre
                <span className="font-semibold text-black"> {inputValue}</span>.
              </p>
              <p className="text-center text-sm text-gray-500">
                Ha nem kaptad meg a levelet, ellenőrizd a spam mappádat is!
              </p>
              <Button text="Bezár" type="button" width="w-24" onClick={() => setShowRegistrationPopup(false)} />
            </div>
          </PopUp>
        )}

        {/* Előnézeti popup (RatingSet) */}
        {showPreviewPopup && (
          <PopUp onClose={() => setShowPreviewPopup(false)}>
            <RatingSet />
          </PopUp>
        )}
      </div>
      <Footer />
    </div>
  )
}