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

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

const activePlatform = ref<MarketplacePlatform>('tiktok_shop');

const platformItems: Array<{
    key: MarketplacePlatform;
    label: string;
    icon: typeof Store;
}> = [
        { key: 'tiktok_shop', label: 'TikTok Shop', icon: Store },
        { key: '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('/admin/system/setting/marketplace', {
        preserveScroll: true,
        onError: () => {
            toast.error('Gagal menyimpan pengaturan marketplace.');
        },
    });
}
</script>

<template>
    <form @submit.prevent="submit">
        <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 === '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')"
                                />

                                <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')"
                                />

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

                                <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')"
                                />

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

                                <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')"
                                />
                            </FieldGroup>
                        </FieldSet>
                    </CardContent>
                </Card>

                <Card v-show="activePlatform === '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')"
                                />

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

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

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

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

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

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

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

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

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