import { useState } from '@wordpress/element'
import TabHead from '../Sections/TabHead'
import SaveBar from '../common/SaveBar'
import { toast } from 'react-toastify'
import axios from 'axios'
import Glyph from '../icons/Glyph'

const CHEVRON = "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b8aa7' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E\")"

function buildList(templates, selectedId, type) {
    const none = [{ value: 0, label: 'No Template' }]
    const filtered = templates
        .filter(t => t.type === type)
        .map(t => ({ value: t.value, label: t.label }))
    return [...none, ...filtered]
}

function PageRow({ icon, label, desc, name, value, options, onChange }) {
    return (
        <div className="strb-woo-row">
            <span className="strb-woo-row-ico"><Glyph name={icon} /></span>
            <div className="strb-woo-row-meta">
                <strong>{label}</strong>
                <span>{desc}</span>
            </div>
            <select className="strb-woo-select" name={name} value={value || 0} onChange={onChange}>
                {options.map(o => <option key={o.value} value={o.value}>{o.label}</option>)}
            </select>
        </div>
    )
}

function CatalogRow({ icon, label, desc, children }) {
    return (
        <div className="strb-woo-row">
            <span className="strb-woo-row-ico"><Glyph name={icon} /></span>
            <div className="strb-woo-row-meta">
                <strong>{label}</strong>
                <span>{desc}</span>
            </div>
            <div className="strb-woo-row-ctrl">{children}</div>
        </div>
    )
}

function Toggle({ name, checked, onChange }) {
    return (
        <label className="strb-widget-setting-switch" style={{ margin: 0 }}>
            <input type="checkbox" id={name} name={name} checked={!!checked} onChange={onChange} />
            <span />
        </label>
    )
}

function Stepper({ value, onChange }) {
    const n = parseInt(value) || 12
    return (
        <div className="strb-stepper">
            <button type="button" onClick={() => onChange(Math.max(1, n - 1))}>−</button>
            <span>{n}</span>
            <button type="button" onClick={() => onChange(n + 1)}>+</button>
        </div>
    )
}

