<template>
  <div class="space-y-6">
    <Card>
      <CardHeader>
        <CardTitle>Org-Wide Default</CardTitle>
        <CardDescription>
          Control the baseline visibility for records of this object
        </CardDescription>
      </CardHeader>
      <CardContent class="space-y-4">
        <div class="space-y-2">
          <Label for="orgWideDefault">Record Visibility</Label>
          <Select v-model="localOrgWideDefault" @update:model-value="handleOrgWideDefaultChange">
            <SelectTrigger id="orgWideDefault">
              <SelectValue placeholder="Select visibility level" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="private">
                <div>
                  <div class="font-semibold">Private</div>
                  <div class="text-xs text-muted-foreground">Only record owner can see</div>
                </div>
              </SelectItem>
              <SelectItem value="public_read">
                <div>
                  <div class="font-semibold">Public Read Only</div>
                  <div class="text-xs text-muted-foreground">Everyone can read, only owner can edit/delete</div>
                </div>
              </SelectItem>
              <SelectItem value="public_read_write">
                <div>
                  <div class="font-semibold">Public Read/Write</div>
                  <div class="text-xs text-muted-foreground">Everyone can read, edit, and delete all records</div>
                </div>
              </SelectItem>
            </SelectContent>
          </Select>
          <p class="text-sm text-muted-foreground">
            This setting controls who can see records by default. Individual user permissions are granted through roles.
          </p>
        </div>

      </CardContent>
    </Card>

    <Card>
      <CardHeader>
        <CardTitle>Field-Level Security</CardTitle>
        <CardDescription>
          Control field visibility and editability by role (coming soon)
        </CardDescription>
      </CardHeader>
      <CardContent>
        <div class="text-sm text-muted-foreground">
          Field-level permissions will be managed through role configuration.
          Navigate to Setup → Roles to configure field access for each role.
        </div>
      </CardContent>
    </Card>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '~/components/ui/card';
import { Label } from '~/components/ui/label';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '~/components/ui/select';

const props = defineProps<{
  objectApiName: string;
  orgWideDefault?: string;
}>();

const emit = defineEmits<{
  update: [orgWideDefault: string];
}>();

const { $api } = useNuxtApp();
const { showToast } = useToast();

const localOrgWideDefault = ref(props.orgWideDefault || 'private');

// Watch for prop changes
watch(() => props.orgWideDefault, (newValue) => {
  if (newValue) {
    localOrgWideDefault.value = newValue;
  }
});

const handleOrgWideDefaultChange = async (value: string) => {
  try {
    // Update object definition
    await $api(`/api/setup/objects/${props.objectApiName}`, {
      method: 'PATCH',
      body: {
        orgWideDefault: value
      }
    });

    showToast({
      title: 'Success',
      description: 'Org-Wide Default saved successfully',
      variant: 'default'
    });

    emit('update', value);
  } catch (error: any) {
    console.error('Failed to update org-wide default:', error);
    showToast({
      title: 'Error',
      description: error.data?.message || 'Failed to save changes',
      variant: 'destructive'
    });
  }
};
</script>
