import json
import os
import pandas as pd

files = [f for f in os.listdir('.') if f.endswith('.csv') and 'Pricelist' in f]
order = ['LCD', 'BATERAI', 'KAMERA DEPAN', 'KAMERA BELAKANG', 'PORT CHARGER', 'SPEAKER', 'VOLUME', 'HOME BUTTON', 'ANTENA WIFI', 'TAPTIC', 'BACKGLASS', 'MESIN', 'SERVICE']

ordered_files = []
for name in order:
    for f in files:
        if name in f.upper():
            ordered_files.append((name, f))
            break

all_services = []
for category, filename in ordered_files:
    df = pd.read_csv(filename)
    for _, row in df.iterrows():
        seri = str(row.get('Seri', '')).strip()
        if 'IPHPNE' in seri.upper():
            seri = seri.upper().replace('IPHPNE', 'IPHONE')
        produk = str(row.get('Produk', '')).strip()
        harga_raw = str(row.get('Harga', '')).strip()
        
        if pd.isna(row.get('Harga', '')) or harga_raw == "" or harga_raw == "nan":
            harga = "Hubungi Admin"
        elif "Rp" in harga_raw or "-" in harga_raw:
            harga = harga_raw
        else:
            try:
                num = int(float(harga_raw.replace('.', '').replace(',', '')))
                harga = f"Rp {num:,}".replace(",", ".")
            except:
                harga = harga_raw
                
        garansi = str(row.get('Garansi', '')).strip() if pd.notna(row.get('Garansi', '')) else "-"
        ket = str(row.get('Keterangan', '')).strip() if pd.notna(row.get('Keterangan', '')) else ""
        
        if garansi == "nan": garansi = "-"
        if ket == "nan": ket = ""
        
        all_services.append({
            'seri': seri,
            'nama': produk,
            'kategori': category,
            'harga': harga,
            'garansi': garansi,
            'keterangan': ket
        })

json_data = json.dumps(all_services, ensure_ascii=False, indent=2)

