<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const selectedLayout = ref<'1x4' | '2x2'>('1x4')
const selectedFrame = ref<number>(0)
const selectedFilter = ref<'normal' | 'black&white'>('normal')

const layouts = [
  { id: '1x4', name: '1x4 แนวตั้ง', cols: 1, rows: 4 },
  { id: '2x2', name: '2x2 ตาราง', cols: 2, rows: 2 }
]

const frames = [
  { id: 0, name: 'กรอบคลาสสิก', preview: '/frame-classic.svg' },
  { id: 1, name: 'กรอบโมเดิร์น', preview: '/frame-modern.svg' },
  { id: 2, name: 'กรอบวินเทจ', preview: '/frame-vintage.svg' },
  { id: 3, name: 'กรอบสีสดใส', preview: '/frame-colorful.svg' },
  { id: 4, name: 'กรอบมินิมอล', preview: '/frame-minimal.svg' }
]

const filters = [
  { id: 'normal', name: '🎨Color' },
  { id: 'black&white', name: '🐈‍⬛Black & White' }
]

const selectLayout = (layoutId: string) => {
  selectedLayout.value = layoutId as '1x4' | '2x2'
}

const selectFrame = (frameId: number) => {
  selectedFrame.value = frameId
}

const selectFilter = (filterId: string) => {

  selectedFilter.value = filterId as 'normal' | 'black&white'

}

const proceedToSource = () => {
  // เก็บข้อมูล layout และ frame ที่เลือกไว้ใน localStorage หรือ state management
  localStorage.setItem('photobooth-layout', selectedLayout.value)
  localStorage.setItem('photobooth-frame', selectedFrame.value.toString())
  localStorage.setItem('photobooth-filter', selectedFilter.value)
  router.push('/selectsource')
}

const goBack = () => {
  router.push('/')
}
</script>

<template>
  <div class="frame-container">

    <!-- <header class="header">
      <button @click="goBack" class="back-button">← กลับ</button>
      <h1>เลือกกรอบรูป</h1>
    </header> -->

    <section class="layout-section">
      <h2>เลือกรูปแบบ</h2>
      <div class="layout-options">
        <div
          v-for="layout in layouts"
          :key="layout.id"
          :class="['layout-option', { selected: selectedLayout === layout.id }]"
          @click="selectLayout(layout.id)"
        >
          <div class="layout-preview">
            <div
              class="layout-grid"
              :style="{ gridTemplateColumns: `repeat(${layout.cols}, 1fr)`, gridTemplateRows: `repeat(${layout.rows}, 1fr)` }"
            >
              <div v-for="i in layout.cols * layout.rows" :key="i" class="grid-cell"></div>
            </div>
          </div>
          <span>{{ layout.name }}</span>
        </div>
      </div>
    </section>

    <section class="filter-section">

      <!-- <h2>เลือกฟิลเตอร์</h2> -->

      <div class="filter-options">

        <div

          v-for="filter in filters"

          :key="filter.id"

          :class="['filter-option', { selected: selectedFilter === filter.id }]"

          @click="selectFilter(filter.id)"

        >

          <span>{{ filter.name }}</span>

        </div>

      </div>

    </section>

    <section class="action-section">
      <button @click="proceedToSource" class="next-button">
        ถัดไป
      </button>
    </section>

    <section class="frame-section" style="display: none;">
      <h2>เลือกกรอบ</h2>
      <div class="frame-options">
        <div
          v-for="frame in frames"
          :key="frame.id"
          :class="['frame-option', { selected: selectedFrame === frame.id }]"
          @click="selectFrame(frame.id)"
        >
          <div class="frame-preview">
            <img :src="frame.preview" :alt="frame.name" />
          </div>
          <span>{{ frame.name }}</span>
        </div>
      </div>
    </section>


  </div>
</template>

<style scoped>
@import url('https://fonts.googleapis.com/css2?family=Crete+Round&family=Old+Standard+TT&display=swap');

