<script setup>
import { ref, onMounted } from 'vue'
import { useProjectStore } from '../stores/projectStore'
import Header from '../components/Header.vue'
import ComponentLibrary from '../components/ComponentLibrary.vue'
import componentMap from '../components/componentMap' // Import the component map
import Canvas from '../components/Canvas.vue'
import { standardComponents } from '../../StandardComponents.js' // Import standard components
import PropertiesPanel from '../components/PropertiesPanel.vue'
import LogicEditor from '../components/LogicEditor.vue'
import PagesPanel from '../components/PagesPanel.vue'

const props = defineProps({
  id: String // From vue-router
});


const projectStore = useProjectStore();

// --- Local Editor State (only for UI that doesn't belong in the project data) ---
const showLogicEditor = ref(false);

// --- Component Library Data (could be moved to a store later) ---
const libraryComponents = standardComponents; // Use the imported standard components

// --- Lifecycle ---
onMounted(() => {
  projectStore.setCurrentProject(props.id);
});

// --- Logic Editor ---
function openLogicEditor() {
  showLogicEditor.value = true;
}
function closeLogicEditor() {
  showLogicEditor.value = false;
}

// --- Code Generation ---
function generateCode() {
  if (!projectStore.activePage) {
    alert("No active page to generate code from.");
    return;
  }
  
  const template = projectStore.activeComponents.map(c => {
    const style = `position: absolute; left: ${c.x}px; top: ${c.y}px;`;
    if (c.type === 'button') {
      return `    <button style="${style}">${c.text}</button>`;
    }
    if (c.type === 'p') {
      return `    <p style="${style}">${c.text}</p>`;
    }
    if (c.type === 'img') {
      return `    <img src="${c.src}" style="${style}" />`;
    }
    return '';
  }).join('\n');

  const fullCode = `
<template>
  <div style="position: relative;">
${template}
  </div>
</template>

<scr`+`ipt setup>
</scr`+`ipt>

<style scoped>
</style>
`;
  console.log(fullCode);
  alert('Vue component code has been logged to the console.');
}
</script>

<template>
  <div id="builder-app">
    <Header @export-code="generateCode" />
    <div class="main-content">
      <div class="left-panels">
        <ComponentLibrary :components="libraryComponents" :componentMap="componentMap" />
        <div class="pages-panel-container">
          <div class="panel-header">
            <h4>Pages</h4>
          </div>
          <PagesPanel />
        </div>
      </div>
      <Canvas />
      <PropertiesPanel @open-logic-editor="openLogicEditor" />
    </div>

    <LogicEditor 
      v-if="showLogicEditor"
      :component="projectStore.selectedComponent"
      @close="closeLogicEditor"
    />
  </div>
</template>

<style scoped>
/* Scoped styles from App.vue are moved here */
#builder-app {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.main-content {
  display: flex;
  flex-grow: 1;
  overflow: hidden;
}

.left-panels {
  display: flex;
  flex-direction: column;
  background-color: var(--panel-color);
  border-right: 1px solid var(--border-color);
}

.pages-panel-container {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border-color);
}

.panel-header {
  padding: 0.5rem 0.75rem;
  font-weight: 500;
}

.panel-header h4 {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-color);
}
</style>
