<script setup lang="ts">
import { Save, Scissors } from '@lucide/vue';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import {
    Field,
    FieldError,
    FieldGroup,
    FieldLabel,
    FieldSet,
} from '@/components/ui/field';
import { Separator } from '@/components/ui/separator';
import { Textarea } from '@/components/ui/textarea';
import { FIELD_LIMITS } from '@/lib/field-limits';
import { formErrors, type FormWithErrors } from '@/lib/form';
import type { CuttingMaterialCartItem, CuttingResultCartItem } from '@/types/cutting';
import CuttingPosMaterialSummaryItems from './CuttingPosMaterialSummaryItems.vue';
import CuttingPosResultSummaryItems from './CuttingPosResultSummaryItems.vue';

defineProps<{
    form: FormWithErrors & { description: string; processing?: boolean };
    materialCart: CuttingMaterialCartItem[];
    resultCart: CuttingResultCartItem[];
    totalResultPieces: number;
    submitLabel: string;
}>();

const emit = defineEmits<{
    submit: [];
    'open-detail': [];
    'remove-material': [index: number];
    'sync-material-field': [index: number];
    'remove-result': [index: number];
    'sync-result-totals': [item: CuttingResultCartItem];
    'sync-result-field': [index: number];
}>();
</script>

<template>
    <Card class="h-fit xl:sticky xl:top-4">
        <CardHeader class="pb-3">
            <CardTitle class="flex items-center justify-between gap-2 text-base">
                <span class="flex items-center gap-2">
                    <Scissors class="size-4" />
                    Ringkasan Cutting
                </span>
                <span class="flex items-center gap-2">
                    <button
                        v-if="materialCart.length > 0 || resultCart.length > 0"
                        type="button"
                        class="text-xs font-normal text-primary underline underline-offset-2 hover:text-primary/80"
                        @click="emit('open-detail')"
                    >
                        Lihat Detail
                    </button>
                    <Badge v-if="totalResultPieces > 0" variant="secondary" class="tabular-nums font-semibold">
                        Total: {{ totalResultPieces }} pcs
                    </Badge>
                </span>
            </CardTitle>
        </CardHeader>
        <CardContent>
            <form @submit.prevent="emit('submit')">
                <FieldGroup>
                    <FieldSet class="grid gap-4">
                        <Field>
                            <FieldLabel for="description">Keterangan</FieldLabel>
                            <Textarea
                                id="description"
                                v-model="form.description"
                                placeholder="Contoh: Cutting batch pagi"
                                rows="2"
                                :maxlength="FIELD_LIMITS.description"
                            />
                            <FieldError :errors="formErrors(form, 'description')" />
                        </Field>

                        <CuttingPosMaterialSummaryItems
                            :material-cart="materialCart"
                            @remove="emit('remove-material', $event)"
                            @sync-field="emit('sync-material-field', $event)"
                        />

                        <Separator />

                        <CuttingPosResultSummaryItems
                            :result-cart="resultCart"
                            :total-result-pieces="totalResultPieces"
                            @remove="emit('remove-result', $event)"
                            @sync-totals="emit('sync-result-totals', $event)"
                            @sync-field="emit('sync-result-field', $event)"
                        />

                        <Button
                            type="submit"
                            class="w-full"
                            :disabled="form.processing || materialCart.length === 0 || resultCart.length === 0"
                        >
                            <Save class="size-4" />
                            {{ form.processing ? 'Menyimpan...' : submitLabel }}
                        </Button>
                    </FieldSet>
                </FieldGroup>
            </form>
        </CardContent>
    </Card>
</template>
