"use client"

import { useState } from "react"
import { createUserWithEmailAndPassword } from "firebase/auth"
import { auth, db } from "@/lib/firebase"
import { doc, setDoc } from "firebase/firestore"
import { serverTimestamp } from "firebase/firestore"
import { motion } from "framer-motion"
import Navbar from "@/components/Navbar"
import Footer from "@/components/Footer"
import Image from "next/image"

export default function DemandeDemoPage() {

const [loading,setLoading] = useState(false)
const [success,setSuccess] = useState(false)
const trialEnds = new Date()
trialEnds.setDate(trialEnds.getDate() + 45)

const handleSubmit = async (e:any) => {

e.preventDefault()
setLoading(true)

const form = new FormData(e.target)

const name = form.get("name") as string
const restaurant = form.get("restaurant") as string
const email = form.get("email") as string
const password = form.get("password") as string
const phone = form.get("phone") as string

try {

const userCredential = await createUserWithEmailAndPassword(
auth,
email,
password
)

const uid = userCredential.user.uid

/* Restaurant document */

await setDoc(doc(db,"restaurants",uid),{
ownerName:name,
restaurantName:restaurant,
email,
phone,
plan:"demo",
createdAt: serverTimestamp()
})

/* User document */

const trialStart = new Date()
const trialEnds = new Date()
trialEnds.setDate(trialEnds.getDate() + 45)

await setDoc(doc(db,"users",uid),{
name,
email,
phone,
restaurant,

payment:"Demo",
subscriptionStatus:"trial",

isVerified:true,
isActive:true,

trialStart,
trialEnds,

createdAt: serverTimestamp()
})

setSuccess(true)

}catch(err){
console.error(err)
}

setLoading(false)

}

return (

<>
<Navbar />

<section className="min-h-screen bg-[#0B1220] text-white py-24 px-6 flex items-center">

<div className="max-w-7xl mx-auto w-full grid md:grid-cols-2 gap-16 items-center">

{/* LEFT SIDE */}

<div>

<motion.div
initial={{opacity:0,y:40}}
animate={{opacity:1,y:0}}
transition={{duration:0.6}}
className="mb-12"
>

<h1 className="text-5xl font-bold leading-tight">
Demandez une démo <br/> OptimiziTech
</h1>

<p className="text-gray-400 mt-4 max-w-lg">
Créez votre compte et découvrez comment OptimiziTech
réduit le foodcost et améliore la rentabilité
des restaurants grâce à la donnée en temps réel.
</p>

</motion.div>


{success ? (

<div className="bg-green-500/10 border border-green-500 p-10 rounded-xl text-center">

<h2 className="text-2xl font-semibold mb-4">
Compte créé 🎉
</h2>

<p className="text-gray-300">
Notre équipe vous contactera rapidement
pour planifier votre démonstration.
</p>

</div>

):( 

<form
onSubmit={handleSubmit}
className="grid grid-cols-2 gap-4 bg-white/5 border border-white/10 backdrop-blur-lg p-8 rounded-3xl"
>

<input
name="name"
placeholder="Votre nom"
required
className="p-4 rounded-lg bg-white/10 border border-white/10 col-span-1"
/>

<input
name="restaurant"
placeholder="Nom du restaurant"
required
className="p-4 rounded-lg bg-white/10 border border-white/10 col-span-1"
/>

<input
name="email"
type="email"
placeholder="Email professionnel"
required
className="p-4 rounded-lg bg-white/10 border border-white/10 col-span-1"
/>

<input
name="phone"
placeholder="Téléphone"
className="p-4 rounded-lg bg-white/10 border border-white/10 col-span-1"
/>

<input
name="password"
type="password"
placeholder="Créer un mot de passe"
required
className="p-4 rounded-lg bg-white/10 border border-white/10 col-span-2"
/>

<button
type="submit"
disabled={loading}
className="col-span-2 bg-blue-600 hover:bg-blue-700 transition p-4 rounded-xl font-semibold"
>

{loading ? "Création..." : "Créer mon compte & demander une démo"}

</button>

</form>

)}

</div>


{/* RIGHT SIDE IMAGE */}

<motion.div
initial={{opacity:0, x:50}}
animate={{opacity:1, x:0}}
transition={{duration:0.8}}
className="hidden md:block"
>

<Image
src="/dashboard.png"
alt="OptimiziTech Dashboard"
width={700}
height={500}
className="rounded-2xl shadow-2xl"
/>

</motion.div>

</div>

</section>

<Footer />

</>

)

}