<script setup lang="ts">
import { useForm } from '@inertiajs/vue3';
import { Save, ShoppingBag, Store, TriangleAlert } from '@lucide/vue';
import { ref } from 'vue';
import { toast } from 'vue-sonner';
import { Button } from '@/components/ui/button';
import {
    Card,
    CardContent
} from '@/components/ui/card';
import {
    FieldGroup,
    FieldSet
} from '@/components/ui/field';
import { MarketplacePlatform as MarketplacePlatformConst } from '@/constants/marketplace-platform';
import { formErrors } from '@/lib/form';
import { cn } from '@/lib/utils';
import { update } from '@/routes/admin/system/settings/marketplace';
import type {
    MarketplacePlatform,
    MarketplaceSettingsData,
} from '@/types/setting';
import MarketplaceFeeField from './MarketplaceFeeField.vue';

const props = defineProps<{
    data: MarketplaceSettingsData;
    hasPendingVerification: boolean;
}>();

const activePlatform = ref<MarketplacePlatform>(MarketplacePlatformConst.TIKTOK_SHOP);

const platformItems: Array<{
    key: MarketplacePlatform;
    label: string;
    icon: typeof Store;
}> = [
        { key: MarketplacePlatformConst.TIKTOK_SHOP, label: 'TikTok Shop', icon: Store },
        { key: MarketplacePlatformConst.SHOPEE, label: 'Shopee', icon: ShoppingBag },
    ];

const form = useForm({
    tiktok_shop_platform_commission: { ...props.data.tiktok_shop_platform_commission },
    tiktok_shop_logistics_service_fee: { ...props.data.tiktok_shop_logistics_service_fee },
    tiktok_shop_dynamic_commission: { ...props.data.tiktok_shop_dynamic_commission },
    tiktok_shop_order_processing_fee: { ...props.data.tiktok_shop_order_processing_fee },
    tiktok_shop_affiliate: { ...props.data.tiktok_shop_affiliate },
    tiktok_shop_pre_order_service_fee: { ...props.data.tiktok_shop_pre_order_service_fee },

    shopee_admin_fee: { ...props.data.shopee_admin_fee },
    shopee_program_fee: { ...props.data.shopee_program_fee },
    shopee_shipping_savings: { ...props.data.shopee_shipping_savings },
    shopee_premium: { ...props.data.shopee_premium },
    shopee_service_fee: { ...props.data.shopee_service_fee },
    shopee_order_processing_fee: { ...props.data.shopee_order_processing_fee },
    shopee_ams_commission_fee: { ...props.data.shopee_ams_commission_fee },
    shopee_pre_order: { ...props.data.shopee_pre_order },
    shopee_live_extra: { ...props.data.shopee_live_extra },
});

function feeErrors(key: string): string[] {
    return [
        ...formErrors(form, `${key}.scope`),
        ...formErrors(form, `${key}.value_type`),
        ...formErrors(form, `${key}.value`),
    ];
}

function submit() {
    form.put(update.url(), {
        preserveScroll: true,
        onError: (errors: any) => {
            if (errors.system) {
                toast.error(errors.system);
            }
        },
    });
}
</script>

