<script setup>
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/Components/ui/table';
import { Badge } from '@/Components/ui/badge';

const props = defineProps({ mappings: Array });
</script>
<template>
  <div v-if="mappings?.length" class="pt-4">
    <h3 class="font-semibold mb-2">Current Saved Mappings</h3>
    <div class="overflow-x-auto rounded-lg border">
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead>Source column</TableHead>
            <TableHead>Target field</TableHead>
            <TableHead>Transform</TableHead>
            <TableHead>Mode</TableHead>
            <TableHead>Options</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          <TableRow
            v-for="m in mappings"
            :key="m.id || m.source_column + m.target_field"
          >
            <TableCell class="font-medium">{{ m.source_column }}</TableCell>
            <TableCell>{{ m.target_field }}</TableCell>
            <TableCell>
              <Badge v-if="m.transform" variant="outline" class="text-xs">{{ m.transform }}</Badge>
              <span v-else class="text-muted-foreground">—</span>
            </TableCell>
            <TableCell>
              <Badge variant="secondary" class="text-xs">{{ m.apply_mode || "both" }}</Badge>
            </TableCell>
            <TableCell>
              <template v-if="m.options">
                <div class="flex flex-wrap gap-1">
                  <Badge v-if="m.options.key" variant="outline" class="text-[10px]">
                    key: {{ m.options.key }}
                  </Badge>
                  <Badge v-if="m.options.type" variant="outline" class="text-[10px]">
                    type: {{ m.options.type }}
                  </Badge>
                </div>
              </template>
              <span v-else class="text-muted-foreground">—</span>
            </TableCell>
          </TableRow>
        </TableBody>
      </Table>
    </div>
  </div>
</template>
