<script setup>
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/Components/ui/card";
import { Button } from "@/Components/ui/button";
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/Components/ui/dialog";
import { Input } from "@/Components/ui/input";
import { Label } from "@/Components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/Components/ui/select";
import { Checkbox } from "@/Components/ui/checkbox";
import { Badge } from "@/Components/ui/badge";
import { Textarea } from "@/Components/ui/textarea";
import { useForm, router } from "@inertiajs/vue3";
import { ref } from "vue";
import { Plus, Pencil, Trash, Eye, EyeOff } from "lucide-vue-next";

const props = defineProps({
  report: Object,
  columns: Array,
});

const showCreateDialog = ref(false);
const showEditDialog = ref(false);
const editingColumn = ref(null);

const createForm = useForm({
  key: "",
  label: "",
  type: "string",
  expression: "",
  sortable: true,
  visible: true,
  order: 0,
  format_options: null,
});

const editForm = useForm({
  key: "",
  label: "",
  type: "string",
  expression: "",
  sortable: true,
  visible: true,
  order: 0,
  format_options: null,
});

function openCreateDialog() {
  createForm.reset();
  createForm.order = props.columns.length;
  showCreateDialog.value = true;
}

function submitCreate() {
  createForm.post(route("settings.reports.columns.store", props.report.id), {
    preserveScroll: true,
    onSuccess: () => {
      showCreateDialog.value = false;
      createForm.reset();
    },
  });
}

function openEditDialog(column) {
  editingColumn.value = column;
  editForm.key = column.key;
  editForm.label = column.label;
  editForm.type = column.type;
  editForm.expression = column.expression;
  editForm.sortable = column.sortable;
  editForm.visible = column.visible;
  editForm.order = column.order;
  editForm.format_options = column.format_options;
  showEditDialog.value = true;
}

function submitEdit() {
  editForm.put(route("settings.reports.columns.update", editingColumn.value.id), {
    preserveScroll: true,
    onSuccess: () => {
      showEditDialog.value = false;
      editForm.reset();
      editingColumn.value = null;
    },
  });
}

function deleteColumn(column) {
  if (confirm("Are you sure you want to delete this column?")) {
    router.delete(route("settings.reports.columns.destroy", column.id), {
      preserveScroll: true,
    });
  }
}
</script>

