<script lang="ts">
  import { X, MailOpen, Image, FileText, File, ShieldCheck, Shield, Signature, FileUser, Loader2 } from "@lucide/svelte";
  import { ShowOpenFileDialog, ReadEML, OpenPDF, OpenImageWindow, OpenPDFWindow, OpenImage, ReadMSG, ReadPEC, OpenEMLWindow } from "$lib/wailsjs/go/main/App";
  import type { internal } from "$lib/wailsjs/go/models";
  import { sidebarOpen } from "$lib/stores/app";
  import { onDestroy, onMount } from "svelte";
  import { toast } from "svelte-sonner";
  import { EventsOn, WindowShow, WindowUnminimise } from "$lib/wailsjs/runtime/runtime";
  import type { SupportedFileTypePreview } from "$lib/types";
  import { mailState } from "$lib/stores/mail-state.svelte";
  import { settingsStore } from "$lib/stores/settings.svelte";
  import * as m from "$lib/paraglide/messages";

  let unregisterEvents = () => {};
  let isLoading = $state(false);
  let loadingText = $state("");

  function onClear() {
    mailState.clear();
  }

  $effect(() => {
    console.log("Current email changed:", mailState.currentEmail);
    if(mailState.currentEmail !== null) {
        sidebarOpen.set(false);
    }
    console.log(mailState.currentEmail?.attachments)
  })

  onDestroy(() => {
    if (unregisterEvents) unregisterEvents();
  });

  onMount(async () => {
    // Listen for second instance args
    unregisterEvents = EventsOn("launchArgs", async (args: string[]) => {
      console.log("got event launchArgs:", args);
      if (args && args.length > 0) {
        for (const arg of args) {
          const lowerArg = arg.toLowerCase();
          if (lowerArg.endsWith(".eml") || lowerArg.endsWith(".msg")) {
            console.log("Loading file from second instance:", arg);
            isLoading = true;
            loadingText = m.layout_loading_text();
            
            try {
              let emlContent;
              
              if (lowerArg.endsWith(".msg")) {
                  const useExt = settingsStore.settings.useMsgConverter ?? true;
                  if (useExt) {
                     loadingText = m.mail_loading_msg_conversion();
                  }
                  emlContent = await ReadMSG(arg, useExt);
                  if(emlContent.isPec) {
                     toast.warning(m.mail_pec_feature_warning());
                  }
              } else {
                  // EML handling
                  try {
                    emlContent = await ReadPEC(arg);
                    if(emlContent.isPec) {
                      toast.warning(m.mail_pec_feature_warning());
                    }
                  } catch (e) {
                    console.warn("ReadPEC failed, trying ReadEML:", e);
                    emlContent = await ReadEML(arg);
                  }

                  if (emlContent && emlContent.body) {
                    const trimmed = emlContent.body.trim();
                    const clean = trimmed.replace(/[\s\r\n]+/g, '');
                    if (clean.length > 0 && clean.length % 4 === 0 && /^[A-Za-z0-9+/]+=*$/.test(clean)) {
                      try {
                        emlContent.body = window.atob(clean);
                      } catch (e) { }
                    }
                  }
              }

              mailState.setParams(emlContent);
              sidebarOpen.set(false);
              WindowUnminimise();
              WindowShow();
            } catch (error) {
              console.error("Failed to load email:", error);
              toast.error("Failed to load email file");
            } finally {
              isLoading = false;
              loadingText = "";
            }
            break;
          }
        }
      }
    });
  });

  async function openPDFHandler(base64Data: string, filename: string) {
    try {
      if (settingsStore.settings.useBuiltinPDFViewer) {
         await OpenPDFWindow(base64Data, filename);
      } else {
         await OpenPDF(base64Data, filename);
      }
    } catch (error) {
      console.error("Failed to open PDF:", error);
        toast.error(m.mail_error_pdf());
    }
  }

  async function openImageHandler(base64Data: string, filename: string) {
    try {
      if (settingsStore.settings.useBuiltinPreview) {
         await OpenImageWindow(base64Data, filename);
      } else {
         await OpenImage(base64Data, filename);
      }
    } catch (error) {
      console.error("Failed to open image:", error);
        toast.error(m.mail_error_image());
    }
  }

  async function openEMLHandler(base64Data: string, filename: string) {
    try {
      await OpenEMLWindow(base64Data, filename);
    } catch (error) {
       console.error("Failed to open EML:", error);
       toast.error("Failed to open EML attachment");
    }
  }

  async function onOpenMail() {
    isLoading = true;
    loadingText = m.layout_loading_text();
    const result = await ShowOpenFileDialog();
    if (result && result.length > 0) {
      // Handle opening the mail file
      try {
        // If the file is .eml, otherwise if is .msg, read accordingly
        let email: internal.EmailData;
        if(result.toLowerCase().endsWith(".msg")) {
          const useExt = settingsStore.settings.useMsgConverter ?? true;
          if (useExt) {
             loadingText = m.mail_loading_msg_conversion();
          }
          email = await ReadMSG(result, useExt);
        } else {
          email = await ReadEML(result);
        }
        if(email.isPec) {
          toast.warning(m.mail_pec_feature_warning(), {duration: 10000});
        }
        mailState.setParams(email);
        sidebarOpen.set(false);

      } catch (error) {
        console.error("Failed to read EML file:", error);
        toast.error(m.mail_error_opening());
      } finally {
        isLoading = false;
        loadingText = "";
      }
    } else {
        isLoading = false;
        loadingText = "";
    }
  }

  function arrayBufferToBase64(buffer: any): string {
    if (typeof buffer === "string") return buffer; // Already base64 string
    if (Array.isArray(buffer)) {
      let binary = "";
      const bytes = new Uint8Array(buffer);
      const len = bytes.byteLength;
      for (let i = 0; i < len; i++) {
        binary += String.fromCharCode(bytes[i]);
      }
      return window.btoa(binary);
    }
    return "";
  }

  function getFileExtension(filename: string): string {
    return filename.slice((filename.lastIndexOf(".") - 1 >>> 0) + 2).toLowerCase();
  }

  function shouldPreview(filename: string): boolean {
    if (!settingsStore.settings.useBuiltinPreview) return false;
    const ext = getFileExtension(filename);
    const supported = settingsStore.settings.previewFileSupportedTypes || [];
    return supported.includes(ext as SupportedFileTypePreview);
  }