.frame-container {
  min-height: 100vh;
  padding: 1.5rem; /* Adjusted padding */
  background: #fdfaf6; /* Light vintage paper color */
  color: #3e2723; /* Dark brown for text */
  font-family: 'Old Standard TT', serif;
}

.header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
  background: #e0d8cf; /* Lighter vintage tone for header background */
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #bcaaa4;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  border-radius: 8px; /* Slightly rounded corners */
}

.back-button {
  background: #a1887f; /* Vintage brown */
  color: #fdfaf6; /* Light text */
  border: 1px solid #8d6e63; /* Darker border */
  padding: 0.4rem 0.8rem;
  border-radius: 5px; /* Softer border-radius */
  cursor: pointer;
  font-size: 1rem;
  font-weight: bold;
  box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
  transition: background 0.2s ease, transform 0.2s ease;
}

.back-button:hover {
  background: #8d6e63;
  transform: translateY(-1px);
}

.header h1 {
  margin: 0;
  color: #5d4037; /* Darker brown for title */
  font-family: 'Crete Round', serif;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

.layout-section, .frame-section, .filter-section {
  margin-bottom: 2rem;
}

h2 {
  color: #5d4037; /* Darker brown for subtitle */
  margin-bottom: 1rem;
  font-size: 1.5rem;
  font-family: 'Crete Round', serif;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

.layout-options, .frame-options, .filter-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem; /* Increased gap slightly */
  margin-bottom: 1rem;
}

.layout-option, .frame-option, .filter-option {
  background: #fdfaf6; /* Vintage paper background */
  border: 2px solid #bcaaa4; /* Muted border */
  border-radius: 5px; /* Softer border-radius */
  padding: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.08);
}

.layout-option:hover, .frame-option:hover, .filter-option:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.layout-option.selected, .frame-option.selected, .filter-option.selected {
  border-color: #5d4037; /* Darker brown for selection */
  box-shadow: 0 0 0 3px rgba(93, 64, 55, 0.2);
}

.layout-preview {
  margin-bottom: 0.5rem;
}

.layout-grid {
  display: grid;
  gap: 2px;
  background: #e0d8cf; /* Lighter vintage tone */
  padding: 6px; /* Reduced padding */
  border-radius: 4px;
  aspect-ratio: 3/4;
  max-width: 100px;
  margin: 0 auto;
  border: 1px dashed #bcaaa4; /* Dashed border for a sketched look */
}

.grid-cell {
  background: #c7b8a7; /* Muted vintage gray/brown */
  border-radius: 2px;
}

.frame-preview {
  margin-bottom: 0.5rem;
}

.frame-preview img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #bcaaa4; /* Subtle border for images */
  box-shadow: inset 0 0 5px rgba(0,0,0,0.1); /* Inner shadow for depth */
}

.action-section {
  text-align: center;
  margin-top: 2rem;
}

.next-button {
  background: #8d6e63; /* Vintage brown button */
  color: #fdfaf6; /* Light text */
  border: 2px solid #795548; /* Darker border for button */
  padding: 1rem 2.5rem;
  font-size: 1.3rem; /* Slightly larger font */
  font-weight: bold;
  border-radius: 8px; /* Softer border-radius */
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  font-family: 'Crete Round', serif; /* Vintage font for button */
  text-transform: uppercase; /* Uppercase text */
  letter-spacing: 1px; /* Spaced out letters */
}

.next-button:hover {
  background: #795548; /* Darker brown on hover */
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(0,0,0,0.3);
}

@media (max-width: 768px) {
  .layout-options, .frame-options, .filter-options {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
  h1 {
    font-size: 1.8rem; /* Adjust heading size for smaller screens */
  }
  h2 {
    font-size: 1.3rem;
  }
  .next-button {
    font-size: 1.1rem;
    padding: 0.8rem 2rem;
  }
}
</style>