<template>
  <v-container fluid>
    <!-- Header -->
    <v-row class="mb-6">
      <v-col>
        <h1 class="text-h3 font-weight-bold mb-2">System Settings</h1>
        <p class="text-body-1 text-medium-emphasis">Configure system preferences and options</p>
      </v-col>
    </v-row>

    <!-- Settings Tabs -->
    <v-card elevation="2">
      <v-tabs v-model="activeTab" color="primary">
        <v-tab value="general">
          <v-icon start>mdi-cog</v-icon>
          General
        </v-tab>
        <v-tab value="security">
          <v-icon start>mdi-shield-lock</v-icon>
          Security
        </v-tab>
        <v-tab value="email">
          <v-icon start>mdi-email</v-icon>
          Email
        </v-tab>
        <v-tab value="payments">
          <v-icon start>mdi-credit-card</v-icon>
          Payments
        </v-tab>
        <v-tab value="integrations">
          <v-icon start>mdi-api</v-icon>
          Integrations
        </v-tab>
      </v-tabs>

      <v-window v-model="activeTab">
        <!-- General Settings -->
        <v-window-item value="general">
          <v-card-text>
            <v-row>
              <v-col cols="12">
                <h3 class="text-h6 mb-4">Organization Information</h3>
              </v-col>
              <v-col cols="12" md="6">
                <v-text-field
                  v-model="settings.general.orgName"
                  label="Organization Name"
                  variant="outlined"
                />
              </v-col>
              <v-col cols="12" md="6">
                <v-text-field
                  v-model="settings.general.orgEmail"
                  label="Contact Email"
                  variant="outlined"
                  type="email"
                />
              </v-col>
              <v-col cols="12">
                <v-textarea
                  v-model="settings.general.orgDescription"
                  label="Description"
                  variant="outlined"
                  rows="3"
                />
              </v-col>
              <v-col cols="12">
                <v-divider class="my-4" />
              </v-col>
              <v-col cols="12">
                <h3 class="text-h6 mb-4">Regional Settings</h3>
              </v-col>
              <v-col cols="12" md="4">
                <v-select
                  v-model="settings.general.timezone"
                  label="Timezone"
                  :items="timezones"
                  variant="outlined"
                />
              </v-col>
              <v-col cols="12" md="4">
                <v-select
                  v-model="settings.general.dateFormat"
                  label="Date Format"
                  :items="dateFormats"
                  variant="outlined"
                />
              </v-col>
              <v-col cols="12" md="4">
                <v-select
                  v-model="settings.general.currency"
                  label="Currency"
                  :items="currencies"
                  variant="outlined"
                />
              </v-col>
            </v-row>
          </v-card-text>
        </v-window-item>

        <!-- Security Settings -->
        <v-window-item value="security">
          <v-card-text>
            <v-row>
              <v-col cols="12">
                <h3 class="text-h6 mb-4">Authentication</h3>
              </v-col>
              <v-col cols="12">
                <v-switch
                  v-model="settings.security.twoFactor"
                  label="Require Two-Factor Authentication"
                  color="primary"
                />
              </v-col>
              <v-col cols="12">
                <v-switch
                  v-model="settings.security.sso"
                  label="Enable Single Sign-On (SSO)"
                  color="primary"
                />
              </v-col>
              <v-col cols="12" md="6">
                <v-text-field
                  v-model="settings.security.sessionTimeout"
                  label="Session Timeout (minutes)"
                  variant="outlined"
                  type="number"
                />
              </v-col>
              <v-col cols="12" md="6">
                <v-text-field
                  v-model="settings.security.maxLoginAttempts"
                  label="Max Login Attempts"
                  variant="outlined"
                  type="number"
                />
              </v-col>
              <v-col cols="12">
                <v-divider class="my-4" />
              </v-col>
              <v-col cols="12">
                <h3 class="text-h6 mb-4">Password Policy</h3>
              </v-col>
              <v-col cols="12" md="6">
                <v-text-field
                  v-model="settings.security.minPasswordLength"
                  label="Minimum Password Length"
                  variant="outlined"
                  type="number"
                />
              </v-col>
              <v-col cols="12" md="6">
                <v-text-field
                  v-model="settings.security.passwordExpiry"
                  label="Password Expiry (days)"
                  variant="outlined"
                  type="number"
                />
              </v-col>
              <v-col cols="12">
                <v-switch
                  v-model="settings.security.requireSpecialChar"
                  label="Require Special Characters"
                  color="primary"
                />
              </v-col>
              <v-col cols="12">
                <v-switch
                  v-model="settings.security.requireNumbers"
                  label="Require Numbers"
                  color="primary"
                />
              </v-col>
            </v-row>
          </v-card-text>
        </v-window-item>

        <!-- Email Settings -->
        <v-window-item value="email">
          <v-card-text>
            <v-row>
              <v-col cols="12">
                <h3 class="text-h6 mb-4">SMTP Configuration</h3>
              </v-col>
              <v-col cols="12" md="6">
                <v-text-field
                  v-model="settings.email.smtpHost"
                  label="SMTP Host"
                  variant="outlined"
                />
              </v-col>
              <v-col cols="12" md="6">
                <v-text-field
                  v-model="settings.email.smtpPort"
                  label="SMTP Port"
                  variant="outlined"
                  type="number"
                />
              </v-col>
              <v-col cols="12" md="6">
                <v-text-field
                  v-model="settings.email.smtpUsername"
                  label="SMTP Username"
                  variant="outlined"
                />
              </v-col>
              <v-col cols="12" md="6">
                <v-text-field
                  v-model="settings.email.smtpPassword"
                  label="SMTP Password"
                  variant="outlined"
                  type="password"
                />
              </v-col>
              <v-col cols="12">
                <v-switch
                  v-model="settings.email.useTLS"
                  label="Use TLS/SSL"
                  color="primary"
                />
              </v-col>
              <v-col cols="12">
                <v-divider class="my-4" />
              </v-col>
              <v-col cols="12">
                <h3 class="text-h6 mb-4">Email Templates</h3>
              </v-col>
              <v-col cols="12" md="6">
                <v-text-field
                  v-model="settings.email.fromName"
                  label="From Name"
                  variant="outlined"
                />
              </v-col>
              <v-col cols="12" md="6">
                <v-text-field
                  v-model="settings.email.fromEmail"
                  label="From Email"
                  variant="outlined"
                  type="email"
                />
              </v-col>
              <v-col cols="12">
                <v-btn variant="outlined" color="primary">
                  <v-icon start>mdi-email-edit</v-icon>
                  Manage Email Templates
                </v-btn>
              </v-col>
            </v-row>
          </v-card-text>
        </v-window-item>

        <!-- Payment Settings -->
        <v-window-item value="payments">
          <v-card-text>
            <v-row>
              <v-col cols="12">
                <h3 class="text-h6 mb-4">Payment Gateway</h3>
              </v-col>
              <v-col cols="12">
                <v-radio-group v-model="settings.payments.gateway" row>
                  <v-radio label="Stripe" value="stripe" />
                  <v-radio label="PayPal" value="paypal" />
                  <v-radio label="Square" value="square" />
                </v-radio-group>
              </v-col>
              <v-col cols="12" md="6">
                <v-text-field
                  v-model="settings.payments.publicKey"
                  label="Public Key"
                  variant="outlined"
                />
              </v-col>
              <v-col cols="12" md="6">
                <v-text-field
                  v-model="settings.payments.secretKey"
                  label="Secret Key"
                  variant="outlined"
                  type="password"
                />
              </v-col>
              <v-col cols="12">
                <v-divider class="my-4" />
              </v-col>
              <v-col cols="12">
                <h3 class="text-h6 mb-4">Membership Fees</h3>
              </v-col>
              <v-col cols="12" md="4">
                <v-text-field
                  v-model="settings.payments.membershipFee"
                  label="Annual Membership Fee"
                  variant="outlined"
                  prefix="$"
                  type="number"
                />
              </v-col>
              <v-col cols="12" md="4">
                <v-text-field
                  v-model="settings.payments.boardFee"
                  label="Board Member Fee"
                  variant="outlined"
                  prefix="$"
                  type="number"
                />
              </v-col>
              <v-col cols="12" md="4">
                <v-text-field
                  v-model="settings.payments.lateFee"
                  label="Late Payment Fee"
                  variant="outlined"
                  prefix="$"
                  type="number"
                />
              </v-col>
              <v-col cols="12">
                <v-switch
                  v-model="settings.payments.autoRenew"
                  label="Enable Auto-Renewal"
                  color="primary"
                />
              </v-col>
            </v-row>
          </v-card-text>
        </v-window-item>

        <!-- Integrations -->
        <v-window-item value="integrations">
          <v-card-text>
            <v-row>
              <v-col cols="12">
                <h3 class="text-h6 mb-4">Third-Party Integrations</h3>
              </v-col>
              <v-col cols="12">
                <v-list>
                  <v-list-item
                    v-for="integration in integrations"
                    :key="integration.id"
                    class="px-0"
                  >
                    <v-card variant="outlined" class="w-100">
                      <v-card-text>
                        <v-row align="center">
                          <v-col cols="auto">
                            <v-icon :icon="integration.icon" size="32" />
                          </v-col>
                          <v-col>
                            <div class="font-weight-medium">{{ integration.name }}</div>
                            <div class="text-caption text-medium-emphasis">
                              {{ integration.description }}
                            </div>
                          </v-col>
                          <v-col cols="auto">
                            <v-switch
                              v-model="integration.enabled"
                              color="primary"
                              hide-details
                            />
                          </v-col>
                          <v-col cols="auto">
                            <v-btn
                              variant="outlined"
                              size="small"
                              :disabled="!integration.enabled"
                            >
                              Configure
                            </v-btn>
                          </v-col>
                        </v-row>
                      </v-card-text>
                    </v-card>
                  </v-list-item>
                </v-list>
              </v-col>
            </v-row>
          </v-card-text>
        </v-window-item>
      </v-window>

      <v-divider />
      
      <!-- Actions -->
      <v-card-actions class="pa-4">
        <v-spacer />
        <v-btn variant="outlined" @click="resetSettings">
          Reset to Defaults
        </v-btn>
        <v-btn color="primary" variant="flat" @click="saveSettings">
          Save Changes
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-container>
</template>