<template>
  <Card>
    <CardHeader>
      <div class="flex items-start justify-between">
        <div>
          <CardTitle>Report Columns</CardTitle>
          <CardDescription>
            Define which columns to select and display in the report
          </CardDescription>
        </div>
        <Button @click="openCreateDialog">
          <Plus class="mr-2 h-4 w-4" />
          Add Column
        </Button>
      </div>
    </CardHeader>
    <CardContent>
      <div v-if="columns.length === 0" class="text-center py-8 text-gray-500">
        No columns configured. Add columns to display in the report.
      </div>

      <div v-else class="space-y-3">
        <div
          v-for="column in columns"
          :key="column.id"
          class="flex items-start justify-between rounded-lg border p-4"
        >
          <div class="flex-1">
            <div class="flex items-center gap-2 mb-2">
              <Eye v-if="column.visible" class="h-4 w-4 text-green-600" />
              <EyeOff v-else class="h-4 w-4 text-gray-400" />
              <span class="font-semibold">{{ column.label }}</span>
              <Badge variant="outline">{{ column.type }}</Badge>
              <Badge v-if="column.sortable" variant="secondary">sortable</Badge>
            </div>
            <div class="text-sm text-gray-600 dark:text-gray-400 font-mono mb-1">
              {{ column.key }}
            </div>
            <div class="text-sm text-gray-500 font-mono">
              {{ column.expression }}
            </div>
            <div class="text-xs text-gray-500 mt-1">Order: {{ column.order }}</div>
          </div>
          <div class="flex gap-2">
            <Button variant="ghost" size="icon" @click="openEditDialog(column)">
              <Pencil class="h-4 w-4" />
            </Button>
            <Button variant="ghost" size="icon" @click="deleteColumn(column)">
              <Trash class="h-4 w-4 text-destructive" />
            </Button>
          </div>
        </div>
      </div>
    </CardContent>
  </Card>

  <!-- Create Dialog -->
  <Dialog v-model:open="showCreateDialog">
    <DialogContent class="max-w-2xl">
      <DialogHeader>
        <DialogTitle>Add Column</DialogTitle>
        <DialogDescription>
          Add a new column to the report output
        </DialogDescription>
      </DialogHeader>

      <form @submit.prevent="submitCreate" class="space-y-4">
        <div class="grid grid-cols-2 gap-4">
          <div class="space-y-2">
            <Label for="create-key">Key *</Label>
            <Input
              id="create-key"
              v-model="createForm.key"
              placeholder="contract_reference"
              required
            />
          </div>

          <div class="space-y-2">
            <Label for="create-label">Label *</Label>
            <Input
              id="create-label"
              v-model="createForm.label"
              placeholder="Contract Reference"
              required
            />
          </div>
        </div>

        <div class="space-y-2">
          <Label for="create-type">Type *</Label>
          <Select v-model="createForm.type">
            <SelectTrigger>
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="string">string</SelectItem>
              <SelectItem value="number">number</SelectItem>
              <SelectItem value="date">date</SelectItem>
              <SelectItem value="boolean">boolean</SelectItem>
              <SelectItem value="currency">currency</SelectItem>
            </SelectContent>
          </Select>
        </div>

        <div class="space-y-2">
          <Label for="create-expression">SQL Expression *</Label>
          <Textarea
            id="create-expression"
            v-model="createForm.expression"
            placeholder="contracts.reference"
            rows="2"
            required
          />
          <p class="text-xs text-gray-500">SQL expression or column path</p>
        </div>

        <div class="grid grid-cols-2 gap-4">
          <div class="flex items-center space-x-2">
            <Checkbox
              id="create-sortable"
              v-model="createForm.sortable"
            />
            <Label for="create-sortable" class="cursor-pointer">
              Sortable
            </Label>
          </div>

          <div class="flex items-center space-x-2">
            <Checkbox
              id="create-visible"
              v-model="createForm.visible"
            />
            <Label for="create-visible" class="cursor-pointer">
              Visible
            </Label>
          </div>
        </div>

        <div class="space-y-2">
          <Label for="create-order">Order</Label>
          <Input
            id="create-order"
            v-model.number="createForm.order"
            type="number"
          />
        </div>

        <DialogFooter>
          <Button type="button" variant="outline" @click="showCreateDialog = false">
            Cancel
          </Button>
          <Button type="submit" :disabled="createForm.processing">
            Add Column
          </Button>
        </DialogFooter>
      </form>
    </DialogContent>
  </Dialog>

  <!-- Edit Dialog -->
  <Dialog v-model:open="showEditDialog">
    <DialogContent class="max-w-2xl">
      <DialogHeader>
        <DialogTitle>Edit Column</DialogTitle>
        <DialogDescription>
          Update column configuration
        </DialogDescription>
      </DialogHeader>

      <form @submit.prevent="submitEdit" class="space-y-4">
        <div class="grid grid-cols-2 gap-4">
          <div class="space-y-2">
            <Label for="edit-key">Key *</Label>
            <Input
              id="edit-key"
              v-model="editForm.key"
              required
            />
          </div>

          <div class="space-y-2">
            <Label for="edit-label">Label *</Label>
            <Input
              id="edit-label"
              v-model="editForm.label"
              required
            />
          </div>
        </div>

        <div class="space-y-2">
          <Label for="edit-type">Type *</Label>
          <Select v-model="editForm.type">
            <SelectTrigger>
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="string">string</SelectItem>
              <SelectItem value="number">number</SelectItem>
              <SelectItem value="date">date</SelectItem>
              <SelectItem value="boolean">boolean</SelectItem>
              <SelectItem value="currency">currency</SelectItem>
            </SelectContent>
          </Select>
        </div>

        <div class="space-y-2">
          <Label for="edit-expression">SQL Expression *</Label>
          <Textarea
            id="edit-expression"
            v-model="editForm.expression"
            rows="2"
            required
          />
        </div>

        <div class="grid grid-cols-2 gap-4">
          <div class="flex items-center space-x-2">
            <Checkbox
              id="edit-sortable"
              v-model="editForm.sortable"
            />
            <Label for="edit-sortable" class="cursor-pointer">
              Sortable
            </Label>
          </div>

          <div class="flex items-center space-x-2">
            <Checkbox
              id="edit-visible"
              v-model="editForm.visible"
            />
            <Label for="edit-visible" class="cursor-pointer">
              Visible
            </Label>
          </div>
        </div>

        <div class="space-y-2">
          <Label for="edit-order">Order</Label>
          <Input
            id="edit-order"
            v-model.number="editForm.order"
            type="number"
          />
        </div>

        <DialogFooter>
          <Button type="button" variant="outline" @click="showEditDialog = false">
            Cancel
          </Button>
          <Button type="submit" :disabled="editForm.processing">
            Update Column
          </Button>
        </DialogFooter>
      </form>
    </DialogContent>
  </Dialog>
</template>
