<script lang="ts">
  import { useConvexClient } from "convex-svelte";
  
  interface Props {
    label: string;
    helpUrl?: string;
    value?: string; // storageId
    disabled?: boolean;
    onUpload: (file: File) => Promise<void>;
    onRemove: () => Promise<void>;
  }
  
  let {
    label,
    helpUrl,
    value = $bindable(),
    disabled = false,
    onUpload,
    onRemove,
  }: Props = $props();
  
  const client = useConvexClient();
  
  let fileInput: HTMLInputElement;
  let uploading = $state(false);
  let error = $state<string | null>(null);
  let fileName = $state<string>("");
  let fileType = $state<string>("");
  let previewUrl = $state<string | null>(null);
  let fileUrl = $state<string | null>(null);
  
  const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB
  const ALLOWED_TYPES = [
    "application/pdf",
    "image/jpeg",
    "image/jpg",
    "image/png",
  ];
  
  // Buscar URL do arquivo quando houver um storageId
  $effect(() => {
    if (value && !fileName) {
      // Tem storageId mas não é um upload recente
      loadExistingFile(value);
    }
  });
  
  async function loadExistingFile(storageId: string) {
    try {
      const url = await client.storage.getUrl(storageId as any);
      if (url) {
        fileUrl = url;
        fileName = "Documento anexado";
        // Detectar tipo pelo URL ou assumir PDF
        if (url.includes(".pdf") || url.includes("application/pdf")) {
          fileType = "application/pdf";
        } else {
          fileType = "image/jpeg";
          previewUrl = url; // Para imagens, a URL serve como preview
        }
      }
    } catch (err) {
      console.error("Erro ao carregar arquivo existente:", err);
    }
  }
  
  async function handleFileSelect(event: Event) {
    const target = event.target as HTMLInputElement;
    const file = target.files?.[0];
    
    if (!file) return;
    
    error = null;
    
    // Validate file size
    if (file.size > MAX_FILE_SIZE) {
      error = "Arquivo muito grande. Tamanho máximo: 10MB";
      target.value = "";
      return;
    }
    
    // Validate file type
    if (!ALLOWED_TYPES.includes(file.type)) {
      error = "Tipo de arquivo não permitido. Use PDF ou imagens (JPG, PNG)";
      target.value = "";
      return;
    }
    
    try {
      uploading = true;
      fileName = file.name;
      fileType = file.type;
      
      // Create preview for images
      if (file.type.startsWith("image/")) {
        const reader = new FileReader();
        reader.onload = (e) => {
          previewUrl = e.target?.result as string;
        };
        reader.readAsDataURL(file);
      }
      
      await onUpload(file);
      
    } catch (err: any) {
      error = err?.message || "Erro ao fazer upload do arquivo";
      previewUrl = null;
    } finally {
      uploading = false;
      target.value = "";
    }
  }
  
  async function handleRemove() {
    if (!confirm("Tem certeza que deseja remover este arquivo?")) {
      return;
    }
    
    try {
      uploading = true;
      await onRemove();
      fileName = "";
      fileType = "";
      previewUrl = null;
      fileUrl = null;
    } catch (err: any) {
      error = err?.message || "Erro ao remover arquivo";
    } finally {
      uploading = false;
    }
  }
  
  function handleView() {
    if (fileUrl) {
      window.open(fileUrl, '_blank');
    }
  }
  
  function openFileDialog() {
    fileInput?.click();
  }
</script>

<div class="form-control w-full">
  <label class="label" for="file-upload-input">
    <span class="label-text font-medium flex items-center gap-2">
      {label}
      {#if helpUrl}
        <div class="tooltip tooltip-right" data-tip="Clique para acessar o link">
          <a 
            href={helpUrl} 
            target="_blank" 
            rel="noopener noreferrer"
            class="text-primary hover:text-primary-focus transition-colors"
            aria-label="Acessar link"
          >
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
            </svg>
          </a>
        </div>
      {/if}
    </span>
  </label>
  
  <input
    id="file-upload-input"
    type="file"
    bind:this={fileInput}
    onchange={handleFileSelect}
    accept=".pdf,.jpg,.jpeg,.png"
    class="hidden"
    {disabled}
  />
  
  {#if value || fileName}
    <div class="flex items-center gap-2 p-3 border border-base-300 rounded-lg bg-base-100">
      <!-- Preview -->
      <div class="flex-shrink-0">
        {#if previewUrl}
          <img src={previewUrl} alt="Preview" class="w-12 h-12 object-cover rounded" />
        {:else if fileType === "application/pdf" || fileName.endsWith(".pdf")}
          <div class="w-12 h-12 bg-error/10 rounded flex items-center justify-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-error" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
            </svg>
          </div>
        {:else}
          <div class="w-12 h-12 bg-success/10 rounded flex items-center justify-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-success" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
            </svg>
          </div>
        {/if}
      </div>
      
      <!-- File info -->
      <div class="flex-1 min-w-0">
        <p class="text-sm font-medium truncate">{fileName || "Arquivo anexado"}</p>
        <p class="text-xs text-base-content/60">
          {#if uploading}
            Carregando...
          {:else}
            Enviado com sucesso
          {/if}
        </p>
      </div>
      
      <!-- Actions -->
      <div class="flex gap-2">
        {#if fileUrl}
          <button
            type="button"
            onclick={handleView}
            class="btn btn-sm btn-ghost text-info"
            disabled={uploading || disabled}
            title="Visualizar arquivo"
          >
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
            </svg>
          </button>
        {/if}
        <button
          type="button"
          onclick={openFileDialog}
          class="btn btn-sm btn-ghost"
          disabled={uploading || disabled}
          title="Substituir arquivo"
        >
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
          </svg>
        </button>
        <button
          type="button"
          onclick={handleRemove}
          class="btn btn-sm btn-ghost text-error"
          disabled={uploading || disabled}
          title="Remover arquivo"
        >
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
          </svg>
        </button>
      </div>
    </div>
  {:else}
    <button
      type="button"
      onclick={openFileDialog}
      class="btn btn-outline btn-block justify-start gap-2"
      disabled={uploading || disabled}
    >
      {#if uploading}
        <span class="loading loading-spinner loading-sm"></span>
        Carregando...
      {:else}
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
        </svg>
        Selecionar arquivo (PDF ou imagem, máx. 10MB)
      {/if}
    </button>
  {/if}
  
  {#if error}
    <div class="label">
      <span class="label-text-alt text-error">{error}</span>
    </div>
  {/if}
</div>