template = """<template>
  <div class="max-w-6xl mx-auto px-4 py-8 font-sans bg-gray-50 min-h-screen">
    <!-- Header Section -->
    <div class="text-center mb-8">
      <h1 class="text-2xl md:text-3xl font-extrabold text-slate-800 tracking-tight mb-2">
        Pricelist <span class="text-teal-600">Service iPhone</span>
      </h1>
      <div class="w-16 h-1 bg-teal-500 mx-auto mb-4 rounded"></div>
      <p class="text-gray-500 text-xs md:text-sm">
        Cari harga estimasi perbaikan sparepart & mesin iPhone berdasarkan tipe perangkat Anda.
      </p>
    </div>

    <!-- Filter & Search Controls -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
      <!-- Filter Seri -->
      <div>
        <label class="block text-xs font-bold text-slate-400 uppercase mb-1.5 tracking-wider">Pilih Seri</label>
        <select v-model="selectedSeri" class="w-full bg-white border border-gray-200 rounded-xl px-4 py-3 text-gray-700 shadow-sm focus:outline-none focus:border-teal-500 focus:ring-1 focus:ring-teal-500 transition cursor-pointer text-sm">
          <option value="">Semua Seri</option>
          <option v-for="seri in uniqueSeri" :key="seri" :value="seri">{{ seri }}</option>
        </select>
      </div>

      <!-- Filter Kategori -->
      <div>
        <label class="block text-xs font-bold text-slate-400 uppercase mb-1.5 tracking-wider">Pilih Komponen</label>
        <select v-model="selectedKategori" class="w-full bg-white border border-gray-200 rounded-xl px-4 py-3 text-gray-700 shadow-sm focus:outline-none focus:border-teal-500 focus:ring-1 focus:ring-teal-500 transition cursor-pointer text-sm">
          <option value="">Semua Kategori</option>
          <option v-for="kat in uniqueKategori" :key="kat" :value="kat">{{ kat }}</option>
        </select>
      </div>

      <!-- Search Bar -->
      <div>
        <label class="block text-xs font-bold text-slate-400 uppercase mb-1.5 tracking-wider">Kata Kunci</label>
        <div class="relative">
          <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
          </span>
          <input v-model="searchQuery" type="text" placeholder="Ketik kata kunci pencarian..." class="w-full bg-white border border-gray-200 rounded-xl pl-9 pr-4 py-3 text-sm text-gray-700 shadow-sm focus:outline-none focus:border-teal-500 focus:ring-1 focus:ring-teal-500 transition"/>
        </div>
      </div>
    </div>

    <!-- Table / Data List -->
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
      <!-- Desktop Header -->
      <div class="hidden md:grid grid-cols-12 bg-slate-50 border-b border-gray-100 px-6 py-3.5 text-xs font-bold text-slate-400 tracking-wider uppercase">
        <div class="col-span-3">Seri</div>
        <div class="col-span-5">Produk / Layanan Jasa</div>
        <div class="col-span-2 text-right">Harga Estimasi</div>
        <div class="col-span-2 text-center">Aksi</div>
      </div>

      <!-- List Items -->
      <div v-if="filteredServices.length > 0" class="divide-y divide-gray-50">
        <div v-for="(item, index) in filteredServices" :key="index" class="grid grid-cols-1 md:grid-cols-12 items-center px-6 py-4 hover:bg-slate-50/40 transition gap-2 md:gap-0">
          <!-- Seri -->
          <div class="col-span-3 font-bold text-xs md:text-sm text-slate-700 uppercase tracking-wide">
            {{ item.seri }}
          </div>

          <!-- Produk / Jasa -->
          <div class="col-span-5">
            <div class="font-bold text-slate-800 text-sm md:text-base">{{ item.nama }}</div>
            <div v-if="item.garansi && item.garansi !== '-'" class="flex items-center text-xs text-teal-600 font-medium mt-1">
              <svg class="w-3.5 h-3.5 mr-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M2.166 4.999A11.954 11.954 0 0010 1.944a11.954 11.954 0 007.834 3.056 11.95 11.95 0 01-1.8 8.244 11.95 11.95 0 01-6.034 4.756 11.95 11.95 0 01-6.034-4.756 11.95 11.95 0 01-1.8-8.244zM10 8a1 1 0 100-2 1 1 0 000 2zm0 5a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg>
              Garansi: {{ item.garansi }}
            </div>
          </div>

          <!-- Harga -->
          <div class="col-span-2 text-left md:text-right font-extrabold text-teal-600 text-sm md:text-base">
            {{ item.harga }}
          </div>

          <!-- Aksi -->
          <div class="col-span-2 text-right md:text-center mt-1 md:mt-0">
            <button @click="openModal(item)" class="w-full md:w-auto px-4 py-1.5 text-xs font-bold text-slate-600 bg-slate-100 hover:bg-teal-500 hover:text-white rounded-lg transition tracking-wide">
              DETAIL
            </button>
          </div>
        </div>
      </div>

      <!-- No Data Found -->
      <div v-else class="text-center py-16 text-gray-400 text-sm bg-white">
        <svg class="w-12 h-12 mx-auto text-gray-300 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
        Data perbaikan tidak ditemukan. Silakan ganti kata kunci atau filter Anda.
      </div>
    </div>

    <!-- BOTTOM SHEET POP-UP DETAIL -->
    <div v-if="isModalOpen" class="fixed inset-0 z-50 flex items-end md:items-center justify-center bg-slate-900/60 backdrop-blur-sm transition-opacity animate-fade-in" @click.self="closeModal">
      <div class="bg-white rounded-t-2xl md:rounded-2xl max-w-lg w-full overflow-hidden shadow-2xl border border-gray-100 flex flex-col max-h-[85vh] transform transition-transform duration-300 translate-y-0 animate-slide-up">
        
        <!-- Drag Handle Indicator for Mobile -->
        <div class="flex justify-center py-2 md:hidden bg-slate-50 border-b border-gray-100/50">
          <div class="w-12 h-1.5 bg-gray-300 rounded-full"></div>
        </div>

        <!-- Modal Header -->
        <div class="px-6 py-4 bg-slate-50 border-b border-gray-100 flex justify-between items-center">
          <h3 class="text-base font-bold text-slate-800 tracking-tight">Detail Layanan Perbaikan</h3>
          <button @click="closeModal" class="text-gray-400 hover:text-slate-600 transition hidden md:block">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
          </button>
        </div>

        <!-- Modal Body Content -->
        <div class="p-6 overflow-y-auto space-y-4 text-sm">
          <div>
            <span class="text-xs font-bold text-slate-400 uppercase tracking-wider block">Perangkat / Seri</span>
            <p class="text-base font-bold text-slate-800 uppercase mt-0.5">{{ activeItem.seri }}</p>
          </div>

          <div>
            <span class="text-xs font-bold text-slate-400 uppercase tracking-wider block">Kategori Jasa / Komponen</span>
            <p class="text-sm font-semibold text-slate-700 mt-0.5">{{ activeItem.nama }}</p>
          </div>

          <div class="grid grid-cols-2 gap-4 bg-slate-50 p-3 rounded-xl border border-gray-100/50">
            <div>
              <span class="text-xs font-bold text-slate-400 uppercase tracking-wider block">Estimasi Biaya</span>
              <p class="text-base font-extrabold text-teal-600 mt-0.5">{{ activeItem.harga }}</p>
            </div>
            <div>
              <span class="text-xs font-bold text-slate-400 uppercase tracking-wider block">Masa Garansi</span>
              <p class="text-sm font-bold text-slate-700 mt-1">🛡️ {{ activeItem.garansi }}</p>
            </div>
          </div>

          <div v-if="activeItem.keterangan" class="pt-2">
            <span class="text-xs font-bold text-slate-400 uppercase tracking-wider block mb-1">Catatan & Keterangan Kerja</span>
            <div class="text-xs md:text-sm text-slate-600 leading-relaxed bg-teal-50/40 p-3.5 rounded-xl border border-teal-100/50 whitespace-pre-line">
              {{ activeItem.keterangan }}
            </div>
          </div>
        </div>

        <!-- Modal Footer Actions (Sesuai Mockup) -->
        <div class="px-6 py-4 bg-slate-50 border-t border-gray-100 flex flex-col gap-2">
          <a :href="generateWhatsAppUrl(activeItem)" target="_blank" class="w-full py-3 rounded-xl text-xs font-bold text-white bg-emerald-500 hover:bg-emerald-600 transition flex items-center justify-center gap-1.5 shadow-sm shadow-emerald-100 tracking-wider uppercase">
            <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946C.06 5.348 5.397.01 12.008.01c3.202.001 6.212 1.246 8.477 3.514 2.266 2.268 3.507 5.28 3.505 8.484-.004 6.657-5.34 11.997-11.953 11.997-2.005-.001-3.973-.502-5.713-1.457L0 24zm6.59-4.846c1.6.95 3.188 1.449 4.825 1.451 5.436 0 9.86-4.37 9.864-9.799.002-2.63-1.023-5.101-2.885-6.963C16.528 1.98 14.076.96 11.481.96 6.046.96 1.62 5.333 1.617 10.764c-.001 1.664.444 3.29 1.288 4.727l-.988 3.612 3.73-.979zm11.236-6.13c-.29-.145-1.713-.847-1.978-.943-.264-.096-.456-.145-.647.145-.19.29-.738.943-.905 1.134-.167.19-.333.212-.623.066-.29-.145-1.223-.45-2.33-1.439-.862-.77-1.443-1.72-1.612-2.011-.168-.291-.018-.448.127-.592.13-.13.29-.338.435-.508.145-.17.193-.29.29-.484.097-.193.048-.362-.024-.508-.072-.145-.647-1.558-.886-2.133-.233-.56-.47-.482-.647-.492-.167-.008-.36-.01-.553-.01s-.507.072-.773.362c-.266.29-1.013.99-1.013 2.415 0 1.424 1.037 2.797 1.182 2.99.145.193 2.04 3.115 4.94 4.373.688.298 1.227.476 1.646.609.693.22 1.324.19 1.823.115.556-.083 1.713-.698 1.953-1.374.24-.675.24-1.253.168-1.374-.072-.121-.267-.193-.556-.338z"/></svg>
            KONSULTASI WHATSAPP
          </a>
          <button @click="closeModal" class="w-full py-3 rounded-xl text-xs font-bold text-slate-500 bg-white border border-gray-200 hover:bg-slate-100 transition tracking-wider uppercase">
            TUTUP
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

const isModalOpen = ref(false);
const activeItem = ref({});

const selectedSeri = ref('');
const selectedKategori = ref('');
const searchQuery = ref('');

const services = ref(PLACEHOLDER_JSON);

const uniqueSeri = computed(() => {
  const items = services.value.map(item => item.seri);
  return [...new Set(items)].sort((a, b) => a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' }));
});

const uniqueKategori = computed(() => {
  const items = services.value.map(item => item.kategori);
  return [...new Set(items)];
});

const filteredServices = computed(() => {
  return services.value.filter(item => {
    const matchSeri = !selectedSeri.value || item.seri === selectedSeri.value;
    const matchKategori = !selectedKategori.value || item.kategori === selectedKategori.value;
    const query = searchQuery.value.toLowerCase().trim();
    const matchSearch = !query || 
                        item.seri.toLowerCase().includes(query) || 
                        item.nama.toLowerCase().includes(query) ||
                        item.kategori.toLowerCase().includes(query);
    return matchSeri && matchKategori && matchSearch;
  });
});

const openModal = (item) => {
  activeItem.value = item;
  isModalOpen.value = true;
};

const closeModal = () => {
  isModalOpen.value = false;
};

const generateWhatsAppUrl = (item) => {
  const nomorWa = '628XXXXXXXXXX'; // Ganti dengan nomor WhatsApp toko Anda
  const text = `Halo Admin, saya ingin konsultasi pengerjaan perbaikan berikut:\n\n` +
               `📱 *Seri Unit:* ${item.seri}\n` +
               `🛠️ *Layanan Jasa:* ${item.nama}\n` +
               `💰 *Estimasi Biaya:* ${item.harga}\n\n` +
               `Apakah bisa dibantu untuk jadwal pengecekan unitnya di toko? Terima kasih.`;
  return `https://api.whatsapp.com/send?phone=${nomorWa}&text=${encodeURIComponent(text)}`;
};
</script>

<style scoped>
.animate-fade-in {
  animation: fadeIn 0.2s ease-out forwards;
}
.animate-slide-up {
  animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
</style>
"""

output_code = template.replace("PLACEHOLDER_JSON", json_data)
with open("PricelistFinal.txt", "w", encoding="utf-8") as f_out:
    f_out.write(output_code)
print("Finished completely.")