<template>
  <div>
    <div class="pb-5 border-b border-gray-200">
      <h3 class="text-lg leading-6 font-medium text-gray-900">
        Account Settings
      </h3>
      <p class="mt-2 max-w-4xl text-sm text-gray-500">
        Manage your account settings and preferences
      </p>
    </div>

    <div class="mt-6">
      <div v-if="loading" class="flex justify-center">
        <svg class="animate-spin -ml-1 mr-3 h-10 w-10 text-primary-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
        </svg>
      </div>
      <div v-else>
        <div class="md:grid md:grid-cols-3 md:gap-6">
          <div class="md:col-span-1">
            <div class="px-4 sm:px-0">
              <h3 class="text-lg font-medium leading-6 text-gray-900">Profile</h3>
              <p class="mt-1 text-sm text-gray-500">
                This information will be displayed on your profile.
              </p>
            </div>
          </div>
          <div class="mt-5 md:mt-0 md:col-span-2">
            <form @submit.prevent="saveProfile">
              <div class="shadow sm:rounded-md sm:overflow-hidden">
                <div class="px-4 py-5 bg-white space-y-6 sm:p-6">
                  <div>
                    <label class="block text-sm font-medium text-gray-700">
                      Photo
                    </label>
                    <div class="mt-1 flex items-center">
                      <span class="inline-block h-12 w-12 rounded-full overflow-hidden bg-gray-100">
                        <svg v-if="!profileData.avatar" class="h-full w-full text-gray-300" fill="currentColor" viewBox="0 0 24 24">
                          <path d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z" />
                        </svg>
                        <img v-else :src="profileData.avatar" alt="Profile avatar" class="h-full w-full object-cover" />
                      </span>
                      <button
                        type="button"
                        class="ml-5 bg-white py-2 px-3 border border-gray-300 rounded-md shadow-sm text-sm leading-4 font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
                      >
                        Change
                      </button>
                    </div>
                  </div>

                  <div class="grid grid-cols-6 gap-6">
                    <div class="col-span-6 sm:col-span-3">
                      <label for="first-name" class="block text-sm font-medium text-gray-700">First name</label>
                      <input
                        type="text"
                        name="first-name"
                        id="first-name"
                        v-model="profileData.firstName"
                        class="mt-1 focus:ring-primary-500 focus:border-primary-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md"
                      />
                    </div>

                    <div class="col-span-6 sm:col-span-3">
                      <label for="last-name" class="block text-sm font-medium text-gray-700">Last name</label>
                      <input
                        type="text"
                        name="last-name"
                        id="last-name"
                        v-model="profileData.lastName"
                        class="mt-1 focus:ring-primary-500 focus:border-primary-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md"
                      />
                    </div>

                    <div class="col-span-6 sm:col-span-4">
                      <label for="email-address" class="block text-sm font-medium text-gray-700">Email address</label>
                      <input
                        type="email"
                        name="email-address"
                        id="email-address"
                        v-model="profileData.email"
                        class="mt-1 focus:ring-primary-500 focus:border-primary-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md"
                      />
                    </div>

                    <div class="col-span-6">
                      <label for="bio" class="block text-sm font-medium text-gray-700">
                        Bio
                      </label>
                      <div class="mt-1">
                        <textarea
                          id="bio"
                          name="bio"
                          rows="3"
                          v-model="profileData.bio"
                          class="shadow-sm focus:ring-primary-500 focus:border-primary-500 mt-1 block w-full sm:text-sm border border-gray-300 rounded-md"
                          placeholder="Brief description for your profile"
                        ></textarea>
                      </div>
                      <p class="mt-2 text-sm text-gray-500">
                        Brief description for your profile. URLs are hyperlinked.
                      </p>
                    </div>
                  </div>
                </div>
                <div class="px-4 py-3 bg-gray-50 text-right sm:px-6">
                  <button
                    type="submit"
                    class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
                  >
                    Save Profile
                  </button>
                </div>
              </div>
            </form>
          </div>
        </div>

        <div class="hidden sm:block" aria-hidden="true">
          <div class="py-5">
            <div class="border-t border-gray-200"></div>
          </div>
        </div>

        <div class="mt-10 sm:mt-0">
          <div class="md:grid md:grid-cols-3 md:gap-6">
            <div class="md:col-span-1">
              <div class="px-4 sm:px-0">
                <h3 class="text-lg font-medium leading-6 text-gray-900">Platform Connections</h3>
                <p class="mt-1 text-sm text-gray-500">
                  Connect your social media accounts to track analytics and manage comments.
                </p>
              </div>
            </div>
            <div class="mt-5 md:mt-0 md:col-span-2">
              <div class="shadow sm:rounded-md sm:overflow-hidden">
                <div class="px-4 py-5 bg-white space-y-6 sm:p-6">
                  <!-- TikTok Connection -->
                  <div class="flex items-center justify-between">
                    <div class="flex items-center">
                      <div class="flex-shrink-0 h-10 w-10 bg-blue-100 rounded-full flex items-center justify-center">
                        <span class="text-blue-600 font-bold">TT</span>
                      </div>
                      <div class="ml-4">
                        <h3 class="text-sm font-medium text-gray-900">TikTok</h3>
                        <p class="text-sm text-gray-500">
                          {{ platformConnections.tiktok.connected ? 'Connected as ' + platformConnections.tiktok.username : 'Not connected' }}
                        </p>
                      </div>
                    </div>
                    <button
                      type="button"
                      :class="[
                        platformConnections.tiktok.connected ? 'bg-red-100 text-red-700 hover:bg-red-200' : 'bg-blue-100 text-blue-700 hover:bg-blue-200',
                        'inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500'
                      ]"
                      @click="toggleConnection('tiktok')"
                    >
                      {{ platformConnections.tiktok.connected ? 'Disconnect' : 'Connect' }}
                    </button>
                  </div>

                  <!-- YouTube Connection -->
                  <div class="flex items-center justify-between">
                    <div class="flex items-center">
                      <div class="flex-shrink-0 h-10 w-10 bg-red-100 rounded-full flex items-center justify-center">
                        <span class="text-red-600 font-bold">YT</span>
                      </div>
                      <div class="ml-4">
                        <h3 class="text-sm font-medium text-gray-900">YouTube</h3>
                        <p class="text-sm text-gray-500">
                          {{ platformConnections.youtube.connected ? 'Connected as ' + platformConnections.youtube.username : 'Not connected' }}
                        </p>
                      </div>
                    </div>
                    <button
                      type="button"
                      :class="[
                        platformConnections.youtube.connected ? 'bg-red-100 text-red-700 hover:bg-red-200' : 'bg-red-100 text-red-700 hover:bg-red-200',
                        'inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500'
                      ]"
                      @click="toggleConnection('youtube')"
                    >
                      {{ platformConnections.youtube.connected ? 'Disconnect' : 'Connect' }}
                    </button>
                  </div>

                  <!-- Instagram Connection -->
                  <div class="flex items-center justify-between">
                    <div class="flex items-center">
                      <div class="flex-shrink-0 h-10 w-10 bg-pink-100 rounded-full flex items-center justify-center">
                        <span class="text-pink-600 font-bold">IG</span>
                      </div>
                      <div class="ml-4">
                        <h3 class="text-sm font-medium text-gray-900">Instagram</h3>
                        <p class="text-sm text-gray-500">
                          {{ platformConnections.instagram.connected ? 'Connected as ' + platformConnections.instagram.username : 'Not connected' }}
                        </p>
                      </div>
                    </div>
                    <button
                      type="button"
                      :class="[
                        platformConnections.instagram.connected ? 'bg-red-100 text-red-700 hover:bg-red-200' : 'bg-pink-100 text-pink-700 hover:bg-pink-200',
                        'inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500'
                      ]"
                      @click="toggleConnection('instagram')"
                    >
                      {{ platformConnections.instagram.connected ? 'Disconnect' : 'Connect' }}
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="hidden sm:block" aria-hidden="true">
          <div class="py-5">
            <div class="border-t border-gray-200"></div>
          </div>
        </div>

        <div class="mt-10 sm:mt-0">
          <div class="md:grid md:grid-cols-3 md:gap-6">
            <div class="md:col-span-1">
              <div class="px-4 sm:px-0">
                <h3 class="text-lg font-medium leading-6 text-gray-900">Notifications</h3>
                <p class="mt-1 text-sm text-gray-500">
                  Decide which communications you'd like to receive.
                </p>
              </div>
            </div>
            <div class="mt-5 md:mt-0 md:col-span-2">
              <form @submit.prevent="saveNotificationSettings">
                <div class="shadow overflow-hidden sm:rounded-md">
                  <div class="px-4 py-5 bg-white space-y-6 sm:p-6">
                    <fieldset>
                      <legend class="text-base font-medium text-gray-900">By Email</legend>
                      <div class="mt-4 space-y-4">
                        <div class="flex items-start">
                          <div class="flex items-center h-5">
                            <input
                              id="comments"
                              name="comments"
                              type="checkbox"
                              v-model="notificationSettings.email.comments"
                              class="focus:ring-primary-500 h-4 w-4 text-primary-600 border-gray-300 rounded"
                            />
                          </div>
                          <div class="ml-3 text-sm">
                            <label for="comments" class="font-medium text-gray-700">Comments</label>
                            <p class="text-gray-500">Get notified when someone comments on your content.</p>
                          </div>
                        </div>
                        <div class="flex items-start">
                          <div class="flex items-center h-5">
                            <input
                              id="followers"
                              name="followers"
                              type="checkbox"
                              v-model="notificationSettings.email.followers"
                              class="focus:ring-primary-500 h-4 w-4 text-primary-600 border-gray-300 rounded"
                            />
                          </div>
                          <div class="ml-3 text-sm">
                            <label for="followers" class="font-medium text-gray-700">Followers</label>
                            <p class="text-gray-500">Get notified when you reach follower milestones.</p>
                          </div>
                        </div>
                        <div class="flex items-start">
                          <div class="flex items-center h-5">
                            <input
                              id="analytics"
                              name="analytics"
                              type="checkbox"
                              v-model="notificationSettings.email.analytics"
                              class="focus:ring-primary-500 h-4 w-4 text-primary-600 border-gray-300 rounded"
                            />
                          </div>
                          <div class="ml-3 text-sm">
                            <label for="analytics" class="font-medium text-gray-700">Analytics</label>
                            <p class="text-gray-500">Receive weekly analytics reports.</p>
                          </div>
                        </div>
                      </div>
                    </fieldset>
                    <fieldset>
                      <legend class="text-base font-medium text-gray-900">Push Notifications</legend>
                      <p class="text-sm text-gray-500">These are delivered via mobile app or desktop.</p>
                      <div class="mt-4 space-y-4">
                        <div class="flex items-start">
                          <div class="flex items-center h-5">
                            <input
                              id="push-comments"
                              name="push-comments"
                              type="checkbox"
                              v-model="notificationSettings.push.comments"
                              class="focus:ring-primary-500 h-4 w-4 text-primary-600 border-gray-300 rounded"
                            />
                          </div>
                          <div class="ml-3 text-sm">
                            <label for="push-comments" class="font-medium text-gray-700">Comments</label>
                            <p class="text-gray-500">Get notified when someone comments on your content.</p>
                          </div>
                        </div>
                        <div class="flex items-start">
                          <div class="flex items-center h-5">
                            <input
                              id="push-followers"
                              name="push-followers"
                              type="checkbox"
                              v-model="notificationSettings.push.followers"
                              class="focus:ring-primary-500 h-4 w-4 text-primary-600 border-gray-300 rounded"
                            />
                          </div>
                          <div class="ml-3 text-sm">
                            <label for="push-followers" class="font-medium text-gray-700">Followers</label>
                            <p class="text-gray-500">Get notified when you reach follower milestones.</p>
                          </div>
                        </div>
                        <div class="flex items-start">
                          <div class="flex items-center h-5">
                            <input
                              id="push-reminders"
                              name="push-reminders"
                              type="checkbox"
                              v-model="notificationSettings.push.reminders"
                              class="focus:ring-primary-500 h-4 w-4 text-primary-600 border-gray-300 rounded"
                            />
                          </div>
                          <div class="ml-3 text-sm">
                            <label for="push-reminders" class="font-medium text-gray-700">Upload Reminders</label>
                            <p class="text-gray-500">Get reminders about scheduled uploads.</p>
                          </div>
                        </div>
                      </div>
                    </fieldset>
                  </div>
                  <div class="px-4 py-3 bg-gray-50 text-right sm:px-6">
                    <button
                      type="submit"
                      class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
                    >
                      Save Notification Settings
                    </button>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import { useAuthStore } from '../stores/auth';