</script>

<div class="panel fill" aria-label="Events">
  {#if isLoading}
    <div class="loading-overlay">
      <Loader2 class="spinner" size="48" />
      <div class="loading-text">{loadingText}</div>
    </div>
  {/if}
  <div class="events" role="log" aria-live="polite">
    {#if mailState.currentEmail === null}
      <div class="empty-state">
        <div class="empty-icon">
          <MailOpen size="48" strokeWidth={1} />
        </div>
        <div class="empty-text">{m.mail_no_email_selected()}</div>
        <button class="browse-btn" onclick={onOpenMail} disabled={isLoading}>
          {m.mail_open_eml_btn()}
        </button>
      </div>
    {:else}
      <div class="email-view">
        <div class="email-header-content">
          <div class="subject-row">
            <div class="email-subject">
              {mailState.currentEmail.subject || m.mail_subject_no_subject()}
            </div>
            <div class="controls">
              <button
                class="btn"
                onclick={onOpenMail}
                aria-label={m.mail_open_btn_label()}
                title={m.mail_open_btn_title()}
                disabled={isLoading}
              >
                <MailOpen size="15" ></MailOpen>
                {m.mail_open_btn_text()}
              </button>
              <button
                class="btn"
                onclick={onClear}
                aria-label={m.mail_close_btn_label()}
                title={m.mail_close_btn_title()}
                disabled={isLoading}
              >
                <X size="15" />
                {m.mail_close_btn_text()}
              </button>
            </div>
          </div>

          <div class="email-meta-grid">
            <span class="label">{m.mail_from()}</span>
            <span class="value">{mailState.currentEmail.from}</span>

            {#if mailState.currentEmail.to && mailState.currentEmail.to.length > 0}
              <span class="label">{m.mail_to()}</span>
              <span class="value">{mailState.currentEmail.to.join(", ")}</span>
            {/if}

            {#if mailState.currentEmail.cc && mailState.currentEmail.cc.length > 0}
              <span class="label">{m.mail_cc()}</span>
              <span class="value">{mailState.currentEmail.cc.join(", ")}</span>
            {/if}

            {#if mailState.currentEmail.bcc && mailState.currentEmail.bcc.length > 0}
              <span class="label">{m.mail_bcc()}</span>
              <span class="value">{mailState.currentEmail.bcc.join(", ")}</span>
            {/if}

            {#if mailState.currentEmail.isPec}
              <span class="label">{m.mail_sign_label()}</span>
              <span class="value"><span class="pec-badge" title="Posta Elettronica Certificata">
                   <ShieldCheck size="14" />
                   PEC
                </span></span>
            {/if}
          </div>
        </div>

        <div class="email-attachments">
          <span class="att-section-label">{m.mail_attachments()}</span>
          <div class="att-list">
            {#if mailState.currentEmail.attachments && mailState.currentEmail.attachments.length > 0}
              {#each mailState.currentEmail.attachments as att}
                {#if att.contentType.startsWith("image/")}
                  <button
                    class="att-btn image"
                    onclick={() => openImageHandler(arrayBufferToBase64(att.data), att.filename)}
                  >
                    <Image size="14" />
                    <span class="att-name">{att.filename}</span>
                  </button>
                {:else if att.contentType === "application/pdf" || att.filename.toLowerCase().endsWith(".pdf")}
                  <button
                    class="att-btn pdf"
                    onclick={() => openPDFHandler(arrayBufferToBase64(att.data), att.filename)}
                  >
                    <FileText size="15" />
                    <span class="att-name">{att.filename}</span>
                  </button>
                {:else if att.filename.toLowerCase().endsWith(".eml")}
                   <button
                    class="att-btn eml"
                    onclick={() => openEMLHandler(arrayBufferToBase64(att.data), att.filename)}
                  >
                    <MailOpen size="14" />
                    <span class="att-name">{att.filename}</span>
                  </button>
                {:else if mailState.currentEmail.isPec && att.filename.toLowerCase().endsWith(".p7s")}
                  <a
                    class="att-btn file"
                    href={`data:${att.contentType};base64,${arrayBufferToBase64(att.data)}`}
                    download={att.filename}
                  >
                    <Signature size="14" />
                    <span class="att-name">{att.filename}</span>
                  </a>
                {:else if mailState.currentEmail.isPec && att.filename.toLowerCase() === "daticert.xml"}
                  <a
                    class="att-btn file"
                    href={`data:${att.contentType};base64,${arrayBufferToBase64(att.data)}`}
                    download={att.filename}
                  >
                    <FileUser size="14" />
                    <span class="att-name">{att.filename}</span>
                  </a>
                {:else}
                  <a
                    class="att-btn file"
                    href={`data:${att.contentType};base64,${arrayBufferToBase64(att.data)}`}
                    download={att.filename}
                  >
                   {#if att.contentType.startsWith("image/")}
                    <Image size="14" />
                   {:else}
                    <File size="14" />
                   {/if}
                    <span class="att-name">{att.filename}</span>
                  </a>
                {/if}
              {/each}
            {:else}
              <span class="att-empty">{m.mail_no_attachments()}</span>
            {/if}
            </div>
          </div>

        <div class="email-body-wrapper">
          <iframe
            srcdoc={mailState.currentEmail.body +
              "<style>body{margin:0;padding:20px;font-family:sans-serif;} a{pointer-events:none!important;cursor:default!important;}</style>"}
            title="Email Body"
            class="email-iframe"
            sandbox="allow-same-origin"
          ></iframe>
        </div>
      </div>
    {/if}
    </div>  
</div>

<style>
  .loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 50;
    backdrop-filter: blur(4px);
    gap: 16px;
  }

  /* Make sure internal loader spins if not using class-based animation library like Tailwind */
  :global(.spinner) {
      animation: spin 1s linear infinite;
  }

  @keyframes spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
  }

  .loading-text {
    color: white;
    font-size: 16px;
    font-weight: 500;
  }

  .panel {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    overflow: hidden;
  }

  .panel.fill {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    color: inherit;
    cursor: pointer;
    user-select: none;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.5);
  }

  .btn:hover {
    background: rgba(255, 255, 255, 0.09);
  }

  .events {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 0;
  }

  .email-view {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 0;
  }

  .email-header-content {
    background: rgba(255, 255, 255, 0.05);
    padding: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .email-subject {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.25;
    color: inherit;
    min-width: 0;
    overflow-wrap: break-word;
  }

  .subject-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 12px;
  }

  .subject-row .controls {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
  }
  
  .subject-row .btn {
      height: 28px; 
      padding: 0 8px;
  }

  .email-meta-grid {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 4px;
    font-size: 13px;
  }

  .email-meta-grid .label {
    text-align: right;
    color: rgba(255, 255, 255, 0.5);
    margin-right: 8px;
    font-weight: 500;
  }

  .email-meta-grid .value {
    color: rgba(255, 255, 255, 0.9);
    word-break: break-all;
    font-weight: 500;
  }

  .email-attachments {
    padding: 10px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    display: flex;
    align-items: center;
    gap: 12px;
    overflow-x: auto;
  }

  .att-section-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.5);
    flex-shrink: 0;
  }

  .att-list {
    display: flex;
    gap: 8px;
  }

  .att-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: transparent;
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
    cursor: pointer;
    text-decoration: none;
    max-width: 200px;
  }

  .att-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
  }
  
  .att-btn.image { color: #60a5fa; border-color: rgba(96, 165, 250, 0.3); } 
  .att-btn.image:hover { color: #93c5fd; }

  .att-btn.pdf { color: #f87171; border-color: rgba(248, 113, 113, 0.3); }
  .att-btn.pdf:hover { color: #fca5a5; }

  .att-btn.eml { color: hsl(49, 80%, 49%); border-color: rgba(224, 206, 39, 0.3); }
  .att-btn.eml:hover { color: hsl(49, 80%, 65%); }

  .att-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .email-body-wrapper {
    flex: 1;
    background: white;
    position: relative;
    min-height: 200px;
  }

  .email-iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
  }

  .empty-state {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    opacity: 0.6;
    padding: 20px;
  }

  .empty-icon {
    opacity: 0.5;
  }

  .empty-text {
    font-size: 14px;
    font-weight: 500;
  }

  .browse-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 16px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: white;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
  }

  .browse-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.25);
  }

  .browse-btn:disabled, .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }

  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  ::-webkit-scrollbar-track {
    background: transparent;
  }

  ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
  }

  ::-webkit-scrollbar-corner {
    background: transparent;
  }

  .att-empty {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    font-style: italic;
  }

  .badged-row {
    display: flex;
    gap: 8px;
    align-items: center;
  }

  .signed-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    vertical-align: middle;
    user-select: none;
    width: fit-content;
  }

  .pec-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.3);
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    vertical-align: middle;
    user-select: none;
    width: fit-content;
  }
</style>
