"use client"

import { Check, Pencil } from "lucide-react"
import { useState } from "react"
import { AnimatePresence, cubicBezier, motion } from "framer-motion"

export default function TwinInput() {
    const [isExpanded, setIsExpanded] = useState(true)
    const [time, setTime] = useState({
        hr: "",
        min: ""
    })


    const handleTimeChange = (
        field: "hr" | "min",
        value: string
    ) => {
        let sanitized = value
            .replace(/\D/g, "")
            .slice(0, 2)

        if (sanitized !== "") {
            const numericValue = Number(sanitized)

            if (field === "hr") {
                sanitized = Math.min(numericValue, 24).toString()
            }

            if (field === "min") {
                sanitized = Math.min(numericValue, 59).toString()
            }
        }

        setTime(prev => ({
            ...prev,
            [field]: sanitized
        }))
    }


    return (
        <fieldset className={`tracking-normal flex items-center justify-center transition-all duration-400 ease-in-out ${isExpanded ? 'gap-4' : 'gap-0'}`}>

            <motion.div
                layout
                animate={{
                    borderTopRightRadius: isExpanded ? 12 : 0,
                    borderBottomRightRadius: isExpanded ? 12 : 0,
                    paddingRight: isExpanded ? 12 : 0
                }}
                transition={{ layout: { duration: 0.4 }, ease: cubicBezier(0.76, 0, 0.24, 1) }}
                className="flex items-center bg-[#F5F5f5] rounded-tl-xl rounded-bl-xl rounded-xl pl-3 pr-3 gap-0.5 text-black font-semibold">
                <motion.div
                    animate={{ width: isExpanded ? 48 : `${time.hr.length - (0.2 * (time.hr.split("1").length - 1)) || 1}ch` }}
                    transition={{ duration: 0.4, ease: cubicBezier(0.76, 0, 0.24, 1) }}
                    className="bg-[#F5F5F5]">
                    {isExpanded ?
                        <input
                            type="text"
                            inputMode="numeric"
                            id="twin-input-firstField"
                            name="hr"
                            value={time.hr}
                            onChange={(e) => handleTimeChange("hr", e.target.value)}
                            placeholder="0"
                            className="placeholder-black max-w-12 py-3 outline-none border-none appearance-none [moz-appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
                        />
                        :
                        <div className="py-3">{time.hr || "0"}</div>
                    }
                </motion.div>
                <label htmlFor="twin-input-firstField" className="text-[#B1B1B1] font-semibold tracking-normal">Hr.</label>
            </motion.div>



            <motion.div
                layout
                animate={{
                    borderRadius: isExpanded ? 12 : 0,
                    paddingRight: isExpanded ? 12 : 0,
                    paddingLeft: isExpanded ? 12 : 6
                }}
                transition={{ layout: { duration: 0.4 }, ease: cubicBezier(0.76, 0, 0.24, 1) }}
                className="flex items-center bg-[#F5F5f5] rounded-xl pl-3 pr-3 gap-0.5 text-black font-semibold">
                <motion.div
                    animate={{ width: isExpanded ? 48 : `${time.min.length - (0.2 * (time.min.split("1").length - 1)) || 1}ch` }}
                    transition={{ duration: 0.4, ease: cubicBezier(0.76, 0, 0.24, 1) }}
                    className="bg-[#F5F5F5]">
                    {isExpanded ?
                        <input
                            type="number"
                            id="twin-input-secondField"
                            name="min"
                            value={time.min}
                            onChange={(e) => handleTimeChange("min", e.target.value)}
                            placeholder="0"
                            className="placeholder-black max-w-12 py-3 outline-none border-none appearance-none [moz-appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
                        />
                        :
                        <div className="py-3">{time.min || "0"}</div>
                    }
                </motion.div>
                <label htmlFor="twin-input-secondField" className="text-[#B1B1B1] font-semibold tracking-normal">Min.</label>
            </motion.div>



            <motion.button
                animate={{
                    borderTopLeftRadius: isExpanded ? 12 : 0,
                    borderBottomLeftRadius: isExpanded ? 12 : 0
                }}
                transition={{ duration: 0.4, ease: cubicBezier(0.76, 0, 0.24, 1) }}
                onClick={() => setIsExpanded(!isExpanded)}
                className="outline-none border-none flex items-center justify-center p-4 rounded-xl bg-[#F5F5f5] cursor-pointer text-[#757575] hover:text-black transition-colors duration-300 ease-in-out">


                <AnimatePresence mode="wait" initial={false}>
                    {isExpanded ? (
                        <motion.div
                            key="check"
                            initial={{ filter: "blur(2px)", opacity: 0.5 }}
                            animate={{ filter: "blur(0px)", opacity: 1 }}
                            exit={{ filter: "blur(2px)", opacity: 0.5 }}
                            transition={{ duration: 0.15 }}
                        >
                            <Check size={16} strokeWidth={3} />
                        </motion.div>
                    ) : (
                        <motion.div
                            key="pencil"
                            initial={{ filter: "blur(2px)", opacity: 0.5 }}
                            animate={{ filter: "blur(0px)", opacity: 1 }}
                            exit={{ filter: "blur(2px)", opacity: 0.5 }}
                            transition={{ duration: 0.15 }}
                        >
                            <Pencil size={16} strokeWidth={3} />
                        </motion.div>
                    )}
                </AnimatePresence>


            </motion.button>



        </fieldset>
    )
}
Editable Time Label
