<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 { Button } from '@/components/ui/button';
import {
    Card,
    CardContent
} from '@/components/ui/card';
import {
    Field, FieldError,
    FieldGroup,
    FieldLabel,
    FieldSet
} from '@/components/ui/field';
import { Input } from '@/components/ui/input';
import { Switch } from '@/components/ui/switch';
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_enabled: props.data.tiktok_shop_enabled,
    tiktok_shop_admin_fee: props.data.tiktok_shop_admin_fee,
    tiktok_shop_transaction_fee: props.data.tiktok_shop_transaction_fee,
    tiktok_shop_payment_fee: props.data.tiktok_shop_payment_fee,
    tiktok_shop_affiliate_commission: props.data.tiktok_shop_affiliate_commission,
    tiktok_shop_shipping_subsidy: props.data.tiktok_shop_shipping_subsidy,
    tiktok_shop_vat_rate: props.data.tiktok_shop_vat_rate,

    shopee_enabled: props.data.shopee_enabled,
    shopee_commission_fee: props.data.shopee_commission_fee,
    shopee_transaction_fee: props.data.shopee_transaction_fee,
    shopee_service_fee: props.data.shopee_service_fee,
    shopee_payment_fee: props.data.shopee_payment_fee,
    shopee_affiliate_commission: props.data.shopee_affiliate_commission,
    shopee_shipping_subsidy: props.data.shopee_shipping_subsidy,
    shopee_voucher_fee: props.data.shopee_voucher_fee,
});

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">
                                <Field>
                                    <FieldLabel for="tiktok_shop_admin_fee">Biaya Admin (%)</FieldLabel>
                                    <Input id="tiktok_shop_admin_fee" v-model="form.tiktok_shop_admin_fee" type="number"
                                        step="0.01" min="0" max="100" />
                                    <FieldError :errors="formErrors(form, 'tiktok_shop_admin_fee')" />
                                </Field>

                                <Field>
                                    <FieldLabel for="tiktok_shop_transaction_fee">Biaya Transaksi (%)</FieldLabel>
                                    <Input id="tiktok_shop_transaction_fee" v-model="form.tiktok_shop_transaction_fee"
                                        type="number" step="0.01" min="0" max="100" />
                                    <FieldError :errors="formErrors(form, 'tiktok_shop_transaction_fee')" />
                                </Field>

                                <Field>
                                    <FieldLabel for="tiktok_shop_payment_fee">Biaya Pembayaran (%)</FieldLabel>
                                    <Input id="tiktok_shop_payment_fee" v-model="form.tiktok_shop_payment_fee"
                                        type="number" step="0.01" min="0" max="100" />
                                    <FieldError :errors="formErrors(form, 'tiktok_shop_payment_fee')" />
                                </Field>

                                <Field>
                                    <FieldLabel for="tiktok_shop_affiliate_commission">Komisi Afiliasi (%)</FieldLabel>
                                    <Input id="tiktok_shop_affiliate_commission"
                                        v-model="form.tiktok_shop_affiliate_commission" type="number" step="0.01"
                                        min="0" max="100" />
                                    <FieldError :errors="formErrors(form, 'tiktok_shop_affiliate_commission')" />
                                </Field>

                                <Field>
                                    <FieldLabel for="tiktok_shop_shipping_subsidy">Subsidi Ongkir (%)</FieldLabel>
                                    <Input id="tiktok_shop_shipping_subsidy" v-model="form.tiktok_shop_shipping_subsidy"
                                        type="number" step="0.01" min="0" max="100" />
                                    <FieldError :errors="formErrors(form, 'tiktok_shop_shipping_subsidy')" />
                                </Field>

                                <Field>
                                    <FieldLabel for="tiktok_shop_vat_rate">PPN / Pajak (%)</FieldLabel>
                                    <Input id="tiktok_shop_vat_rate" v-model="form.tiktok_shop_vat_rate" type="number"
                                        step="0.01" min="0" max="100" />
                                    <FieldError :errors="formErrors(form, 'tiktok_shop_vat_rate')" />
                                </Field>

                                <div class="flex items-center gap-2">
                                    <Switch id="tiktok_shop_enabled" v-model:checked="form.tiktok_shop_enabled" />
                                    <FieldLabel for="tiktok_shop_enabled" class="mb-0 text-sm">
                                        Aktif
                                    </FieldLabel>
                                </div>
                            </FieldGroup>
                        </FieldSet>
                    </CardContent>
                </Card>

                <Card v-show="activePlatform === 'shopee'">
                    <CardContent>
                        <FieldSet>
                            <FieldGroup class="grid gap-4 sm:grid-cols-2">
                                <Field>
                                    <FieldLabel for="shopee_commission_fee">Komisi Shopee (%)</FieldLabel>
                                    <Input id="shopee_commission_fee" v-model="form.shopee_commission_fee" type="number"
                                        step="0.01" min="0" max="100" />
                                    <FieldError :errors="formErrors(form, 'shopee_commission_fee')" />
                                </Field>

                                <Field>
                                    <FieldLabel for="shopee_transaction_fee">Biaya Transaksi (%)</FieldLabel>
                                    <Input id="shopee_transaction_fee" v-model="form.shopee_transaction_fee"
                                        type="number" step="0.01" min="0" max="100" />
                                    <FieldError :errors="formErrors(form, 'shopee_transaction_fee')" />
                                </Field>

                                <Field>
                                    <FieldLabel for="shopee_service_fee">Biaya Layanan (%)</FieldLabel>
                                    <Input id="shopee_service_fee" v-model="form.shopee_service_fee" type="number"
                                        step="0.01" min="0" max="100" />
                                    <FieldError :errors="formErrors(form, 'shopee_service_fee')" />
                                </Field>

                                <Field>
                                    <FieldLabel for="shopee_payment_fee">Biaya Pembayaran (%)</FieldLabel>
                                    <Input id="shopee_payment_fee" v-model="form.shopee_payment_fee" type="number"
                                        step="0.01" min="0" max="100" />
                                    <FieldError :errors="formErrors(form, 'shopee_payment_fee')" />
                                </Field>

                                <Field>
                                    <FieldLabel for="shopee_affiliate_commission">Komisi Afiliasi Shopee (%)
                                    </FieldLabel>
                                    <Input id="shopee_affiliate_commission" v-model="form.shopee_affiliate_commission"
                                        type="number" step="0.01" min="0" max="100" />
                                    <FieldError :errors="formErrors(form, 'shopee_affiliate_commission')" />
                                </Field>

                                <Field>
                                    <FieldLabel for="shopee_shipping_subsidy">Subsidi Ongkir (%)</FieldLabel>
                                    <Input id="shopee_shipping_subsidy" v-model="form.shopee_shipping_subsidy"
                                        type="number" step="0.01" min="0" max="100" />
                                    <FieldError :errors="formErrors(form, 'shopee_shipping_subsidy')" />
                                </Field>

                                <Field>
                                    <FieldLabel for="shopee_voucher_fee">Biaya Voucher / Diskon (%)</FieldLabel>
                                    <Input id="shopee_voucher_fee" v-model="form.shopee_voucher_fee" type="number"
                                        step="0.01" min="0" max="100" />
                                    <FieldError :errors="formErrors(form, 'shopee_voucher_fee')" />
                                </Field>

                                <div class="flex items-center gap-2">
                                    <Switch id="shopee_enabled" v-model:checked="form.shopee_enabled" />
                                    <FieldLabel for="shopee_enabled" class="mb-0 text-sm">
                                        Aktif
                                    </FieldLabel>
                                </div>
                            </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>