<script setup lang="ts">
definePageMeta({
  layout: 'admin',
  middleware: 'admin'
});

// State
const activeTab = ref('general');

// Settings data
const settings = ref({
  general: {
    orgName: 'MonacoUSA',
    orgEmail: 'info@monacousa.org',
    orgDescription: 'Monaco USA Association - Connecting Monaco and USA',
    timezone: 'America/New_York',
    dateFormat: 'MM/DD/YYYY',
    currency: 'USD'
  },
  security: {
    twoFactor: false,
    sso: true,
    sessionTimeout: 30,
    maxLoginAttempts: 5,
    minPasswordLength: 8,
    passwordExpiry: 90,
    requireSpecialChar: true,
    requireNumbers: true
  },
  email: {
    smtpHost: 'smtp.gmail.com',
    smtpPort: 587,
    smtpUsername: '',
    smtpPassword: '',
    useTLS: true,
    fromName: 'MonacoUSA',
    fromEmail: 'noreply@monacousa.org'
  },
  payments: {
    gateway: 'stripe',
    publicKey: '',
    secretKey: '',
    membershipFee: 500,
    boardFee: 1000,
    lateFee: 50,
    autoRenew: true
  }
});

// Options
const timezones = [
  'America/New_York',
  'America/Chicago',
  'America/Denver',
  'America/Los_Angeles',
  'Europe/Monaco'
];

const dateFormats = [
  'MM/DD/YYYY',
  'DD/MM/YYYY',
  'YYYY-MM-DD'
];

const currencies = [
  'USD',
  'EUR',
  'GBP'
];

const integrations = ref([
  {
    id: 1,
    name: 'Google Calendar',
    description: 'Sync events with Google Calendar',
    icon: 'mdi-google',
    enabled: true
  },
  {
    id: 2,
    name: 'Mailchimp',
    description: 'Email marketing and newsletters',
    icon: 'mdi-email-newsletter',
    enabled: false
  },
  {
    id: 3,
    name: 'Slack',
    description: 'Team communication and notifications',
    icon: 'mdi-slack',
    enabled: false
  },
  {
    id: 4,
    name: 'QuickBooks',
    description: 'Accounting and financial management',
    icon: 'mdi-calculator',
    enabled: true
  },
  {
    id: 5,
    name: 'Zoom',
    description: 'Virtual meetings and webinars',
    icon: 'mdi-video',
    enabled: true
  }
]);

// Methods
const saveSettings = () => {
  console.log('Saving settings:', settings.value);
  // Save to API
};

const resetSettings = () => {
  console.log('Resetting to defaults');
  // Reset to default values
};
</script>