import API from '@/lib/axios'
import { defineStore } from 'pinia'
import { CalendarDate } from '@internationalized/date'
import { type DateRange } from 'reka-ui'
import { computed, ref, h, reactive, type Ref } from 'vue'
import type { ColumnDef } from '@tanstack/vue-table'
// import * as XLSX from "xlsx";
import * as XLSX from "xlsx-js-style";
import { saveAs } from "file-saver";
import { MoreHorizontal, Pencil, Trash2 } from 'lucide-vue-next'
import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
} from "@/components/ui/dropdown-menu";
import {
  DialogTrigger,
} from "@/components/ui/dialog";
import { formatDate } from "@/composables/formatDate";


export const userLokerStudio = defineStore('Loker', () => {
  // ---------------------------
  // Interface Data
  // ---------------------------
  interface LOKER_STUDIO {
    id_klien_old: string
    id_klien: string
    nama_perusahaan: string
    nama_pabrik: string
    alamat_pabrik: string
    kota: string
    provinsi: string
    negara: string
    kapasitas_terpasang: string
    merek: string
    sdm: string
    layanan_mulai: string
    layanan_selesai: string
    jenis_layanan: string
    komoditi: string
    lingkup_jenis_produk: string
    jumlah_order: string
    jumlah_output: string
    lokasi_pabrik: string
    skala: string
    biaya: string
    status_pelanggan: string
    nomor_hp: string
    pic: string
    email: string
    processing: boolean
  }

  // ---------------------------
  // Helper: Date Range
  // ---------------------------
  function getCurrentMonthRange(): DateRange {
    const now = new Date()
    const currentYear = now.getFullYear()
    const currentMonth = now.getMonth() + 1
    const startOfMonth = new CalendarDate(currentYear, currentMonth, 1)
    const daysInMonth = new Date(currentYear, currentMonth, 0).getDate()
    const endOfMonth = new CalendarDate(currentYear, currentMonth, daysInMonth)

    return { start: startOfMonth, end: endOfMonth }
  }

  const DATE_RANGE = ref(getCurrentMonthRange()) as Ref<DateRange>
  const DATA_TABLE = ref<LOKER_STUDIO[]>([])
  const loading = ref(false)
  const error = ref<string | null>(null)
  const showAlert = ref(false);
  const isError = ref(false);
  const alertMessage = ref("");
  const dialogVisibleAdd = ref(false);
  const dialogVisibleEdit = ref(false);
  const isEditMode = ref(false);
  const dialogVisibleDelete = ref(false);

  // ---------------------------
  // Table Columns
  // ---------------------------
  const COLUMNS_LOKER_STUDIO: ColumnDef<LOKER_STUDIO>[] = [
    {
      id: 'actions',
      header: 'Actions',
      cell: ({ row }) =>
        h(
          'div',
          { class: 'flex justify-center' },
          [
            h(
              DropdownMenu,
              {},
              {
                default: () => [
                  h(
                    DropdownMenuTrigger,
                    { asChild: true },
                    {
                      default: () =>
                        h(
                          'div',
                          {
                            class: 'flex items-center gap-1 cursor-pointer text-sm font-medium text-black-200 dark:text-gray-100',
                          },
                          [
                            h(MoreHorizontal, { class: 'w-5 h-5' }),
                            h('span', {}, 'Action'),
                          ]
                        ),
                    }
                  ),
                  h(
                    DropdownMenuContent,
                    {},
                    {
                      default: () => [
                        h(
                          DialogTrigger,
                          { asChild: true },
                          {
                            default: () =>
                              h(
                                DropdownMenuItem,
                                {
                                  onClick: () => HANDLE_EDIT(row.original),
                                },
                                {
                                  default: () => [
                                    h(Pencil, { class: 'w-4 h-4 mr-2' }),
                                    'Edit',
                                  ],
                                }
                              ),
                          }
                        ),
                        h(
                          DropdownMenuItem,
                          {
                            onClick: () => {
                              HANDLE_DELETE(row.original.id_klien);
                              dialogVisibleDelete.value = true;
                            },
                          },
                          {
                            default: () => [
                              h(Trash2, { class: 'w-4 h-4 mr-2 text-red-600' }),
                              'Delete',
                            ],
                          }
                        ),

                      ],
                    }
                  ),
                ],
              }
            ),
          ]
        ),
    },
    {
      accessorKey: 'id_klien',
      header: 'ID Klien',
      cell: ({ row }) =>
        h('div', { class: 'text-center' }, row.original.id_klien)
    },
    {
      accessorKey: 'nama_perusahaan',
      header: 'Perusahaan',
      cell: ({ row }) => {
        const data = row.original
        return h('div', { class: 'flex flex-col' }, [
          h('span', { class: 'font-semibold text-black-200 dark:text-gray-100' }, data.nama_perusahaan),
          h('span', { class: 'text-xs text-gray-500 dark:text-gray-400' }, data.nama_pabrik)
        ])
      }
    },
    {
      accessorKey: 'alamat_pabrik',
      header: 'Alamat Pabrik',
      cell: ({ row }) => {
        const data = row.original
        return h('div', {}, `${data.alamat_pabrik}, ${data.kota}, ${data.provinsi}`)
      }
    },
    {
      accessorKey: 'komoditi',
      header: 'Komoditi',
      cell: ({ row }) => {
        const data = row.original
        return h('div', {}, `${data.komoditi} (${data.lingkup_jenis_produk})`)
      }
    },
    {
      accessorKey: 'kapasitas_terpasang',
      header: 'Kapasitas',
      cell: ({ row }) =>
        h('div', {}, `${row.original.kapasitas_terpasang} Unit`)
    },
    {
      accessorKey: 'sdm',
      header: 'SDM',
      cell: ({ row }) =>
        h('div', {}, `${row.original.sdm} Orang`)
    },
    {
      accessorKey: 'layanan_mulai',
      header: 'Mulai Layanan',
      cell: ({ row }) =>
        h('div', {}, row.original.layanan_mulai)
    },
    {
      accessorKey: 'layanan_selesai',
      header: 'Selesai Layanan',
      cell: ({ row }) =>
        h('div', {}, row.original.layanan_selesai)
    },
    {
      accessorKey: 'jenis_layanan',
      header: 'Jenis Layanan',
      cell: ({ row }) =>
        h('div', {}, row.original.jenis_layanan)
    },
    {
      accessorKey: 'jumlah_order',
      header: 'Jumlah Order',
      cell: ({ row }) =>
        h('div', {}, row.original.jumlah_order)
    },
    {
      accessorKey: 'jumlah_output',
      header: 'Output',
      cell: ({ row }) =>
        h('div', {}, row.original.jumlah_output)
    },
    {
      accessorKey: 'skala',
      header: 'Skala',
      cell: ({ row }) =>
        h('div', {}, row.original.skala)
    },
    {
      accessorKey: 'status_pelanggan',
      header: 'Status',
      cell: ({ row }) =>
        h('div', {}, row.original.status_pelanggan)
    },
    {
      accessorKey: 'nomor_hp',
      header: 'Nomor HP',
      cell: ({ row }) =>
        h('div', {}, row.original.nomor_hp)
    },
    {
      accessorKey: 'pic',
      header: 'PIC',
      cell: ({ row }) =>
        h('div', {}, row.original.pic)
    },
    {
      accessorKey: 'email',
      header: 'Email',
      cell: ({ row }) =>
        h('div', {
          class: 'truncate max-w-[400px] whitespace-nowrap overflow-hidden text-ellipsis'
        }, row.original.email)
    }
  ]

  // ---------------------------
  // Fetch LOKER STUDIO DATA
  // ---------------------------
  const GET_LOKER_STUDIO_DATA = async (start_date: string, end_date: string) => {
    try {
      const response = await API.get('/loker', {
        params: {
          start_date,
          end_date
        }
      })
      DATA_TABLE.value = response.data?.data || []
    } catch (error) {
      console.error('Gagal mengambil data:', error)
      DATA_TABLE.value = []
    }
  }
  const filteredData = computed(() => DATA_TABLE.value)
  const FETCH_FORMAT_EXCEL = async () => {
    loading.value = true
    error.value = null
    try {
      const response = await API.get('/loker')
      DATA_TABLE.value = response.data.data ?? []
    } catch (err: any) {
      error.value = err.message || 'Gagal memuat data loker'
      console.error(err)
    } finally {
      loading.value = false
    }
  }

  const CREATE_LOKER = async (payload: LOKER_STUDIO) => {
    loading.value = true
    error.value = null
    try {
      const response = await API.post('/loker/create', payload)
      return response.data
    } catch (err: any) {
      error.value = err?.response?.data?.message || 'Gagal membuat data loker'
      console.error('CREATE_LOKER Error:', err)
      throw err
    } finally {
      loading.value = false
    }
  }

  const CREATE_LOKER_ARRAY = async (payload: LOKER_STUDIO[]) => {
    loading.value = true
    error.value = null
    try {
      const response = await API.post('/loker/create-batch', payload)
      return response.data
    } catch (err: any) {
      error.value = err?.response?.data?.message || 'Gagal membuat data loker'
      console.error('CREATE_LOKER Error:', err)
      throw err
    } finally {
      loading.value = false
    }
  }

  const UPDATE_LOKER = async (payload: LOKER_STUDIO) => {
    loading.value = true
    error.value = null
    try {
      const response = await API.put(`/loker/update`, payload)
      return response.data
    } catch (err: any) {
      error.value = err?.response?.data?.message || 'Gagal memperbarui data loker'
      console.error('UPDATE_LOKER Error:', err)
      throw err
    } finally {
      loading.value = false
    }
  }
  const DELETE_LOKER = async (id_klien: string) => {
    console.log("DELETE_LOKER", id_klien);
    loading.value = true;
    error.value = null;
    try {
      const response = await API.delete('/loker/delete', { id_klien });
      return response.data;
    } catch (err: any) {
      error.value = err?.response?.data?.message || 'Gagal menghapus data loker';
      console.error('DELETE_LOKER Error:', err);
      throw err;
    } finally {
      loading.value = false;
    }
  };
  const EXPOR_TO_EXCEL = () => {
    if (!filteredData.value.length) return alert("Data kosong. Tidak bisa ekspor.");

    const title = [["DATA LOKER STUDIO"]];
    const sheetData = XLSX.utils.sheet_to_json(
      XLSX.utils.json_to_sheet(filteredData.value),
      { header: 1 }
    ) as any[][];
    const data = [...title, ...sheetData];
    const worksheet = XLSX.utils.aoa_to_sheet(data);
    const range = XLSX.utils.decode_range(worksheet["!ref"]!);

    worksheet["!merges"] = [{ s: { r: 0, c: 0 }, e: { r: 0, c: range.e.c } }];

    for (let row = range.s.r; row <= range.e.r; row++) {
      for (let col = range.s.c; col <= range.e.c; col++) {
        const cellAddress = XLSX.utils.encode_cell({ r: row, c: col });
        if (!worksheet[cellAddress]) worksheet[cellAddress] = { t: "s", v: "" };

        worksheet[cellAddress].s = {
          alignment: row === 1 ? { horizontal: "center", vertical: "center" } : {},
          border: {
            top: { style: "thin", color: { rgb: "000000" } },
            bottom: { style: "thin", color: { rgb: "000000" } },
            left: { style: "thin", color: { rgb: "000000" } },
            right: { style: "thin", color: { rgb: "000000" } },
          },
          font: row === 0 ? { bold: true, sz: 20 } : {},
        };
      }
    }

    worksheet["!cols"] = new Array(range.e.c + 1).fill({ wch: 20 });

    const workbook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(workbook, worksheet, "LokerStudio");

    const buffer = XLSX.write(workbook, { bookType: "xlsx", type: "array", cellStyles: true });
    const blob = new Blob([buffer], { type: "application/octet-stream" });
    saveAs(
      blob,
      `loker_studio_${formatDate(new Date(), {
        showDate: true,
        showTime: false,
        withWIB: true,
      })}.xlsx`
    );

  };
  const EXPOR_FORMAT_EXCEL = async () => {
    await FETCH_FORMAT_EXCEL();
    const currentItems = DATA_TABLE.value;

    const headers = currentItems.length > 0
      ? Object.keys(currentItems[0])
      : [
        "id_klien", "nama_perusahaan", "nama_pabrik", "alamat_pabrik", "kota",
        "provinsi", "negara", "kapasitas_terpasang", "merek", "sdm", "layanan_mulai",
        "layanan_selesai", "jenis_layanan", "komoditi", "lingkup_jenis_produk",
        "jumlah_order", "jumlah_output", "lokasi_pabrik", "skala", "biaya",
        "status_pelanggan", "nomor_hp", "pic", "email"
      ];

    const title = [["FORMAT LOKER STUDIO"]];
    const emptyRow = headers.map(() => "");
    const data = [...title, headers, emptyRow];

    const worksheet = XLSX.utils.aoa_to_sheet(data);
    worksheet["!merges"] = [
      { s: { r: 0, c: 0 }, e: { r: 0, c: headers.length - 1 } }
    ];

    worksheet["A1"].s = {
      alignment: { horizontal: "center", vertical: "center" },
      font: { bold: true, sz: 14 }
    };

    const workbook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(workbook, worksheet, "Format");

    const buffer = XLSX.write(workbook, { bookType: "xlsx", type: "array" });
    const blob = new Blob([buffer], { type: "application/octet-stream" });

    saveAs(
      blob,
      `format_loker_studio_${formatDate(new Date(), {
        showDate: true,
        showTime: false,
        withWIB: true,
      })}.xlsx`
    );
  };

  const HANDLE_FILE_UPLOAD = async (event: Event) => {
    const file = (event.target as HTMLInputElement).files?.[0];
    if (!file) return;

    form.processing = true;
    const data = await file.arrayBuffer();
    const workbook = XLSX.read(data);
    const worksheet = workbook.Sheets[workbook.SheetNames[0]];
    const json = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
    const rows = json.slice(2) as any[][];

    const fieldMapping = [
      "id_klien",
      "nama_perusahaan",
      "nama_pabrik",
      "alamat_pabrik",
      "kota",
      "provinsi",
      "negara",
      "kapasitas_terpasang",
      "merek",
      "sdm",
      "layanan_mulai",
      "layanan_selesai",
      "jenis_layanan",  
      "komoditi",
      "lingkup_jenis_produk",
      "jumlah_order",
      "jumlah_output",
      "lokasi_pabrik",
      "skala",
      "biaya",
      "status_pelanggan",
      "nomor_hp",
      "pic",
      "email",
    ];

    const validData: any[] = [];
    const errorClients: string[] = [];

    for (const row of rows) {
      const formattedRow: any = {};
      fieldMapping.forEach((field, i) => {
        let value = row[i] ?? "";

        if (field === "layanan_mulai" || field === "layanan_selesai") {
          try {
            value = parseDate(value);
          } catch {
            value = null;
          }
        }
        formattedRow[field] = value;
      });

      if (!formattedRow.email || !formattedRow.layanan_mulai || !formattedRow.layanan_selesai) {
        errorClients.push(formattedRow.id_klien || "Unknown");
        continue;
      }

      validData.push(formattedRow);
    }

    try {
      if (validData.length > 0) {
        await CREATE_LOKER_ARRAY(validData);
        alertMessage.value = `Berhasil menyimpan ${validData.length} data.`;
        isError.value = false;
        DATA_TABLE.value = [...validData, ...DATA_TABLE.value];
      } else {
        alertMessage.value = "Tidak ada data valid untuk disimpan.";
        isError.value = true;
      }
    } catch (error: any) {
      const errorRows = error?.response?.data?.error_rows || [];
      const errorClients = errorRows.map((row: any) => row.id_klien || 'tidak diketahui');

      alertMessage.value = error?.response?.data?.message || "Gagal menyimpan beberapa/mungkin semua data.";

      if (errorClients.length > 0) {
        alertMessage.value += ` Baris dengan id_klien bermasalah: ${errorClients.join(", ")}.`;
      }
      isError.value = true;
    }
    finally {
      showAlert.value = true;
      setTimeout(() => {
        showAlert.value = false;
      }, 10000);
      form.processing = false;
    }

  };


  const parseDate = (value: any): string | null => {
    if (!value) return null;

    if (typeof value === "number") {
      const date = new Date((value - 25569) * 86400 * 1000);
      return date.toISOString().split("T")[0];
    }

    if (value instanceof Date) {
      return value.toISOString().split("T")[0];
    }

    const parts = String(value).split("/");
    if (parts.length === 3) {
      const [day, month, year] = parts;
      return `${year}-${month.padStart(2, "0")}-${day.padStart(2, "0")}`;
    }

    const date = new Date(value);
    return isNaN(date.getTime()) ? null : date.toISOString().split("T")[0];
  };


  const CHANGE_DATE_RANGE = () => {
    if (DATE_RANGE.value?.start && DATE_RANGE.value?.end) {
      GET_LOKER_STUDIO_DATA(DATE_RANGE.value.start.toString(), DATE_RANGE.value.end.toString())
    }
  }

  const DEFAULT_DATE_RANGE = () => {
    DATE_RANGE.value = getCurrentMonthRange()
    CHANGE_DATE_RANGE()
  }

  const REFRESH_DATA = () => {
    CHANGE_DATE_RANGE()
  }


  //ACTION


  const defaultForm = {
    id_klien_old: "",
    id_klien: "",
    nama_perusahaan: "",
    nama_pabrik: "",
    alamat_pabrik: "",
    kota: "",
    provinsi: "",
    negara: "",
    kapasitas_terpasang: "",
    merek: "",
    sdm: "",
    layanan_mulai: "",
    jenis_layanan: "",
    komoditi: "",
    lingkup_jenis_produk: "",
    jumlah_order: "",
    jumlah_output: "",
    lokasi_pabrik: "",
    skala: "",
    biaya: "",
    status_pelanggan: "",
    nomor_hp: "",
    pic: "",
    layanan_selesai: "",
    email: "",
    processing: false,
  };

  const form = reactive<LOKER_STUDIO>(defaultForm);
  const resetForm = () => {
    Object.assign(form, defaultForm);
    isEditMode.value = false;
    dialogVisibleAdd.value = false;
    dialogVisibleEdit.value = false;
  };


  const HANDLE_EDIT = (data: LOKER_STUDIO) => {
    Object.assign(form, data);
    form.id_klien_old = data.id_klien
    isEditMode.value = true;
    dialogVisibleEdit.value = true;
  };

  const HANDLE_DELETE = async (id_klien: string) => {
    form.id_klien = id_klien
    isEditMode.value = false;
    dialogVisibleDelete.value = true;
  };

  const SUBMIT_UPDATE_LOKER = async () => {
    try {
      await UPDATE_LOKER(form);
      isError.value = false;
      alertMessage.value = "Data berhasil di update.";
      resetForm();
      REFRESH_DATA();
      dialogVisibleEdit.value = false;
    } catch (err: any) {
      dialogVisibleEdit.value = false;
      isError.value = true;
      alertMessage.value = err?.response?.data?.message || "Gagal menambahkan data.";
    } finally {
      showAlert.value = true;
      setTimeout(() => {
        showAlert.value = false;
      }, 3000);

    }
  };

  const SUBMIT_ADD_LOKER = async () => {
    try {
      await CREATE_LOKER(form);
      isError.value = false;
      alertMessage.value = "Data berhasil ditambahkan.";
      resetForm();
      REFRESH_DATA();
      dialogVisibleAdd.value = false;

    } catch (err: any) {
      dialogVisibleAdd.value = false;
      isError.value = true;
      alertMessage.value = err?.response?.data?.message || "Gagal menambahkan data.";
    } finally {
      showAlert.value = true;
      setTimeout(() => {
        showAlert.value = false;
      }, 3000);

    }
  };

  const SUBMIT_DELETE_LOKER = async () => {
    try {
      await DELETE_LOKER(form.id_klien);
      console.log("DELETE_LOKER SUBMIT", form.id_klien)
      isError.value = false;
      alertMessage.value = "Data berhasil di Hapus.";
      resetForm();
      REFRESH_DATA();
      dialogVisibleDelete.value = false;
    } catch (err: any) {
      dialogVisibleDelete.value = false;
      isError.value = true;
      alertMessage.value = err?.response?.data?.message || "Gagal menambahkan data.";
    } finally {
      showAlert.value = true;
      setTimeout(() => {
        showAlert.value = false;
      }, 3000);

    }
  };
  return {
    DATE_RANGE,
    DATA_TABLE,
    COLUMNS_LOKER_STUDIO,
    filteredData,
    showAlert, isError, alertMessage, isEditMode, form, dialogVisibleEdit, dialogVisibleAdd, dialogVisibleDelete, resetForm,
    CHANGE_DATE_RANGE,
    DEFAULT_DATE_RANGE,
    REFRESH_DATA,
    GET_LOKER_STUDIO_DATA,
    EXPOR_TO_EXCEL,
    EXPOR_FORMAT_EXCEL,
    HANDLE_FILE_UPLOAD,
    CREATE_LOKER,
    UPDATE_LOKER,
    DELETE_LOKER,
    SUBMIT_ADD_LOKER,
    SUBMIT_UPDATE_LOKER,
    SUBMIT_DELETE_LOKER,
    HANDLE_EDIT,
    HANDLE_DELETE
  }
})