"use client"

import * as Tabs from "@radix-ui/react-tabs"
import { AnimatePresence, LayoutGroup, motion } from "motion/react"
import { useState } from "react"

function TabTrigger({
    value,
    currentTab,
    children,
}: {
    value: string
    currentTab: string
    children: React.ReactNode
}) {
    return (
        <Tabs.Trigger className="tabs-trigger" value={value}>
            {children}
            {currentTab === value && (
                <motion.div
                    className="tabs-indicator"
                    layoutId="tabs-indicator"
                />
            )}
        </Tabs.Trigger>
    )
}

function TabContent({
    value,
    title,
    content,
    buttonText,
}: {
    value: string
    title: string
    content: React.ReactNode
    buttonText: string
}) {
    return (
        <Tabs.Content value={value} forceMount asChild>
            <motion.div
                initial={{ opacity: 0, filter: "blur(5px)" }}
                animate={{ opacity: 1, filter: "blur(0px)" }}
                exit={{
                    opacity: 0,
                    filter: "blur(5px)",
                    transition: { duration: 0.15 },
                }}
                layout="position"
                className="tabs-content"
            >
                <h3>{title}</h3>
                <div className="content-wrapper">{content}</div>
                <motion.button
                    whileTap={{ scale: 0.9 }}
                    className="button large"
                >
                    {buttonText}
                </motion.button>
            </motion.div>
        </Tabs.Content>
    )
}

export default function RadixTabs() {
    const [tab, setTab] = useState("account")
    return (
        <LayoutGroup>
            <Tabs.Root value={tab} onValueChange={setTab} asChild>
                <motion.div
                    className="tabs-root"
                    layout
                    style={{ borderRadius: 10 }}
                >
                    <Tabs.List asChild>
                        <motion.div
                            className="tabs-list"
                            aria-label="Manage your account"
                            layout
                        >
                            <TabTrigger value="account" currentTab={tab}>
                                Account
                            </TabTrigger>
                            <TabTrigger value="password" currentTab={tab}>
                                Password
                            </TabTrigger>
                            <TabTrigger value="settings" currentTab={tab}>
                                Settings
                            </TabTrigger>
                        </motion.div>
                    </Tabs.List>

                    <AnimatePresence mode="wait" initial={false}>
                        {tab === "account" && (
                            <TabContent
                                key="account"
                                value="account"
                                title="Account settings"
                                content={
                                    <div className="form-fields">
                                        <input
                                            type="text"
                                            placeholder="Username"
                                            className="input-field"
                                        />
                                        <input
                                            type="email"
                                            placeholder="Email"
                                            className="input-field"
                                        />
                                    </div>
                                }
                                buttonText="Save changes"
                            />
                        )}
                        {tab === "password" && (
                            <TabContent
                                key="password"
                                value="password"
                                title="Password"
                                content="Change your password here. After saving, you'll be logged out."
                                buttonText="Change password"
                            />
                        )}
                        {tab === "settings" && (
                            <TabContent
                                key="settings"
                                value="settings"
                                title="Settings"
                                content="Manage your notification and privacy settings."
                                buttonText="Update settings"
                            />
                        )}
                    </AnimatePresence>

                    <StyleSheet />
                </motion.div>
            </Tabs.Root>
        </LayoutGroup>
    )
}

/**
 * ==============   Styles   ================
 */

function StyleSheet() {
    return (
        <style>{`
        .tabs-root {
            display: flex;
            flex-direction: column;
            width: 400px;
            max-width: 100%;
            background-color: #0b1011;
            border: 1px solid #1d2628;
            overflow: hidden;
        }

        .tabs-list {
            display: flex;
            border-bottom: 1px solid #1d2628;
        }

        .tabs-trigger {
            font-family: inherit;
            padding: 0 20px;
            height: 45px;
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 15px;
            line-height: 1;
            color: var(--feint-text);
            user-select: none;
            cursor: pointer;
            background: transparent;
            border: none;
            border-bottom: 2px solid transparent;
            transition: all 0.2s ease;
            position: relative;

        }

        .tabs-trigger .tabs-indicator {
            position: absolute;
            bottom: -2px;
            left: 0;
            right: 0;
            height: 2px;
            background: #ff0088;
        }

        .tabs-trigger:hover {
            color: var(--text);
        }

        .tabs-trigger[data-state='active'] {
            color: var(--text);
        }

        .tabs-content {
            padding: 20px;
            will-change: opacity, filter;
        }

        .tabs-content h3 {
            margin: 0 0 10px 0;
            color: var(--text);
            font-size: 18px;
            font-weight: 500;
        }

        .content-wrapper {
            margin: 0 0 20px 0;
            color: var(--feint-text);
            font-size: 14px;
            line-height: 1.5;
        }

        .form-fields {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .input-field {
            padding: 8px 12px;
            border: 1px solid #1d2628;
            border-radius: 4px;
            background: #0b1011;
            color: var(--text);
            font-size: 14px;
        }

        .input-field:focus {
            outline: none;
            border-color: #ff0088;
            transition: border-color 0.2s ease;
        }

        .button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 5px;
            font-weight: 500;
            user-select: none;
            border: none;
            background: #ff0088;
            color: white;
            cursor: pointer;
        }

        .button.large {
            font-size: 16px;
            padding: 0 20px;
            line-height: 35px;
            height: 35px;
        }
    `}</style>
    )
}