<template>
  <div class="flex h-screen w-full bg-[#0a0a0a] text-white overflow-hidden font-sans">
    <!-- Mobile Header (Visible only on small screens) -->
    <div class="md:hidden fixed top-0 left-0 right-0 h-14 bg-[#141414] border-b border-white/10 flex items-center justify-between px-4 z-50">
      <div class="font-bold text-lg bg-gradient-to-r from-purple-400 to-pink-500 bg-clip-text text-transparent">AI Design</div>
      <button @click="showMobileMenu = !showMobileMenu" class="text-white">
        <icon-menu />
      </button>
    </div>

    <!-- Left Sidebar: Parameters & Tools -->
    <div 
      :class="[
        'fixed inset-y-0 left-0 z-40 w-80 bg-[#141414] border-r border-white/10 transform transition-transform duration-300 md:relative md:translate-x-0',
        showMobileMenu ? 'translate-x-0' : '-translate-x-full'
      ]"
    >
      <div class="h-full flex flex-col">
        <!-- Logo Area -->
        <div class="h-16 flex items-center px-6 border-b border-white/10">
          <span class="text-xl font-bold tracking-wider">LOOK<span class="text-purple-500">:AI</span></span>
        </div>

        <!-- Scrollable Settings -->
        <div class="flex-1 overflow-y-auto custom-scrollbar p-6 space-y-8">
          
          <!-- Prompt Input -->
          <div class="space-y-3">
            <label class="text-xs font-semibold text-gray-400 uppercase tracking-wider">Prompt</label>
            <textarea 
              v-model="prompt"
              class="w-full h-32 bg-[#1a1a1a] border border-white/10 rounded-xl p-3 text-sm focus:border-purple-500 focus:ring-1 focus:ring-purple-500 outline-none resize-none transition-all placeholder-gray-600"
              placeholder="Describe your fashion design..."
            ></textarea>
          </div>

          <!-- Style Selector -->
          <div class="space-y-3">
            <label class="text-xs font-semibold text-gray-400 uppercase tracking-wider">Style</label>
            <div class="grid grid-cols-2 gap-3">
              <div 
                v-for="style in styles" 
                :key="style.id"
                @click="selectedStyle = style.id"
                :class="[
                  'aspect-video rounded-lg border cursor-pointer relative overflow-hidden group transition-all',
                  selectedStyle === style.id ? 'border-purple-500 ring-1 ring-purple-500' : 'border-white/10 hover:border-white/30'
                ]"
              >
                <!-- Placeholder for style image -->
                <div class="w-full h-full bg-[#222]"></div>
                <div class="absolute inset-0 flex items-center justify-center bg-black/40 group-hover:bg-black/20 transition-all">
                  <span class="text-xs font-medium">{{ style.name }}</span>
                </div>
              </div>
            </div>
          </div>

          <!-- Dimensions -->
          <div class="space-y-3">
            <label class="text-xs font-semibold text-gray-400 uppercase tracking-wider">Dimensions</label>
            <div class="flex bg-[#1a1a1a] p-1 rounded-lg">
              <button 
                v-for="dim in dimensions" 
                :key="dim"
                @click="selectedRatio = dim"
                :class="[
                  'flex-1 py-2 text-xs rounded-md transition-all',
                  selectedRatio === dim ? 'bg-purple-600 text-white shadow-lg' : 'text-gray-400 hover:text-white'
                ]"
              >
                {{ dim }}
              </button>
            </div>
          </div>

          <!-- Adavnced Settings Toggle -->
          <div class="pt-4 border-t border-white/10">
            <div class="flex items-center justify-between cursor-pointer" @click="showAdvanced = !showAdvanced">
              <span class="text-xs font-semibold text-gray-400 uppercase">Advanced Settings</span>
              <icon-down :class="['transform transition-transform', showAdvanced ? 'rotate-180' : '']" />
            </div>
          </div>

        </div>

        <!-- Generate Button -->
        <div class="p-6 border-t border-white/10 bg-[#141414]">
          <button class="w-full py-4 bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-500 hover:to-pink-500 rounded-xl font-bold text-white shadow-lg shadow-purple-900/20 transform hover:-translate-y-0.5 transition-all flex items-center justify-center gap-2">
            <icon-star />
            <span>GENERATE</span>
          </button>
        </div>
      </div>
    </div>

    <!-- Main Content Area -->
    <div class="flex-1 flex flex-col h-full relative z-0">
      
      <!-- Top Bar (Desktop) -->
      <div class="hidden md:flex h-16 items-center justify-between px-8 border-b border-white/10 bg-[#0a0a0a]">
        <div class="flex items-center gap-6">
          <button class="text-sm text-gray-400 hover:text-white transition-colors">History</button>
          <button class="text-sm text-white font-medium border-b-2 border-purple-500 pb-4 -mb-4">Workspace</button>
          <button class="text-sm text-gray-400 hover:text-white transition-colors">Community</button>
        </div>
        <div class="flex items-center gap-4">
          <div class="px-3 py-1 bg-purple-500/10 border border-purple-500/20 rounded-full text-xs text-purple-400">
            Pro Plan
          </div>
          <div class="w-8 h-8 rounded-full bg-gradient-to-br from-gray-700 to-gray-900 border border-white/20"></div>
        </div>
      </div>

      <!-- Canvas / Workspace -->
      <div class="flex-1 overflow-hidden relative bg-[#0a0a0a] flex items-center justify-center p-4 md:p-8">
        
        <!-- Empty State / Canvas -->
        <div class="w-full h-full max-w-5xl bg-[#111] border border-white/5 rounded-2xl relative overflow-hidden flex flex-col items-center justify-center group">
            
            <!-- Grid Background -->
            <div class="absolute inset-0 opacity-20" 
                 style="background-image: radial-gradient(#333 1px, transparent 1px); background-size: 20px 20px;">
            </div>

            <div class="text-center space-y-4 z-10">
                <div class="w-20 h-20 mx-auto bg-white/5 rounded-2xl flex items-center justify-center mb-6 ring-1 ring-white/10">
                    <icon-image class="text-3xl text-gray-600" />
                </div>
                <h2 class="text-2xl md:text-3xl font-bold bg-gradient-to-br from-white to-gray-600 bg-clip-text text-transparent">
                  Ready to Create?
                </h2>
                <p class="text-gray-500 max-w-sm mx-auto">
                  Start by entering a prompt or uploading a sketch on the left sidebar.
                </p>
            </div>

        </div>

        <!-- Floating Action Bar (Zoom/Pan) -->
        <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 bg-[#1a1a1a]/90 backdrop-blur-md border border-white/10 p-2 rounded-full flex items-center gap-2 shadow-2xl">
            <button class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-white/10 transition-colors text-white/70 hover:text-white">
                <icon-minus />
            </button>
             <span class="text-xs font-mono text-gray-400 w-12 text-center">100%</span>
            <button class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-white/10 transition-colors text-white/70 hover:text-white">
                <icon-plus />
            </button>
        </div>

      </div>

    </div>

    <!-- Overlay for mobile menu -->
    <div 
        v-if="showMobileMenu" 
        @click="showMobileMenu = false"
        class="fixed inset-0 bg-black/80 backdrop-blur-sm z-30 md:hidden"
    ></div>

  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { 
    IconMenu, 
    IconStar,
    IconDown,
    IconImage,
    IconPlus, 
    IconMinus
} from '@arco-design/web-vue/es/icon';

const showMobileMenu = ref(false);
const prompt = ref('');
const selectedStyle = ref('realistic');
const selectedRatio = ref('9:16');
const showAdvanced = ref(false);

const styles = [
    { id: 'realistic', name: 'Realistic' },
    { id: 'anime', name: 'Anime' },
    { id: 'sketch', name: 'Sketch' },
    { id: 'cyberpunk', name: 'Cyberpunk' }
];

const dimensions = ['9:16', '16:9', '1:1', '4:3'];

</script>

<style scoped>
.custom-scrollbar::-webkit-scrollbar {
  width: 4px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 2px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #555;
}
</style>