function Woocommerce() {
    const templates = storebuild.templates || []

    let pro_modules = { myaccountlogintemplate: true, myaccounttemplate: true, thankyoutemplate: true }
    if (!_.isEmpty(storebuild.pro_modules)) pro_modules = storebuild.pro_modules

    const [settings, setSettings] = useState(storebuild.settings._storebuild_woocommerce)
    const [modules, setModules]   = useState(storebuild.settings._storebuild_modules)
    const [baseline, setBaseline] = useState(() => JSON.stringify({
        woo: storebuild.settings._storebuild_woocommerce,
        mod: storebuild.settings._storebuild_modules,
    }))
    const [saving, setSaving] = useState(false)

    const dirty = JSON.stringify({ woo: settings, mod: modules }) !== baseline

    const handleChange = (e) => setSettings(s => ({ ...s, [e.target.name]: e.target.value }))
    const handleLimit  = (val) => setSettings(s => ({ ...s, storebuild_products_limits: val }))
    const handleToggle = (key) => setModules(m => ({ ...m, [key]: !m[key] }))

    const handleSave = (e) => {
        if (e) e.preventDefault()
        const fd = new FormData()
        fd.append('action', 'storebuild_save')
        fd.append('security', storebuild.nonce)
        fd.append('_storebuild_woocommerce', JSON.stringify(settings))
        fd.append('_storebuild_modules', JSON.stringify(modules))
        setSaving(true)
        axios.post(storebuild.ajax_url, fd)
            .then(res => {
                if (res.data?.success === false) { toast.error(res.data?.data?.message); return }
                setBaseline(JSON.stringify({ woo: settings, mod: modules }))
                toast.success(res.data?.data?.message)
            })
            .catch(() => toast.error('Something went wrong while saving.'))
            .finally(() => setSaving(false))
    }

    const shopList      = buildList(templates, settings.storebuild_shop_page_id, 'shop')
    const singleList    = buildList(templates, settings.storebuild_single_page_id, 'single')
    const cartList      = buildList(templates, settings.storebuild_cart_page_id, 'cart')
    const checkoutList  = buildList(templates, settings.storebuild_checkout_page_id, 'checkout')
    const thankyouList  = buildList(templates, settings.storebuild_thankyou_page_id, 'thankyou')
    const myAccountList = buildList(templates, settings.storebuild_my_account_page_id, 'myaccount')

    return (
        <div className="strb-woo-tab-content">
            <div className="strb-controls-top">
                <TabHead
                    title='WooCommerce Setup'
                    text='Connect your store pages and tune catalog behavior.'
                    onSave={handleSave}
                />
            </div>

            <div className="strb-woo-panels">
                {/* ── Left: Page assignment ── */}
                <div className="strb-woo-panel">
                    <div className="strb-woo-panel-head">
                        <h3>Page assignment</h3>
                        <p>Tell StoreBuild which pages power your storefront.</p>
                    </div>
                    <div className="strb-woo-rows">
                        <PageRow icon="layers" label="Shop page"     desc="Main product archive"
                            name="storebuild_shop_page_id"      value={settings.storebuild_shop_page_id}
                            options={shopList}     onChange={handleChange} />
                        <PageRow icon="wcard"  label="Single product" desc="Product detail layout"
                            name="storebuild_single_page_id"    value={settings.storebuild_single_page_id}
                            options={singleList}   onChange={handleChange} />
                        <PageRow icon="cart"   label="Cart page"     desc="Cart layout & summary"
                            name="storebuild_cart_page_id"      value={settings.storebuild_cart_page_id}
                            options={cartList}     onChange={handleChange} />
                        <PageRow icon="wchk"   label="Checkout page" desc="Checkout & payment"
                            name="storebuild_checkout_page_id"  value={settings.storebuild_checkout_page_id}
                            options={checkoutList} onChange={handleChange} />
                        <PageRow icon="check"  label="Thank-you page" desc="Order confirmation"
                            name="storebuild_thankyou_page_id"  value={settings.storebuild_thankyou_page_id}
                            options={thankyouList} onChange={handleChange} />
                        <PageRow icon="user"   label="My Account"    desc="Customer dashboard"
                            name="storebuild_my_account_page_id" value={settings.storebuild_my_account_page_id}
                            options={myAccountList} onChange={handleChange} />
                    </div>
                </div>

                {/* ── Right: Catalog behavior ── */}
                <div className="strb-woo-panel">
                    <div className="strb-woo-panel-head">
                        <h3>Catalog behavior</h3>
                        <p>Control how products are displayed and shopped.</p>
                    </div>
                    <div className="strb-woo-rows">
                        <CatalogRow icon="wgrid"   label="Products per page" desc="Items shown in the shop grid">
                            <Stepper value={settings.storebuild_products_limits} onChange={handleLimit} />
                        </CatalogRow>
                        <CatalogRow icon="heart"   label="Wishlist" desc="Let customers save products">
                            <Toggle name="storebuild_wishlist"  checked={modules?.storebuild_wishlist}
                                onChange={() => handleToggle('storebuild_wishlist')} />
                        </CatalogRow>
                        <CatalogRow icon="compare" label="Compare"  desc="Side-by-side product comparison">
                            <Toggle name="storebuild_compare"  checked={modules?.storebuild_compare}
                                onChange={() => handleToggle('storebuild_compare')} />
                        </CatalogRow>
                        <CatalogRow icon="eye"     label="Quick view" desc="Preview products in a popup">
                            <Toggle name="storebuild_quickview" checked={modules?.storebuild_quickview}
                                onChange={() => handleToggle('storebuild_quickview')} />
                        </CatalogRow>
                        <CatalogRow icon="star"    label="Sale badge" desc="Show a badge on sale products">
                            <Toggle name="storebuild_sale_badge" checked={modules?.storebuild_sale_badge}
                                onChange={() => handleToggle('storebuild_sale_badge')} />
                        </CatalogRow>
                    </div>
                </div>
            </div>

            <SaveBar visible={dirty} saving={saving} onSave={handleSave} />
        </div>
    )
}

export default Woocommerce