<template>
    <form @submit.prevent="submit">
        <div v-if="props.hasPendingVerification" class="mb-6 rounded-lg border border-yellow-200 bg-yellow-50 p-4 dark:border-yellow-900/30 dark:bg-yellow-950/20">
            <div class="flex gap-3">
                <TriangleAlert class="size-5 text-yellow-600 dark:text-yellow-400 shrink-0 mt-0.5" />
                <div>
                    <h5 class="font-medium text-yellow-800 dark:text-yellow-300">Menunggu Verifikasi Owner</h5>
                    <p class="mt-1 text-sm text-yellow-700/90 dark:text-yellow-400/90">
                        Perubahan pengaturan marketplace sedang menunggu verifikasi owner. Anda tidak dapat melakukan perubahan baru hingga pengajuan ini diproses.
                    </p>
                </div>
            </div>
        </div>

        <div class="flex flex-col gap-6 lg:flex-row">
            <nav class="flex shrink-0 flex-row gap-1 overflow-x-auto lg:w-44 lg:flex-col lg:overflow-visible">
                <button v-for="item in platformItems" :key="item.key" type="button" :class="cn(
                    'inline-flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium whitespace-nowrap transition-colors',
                    activePlatform === item.key
                        ? 'bg-accent text-accent-foreground'
                        : 'text-muted-foreground hover:bg-accent/50 hover:text-accent-foreground',
                )" @click="activePlatform = item.key">
                    <component :is="item.icon" class="size-4 shrink-0" />
                    {{ item.label }}
                </button>
            </nav>

            <div class="min-w-0 flex-1 space-y-6">
                <Card v-show="activePlatform === MarketplacePlatformConst.TIKTOK_SHOP">
                    <CardContent>
                        <FieldSet>
                            <FieldGroup class="grid gap-4 sm:grid-cols-2">
                                <MarketplaceFeeField id="tiktok_shop_platform_commission"
                                    v-model="form.tiktok_shop_platform_commission" label="Biaya Komisi Platform"
                                    :errors="feeErrors('tiktok_shop_platform_commission')"
                                    :disabled="props.hasPendingVerification" />

                                <MarketplaceFeeField id="tiktok_shop_logistics_service_fee"
                                    v-model="form.tiktok_shop_logistics_service_fee" label="Biaya Layanan Logistik"
                                    :errors="feeErrors('tiktok_shop_logistics_service_fee')"
                                    :disabled="props.hasPendingVerification" />

                                <MarketplaceFeeField id="tiktok_shop_dynamic_commission"
                                    v-model="form.tiktok_shop_dynamic_commission" label="Komisi Dinamis"
                                    :errors="feeErrors('tiktok_shop_dynamic_commission')"
                                    :disabled="props.hasPendingVerification" />

                                <MarketplaceFeeField id="tiktok_shop_order_processing_fee"
                                    v-model="form.tiktok_shop_order_processing_fee" label="Biaya Pemrosesan Pesanan"
                                    :errors="feeErrors('tiktok_shop_order_processing_fee')"
                                    :disabled="props.hasPendingVerification" />

                                <MarketplaceFeeField id="tiktok_shop_affiliate" v-model="form.tiktok_shop_affiliate"
                                    label="Affiliate" :errors="feeErrors('tiktok_shop_affiliate')"
                                    :disabled="props.hasPendingVerification" />

                                <MarketplaceFeeField id="tiktok_shop_pre_order_service_fee"
                                    v-model="form.tiktok_shop_pre_order_service_fee" label="Biaya Layanan Pre Order"
                                    :errors="feeErrors('tiktok_shop_pre_order_service_fee')"
                                    :disabled="props.hasPendingVerification" />
                            </FieldGroup>
                        </FieldSet>
                    </CardContent>
                </Card>

                <Card v-show="activePlatform === MarketplacePlatformConst.SHOPEE">
                    <CardContent>
                        <FieldSet>
                            <FieldGroup class="grid gap-4 sm:grid-cols-2">
                                <MarketplaceFeeField id="shopee_admin_fee" v-model="form.shopee_admin_fee"
                                    label="Biaya Administrasi" :errors="feeErrors('shopee_admin_fee')"
                                    :disabled="props.hasPendingVerification" />

                                <MarketplaceFeeField id="shopee_program_fee" v-model="form.shopee_program_fee"
                                    label="Biaya Program" :errors="feeErrors('shopee_program_fee')"
                                    :disabled="props.hasPendingVerification" />

                                <MarketplaceFeeField id="shopee_shipping_savings" v-model="form.shopee_shipping_savings"
                                    label="Hemat Biaya Kirim" :errors="feeErrors('shopee_shipping_savings')"
                                    :disabled="props.hasPendingVerification" />

                                <MarketplaceFeeField id="shopee_premium" v-model="form.shopee_premium" label="Premi"
                                    :errors="feeErrors('shopee_premium')"
                                    :disabled="props.hasPendingVerification" />

                                <MarketplaceFeeField id="shopee_service_fee" v-model="form.shopee_service_fee"
                                    label="Biaya Layanan" :errors="feeErrors('shopee_service_fee')"
                                    :disabled="props.hasPendingVerification" />

                                <MarketplaceFeeField id="shopee_order_processing_fee"
                                    v-model="form.shopee_order_processing_fee" label="Biaya Proses Pesanan"
                                    :errors="feeErrors('shopee_order_processing_fee')"
                                    :disabled="props.hasPendingVerification" />

                                <MarketplaceFeeField id="shopee_ams_commission_fee"
                                    v-model="form.shopee_ams_commission_fee" label="Biaya Komisi AMS"
                                    :errors="feeErrors('shopee_ams_commission_fee')"
                                    :disabled="props.hasPendingVerification" />

                                <MarketplaceFeeField id="shopee_pre_order" v-model="form.shopee_pre_order"
                                    label="Pre Order" :errors="feeErrors('shopee_pre_order')"
                                    :disabled="props.hasPendingVerification" />

                                <MarketplaceFeeField id="shopee_live_extra" v-model="form.shopee_live_extra"
                                    label="Live Extra" :errors="feeErrors('shopee_live_extra')"
                                    :disabled="props.hasPendingVerification" />
                            </FieldGroup>
                        </FieldSet>
                    </CardContent>
                </Card>

                <div class="flex justify-end">
                    <Button type="submit" :disabled="form.processing || props.hasPendingVerification">
                        <Save class="size-4" />
                        {{ form.processing ? 'Menyimpan...' : 'Simpan' }}
                    </Button>
                </div>
            </div>
        </div>
    </form>
</template>
