<template>
  <div class="max-w-4xl mx-auto space-y-6">
    <div>
      <h1 class="text-3xl font-bold">Integrations</h1>
      <p class="text-muted-foreground mt-2">
        Configure third-party service integrations for your tenant
      </p>
    </div>

    <!-- Twilio Configuration -->
    <Card>
      <CardHeader>
        <CardTitle class="flex items-center gap-2">
          <Phone class="w-5 h-5" />
          Twilio Voice
        </CardTitle>
        <CardDescription>
          Configure Twilio for voice calling capabilities
        </CardDescription>
      </CardHeader>
      <CardContent class="space-y-4">
        <div class="space-y-2">
          <Label for="twilio-account-sid">Account SID</Label>
          <Input
            id="twilio-account-sid"
            v-model="twilioConfig.accountSid"
            placeholder="ACxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
          />
        </div>
        <div class="space-y-2">
          <Label for="twilio-auth-token">Auth Token</Label>
          <Input
            id="twilio-auth-token"
            v-model="twilioConfig.authToken"
            type="password"
            placeholder="Enter your Twilio auth token"
          />
        </div>
        <div class="space-y-2">
          <Label for="twilio-phone-number">Phone Number</Label>
          <Input
            id="twilio-phone-number"
            v-model="twilioConfig.phoneNumber"
            placeholder="+1234567890"
          />
        </div>
      </CardContent>
    </Card>

    <!-- OpenAI Configuration -->
    <Card>
      <CardHeader>
        <CardTitle class="flex items-center gap-2">
          <Bot class="w-5 h-5" />
          OpenAI Realtime
        </CardTitle>
        <CardDescription>
          Configure OpenAI for AI-assisted calling features
        </CardDescription>
      </CardHeader>
      <CardContent class="space-y-4">
        <div class="space-y-2">
          <Label for="openai-api-key">API Key</Label>
          <Input
            id="openai-api-key"
            v-model="openaiConfig.apiKey"
            type="password"
            placeholder="sk-..."
          />
        </div>
        <div class="space-y-2">
          <Label for="openai-model">Model</Label>
          <Input
            id="openai-model"
            v-model="openaiConfig.model"
            placeholder="gpt-4o-realtime-preview"
          />
          <p class="text-xs text-muted-foreground">
            Default: gpt-4o-realtime-preview
          </p>
        </div>
        <div class="space-y-2">
          <Label for="openai-voice">Voice</Label>
          <Input
            id="openai-voice"
            v-model="openaiConfig.voice"
            placeholder="alloy"
          />
          <p class="text-xs text-muted-foreground">
            Options: alloy, echo, fable, onyx, nova, shimmer
          </p>
        </div>
      </CardContent>
    </Card>

    <!-- Save Button -->
    <div class="flex justify-end">
      <Button @click="saveConfig" :disabled="saving">
        <Save class="w-4 h-4 mr-2" />
        {{ saving ? 'Saving...' : 'Save Configuration' }}
      </Button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '~/components/ui/card';
import { Input } from '~/components/ui/input';
import { Label } from '~/components/ui/label';
import { Button } from '~/components/ui/button';
import { Phone, Bot, Save } from 'lucide-vue-next';
import { useApi } from '~/composables/useApi';
import { toast } from 'vue-sonner';

const { api } = useApi();

const twilioConfig = ref({
  accountSid: '',
  authToken: '',
  phoneNumber: '',
});

const openaiConfig = ref({
  apiKey: '',
  model: 'gpt-4o-realtime-preview',
  voice: 'alloy',
});

const saving = ref(false);
const loading = ref(true);

onMounted(async () => {
  try {
    const response = await api.get('/tenant/integrations');
    if (response.data) {
      if (response.data.twilio) {
        twilioConfig.value = { ...twilioConfig.value, ...response.data.twilio };
      }
      if (response.data.openai) {
        openaiConfig.value = { ...openaiConfig.value, ...response.data.openai };
      }
    }
  } catch (error: any) {
    console.error('Failed to load configuration:', error);
  } finally {
    loading.value = false;
  }
});

const saveConfig = async () => {
  saving.value = true;

  try {
    const integrationsConfig = {
      twilio: twilioConfig.value,
      openai: openaiConfig.value,
    };

    await api.put('/tenant/integrations', { integrationsConfig });

    toast.success('Configuration saved successfully');
  } catch (error: any) {
    toast.error(error.message || 'Failed to save configuration');
  } finally {
    saving.value = false;
  }
};
</script>