import axios from 'axios';

export default {
  name: 'Settings',
  setup() {
    const authStore = useAuthStore();
    const loading = ref(true);
    
    // Profile data
    const profileData = ref({
      firstName: '',
      lastName: '',
      email: '',
      bio: '',
      avatar: null
    });
    
    // Platform connections
    const platformConnections = ref({
      tiktok: {
        connected: false,
        username: ''
      },
      youtube: {
        connected: false,
        username: ''
      },
      instagram: {
        connected: false,
        username: ''
      }
    });
    
    // Notification settings
    const notificationSettings = ref({
      email: {
        comments: true,
        followers: true,
        analytics: true
      },
      push: {
        comments: true,
        followers: true,
        reminders: true
      }
    });
    
    // Fetch user data
    const fetchUserData = async () => {
      loading.value = true;
      try {
        // In a real app, this would be an API call
        // const response = await axios.get('/api/user/settings');
        // const data = response.data;
        
        // For demo purposes, we'll use mock data
        setTimeout(() => {
          const user = authStore.getUser;
          
          if (user) {
            const nameParts = user.name.split(' ');
            profileData.value = {
              firstName: nameParts[0] || '',
              lastName: nameParts.length > 1 ? nameParts[1] : '',
              email: user.email || '',
              bio: 'ASMR content creator specializing in relaxing sounds for sleep and anxiety relief.',
              avatar: null
            };
          }
          
          // Mock platform connections
          platformConnections.value = {
            tiktok: {
              connected: true,
              username: 'asmr_creator'
            },
            youtube: {
              connected: true,
              username: 'ASMRRelaxChannel'
            },
            instagram: {
              connected: false,
              username: ''
            }
          };
          
          loading.value = false;
        }, 1000);
      } catch (error) {
        console.error('Error fetching user data:', error);
        loading.value = false;
      }
    };
    
    // Save profile
    const saveProfile = async () => {
      try {
        // In a real app, this would be an API call
        // await axios.post('/api/user/profile', profileData.value);
        
        // For demo purposes, we'll just show a success message
        alert('Profile saved successfully!');
      } catch (error) {
        console.error('Error saving profile:', error);
        alert('Failed to save profile. Please try again.');
      }
    };
    
    // Toggle platform connection
    const toggleConnection = (platform) => {
      if (platformConnections.value[platform].connected) {
        // Disconnect
        platformConnections.value[platform].connected = false;
        platformConnections.value[platform].username = '';
      } else {
        // Connect (in a real app, this would open an OAuth flow)
        // For demo purposes, we'll just simulate a successful connection
        const mockUsernames = {
          tiktok: 'asmr_creator',
          youtube: 'ASMRRelaxChannel',
          instagram: 'asmr_relax_official'
        };
        
        platformConnections.value[platform].connected = true;
        platformConnections.value[platform].username = mockUsernames[platform];
      }
    };
    
    // Save notification settings
    const saveNotificationSettings = async () => {
      try {
        // In a real app, this would be an API call
        // await axios.post('/api/user/notifications', notificationSettings.value);
        
        // For demo purposes, we'll just show a success message
        alert('Notification settings saved successfully!');
      } catch (error) {
        console.error('Error saving notification settings:', error);
        alert('Failed to save notification settings. Please try again.');
      }
    };
    
    onMounted(() => {
      fetchUserData();
    });
    
    return {
      loading,
      profileData,
      platformConnections,
      notificationSettings,
      saveProfile,
      toggleConnection,
      saveNotificationSettings
    };
  }
};
</script> 